القائمة
Design system token management, component API design, Storybook, and visual regression testing patterns
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/vibeeval/vibecosystem --skill component-library-patternsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Claude Code CLI commands, flags, headless mode, and automation patterns
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.
Meta-skill for internal codebase exploration at varying depths (quick/deep/architecture)
| 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;
}