| name | chi-components |
| description | 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. |
Chi CSS Components
How to Extract Components
CSS components are defined in src/chi/components/{name}/. Some components span multiple SCSS files:
{name}.scss -- main component styles_*.scss -- partials for variants, states, or sub-elements (e.g., _label.scss inside input-text/)
Important: Some CSS base classes differ from their directory name or Web Component tag:
chi-datepicker (CSS) → chi-date-picker (Web Component)chi-epanel (CSS) → chi-expansion-panel (Web Component)
Parsing Patterns
Base class (top-level only, start of line): /^\.chi-([a-z-]+)\s*\{/m
Direct modifiers: /&\.-([a-z0-9-]+)/g
SCSS map modifiers: /@each $var in map-keys($map) { &.-#{$var} -- resolve by reading the map keys
BEM subcomponents: /&__([a-z0-9-]+)/g
Fallback
If SCSS parsing fails or the file doesn't exist, use reference.md which contains the full auto-generated component table.
Workflow
When user asks about a component:
- Look up reference.md first -- it has descriptions, categories, modifiers, subcomponents, and WC mappings
- For deeper detail, read the SCSS file to get the full modifier list and CSS properties
- Always suggest the Web Component equivalent if one exists (check the WC column in reference.md)
- Check schemas in
chi-component-schemas/schemas.json for validation rules and accessibility info
Response Format
When providing component information, include:
- Component name and base CSS class
- Description and category
- Available modifiers (common ones, note if there are more)
- BEM subcomponents (if any)
- Web Component equivalent (always recommend if available)
- Usage example in both CSS and Web Component form
