Menu
Design system token management, component API design, Storybook, and visual regression testing patterns
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
OpenAI Codex CLI + Claude Code (Hizir) birlikte kullanim rehberi. Is dagitim pattern'leri, GitHub Actions workflow ornekleri, review dongusu ve iki AI yazilim asistaninin guclu yanlarini birlestiren orchestration stratejileri.
Create handoff document for transferring work to another session
Otonom deney dongusu. Kod degisikligi yap, olc, karsilastir, kabul et veya geri al. Metrik bazli karar verme ile performans, boyut veya kalite optimizasyonu. Tek basina veya agent ile kullan.
Planning agent that creates implementation plans and handoffs from conversation context
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
Pre-push API key and credential scanner - blocks git push if secrets found
| name | component-library-patterns |
| description | Design system token management, component API design, Storybook, and visual regression testing patterns |
// 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
// 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'
}
// Component.stories.tsx
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: { control: 'select', options: ['primary', 'secondary'] },
size: { control: 'radio', options: ['sm', 'md', 'lg'] }
}
}
export const Playground: Story = { args: { variant: 'primary', children: 'Click' } }
export const AllVariants: Story = {
render: () => (
<div style={{ display: 'flex', gap: 8 }}>
{(['primary', 'secondary', 'ghost'] as const).map(v => (
<Button key={v} variant={v}>{v}</Button>
))}
</div>
)
}
// Chromatic veya Percy ile
test('Button variants match snapshot', async ({ page }) => {
await page.goto('/iframe.html?id=button--all-variants')
await expect(page).toHaveScreenshot('button-variants.png', {
maxDiffPixelRatio: 0.01
})
})
/* CSS Custom Properties */
:root {
--color-primary: #3b82f6;
--color-bg: #ffffff;
--color-text: #1f2937;
}
[data-theme="dark"] {
--color-primary: #60a5fa;
--color-bg: #111827;
--color-text: #f9fafb;
}