Claude Code Design System Starter for Light and Dark Button Tokens
Define semantic colors, sizing, states, and documentation for a component. Use the bundled token JSON, React examples, and checklist to pilot one button across light and dark themes.
中文Install in Claude Code
Use Claude Code with the complete pinned skill directory. For integration, bring the existing style rules and a React component or prototype page.
- Get the complete `cli-tool/components/skills/development/design-system-starter` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/design-system-starter/SKILL.md`, open Claude Code at the project root, and call `/design-system-starter`.
Example task
Design the primary button for a fictional community-events site. Use the same semantic token names across themes, cover default, disabled, and keyboard-focus states, and document React usage.What to check
Expect two theme value sets, a button state table, and a usage example. The checklist should confirm visible focus and readable button text in both themes.
Original SKILL.md on GitHub · Updated
Frequently asked question
Why should a component reference semantic tokens?
Semantic tokens express the role of a color or size. The theme can supply different values while the component keeps the same reference.