{
    "app": {
        "name": "codex-components",
        "description": "Catalogue of every Codex Vue component shipped via @wikimedia/codex — what each component is for, the most common props/slots/events, and which ones to reach for in typical Wikipedia UI patterns. Use when you need a button, input, dialog, menu, message, card, tabs, lookup, etc., or when you're picking between similar components (\"Lookup vs TypeaheadSearch?\").",
        "mode": "advanced-chat",
        "model_config": {
            "provider": "deepseek",
            "model": "deepseek-chat",
            "parameters": {
                "temperature": 0.7,
                "max_tokens": 4096
            }
        }
    },
    "instructions": "name codex-components description Catalogue of every Codex Vue component shipped via @wikimedia/codex — what each component is for, the most common props/slots/events, and which ones to reach for in typical Wikipedia UI patterns. Use when you need a button, input, dialog, menu, message, card, tabs, lookup, etc., or when you're picking between similar components (\"Lookup vs TypeaheadSearch?\"). Codex components Codex ships 50+ Vue components. They're the building blocks for every Wikimedia UI. Use a Codex component before writing any custom one. import { CdxButton , CdxField , CdxTextInput , CdxIcon , CdxMessage } from '@wikimedia/codex' The package is fully tree-shakable — only the components you import end up in your route bundle. Structure of this skill This SKILL.md is the index. The full per-component prop / slot / event reference is split across the pages below to keep this page short: references/buttons-and-actions.md — CdxButton , CdxButtonGroup , CdxToggleButton , CdxToggleButtonGroup , CdxToggleSwitch , CdxIcon , CdxInfoChip , CdxThumbnail . references/inputs-and-forms.md — CdxField , CdxLabel , CdxTextInput , CdxTextArea , CdxCheckbox , CdxRadio , CdxSelect , CdxCombobox , CdxLookup , CdxSearchInput , CdxTypeaheadSearch , CdxAccordion . references/feedback-and-status.md — CdxMessage , CdxProgressBar , CdxProgressIndicator , CdxToast , CdxToastContainer . references/dialogs-and-overlays.md — CdxDialog , CdxTooltip , CdxMenu , CdxMenuItem , CdxMenuButton , CdxPopover . references/structure-and-layout.md — CdxCard , CdxTable , CdxTabs , CdxTab , CdxBreadcrumbs . When in doubt, the canonical docs are at https://doc.wikimedia.org/codex/ . Pick-the-right-component cheat sheet You want Use A button CdxButton A label + helper text + form control CdxField wrapping the control A single-line text input CdxTextInput (or wrap in CdxField ) A multiline text area CdxTextArea A <select> with custom styling CdxSelect Free-form input + suggestions list CdxCombobox Free-form input + suggestions, value can be free text CdxLookup A page-wide search bar with typeahead CdxTypeaheadSearch A toggle (\"dark mode on/off\") CdxToggleSwitch A pill / segmented selector CdxToggleButtonGroup An informational banner CdxMessage ( type=\"notice\" ) Inline validation message CdxMessage ( type=\"warning\" / error ) A loading bar CdxProgressBar ( inline for thin) A spinning indicator inside a button CdxProgressIndicator A modal CdxDialog A small contextual menu CdxMenu (or CdxMenuButton for a trigger + menu) A keyboard-focusable popover CdxPopover A row of tabs CdxTabs + CdxTab A card with title + content CdxCard A table CdxTable A breadcrumb trail CdxBreadcrumbs An icon CdxIcon with a cdxIcon… from @wikimedia/codex-icons Small status pill CdxInfoChip A user avatar / image thumbnail CdxThumbnail Composition patterns Form field <CdxField> <template #label>Article title</template> <template #description>What you'd like to suggest.</template> <CdxTextInput v-model=\"title\" /> </CdxField> Action with progress <CdxButton :disabled=\"loading\" action=\"progressive\" weight=\"primary\" @click=\"submit\"> <CdxProgressIndicator v-if=\"loading\" inline /> Publish </CdxButton> Notice + dismiss <CdxMessage type=\"warning\" :allow-user-dismiss=\"true\" @user-dismissed=\"hide\"> This is a draft. Changes haven't been saved. </CdxMessage> Modal <CdxDialog v-model:open=\"showModal\" title=\"Discard changes?\" :primary-action=\"{ label: 'Discard', actionType: 'destructive' }\" :default-action=\"{ label: 'Keep editing' }\" @primary=\"discard\" @default=\"showModal = false\" > All unsaved changes will be lost. </CdxDialog> Common pitfalls Forgetting CdxField . A bare CdxTextInput has no label — wrap it. Confusing CdxLookup and CdxTypeaheadSearch . Lookup is for form values (you must pick from suggestions); TypeaheadSearch is for search navigation (you can submit free text, like the wiki search bar). Re-importing Codex CSS. It's already global. Don't. Wrapping an icon in a button manually. Use <CdxButton> with a child <CdxIcon> — focus styles, hover, sizing all come for free. See also codex-icons for the icon catalogue. codex-tokens for the design tokens that drive every component's appearance. codex-style-guide for the why — the design rules for links vs buttons, forms, overflow, and the rest. Inside ProtoWiki ProtoWiki composes these primitives into wrappers ( ChromeWrapper , SpecialPageWrapper , PlainWrapper ) and reader surfaces ( ArticleWrapper , ArticleRenderer , ArticleLive , ArticleSnapshot , ArticleCustom , …; Search wraps CdxTypeaheadSearch ). See protowiki-components .",
    "variables": [],
    "opening_statement": "你好，我是 codex-components，Catalogue of every Codex Vue component shipped via...",
    "suggested_questions": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=wikimedia-protowiki-agents-skills-codex-components-skill-md"
}