AgentSkillsCN

chi-components

提取并提供关于 Chi CSS 组件（按钮、警示框、模态框、卡片等）的相关信息。当用户咨询 Chi 组件及其修饰符、BEM 结构，或寻找 Web Component 等效实现时，可使用此功能。直接读取 SCSS 源文件。

SKILL.md
--- frontmatter
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:

  1. •Look up reference.md first -- it has descriptions, categories, modifiers, subcomponents, and WC mappings
  2. •For deeper detail, read the SCSS file to get the full modifier list and CSS properties
  3. •Always suggest the Web Component equivalent if one exists (check the WC column in reference.md)
  4. •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