Ant Design Knowledge Base

Ant Design Knowledge Base

Overview

This skill provides access to local Ant Design documentation and semantic descriptions sourced from the official Ant Design website. The knowledge base includes:

1. Component Documentation: Links to all Ant Design component documentation pages
2. Design Resources: Links to design specifications, values, patterns, and guidelines
3. Semantic Descriptions: Detailed semantic descriptions of each component's CSS class structure (root, icon, title, etc.)

Knowledge Base Files

The following files are available in the knowledge-base/ directory:

• llms.txt: Contains documentation links and component overview
• llms-full.txt: Contains detailed semantic descriptions of all Ant Design components

How to Use This Knowledge Base

Finding Information

When asked about Ant Design components, documentation, or semantics:

1. Search for component names: Use Grep to find relevant lines in the knowledge base files:

   Grep("Button", "knowledge-base/llms.txt")
   Grep("button", "knowledge-base/llms-full.txt")
   

2. Read specific sections: Use Read to view the full content or specific lines:

   Read("knowledge-base/llms-full.txt", offset=40, limit=50)  # Example for button component
   

3. Browse all components: Use Glob to list available files:

   Glob("knowledge-base/*.txt")
   

File Structure Details

llms.txt contains:

• Introduction to Ant Design
• Semantic descriptions link
• Documentation links (Resources, Visualization, Design Values, etc.)
• Component links (Affix through Watermark)

llms-full.txt contains:

• Semantic descriptions for 64 Ant Design components
• For each component: root element and sub-element descriptions with CSS styling purposes

Common Queries

Component Questions

When asked about a specific component (e.g., "Button", "Table", "Form"):

1. Search for the component in both files:

   Grep("button", "knowledge-base/llms.txt", -i)
   Grep("### button", "knowledge-base/llms-full.txt", -i)
   

2. Read the semantic description section for that component
3. Provide the component's purpose, semantic elements, and documentation link

Documentation Questions

When asked about design principles, values, or guidelines:

1. Search for relevant terms in llms.txt:

   Grep("Design Values", "knowledge-base/llms.txt")
   Grep("Visualization", "knowledge-base/llms.txt")
   

2. Provide the documentation links and summaries

Semantic Description Questions

When asked about component structure or CSS classes:

1. Find the component in llms-full.txt:

   Grep("### button", "knowledge-base/llms-full.txt", -A 20)
   

2. Extract and explain the semantic elements (root, icon, title, etc.)
3. Describe the styling purposes of each element

Examples

Example 1: Button Component Query

User: "What are the semantic elements of the Ant Design Button component?"

Approach:

1. Search for button in semantic descriptions:

   Grep("### button", "knowledge-base/llms-full.txt", -A 10)
   

2. Read the button section:

   Read("knowledge-base/llms-full.txt", offset=42, limit=8)
   

3. Present the root, content, and icon elements with their styling purposes.

Example 2: Component Documentation Query

User: "Where can I find documentation for Ant Design Table component?"

Approach:

1. Search for Table in component links:

   Grep("Table", "knowledge-base/llms.txt")
   

2. Provide the documentation URL and related resources.

Example 3: Design Principles Query

User: "What are the Ant Design design values?"

Approach:

1. Search for Design Values link:

   Grep("Design Values", "knowledge-base/llms.txt")
   

2. Provide the link and summary from the knowledge base.

Notes

• The knowledge base is in Chinese for semantic descriptions, but component names are in English.
• Some documentation links may require internet access to view full content.
• The semantic descriptions are focused on CSS class structure and styling purposes.

Skill Activation

This skill will automatically activate when questions include terms like:

• "Ant Design"
• "antd"
• "React UI components"
• "component semantics"
• "design system"
• Specific component names (Button, Table, Form, etc.)

When activated, Claude has permission to use Read, Grep, and Glob tools to access the knowledge base files in the knowledge-base/ directory.