component-library-patterns
Design system token management, component API design, Storybook, and visual regression testing patterns
npx skills add vibeeval/vibecosystem --skill component-library-patterns --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.
# Component Library Patterns ## Design Tokens ```typescript // tokens.ts - Single source of truth export const tokens = { color: { primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a5f' }, semantic: { success: '#22c55e', error: '#ef4444', warning: '#f59e0b' } }, spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' }, font: { size: { sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem' }, weight: { normal: 400, medium: 500, semibold: 600, bold: 700 } }, radius: { sm: '4px', md: '8px', lg: '12px', full: '9999px' }, shadow: { sm: '0 1px 2px rgba(0,0,0,0.05)', md: '0 4px 6px rgba(0,0,0,0.1)' } } as const ``` ## Component API Design ```typescript // Composition pattern > prop explosion // YANLIS: <Button icon="check" iconPosition="left" loading loadingText="..." /> // DOGRU: <Button> <Button.Icon><CheckIcon /></Button.Icon> <Button.Text>Save</Button.Text> <Button.Spinner /> </Button> // Polymorphic component interface ButtonProps<T extends ElementType = 'button'> { as?: T variant: 'primary' | 'secondary' | 'ghost' size: 'sm' | 'md' | 'lg' } ``` ## Storybook Patterns ```typescript // Component.stories.tsx const meta: Meta<typeof Button> = { component: Button, argT
- Design Tokens
- Component API Design
- Storybook Patterns
- Visual Regression Testing
- Theming
- Checklist
- Anti-Patterns
What does the component-library-patterns skill do?
Design system token management, component API design, Storybook, and visual regression testing patterns
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill component-library-patterns --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 vibeeval/vibecosystem, a repository with 521 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.