component-library-patterns — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited component-library-patterns (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
// 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;
}~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.