Claude Code Core Components Skill for Composable Status Cards
Assemble a status card with existing layout, text, and button components. Reuse spacing, color, and typography tokens from the project.
中文Install in Claude Code
Use Claude Code with the pinned skill and a project containing the relevant primitives. Confirm actual component props first.
- Get the complete `cli-tool/components/skills/development/core-components` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/core-components/SKILL.md`, open Claude Code at the project root, and call `/core-components`.
Example task
Build a fictional download-status card with a title, description, and retry button. Use VStack and the existing Button, then review the loading feedback.What to check
The card uses existing components and consistent spacing tokens. Retry has a clear loading or disabled state. Confirm prop names in the project.
Original SKILL.md on GitHub · Updated
Frequently asked question
When should I reuse the existing Card?
Check whether its structure and tokens fit the design. If composition covers the need, retain the same component entry point and styling conventions.