メニュー
Generate and sync MCP metadata for the Chi Design System. Use when the user asks to build, generate, or update the MCP metadata, or to sync Skills/Rules from SCSS sources.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | chi-generate-metadata |
| description | Generate and sync MCP metadata for the Chi Design System. Use when the user asks to build, generate, or update the MCP metadata, or to sync Skills/Rules from SCSS sources. |
This skill manages two related tasks:
src/mcp/metadata.json for the external MCP serverThe metadata generation pipeline lives in src/mcp/ and is organized into focused modules:
src/mcp/
├── config.ts # Centralized configuration (paths, themes, WC tags, etc.)
├── scripts/
│ ├── generate.ts # Orchestrator: assembles metadata.json
│ ├── sync-skills.ts # Updates auto-generated sections in Rules/Skills
│ └── validate.ts # Post-build validation (16 checks)
├── extractors/
│ ├── extract.ts # Shared SCSS extraction logic
│ ├── tokens.ts # Token enrichment
│ ├── utilities.ts # Utility class generation
│ └── components.ts # Component processing
└── data/
├── tools.json # MCP tool definitions (19 tools)
└── static-data.ts # Tools, anti-patterns, guidelines, schemas, relationships
See src/mcp/README.md for full architecture documentation.
# Sync AI Rules & Skills from SCSS
npm run generate:ai-rules
# Generate metadata.json
npm run build:mcp
# Force rebuild (bypass incremental cache)
npm run build:mcp -- --force
# Or run both via full build
npm run build
Regenerate when:
src/mcp/data/tools.json changeValidate Chi component usage against schemas. Use when validating component modifiers, checking for conflicts, verifying accessibility attributes, or generating correct component markup. Contains allowed modifiers, conflicting modifier groups, required attributes, and accessibility requirements.
Extract and provide information about Chi CSS components (buttons, alerts, modals, cards, etc.). Use when the user asks about Chi components, their modifiers, BEM structure, or Web Component equivalents. Reads SCSS source files directly.
Extract and provide information about Chi Design System design tokens (colors, typography, spacing, shadows, breakpoints, z-index). Use when the user asks about design tokens, SCSS variables, theme colors, spacing values, or any design token query. Reads SCSS source files directly.
Recommend the best Chi implementation approach based on project context. Use when the user asks which Chi approach to use (Vue, Web Components, or HTML/CSS), when starting a new project with Chi, or when migrating between approaches. Provides framework-specific guidance and code examples.
Search across Chi Design System elements using natural language or keywords. Use when the user asks to find Chi elements, search for components by use case, or discover related utilities/tokens/components. Supports synonym expansion for better discoverability.
Extract and provide information about Chi utility classes (spacing, color, opacity, display, flex, border, typography, sizing, position, shadow). Use when the user asks about utility classes, CSS helpers, spacing, colors, or layout utilities. Reads SCSS source files directly.