skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

core-components

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

1|Updated Aug 17, 2025
Search Tags:#layout#react#design system#styling#component library#design tokens#ui patterns
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill core-components-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-components
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/core-components
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill core-components-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent styling creeps into codebases when developers hard-code spacing, colors, and typography or reach for raw platform components instead of the shared library. This Skill provides the design token reference and component patterns needed to keep every screen visually consistent. ## Core Features & Use Cases - Design Token Reference: Complete tables for spacing ($1-$8), semantic colors ($textPrimary, $statusError), and typography ($xs-$2xl) so values are never hard-coded. - Core Component Patterns: Usage examples for Box, HStack, VStack, Text, Button, Input, and Card with correct prop conventions. - Layout Recipes: Ready-made patterns for screen layouts, form layouts, and list items, plus explicit anti-pattern examples showing what to avoid. - Use Case: When building a new profile screen, apply the Screen/ScreenHeader/ScreenContent layout pattern with token-based spacing instead of inventing ad-hoc 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 or hex values with token references like padding="$4" instead of padding={16}, and color="$textPrimary" instead of color="#333333". Tokens cover spacing ($1-$8), semantic colors, and typography sizes ($xs-$2xl).

What core components should I use instead of raw platform components?▼

Use Box, HStack, VStack, Text, Button, Input, and Card from the core library instead of importing View or Text directly from the platform. Core components accept token-based props and guarantee consistent styling and behavior.

Which Button variant should I use for primary actions?▼

Use the solid variant for primary actions, outline for secondary actions, ghost for tertiary or subtle actions, and link for inline actions. The Button also supports isLoading and isDisabled states.

How do I structure a standard screen layout with core components?▼

Wrap content in a Screen component containing ScreenHeader with a title and ScreenContent with token-based padding. This pattern keeps headers, safe areas, and content spacing consistent across all screens.

When should I not use inline styles in components?▼

Avoid inline style objects with hard-coded values like style={{ fontSize: 18 }} in all cases covered by tokens. Use token props such as fontSize="$lg" and fontWeight="$semibold" so the design system controls the values.

Related Skills

Explore More Software Engineering Skills→
ratnesh-mauryaratnesh-maurya
1

core-components

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

Community
Intermediate
verivendverivend

vitest-testing

Generate Vitest unit test templates for Vue 3 TypeScript Vite projects.

Official
Intermediate
zinohomezinohome
1

state-ux-flow-builder

Standardize loading, error, and empty states for data fetching with state machines.

Community
Intermediate
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate