{
    "format": "skillpro/v1",
    "skill_id": "wikimedia-protowiki-agents-skills-codex-components-skill-md",
    "name": "codex-components",
    "version": "1.0.0",
    "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?\").",
    "category": [
        "生活与工具"
    ],
    "trigger_words": [],
    "tags": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=wikimedia-protowiki-agents-skills-codex-components-skill-md",
    "exported_at": "2026-09-18T02:20:24+08:00",
    "system_prompt": "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 .",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用codex-components帮我处理问题",
            "output": "好的，我是codex-components。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?\"). 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是codex-components，专注于生活与工具领域。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?\")."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# codex-components - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// codex-components - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: codex-components\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}