Agent Skills › NicholasFlemmer/styx-app › ui-component

ui-component

GitHub

用于在packages/ui中根据规范快速生成或扩展UI组件，包含CSS Modules、Stories、键盘测试及无障碍检查。

.claude/skills/ui-component/SKILL.md NicholasFlemmer/styx-app

Trigger Scenarios

需要创建新的UI组件扩展现有UI组件功能

Install

npx skills add NicholasFlemmer/styx-app --skill ui-component -g -y

More Options

Non-standard path

npx skills add https://github.com/NicholasFlemmer/styx-app/tree/main/.claude/skills/ui-component -g -y

Use without installing

npx skills use NicholasFlemmer/styx-app@ui-component

指定 Agent (Claude Code)

npx skills add NicholasFlemmer/styx-app --skill ui-component -a claude-code -g -y

安装 repo 全部 skill

npx skills add NicholasFlemmer/styx-app --all -g -y

预览 repo 内 skill

npx skills add NicholasFlemmer/styx-app --list

SKILL.md

Frontmatter

{
    "name": "ui-component",
    "description": "Add or extend a component in packages\/ui from the spec §8 inventory and prototype recipe, with CSS Modules from tokens, stories for every variant\/state, keyboard\/focus test, and axe check.",
    "allowed-tools": "Read, Grep, Glob, Edit, Write, Bash(pnpm:*), Bash(grep:*), Bash(sed:*)",
    "argument-hint": "<ComponentName> [variant]"
}

UI component: $ARGUMENTS

Read the §8 row (/spec-lookup 8) and grep design/handoff/Styx.dc.html for 2–3 instances; copy the inline recipe (padding, font, border, hover, attributes).
Scaffold packages/ui/src/<group>/<Name>/{<Name>.tsx,<Name>.module.css,<Name>.stories.tsx,<Name>.test.tsx,index.ts}; export from src/index.ts.
Props: semantic props + inv?, on?, disabled?, className?; render data-inv/data-on only when true; forward ref.
CSS in @layer components, token vars only; hover = instant background: var(--s2); no radius/shadow/transition. Hit target ≥28px (::after inset for compact buttons).
Stories: one per variant × state + a Matrix story; a11y addon enabled.
Test: renders, keyboard activation, aria-*, focus ring visibility.
pnpm test -F @styx/ui && pnpm typecheck and pnpm storybook:test when available.