skills.rest
klh
klhCOMMUNITY
Explore all skills by this author →
Website𝕏@klhougesenGitHub

core-components

Enforces design tokens and core component library usage when building UI.

1|Updated Apr 16, 2026
Search Tags:#react#design system#styling#component library#design tokens#ui components#layout patterns
One-click install
npx skills add https://github.com/klh/skills --skill core-components-klh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-components
Source: https://github.com/klh/skills/tree/main/.well-known/agent-skills/core-components
Command: npx skills add https://github.com/klh/skills --skill core-components-klh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent UI code with hard-coded spacing, colors, and raw platform components breaks design system cohesion and makes maintenance difficult across a codebase. ## Core Features & Use Cases - Design Token Enforcement: Provides spacing, color, and typography token tables (e.g., $4, $textPrimary, $lg) so agents never hard-code pixel values or hex colors. - Core Component Patterns: Documents Box, HStack, VStack, Text, Button, Input, and Card components with correct prop usage and variants. - Layout Recipes: Supplies ready-made screen, form, and list-item layout patterns plus explicit anti-pattern examples showing wrong vs. correct code. - Use Case: When building a profile screen, the agent composes Screen, ScreenHeader, VStack, and Input components with token-based props instead of raw View elements with inline styles. ## Quick Start Build a settings screen using the core component library with design tokens for all spacing, colors, and typography.

Frequently Asked Questions about core-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens instead of hard-coded values?▼

Replace numeric and hex values with token props like padding="$4", color="$textPrimary", and fontSize="$lg". Tokens map to a defined scale (e.g., $4 equals 16px) so spacing and colors stay consistent across the app.

What components are in a core component library?▼

The library includes Box for layout, HStack and VStack for flex arrangements, Text for typography, Button with solid/outline/ghost/link variants, Input with validation support, and Card for content containers.

Should I use raw platform components or core components?▼

Use core components like Box and Text from the component library instead of raw platform primitives such as View. Core components accept design token props, ensuring consistent styling and behavior across the codebase.

How do I build a form layout with design tokens?▼

Wrap Input components in a VStack with gap="$4" and padding="$4", give each Input a label and error prop, and place a Button with isLoading state at the bottom for submission.

When should I not use design tokens?▼

Design tokens cover standard spacing, color, and typography scales. One-off visual effects or values outside the token scale may require custom handling, but these cases should be rare and documented.

Related Skills

Explore More Software Engineering Skills→
nitipoomph-codernitipoomph-coder

normalize

Audit UI deviations and generate a token-based normalization plan.

Community
Advanced
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced
jokken79jokken79
1

react-ui-patterns

Implement React UI data-loading patterns for loading, error, and empty states.

Community
Advanced
0xKobold0xKobold
4

tailwind-v4

Configure Tailwind CSS v4 with CSS-first design tokens and @theme.

Official
Advanced