Chi

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.

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.