|
| 1 | +--- |
| 2 | +name: ant-design-knowledge-base |
| 3 | +description: Provides comprehensive answers about Ant Design components, documentation, and semantic descriptions using local knowledge base files. Use when asked about Ant Design, React UI components, design system, component semantics, or specific component usage. |
| 4 | +allowed-tools: Read, Grep, Glob |
| 5 | +--- |
| 6 | + |
| 7 | +# Ant Design Knowledge Base |
| 8 | + |
| 9 | +## Overview |
| 10 | + |
| 11 | +This skill provides access to local Ant Design documentation and semantic descriptions sourced from the official Ant Design website. The knowledge base includes: |
| 12 | + |
| 13 | +1. **Component Documentation**: Links to all Ant Design component documentation pages |
| 14 | +2. **Design Resources**: Links to design specifications, values, patterns, and guidelines |
| 15 | +3. **Semantic Descriptions**: Detailed semantic descriptions of each component's CSS class structure (root, icon, title, etc.) |
| 16 | + |
| 17 | +## Knowledge Base Files |
| 18 | + |
| 19 | +The following files are available in the `knowledge-base/` directory: |
| 20 | + |
| 21 | +- `llms.txt`: Contains documentation links and component overview |
| 22 | +- `llms-full.txt`: Contains detailed semantic descriptions of all Ant Design components |
| 23 | + |
| 24 | +## How to Use This Knowledge Base |
| 25 | + |
| 26 | +### Finding Information |
| 27 | + |
| 28 | +When asked about Ant Design components, documentation, or semantics: |
| 29 | + |
| 30 | +1. **Search for component names**: Use `Grep` to find relevant lines in the knowledge base files: |
| 31 | + ```bash |
| 32 | + Grep("Button", "knowledge-base/llms.txt") |
| 33 | + Grep("button", "knowledge-base/llms-full.txt") |
| 34 | + ``` |
| 35 | + |
| 36 | +2. **Read specific sections**: Use `Read` to view the full content or specific lines: |
| 37 | + ```bash |
| 38 | + Read("knowledge-base/llms-full.txt", offset=40, limit=50) # Example for button component |
| 39 | + ``` |
| 40 | + |
| 41 | +3. **Browse all components**: Use `Glob` to list available files: |
| 42 | + ```bash |
| 43 | + Glob("knowledge-base/*.txt") |
| 44 | + ``` |
| 45 | + |
| 46 | +### File Structure Details |
| 47 | + |
| 48 | +#### `llms.txt` contains: |
| 49 | +- Introduction to Ant Design |
| 50 | +- Semantic descriptions link |
| 51 | +- Documentation links (Resources, Visualization, Design Values, etc.) |
| 52 | +- Component links (Affix through Watermark) |
| 53 | + |
| 54 | +#### `llms-full.txt` contains: |
| 55 | +- Semantic descriptions for 64 Ant Design components |
| 56 | +- For each component: root element and sub-element descriptions with CSS styling purposes |
| 57 | + |
| 58 | +### Common Queries |
| 59 | + |
| 60 | +#### Component Questions |
| 61 | +When asked about a specific component (e.g., "Button", "Table", "Form"): |
| 62 | +1. Search for the component in both files: |
| 63 | + ```bash |
| 64 | + Grep("button", "knowledge-base/llms.txt", -i) |
| 65 | + Grep("### button", "knowledge-base/llms-full.txt", -i) |
| 66 | + ``` |
| 67 | +2. Read the semantic description section for that component |
| 68 | +3. Provide the component's purpose, semantic elements, and documentation link |
| 69 | + |
| 70 | +#### Documentation Questions |
| 71 | +When asked about design principles, values, or guidelines: |
| 72 | +1. Search for relevant terms in `llms.txt`: |
| 73 | + ```bash |
| 74 | + Grep("Design Values", "knowledge-base/llms.txt") |
| 75 | + Grep("Visualization", "knowledge-base/llms.txt") |
| 76 | + ``` |
| 77 | +2. Provide the documentation links and summaries |
| 78 | + |
| 79 | +#### Semantic Description Questions |
| 80 | +When asked about component structure or CSS classes: |
| 81 | +1. Find the component in `llms-full.txt`: |
| 82 | + ```bash |
| 83 | + Grep("### button", "knowledge-base/llms-full.txt", -A 20) |
| 84 | + ``` |
| 85 | +2. Extract and explain the semantic elements (root, icon, title, etc.) |
| 86 | +3. Describe the styling purposes of each element |
| 87 | + |
| 88 | +## Examples |
| 89 | + |
| 90 | +### Example 1: Button Component Query |
| 91 | +**User**: "What are the semantic elements of the Ant Design Button component?" |
| 92 | + |
| 93 | +**Approach**: |
| 94 | +1. Search for button in semantic descriptions: |
| 95 | + ```bash |
| 96 | + Grep("### button", "knowledge-base/llms-full.txt", -A 10) |
| 97 | + ``` |
| 98 | +2. Read the button section: |
| 99 | + ```bash |
| 100 | + Read("knowledge-base/llms-full.txt", offset=42, limit=8) |
| 101 | + ``` |
| 102 | +3. Present the root, content, and icon elements with their styling purposes. |
| 103 | + |
| 104 | +### Example 2: Component Documentation Query |
| 105 | +**User**: "Where can I find documentation for Ant Design Table component?" |
| 106 | + |
| 107 | +**Approach**: |
| 108 | +1. Search for Table in component links: |
| 109 | + ```bash |
| 110 | + Grep("Table", "knowledge-base/llms.txt") |
| 111 | + ``` |
| 112 | +2. Provide the documentation URL and related resources. |
| 113 | + |
| 114 | +### Example 3: Design Principles Query |
| 115 | +**User**: "What are the Ant Design design values?" |
| 116 | + |
| 117 | +**Approach**: |
| 118 | +1. Search for Design Values link: |
| 119 | + ```bash |
| 120 | + Grep("Design Values", "knowledge-base/llms.txt") |
| 121 | + ``` |
| 122 | +2. Provide the link and summary from the knowledge base. |
| 123 | + |
| 124 | +## Notes |
| 125 | + |
| 126 | +- The knowledge base is in Chinese for semantic descriptions, but component names are in English. |
| 127 | +- Some documentation links may require internet access to view full content. |
| 128 | +- The semantic descriptions are focused on CSS class structure and styling purposes. |
| 129 | + |
| 130 | +## Skill Activation |
| 131 | + |
| 132 | +This skill will automatically activate when questions include terms like: |
| 133 | +- "Ant Design" |
| 134 | +- "antd" |
| 135 | +- "React UI components" |
| 136 | +- "component semantics" |
| 137 | +- "design system" |
| 138 | +- Specific component names (Button, Table, Form, etc.) |
| 139 | + |
| 140 | +When activated, Claude has permission to use Read, Grep, and Glob tools to access the knowledge base files in the `knowledge-base/` directory. |
0 commit comments