{
    "format": "skillpro/v1",
    "skill_id": "jiaiyan-naive-ui-skills-skill-md",
    "name": "naive-ui-skills",
    "version": "1.0.0",
    "description": "Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications.",
    "category": [
        "内容创作"
    ],
    "trigger_words": [],
    "tags": [
        "design",
        "ai",
        "agent"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=jiaiyan-naive-ui-skills-skill-md",
    "exported_at": "2026-09-17T03:14:54+08:00",
    "system_prompt": "name naive-ui-skills description Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications. metadata {\"author\":\"jiaiyan\",\"version\":\"1.0.0\"} Naive UI Skills Library A comprehensive skill library for Naive UI framework, designed for AI agents to understand and utilize Naive UI components effectively. When to Invoke Invoke this skill when: User needs to implement any Naive UI component User asks about Naive UI configuration or setup User wants to customize themes or use dark mode User needs internationalization (i18n) support User asks about design specifications (colors, borders, typography) User encounters issues with Naive UI components Skill Library Overview This library contains 107 skills organized into the following categories: Category Count Description Path Pattern Component Skills 95 Individual component documentation ./components/n-{name}/SKILL.md Design Specifications 5 Border, Color, Layout, Typography, Overview ./naive-ui-design-{name}/SKILL.md Foundation Skills 6 Quickstart, Theming, i18n, Dark Mode, SSR, Components ./naive-ui-{name}/SKILL.md How to Locate Skills 1. Component Skills (95 skills) All component skills follow the naming convention n-{component-name} and are located in the components/ directory. Path Pattern: ./components/n-{component-name}/SKILL.md Examples: Button: ./components/n-button/SKILL.md Form: ./components/n-form/SKILL.md DataTable: ./components/n-data-table/SKILL.md Dialog: ./components/n-dialog/SKILL.md 2. Design Specification Skills (5 skills) Design skills provide guidance on Naive UI design system. Skill Name Path Description Border ./naive-ui-design-border/SKILL.md Border styles, radius, shadows Color ./naive-ui-design-color/SKILL.md Color palette and semantics Layout ./naive-ui-design-layout/SKILL.md Grid system and layout Typography ./naive-ui-design-typography/SKILL.md Font conventions Overview ./naive-ui-design-overview/SKILL.md Design system overview 3. Foundation Skills (6 skills) Foundation skills cover core setup and configuration. Skill Name Path Description Quickstart ./naive-ui-quickstart/SKILL.md Installation and setup Theming ./naive-ui-theming/SKILL.md Theme customization i18n ./naive-ui-i18n/SKILL.md Internationalization Dark Mode ./naive-ui-dark-mode/SKILL.md Dark mode implementation SSR ./naive-ui-ssr/SKILL.md Server-side rendering Components ./naive-ui-components/SKILL.md Component overview index Skill Invocation Guide Step 1: Identify User Intent Analyze the user's request to determine which skill category is needed: User Request Pattern Skill Category Example Skill \"Create a button/form/table...\" Component n-button , n-form , n-data-table \"How to set up Naive UI\" Foundation naive-ui-quickstart \"Customize theme colors\" Foundation naive-ui-theming \"Add multi-language support\" Foundation naive-ui-i18n \"Implement dark mode\" Foundation naive-ui-dark-mode \"What colors are available?\" Design naive-ui-design-color \"How does the grid work?\" Design naive-ui-design-layout Step 2: Locate the Skill File Use the path patterns above to locate the appropriate skill file: # For component skills ./components/n-{component-name}/SKILL.md # For design skills ./naive-ui-design-{name}/SKILL.md # For foundation skills ./naive-ui-{name}/SKILL.md Step 3: Read and Apply Skill Content Each skill file contains: When to Invoke : Specific conditions for using the skill Features : Component capabilities and options API Reference : Attributes, events, slots, exposes Usage Examples : Code snippets for common patterns Best Practices : Recommended implementation guidelines Component Skill Index Common Components (15) Component Skill Path Description Avatar ./components/n-avatar/SKILL.md User avatars Button ./components/n-button/SKILL.md Buttons with various types and states Card ./components/n-card/SKILL.md Card containers Carousel ./components/n-carousel/SKILL.md Image carousel Collapse ./components/n-collapse/SKILL.md Collapsible panels Divider ./components/n-divider/SKILL.md Dividing lines Dropdown ./components/n-dropdown/SKILL.md Dropdown menu Ellipsis ./components/n-ellipsis/SKILL.md Text ellipsis Float Button ./components/n-float-button/SKILL.md Floating button Gradient Text ./components/n-gradient-text/SKILL.md Gradient text effect Icon ./components/n-icon/SKILL.md Icon wrapper component Page Header ./components/n-page-header/SKILL.md Page header Tag ./components/n-tag/SKILL.md Tags and labels Typography ./components/n-typography/SKILL.md Typography components Watermark ./components/n-watermark/SKILL.md Watermark Data Input Components (21) Component Skill Path Description Auto Complete ./components/n-auto-complete/SKILL.md Input with suggestions Cascader ./components/n-cascader/SKILL.md Cascading selection Checkbox ./components/n-checkbox/SKILL.md Checkboxes Color Picker ./components/n-color-picker/SKILL.md Color picker Date Picker ./components/n-date-picker/SKILL.md Date picker Dynamic Input ./components/n-dynamic-input/SKILL.md Dynamic input fields Dynamic Tags ./components/n-dynamic-tags/SKILL.md Dynamic tags input Form ./components/n-form/SKILL.md Form management Input ./components/n-input/SKILL.md Text input Input Number ./components/n-input-number/SKILL.md Number input Input OTP ./components/n-input-otp/SKILL.md OTP input Mention ./components/n-mention/SKILL.md Mention input Radio ./components/n-radio/SKILL.md Radio buttons Rate ./components/n-rate/SKILL.md Star rating Select ./components/n-select/SKILL.md Dropdown select Slider ./components/n-slider/SKILL.md Slider input Switch ./components/n-switch/SKILL.md Toggle switch Time Picker ./components/n-time-picker/SKILL.md Time picker Transfer ./components/n-transfer/SKILL.md Transfer panels Tree Select ./components/n-tree-select/SKILL.md Tree select Upload ./components/n-upload/SKILL.md File upload Data Display Components (21) Component Skill Path Description Calendar ./components/n-calendar/SKILL.md Calendar view Code ./components/n-code/SKILL.md Code display Countdown ./components/n-countdown/SKILL.md Countdown timer Data Table ./components/n-data-table/SKILL.md Advanced data table Descriptions ./components/n-descriptions/SKILL.md Description list Empty ./components/n-empty/SKILL.md Empty state Equation ./components/n-equation/SKILL.md Math equation Heatmap ./components/n-heatmap/SKILL.md Heatmap visualization Highlight ./components/n-highlight/SKILL.md Code highlight Image ./components/n-image/SKILL.md Image with preview Infinite Scroll ./components/n-infinite-scroll/SKILL.md Infinite scroll List ./components/n-list/SKILL.md List container Log ./components/n-log/SKILL.md Log display Number Animation ./components/n-number-animation/SKILL.md Animated numbers QR Code ./components/n-qr-code/SKILL.md QR code generator Statistic ./components/n-statistic/SKILL.md Statistics display Table ./components/n-table/SKILL.md Basic table Thing ./components/n-thing/SKILL.md Thing container Time ./components/n-time/SKILL.md Time display Timeline ./components/n-timeline/SKILL.md Timeline display Tree ./components/n-tree/SKILL.md Tree view Navigation Components (9) Component Skill Path Description Affix ./components/n-affix/SKILL.md Sticky positioning Anchor ./components/n-anchor/SKILL.md Anchor navigation Back Top ./components/n-back-top/SKILL.md Back to top button Breadcrumb ./components/n-breadcrumb/SKILL.md Breadcrumb navigation Loading Bar ./components/n-loading-bar/SKILL.md Loading bar Menu ./components/n-menu/SKILL.md Navigation menu Pagination ./components/n-pagination/SKILL.md Pagination Steps ./components/n-steps/SKILL.md Steps guide Tabs ./components/n-tabs/SKILL.md Tabs Feedback Components (16) Component Skill Path Description Alert ./components/n-alert/SKILL.md Alert messages Badge ./components/n-badge/SKILL.md Badges and marks Dialog ./components/n-dialog/SKILL.md Modal dialog Drawer ./components/n-drawer/SKILL.md Drawer panel",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用naive-ui-skills帮我处理问题",
            "output": "好的，我是naive-ui-skills。Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是naive-ui-skills，专注于内容创作领域。Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# naive-ui-skills - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// naive-ui-skills - 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: naive-ui-skills\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}