Inconsistent styling and fragmented component usage create maintenance challenges. This skill provides a unified design system with tokens and patterns for cohesive interfaces.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "core-components". Create a settings screen header with title and icon
Expected outcome:
A ScreenHeader component with the title text using $textPrimary color and an icon positioned in an HStack with $3 gap, wrapped in a Box with $4 padding and $backgroundPrimary background.
Using "core-components". Style a disabled button
Expected outcome:
A Button component with variant set to solid, isDisabled prop set to true, which automatically applies muted styling using $textTertiary for the label color.
Security Audit
SafeStatic analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
Quality Score
What You Can Build
Frontend Developer Building New Features
A developer needs to add a new settings screen with forms and lists. They use this skill to apply consistent spacing tokens, color tokens, and component patterns that match the existing design system.
Team Standardizing UI Components
A team notices inconsistent styling across their app. They use this skill to establish shared patterns for layouts, typography, and interactive elements using design tokens.
Code Reviewer Enforcing Standards
During code review, a developer identifies hard-coded values and raw platform components. They reference this skill to guide contributors toward proper token usage and core components.
Try These Prompts
Show me how to create a card component with a title and content using the core component library with proper design tokens.
Create a login form with email and password inputs using VStack, Input components, and appropriate spacing tokens. Include a submit button.
Build a list item component showing a user avatar, name, and subtitle with a chevron icon. Use HStack, proper gap tokens, and semantic color tokens for text hierarchy.
Review this component code and identify any hard-coded values that should use design tokens. Show the corrected version with proper token usage for spacing, colors, and typography.
Best Practices
- Always use design tokens ($4, $textPrimary) instead of hard-coded values (16, #333333)
- Import from components/core instead of raw react-native primitives
- Use HStack and VStack for layouts instead of manual flexbox configuration
Avoid
- Using View and Text from react-native instead of Box and Text from core components
- Hard-coding pixel values for spacing, colors, or typography
- Creating inline style objects instead of using token-based props