메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Validate 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.
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.
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.
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.
| name | chi-search |
| description | 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. |
When user searches for Chi elements, use these strategies in order:
Search for exact class names, component names, or token names:
src/chi/_global-variables.scssExpand search terms using the synonym dictionary in reference.md. Example: "center" also matches "middle", "centered", "align-center".
Match natural language queries to common use cases in reference.md.
Example: "center content" → -mx--auto, -d--flex, -justify-content--center, -align-items--center
If no exact match, try partial matches: "btn" → chi-button, "mod" → chi-modal
Results are ranked by relevance:
Search covers:
Return results grouped by type: