Enforces design tokens and core component usage when building UI layouts.
npx skills add https://github.com/klh/skills --skill klh-core-components-klh
Please help me install this Agent Skill. Skill: klh-core-components Source: https://github.com/klh/skills/tree/main/.well-known/agent-skills/klh-core-components Command: npx skills add https://github.com/klh/skills --skill klh-core-components-klh
$4, $textPrimary, $lg) and flags hard-coded values as mistakes. - Core Component Reference: Documents Box, HStack/VStack, Text, Button, Input, and Card with prop patterns and variants. - Layout Patterns: Supplies ready-made screen, form, and list-item layout templates using core components. - Use Case: When building a new profile screen, the agent composes it from Screen, VStack, Input, and Button components with token-based props instead of raw View elements and inline styles. ## Quick Start Ask the agent to build a settings screen using the core component library with design tokens for all spacing and colors.High-intent search queries and answers about installing and using this skill.
Replace numeric and hex values with token props such as padding="$4", color="$textPrimary", and fontSize="$lg". Tokens map to a central scale (e.g., $4 equals 16px), so spacing and colors stay consistent across every screen.
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.
Use wrapper components like Box and Text from the core library instead of raw react-native primitives. Wrappers accept design token props, guaranteeing consistent styling and centralizing future design changes.
Compose a VStack with gap and padding tokens, place labeled Input components for each field, and finish with a Button showing a loading state. This pattern keeps spacing uniform and validation errors consistent.
Tokens cover standard spacing, color, and typography scales, so one-off values outside the scale may need a new token added to the theme rather than a hard-coded exception. Avoid bypassing tokens, since it breaks design consistency.
booklib-aiApply Refactoring UI principles to improve visual hierarchy in UI designs.
xtoneGenerate Next.js/React components with TS types, Tailwind styling, Vitest, and Storybook from design specs.
rladydqls99Generate React Native forms with react-hook-form and zod validation.
sevenbelowllcBuild scalable design systems with Tailwind CSS v4 and CVA.