core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Core Components
- Design System Overview
- Design Tokens
- Spacing Tokens
- Color Tokens
- Typography Tokens
- Core Components
- Box
Use components from your core library instead of raw platform components. This ensures consistent styling and behavior. NEVER hard-code values. Always use design tokens. | Token | Value | |-------|-------| | $1 | 4px | | $2 | 8px | | $3 | 12px | | $4 | 16px | | $6 | 24px | | $8 | 32px | | Semantic Token | Use For | |----------------|---------| | $textPrimary | Main text | | $textSecondary | Supporting text | | $textTertiary | Disabled/hint text | | $primary500 | Brand/accent color | | $statusError | Error states | | $statusSuccess | Success states | | Token | Size | |-------|------| | $xs | 12px | | $sm | 14px | | $md | 16px | | $lg | 18px | | $xl | 20px | | $2xl | 24px | Base layout component with token support: Horizontal and vertical flex layouts: Typography with token support: Interactive button with variants: | Variant | Use For | |---------|---------| | solid | Primary actions | | outline | Secondary actions | | ghost | Tertiary/subtle actions | | link | Inline actions | Form input with validation: Content container: When creating components, use token-based props: react-ui-patterns: Use core components for UI states testing-patterns: Mock core components in tests storybook:
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- davila7/claude-code-templates
- Source file
- cli-tool/components/skills/development/core-components/SKILL.md
- Fixed revision
- 21be197f100a12b8d0dd9a211cc244c8179f84d3
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: davila7/claude-code-templates · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:44.245Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.