primitiveslisted
Install: claude install-skill woogi-kang/woogi-harness
# Primitives Skill
Primitive UI 컴포넌트 (Atoms) 설계 및 구현 스킬입니다.
shadcn/ui 기반으로 커스터마이징된 기본 빌딩 블록을 제공합니다.
## Triggers
- "프리미티브", "기본 컴포넌트", "atoms", "primitives"
- "버튼 디자인", "인풋 디자인", "뱃지", "칩"
- "로딩 스피너", "스켈레톤"
---
## Input
| 항목 | 필수 | 설명 |
|------|------|------|
| `componentType` | ✅ | 컴포넌트 유형 (button, input, badge, chip, icon-button, loading) |
| `variant` | ❌ | 변형 스타일 (primary, secondary, ghost 등) |
| `size` | ❌ | 크기 (sm, md, lg) |
| `aesthetic` | ❌ | 미학적 방향 (minimal, playful, corporate, luxury) |
---
## cn() 유틸리티
모든 컴포넌트는 `cn()` 유틸리티로 클래스를 병합합니다.
```typescript
// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
---
## Button Variants
### 기본 Button 확장
```tsx
// components/ui/button.tsx
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
// Base styles
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default:
'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.98]',
secondary:
'bg-secondary