code-showcase-core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Profile →npx skills add sickn33/agentic-awesome-skills --skill code-showcase-core-components --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Core Components ## When to Use Use this skill when you need core component library and design system patterns. Use when building UI, using design tokens, or working with the component library. ## Design System Overview Use components from your core library instead of raw platform components. This ensures consistent styling and behavior. ## Design Tokens **NEVER hard-code values. Always use design tokens.** ### Spacing Tokens ```tsx // CORRECT - Use tokens <Box padding="$4" marginBottom="$2" /> // WRONG - Hard-coded values <Box padding={16} marginBottom={8} /> ``` | Token | Value | |-------|-------| | `$1` | 4px | | `$2` | 8px | | `$3` | 12px | | `$4` | 16px | | `$6` | 24px | | `$8` | 32px | ### Color Tokens ```tsx // CORRECT - Semantic tokens <Text color="$textPrimary" /> <Box backgroundColor="$backgroundSecondary" /> // WRONG - Hard-coded colors <Text color="#333333" /> <Box backgroundColor="rgb(245, 245, 245)" /> ``` | Semantic Token | Use For | |----------------|---------| | `$textPrimary` | Main text | | `$textSecondary` | Supporting text | | `$textTertiary` | Disabled/hint text | | `$primary500` | Brand/accent color | | `$statusError` | Error states | | `$statusSuccess` | Su
- When to Use
- Design System Overview
- Design Tokens
- Spacing Tokens
- Color Tokens
- Typography Tokens
- Core Components
- Box
- HStack / VStack
- Text
- Button
- Input
- Card
- Layout Patterns
What does the code-showcase-core-components skill do?
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill code-showcase-core-components --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.