菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
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.
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.
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.
基于 SOC 职业分类
| name | chi-tokens |
| description | 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. |
Design tokens are SCSS variables defined in source files. Read them directly.
Read src/chi/_global-variables.scss and parse lines matching: $variable-name: value;
Regex: ^\$([a-z0-9-_]+):\s*(.+?)\s*;
Note: Some values are SCSS maps (e.g., $shadow, $state-colors). These contain multiple sub-values inside (key: value, ...) syntax.
For theme colors, read src/chi/themes/{theme}/_variables.scss where theme is one of: lumen, centurylink, portal, connect.
Theme files override global tokens. When a user asks about a color, check the theme file first, then fall back to global.
| Category | Name Pattern | Examples |
|---|---|---|
| colors | Contains color, grey, red, blue, etc. | $color-background-primary |
| typography | Starts with font-, line-height, cap-height | $font-size-5 (1rem = 16px) |
| spacing | Is base-unit | $base-unit (8px) |
| shadows | Contains shadow | $shadow (map with levels 0-5) |
| breakpoints | Ends with -breakpoint | $sm-breakpoint (576px) |
| zIndex | Starts with zindex- | $zindex-modal (50) |
| opacity | Starts with opacity- | $opacity-60 (0.6) |
$base-unit: 8px -- spacing formula: space(N) = (N/2)rem, so each step = 8px at 16px root$zindex-backdrop: 30, $zindex-modal: 50, $zindex-popover: 60, $zindex-tooltip: 70$font-size-5: 1rem (16px, default body text)When user asks about tokens:
_variables.scss for overridden values.When providing token information, include:
$name)