@smorky85/auradkit-skill 5.3.0

package/bin/install.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+/**
+ * AuraDKit Skill Installer
+ * npx @smorky85/auradkit-skill → .claude/skills/auradkit/ 에 스킬 설치
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const SKILL_DIR = path.join(process.cwd(), '.claude', 'skills', 'auradkit');
+const REF_DIR = path.join(SKILL_DIR, 'references');
+const SRC_DIR = path.join(__dirname, '..', 'skill');
+
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+      console.log(`  \x1b[32m✓\x1b[0m ${path.relative(SKILL_DIR, destPath)}`);
+    }
+  }
+}
+
+console.log();
+console.log('  \x1b[36m[AuraDKit]\x1b[0m Installing Design Intelligence Skill v5.3...');
+console.log();
+
+try {
+  copyDir(SRC_DIR, SKILL_DIR);
+
+  console.log();
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m ══════════════════════════════════════');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m   AuraDKit Skill v5.3 installed!');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m   Usage:');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m     /auradkit 유저 대시보드 만들어줘');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m     /auradkit --format=tsx 로그인 페이지');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m   455 sites · 7 axes · avg 9.1/10');
+  console.log('  \x1b[36m[AuraDKit]\x1b[0m ══════════════════════════════════════');
+  console.log();
+} catch (err) {
+  console.error(`  \x1b[31m✗\x1b[0m Installation failed: ${err.message}`);
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@smorky85/auradkit-skill",
+  "version": "5.3.0",
+  "description": "AuraDKit — Design Intelligence Skill for Claude Code. 455개 사이트 학습 기반 S-Grade UI 생성.",
+  "bin": {
+    "auradkit-skill": "bin/install.js"
+  },
+  "files": [
+    "bin/",
+    "skill/"
+  ],
+  "keywords": ["claude-code", "skill", "design", "ui", "auradkit", "design-system"],
+  "author": "smorky85",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smorky850612/auradkit.git",
+    "directory": "packages/auradkit-skill"
+  }
+}

package/skill/SKILL.md

@@ -0,0 +1,231 @@
+<!-- AURADKIT ACTIVE -->
+<!-- If this section is missing after context compaction, reload: /auradkit -->
+# AuraDKit Design Intelligence v5.3
+<!-- AURADKIT:STATIC — cache-stable content below. Do NOT place volatile data (site counts, dates) above DYNAMIC boundary. -->
+
+## Output Rules (MANDATORY)
+
+### 4 States — Every component: `default` · `loading` · `empty` · `error`
+```html
+<section data-state="default"><!-- default | loading | empty | error --></section>
+```
+
+### Blocklist (ALWAYS ACTIVE)
+1. No div nesting > 3 levels → semantic HTML
+2. No inline style literals → `--aurad-*` tokens only
+3. No hardcoded HEX/RGB → CSS custom properties only
+4. No `outline: none` → `:focus-visible` with visible ring
+5. No layout props in transitions → `transform` + `opacity` only
+6. No `<div onclick>` → `<button>` or `<a href>`
+
+### Format Waterfall
+`--format` → `.auradkit/system.md` → `package.json` detection → HTML
+
+### Write Guardrails
+**NEVER:** `package.json` · `*.lock` · `.env*` · `tsconfig.json` · `*.config.*` · `.git/**` · `node_modules/**`
+**WRITE TO:** `src/` `app/` `components/` `pages/` or user-specified path only.
+
+---
+
+## Token System
+Full spec → `references/design-tokens.md`
+
+```css
+/* Color tokens — use --aurad-fg for text color, --aurad-text-* for font sizes */
+--aurad-primary:  oklch(0.55 0.15 250);  /* #3b82f6 */
+--aurad-fg:       oklch(0.25 0.02 250);  /* #1e293b — text foreground */
+--aurad-fg-inv:   oklch(0.98 0.005 250); /* #f8fafc — text on colored bg */
+--aurad-surface:  oklch(0.98 0.005 250); /* #f8fafc */
+--aurad-border:   oklch(0.85 0.01 250);  /* #cbd5e1 */
+--aurad-error:    oklch(0.55 0.20 25);   /* #ef4444 */
+--aurad-success:  oklch(0.60 0.15 150);  /* #22c55e */
+
+/* Spacing tokens — 4px grid */
+--aurad-space-[1|2|3|4|6|8|12|16|24]: 0.25→6rem
+
+/* Font size tokens */
+--aurad-text-[xs|sm|base|lg|xl|2xl|3xl|4xl]: .75→2.25rem
+
+/* Typography */
+--aurad-leading-tight: 1.25;
+--aurad-leading-normal: 1.5;
+--aurad-leading-relaxed: 1.75;
+
+/* Radius, motion */
+--aurad-radius-[sm|md|lg|xl|full]: 4|8|12|16|9999px
+--aurad-duration-[fast|normal|slow]: 150|250|400ms
+--aurad-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+/* Shadow — floating elements only */
+--aurad-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
+--aurad-shadow-md: 0 4px 6px oklch(0 0 0 / 0.07);
+--aurad-shadow-lg: 0 10px 15px oklch(0 0 0 / 0.1);
+
+/* Breakpoints */
+--aurad-bp-sm: 640px; --aurad-bp-md: 768px; --aurad-bp-lg: 1024px; --aurad-bp-xl: 1280px;
+
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important } }
+```
+
+**Dark mode** — add to `[data-theme="dark"]`:
+```css
+[data-theme="dark"] {
+  --aurad-fg:      oklch(0.90 0.02 250);  /* #e2e8f0 */
+  --aurad-surface: oklch(0.15 0.005 250); /* #0f172a */
+  --aurad-border:  oklch(0.30 0.01 250);  /* #334155 */
+  --aurad-primary: oklch(0.65 0.15 250);  /* #60a5fa */
+}
+```
+
+---
+
+## WCAG AA Pairs
+| Foreground | Background | Ratio |
+|-----------|-----------|-------|
+| `--aurad-fg` | `--aurad-surface` | 7.2:1 AAA |
+| `--aurad-fg-inv` | `--aurad-primary` | 4.8:1 AA |
+| `--aurad-primary` | `--aurad-surface` | 4.6:1 AA |
+| `--aurad-error` | `--aurad-surface` | 4.5:1 AA |
+
+---
+
+## Critical Rules
+
+- [CRITICAL] **prefers-reduced-motion 미적용**: 전역 CSS에 prefers-reduced-motion 블록을 추가하라.
+- [CRITICAL] **하드코딩된 색상값 (HEX/RGB 직접 사용)**: 모든 하드코딩 색상을 CSS 변수로 교체하라. 다크모드, 브랜드 변경 대응 불가능.
+- [HIGH] **임의 픽셀 간격 사용**: 모든 margin/padding/gap을 4px 배수 토큰으로 교체하라.
+- [HIGH] **Layout 속성 애니메이션 (성능 문제)**: transform: translateX/Y, scale과 opacity만 애니메이션하라. GPU 합성 레이어 활용.
+- [HIGH] **4종 이상 폰트 패밀리 혼용**: 최대 2종 폰트(헤딩용 + 본문용)로 줄여라. 단일 폰트도 충분히 효과적이다.
+- [HIGH] **고유 색상값 과다 (30종 이상)**: semantic color 토큰 10개 이하로 팔레트를 정리하고 CSS 변수로 참조하라.
+- [CRITICAL] **56개 사이트에서 WCAG AA 미달 색상 감지**: 사전 검증된 색상 쌍만 사용하라: --aurad-text on --aurad-surface = 7.2:1 (AAA).
+- [HIGH] **터치 타겟 44px 준수율 저조 — 평균 29%**: 모든 인터랙티브 요소에 min-height: 44px; min-width: 44px를 적용하라.
+
+Full catalog → `references/drift-patterns.md` (load on-demand for specific drift axis details)
+
+---
+
+## Design Principles (Top 5)
+
+- **transform/opacity만 애니메이션** (95%): GPU 합성 레이어(transform, opacity)만 애니메이션하면 60fps를 유지할 수 있다.
+- **2폰트 페어링이 이상적** (86%): 폰트 패밀리 2개(헤딩+본문)가 가장 일관성 있고 개성 있는 조합이다.
+- **단일 H1 + Hero + CTA 조합** (85%): 페이지당 H1 하나, Hero 섹션, CTA 버튼이 함께 있을 때 시선 집중도가 최대화된다.
+- **모듈러 스케일 80%+ 준수** (80%): \[12,14,16,18,20,24,30,36,48,60,72]px 표준값 80% 이상 사용 시 스케일 시스템이 인식된다.
+- **4px 배수 간격 시스템 80%+ 준수** (74%): 모든 margin/padding/gap이 4px 배수일 때 공간 리듬이 형성된다. 80% 이상 준수가 목표.
+
+All 15 principles across 7 axes → `references/principles.md` (load on-demand for axis-specific guidance)
+
+---
+
+## Post-Generation Checklist (MANDATORY — self-verify after every UI output)
+
+After generating UI code, verify ALL items before presenting to user:
+
+| # | Check | How to verify |
+|---|-------|--------------|
+| 1 | Zero hardcoded colors | grep for `#[0-9a-f]`, `rgb(`, `hsl(` outside comments — must be 0 |
+| 2 | All colors use `--aurad-*` tokens | every color value references a CSS custom property |
+| 3 | 4-state support | `data-state="default\|loading\|empty\|error"` present on main container |
+| 4 | `prefers-reduced-motion` block | `@media (prefers-reduced-motion: reduce)` exists if any animation used |
+| 5 | `:focus-visible` on interactives | every `<button>`, `<a>`, `<input>` has visible focus style |
+| 6 | 4px grid spacing | all margin/padding/gap values are multiples of 4px or use `--aurad-space-*` |
+| 7 | div nesting <= 3 | no `<div>` deeper than 3 levels — use semantic elements |
+| 8 | No AI-slop (SLOP-01~07) | scan output against slop table below — if ANY SLOP code matches, rewrite that section |
+| 9 | Semantic HTML | `<nav>`, `<main>`, `<section>`, `<article>` used over `<div>` |
+| 10 | Touch targets >= 44px | interactive elements have `min-height: 44px; min-width: 44px` |
+
+If ANY check fails, fix before output. Do not present unchecked code.
+
+---
+
+## Modern CSS & Mobile (ref sites: 138)
+
+- `scroll-behavior:smooth`: 67% — add to html/body
+- `line-clamp`: 62% — truncate card body text
+- `text-wrap:balance`: 54% — use on headings
+- `overscroll-behavior`: 50% — prevent modal bounce
+- `@container`: 41% — component-level responsive
+
+---
+
+## Visual Intelligence (ref sites: 138)
+
+**Design styles:** glassmorphism(107), mixed(13), editorial(11), minimalist(4)
+
+**Visual effects:**
+- Glassmorphism (backdrop-filter): 78% — blur + semi-transparent bg
+- Gradient-heavy (3+): 83%
+- Gradient text (background-clip:text): 42%
+- Blend modes: 89%
+- clip-path shapes: 64%
+- Grain/noise texture: 10%
+
+**Video:** - Sites using video: 40% (hero: 21%, WebM: 8%)
+
+---
+
+## Patterns
+
+- **Floating Label Form** [form]: 입력 시 레이블이 위로 올라가는 floating label 패턴.
+- **Sidebar + Main Content** [layout]: 좌측 고정 사이드바 + 우측 메인 콘텐츠 레이아웃. SaaS 대시보드 표준.
+- **Sticky Navigation** [navigation]: 스크롤 시 상단에 고정되는 내비게이션 바.
+- **3-Column Feature Grid** [card-grid]: 3컬럼 기능 소개 그리드. 아이콘 + 제목 + 설명 구조.
+- **Typographic Scale System** [typography]: 12-72px 모듈러 스케일을 일관되게 적용한 타이포 시스템.
+- **Accordion / FAQ** [card-grid]: FAQ/콘텐츠 아코디언. 정보 계층 정리에 효과적. details/summary 또는 JS 구현.
+- **Accessible Motion (reduced-motion)** [animation]: @media (prefers-reduced-motion: reduce) 분기로 모든 애니메이션 접근성 지원.
+- **Hero + CTA** [hero]: 전체 너비 히어로 섹션 + 중앙 CTA 버튼. 랜딩 페이지 필수 패턴.
+
+### Anti-Patterns (Design)
+- ⚠ **Shadow Overuse**: 모든 요소에 과도한 drop-shadow 적용. 시각적 무게감 과부하.
+- ⚠ **Form Without Error States**: 에러/성공 상태 없는 폼. 사용자 피드백 부재로 전환율 저하.
+- ⚠ **Purple-Blue Gradient Hero**: 보라-파랑 그라데이션 히어로 배경. AI 생성 UI의 대표적 클리셰.
+
+### AI Slop Detection (SLOP-01~07 — MANDATORY real-time check)
+
+| Code | Pattern | Detection | Alternative |
+|------|---------|-----------|-------------|
+| SLOP-01 | Purple-blue gradient hero | `linear-gradient` with H:220-320 in hero | Solid `--aurad-surface` + product screenshot |
+| SLOP-02 | Generic icon set (94+ same lib) | All icons from one library, 0 custom | Fewer icons + custom brand mark |
+| SLOP-03 | 3-col identical feature grid | `repeat(3,1fr)` + icon+h3+p same structure | Primary/secondary split layout |
+| SLOP-04 | Floating dashboard screenshot | `perspective()` + `box-shadow:40px+` in hero img | Real screenshot, no transform theater |
+| SLOP-05 | Glowing blur orbs | `filter:blur(60px+)` + `radial-gradient` + `position:absolute` | Border + surface color contrast |
+| SLOP-06 | Star testimonial carousel | Stars + generic quote + stock avatar | Specific outcome quote + real attribution |
+| SLOP-07 | Pill badge hero label | `border-radius:9999px` + "Introducing/New" above h1 | Changelog link or omit entirely |
+
+**Text Slop Blocklist** — NEVER use these phrases in generated copy:
+`blazing fast` · `seamless` · `robust` · `cutting-edge` · `state-of-the-art` · `easy to use` · `intuitive` · `powerful` · `secure by default` · `built for scale` · `enterprise-grade` · `next-generation`
+
+**Core principle**: Replace generic category signal with specific product evidence.
+
+Full rules + code examples → `knowledge-base/anti-ai-slop/` (load on-demand)
+
+### Category Hints (load on-demand)
+- `form`: Floating Label Form
+- `layout`: Sidebar + Main Content
+- `navigation`: Sticky Navigation
+- `card-grid`: 3-Column Feature Grid, Accordion / FAQ
+- `typography`: Typographic Scale System
+
+<!-- AURADKIT:DYNAMIC — volatile, changes per compilation -->
+---
+
+## Analysis Stats
+
+| Axis | Score |
+|------|-------|
+| visualHierarchy | 9.1/10 |
+| spatialRhythm | 9.1/10 |
+| typography | 9.1/10 |
+| color | 9.1/10 |
+| motion | 9.1/10 |
+| component | 9.1/10 |
+| layout | 9.2/10 |
+
+Drift: ✓ Low (20/100)
+AI-Slop: ✓ Original (7/100)
+
+> 455 sites · top refs: deno.com, magicui.design, zed.dev, astro.build, css-tricks.com, nextui.org, trigger.dev, vastspace.com
+> Truncated? Run `node trainer/dist/index.js compile` · refs: `references/`
+
+*AuraDKit v5.3 · 2026-04-06*
+<!-- integrity:sha256:09a6b6c2a23b -->
+<!-- /AURADKIT ACTIVE -->

package/skill/references/design-tokens.md

@@ -0,0 +1,32 @@
+# AuraDKit — Design Tokens Reference
+
+> Generated from 455 sites. Reference tier: 138 sites.
+
+## Observed Font Size Scales
+- angular.dev: 13, 14, 16, 51, 80px
+- antfu.me: 16, 36px
+- anthropic.com: 16, 18, 20px
+- anthropic.com: 16, 18, 20px
+- area17.com: 16, 20, 42, 55px
+
+## Observed Spacing Values
+- angular.dev: 1, 2, 4, 6, 8, 12px
+- antfu.me: 32px
+- anthropic.com: 4, 8, 16, 31, 46, 61px
+- anthropic.com: 4, 8, 16, 31, 46, 61px
+- area17.com: 8, 12, 16, 24, 48, 64px
+
+## Token System Prevalence
+188/455 sites (41%) use CSS custom properties.
+Top namespaces: `--color-` (57 sites), `--font-` (25 sites), `--wp-` (6 sites), `--radius-` (3 sites), `--gray` (3 sites)
+
+## Full Token Spec
+
+See SKILL.md Token System for the complete `--aurad-*` token set.
+
+All tokens follow:
+- Spacing: 4px grid (0.25rem steps)
+- Typography: modular scale [12,14,16,18,20,24,30,36,48]px
+- Color: OKLCH with HEX fallback comments
+- Radius: [4, 8, 12, 16, 9999]px
+- Motion: [150, 250, 400]ms with `cubic-bezier(0.4, 0, 0.2, 1)`

package/skill/references/drift-patterns.md

@@ -0,0 +1,215 @@
+# AuraDKit — Drift Patterns Catalog
+
+> Detected patterns from crawled sites. Use these rules when reviewing generated UI.
+
+- [Spacing Drift](#spacing-drift)
+- [Typography Drift](#typography-drift)
+- [Color Drift](#color-drift)
+- [Radius Drift](#radius-drift)
+- [Motion Drift](#motion-drift)
+
+---
+
+## Spacing Drift
+
+### [HIGH] 임의 픽셀 간격 사용
+*Occurrences: 85 | Detection: 4px 배수 준수율 < 70%*
+
+3px, 7px, 11px, 13px 등 4px 배수가 아닌 임의 간격값이 산재해 있다.
+
+**Fix**: 모든 margin/padding/gap을 4px 배수 토큰으로 교체하라.
+
+```css
+/* ❌ 드리프트 */
+margin-top: 13px;
+padding: 7px 11px;
+
+/* ✅ 수정 */
+margin-top: var(--aurad-space-3);  /* 12px */
+padding: var(--aurad-space-2) var(--aurad-space-3);  /* 8px 12px */
+```
+
+
+### [MEDIUM] 과도하게 밀집된 레이아웃
+*Occurrences: 33 | Detection: 평균 margin/padding < 8px*
+
+평균 간격이 8px 미만으로, 콘텐츠가 답답하게 붙어 있다.
+
+**Fix**: 섹션 간 padding을 최소 24px 이상, 카드 내부 padding을 최소 16px 이상으로 늘려라.
+
+
+
+### [MEDIUM] 간격 토큰 과다 (10종 이상)
+*Occurrences: 9 | Detection: 고유 간격값 > 12종*
+
+10가지 이상의 서로 다른 간격값이 사용되어 일관성이 없다.
+
+**Fix**: 간격 스케일을 8개 이하로 정리하고 CSS 변수로 통일하라.
+
+```css
+/* 권장 간격 스케일 (9개) */
+--aurad-space-1: 0.25rem;  /*  4px */
+--aurad-space-2: 0.5rem;   /*  8px */
+--aurad-space-3: 0.75rem;  /* 12px */
+--aurad-space-4: 1rem;     /* 16px */
+--aurad-space-6: 1.5rem;   /* 24px */
+--aurad-space-8: 2rem;     /* 32px */
+--aurad-space-12: 3rem;    /* 48px */
+--aurad-space-16: 4rem;    /* 64px */
+--aurad-space-24: 6rem;    /* 96px */
+```
+
+
+---
+
+## Typography Drift
+
+### [HIGH] 4종 이상 폰트 패밀리 혼용
+*Occurrences: 20 | Detection: 고유 font-family > 3종*
+
+4가지 이상의 폰트 패밀리가 동시에 사용되어 디자인이 혼란스럽다.
+
+**Fix**: 최대 2종 폰트(헤딩용 + 본문용)로 줄여라. 단일 폰트도 충분히 효과적이다.
+
+
+
+### [HIGH] 폰트 크기 과다 (8종 이상)
+*Occurrences: 9 | Detection: 고유 폰트 크기 > 8종*
+
+8가지 이상의 폰트 크기가 사용되어 시각적 위계가 무너진다.
+
+**Fix**: 모듈러 스케일 6단계 이하로 제한하고 CSS 변수로 관리하라.
+
+```css
+/* 권장 폰트 크기 스케일 (6단계) */
+--aurad-text-xs:   0.75rem;   /* 12px */
+--aurad-text-sm:   0.875rem;  /* 14px */
+--aurad-text-base: 1rem;      /* 16px */
+--aurad-text-lg:   1.125rem;  /* 18px */
+--aurad-text-xl:   1.25rem;   /* 20px */
+--aurad-text-2xl:  1.5rem;    /* 24px */
+```
+
+
+### [MEDIUM] 너무 좁은 행간 (< 1.3)
+*Occurrences: 67 | Detection: 평균 line-height ratio < 1.3*
+
+행간이 1.3 미만으로 텍스트가 뭉쳐 보이고 가독성이 낮다.
+
+**Fix**: 본문 텍스트 행간을 1.5-1.75로 설정하라.
+
+```css
+/* ❌ 드리프트 */
+p { line-height: 1.2; }
+
+/* ✅ 수정 */
+p { line-height: var(--aurad-leading-normal); }  /* 1.5 */
+```
+
+
+### [MEDIUM] 비표준 폰트 크기 사용
+*Occurrences: 13 | Detection: 모듈러 스케일 준수율 < 60%*
+
+15px, 17px, 22px 등 표준 모듈러 스케일에 없는 크기가 사용된다.
+
+**Fix**: [12,14,16,18,20,24,30,36,48]px 표준값 중 가장 가까운 값으로 교체하라.
+
+
+
+---
+
+## Color Drift
+
+### [CRITICAL] 하드코딩된 색상값 (HEX/RGB 직접 사용)
+*Occurrences: 11 | Detection: 인라인 스타일 또는 클래스에 HEX/RGB 리터럴 존재*
+
+#3b82f6, rgb(59, 130, 246) 등의 리터럴 값이 코드에 직접 사용된다.
+
+**Fix**: 모든 하드코딩 색상을 CSS 변수로 교체하라. 다크모드, 브랜드 변경 대응 불가능.
+
+```css
+/* ❌ 드리프트 */
+color: #1e293b;
+background: rgb(248, 250, 252);
+
+/* ✅ 수정 */
+color: var(--aurad-fg);
+background: var(--aurad-surface);
+```
+
+
+### [HIGH] 고유 색상값 과다 (30종 이상)
+*Occurrences: 11 | Detection: 렌더링된 고유 색상 > 30종*
+
+30가지 이상의 서로 다른 색상값이 사용되어 색상 시스템이 없는 것과 같다.
+
+**Fix**: semantic color 토큰 10개 이하로 팔레트를 정리하고 CSS 변수로 참조하라.
+
+```css
+/* 권장 색상 팔레트 구조 */
+--aurad-primary:    oklch(0.55 0.15 250);  /* #3b82f6 */
+--aurad-fg:         oklch(0.25 0.02 250);  /* #1e293b */
+--aurad-surface:    oklch(0.98 0.005 250); /* #f8fafc */
+--aurad-border:     oklch(0.85 0.01 250);  /* #cbd5e1 */
+--aurad-error:      oklch(0.55 0.20 25);   /* #ef4444 */
+--aurad-success:    oklch(0.60 0.15 150);  /* #22c55e */
+```
+
+
+---
+
+## Radius Drift
+
+### [MEDIUM] Border-radius 불일치
+*Occurrences: 172 | Detection: 고유 border-radius > 5종 (0 제외)*
+
+버튼, 카드, 입력 등 각 요소가 서로 다른 border-radius를 사용한다.
+
+**Fix**: radius 토큰 3-4개로 정의하고 일관되게 적용하라.
+
+```css
+--aurad-radius-sm: 4px;
+--aurad-radius-md: 8px;   /* 기본 — 버튼, 입력 */
+--aurad-radius-lg: 12px;  /* 카드 */
+--aurad-radius-full: 9999px;  /* pill 버튼 */
+```
+
+
+---
+
+## Motion Drift
+
+### [CRITICAL] prefers-reduced-motion 미적용
+*Occurrences: 87 | Detection: CSS에 prefers-reduced-motion 규칙 없음*
+
+모든 애니메이션에 접근성 미디어 쿼리가 없다. WCAG 2.1 AA 위반 가능.
+
+**Fix**: 전역 CSS에 prefers-reduced-motion 블록을 추가하라.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+
+### [HIGH] Layout 속성 애니메이션 (성능 문제)
+*Occurrences: 24 | Detection: transition에 width/height/top/left 포함*
+
+width, height, top, left 등 레이아웃을 재계산하는 속성이 애니메이션된다.
+
+**Fix**: transform: translateX/Y, scale과 opacity만 애니메이션하라. GPU 합성 레이어 활용.
+
+```css
+/* ❌ 성능 드리프트 */
+transition: width 0.3s, height 0.3s;
+
+/* ✅ GPU 가속 */
+transition: transform 0.3s, opacity 0.3s;
+```
+

package/skill/references/principles.md

@@ -0,0 +1,149 @@
+# AuraDKit — Design Principles Reference
+
+> Derived from 15 principles across 7 design axes.
+
+## motion
+
+### transform/opacity만 애니메이션
+*Confidence: 95% | Threshold: 8.6/10*
+
+GPU 합성 레이어(transform, opacity)만 애니메이션하면 60fps를 유지할 수 있다.
+
+> ⚠ Anti-pattern: width/height/top/left 애니메이션은 레이아웃 재계산으로 janky.
+
+
+### prefers-reduced-motion 반드시 존중
+*Confidence: 42% | Threshold: 6.6/10*
+
+모든 애니메이션에 prefers-reduced-motion 미디어 쿼리를 적용해야 한다.
+
+> ⚠ Anti-pattern: 미적용 시 전정 장애 사용자에게 심각한 불편. WCAG 위반.
+
+
+---
+
+## typography
+
+### 2폰트 페어링이 이상적
+*Confidence: 86% | Threshold: 7.6/10*
+
+폰트 패밀리 2개(헤딩+본문)가 가장 일관성 있고 개성 있는 조합이다.
+
+> ⚠ Anti-pattern: 4종 이상: 혼란. 단일: 무난하나 개성 없음.
+
+
+### 모듈러 스케일 80%+ 준수
+*Confidence: 80% | Threshold: 7/10*
+
+[12,14,16,18,20,24,30,36,48,60,72]px 표준값 80% 이상 사용 시 스케일 시스템이 인식된다.
+
+> ⚠ Anti-pattern: 임의 크기(15px, 17px, 22px)의 혼용은 스케일 인식을 깨뜨린다.
+
+
+### 본문 행간 1.4-1.75 황금 범위
+*Confidence: 69% | Threshold: 7.5/10*
+
+행간이 1.4-1.75 사이일 때 가독성과 시각적 리듬이 최적화된다.
+
+> ⚠ Anti-pattern: 행간 < 1.2: 텍스트 뭉침. 행간 > 2.0: 분절감.
+
+
+---
+
+## visual-hierarchy
+
+### 단일 H1 + Hero + CTA 조합
+*Confidence: 85% | Threshold: 7.1/10*
+
+페이지당 H1 하나, Hero 섹션, CTA 버튼이 함께 있을 때 시선 집중도가 최대화된다.
+
+> ⚠ Anti-pattern: H1이 2개 이상이면 SEO와 시각적 계층 모두 손상된다.
+
+
+### H1:본문 크기 비율 2.5-4.5x
+*Confidence: 47% | Threshold: 6.5/10*
+
+헤딩이 본문의 2.5~4.5배 크기일 때 시각적 계층이 가장 명확하다.
+
+> ⚠ Anti-pattern: 크기 차이가 1.5x 미만이면 계층이 모호해진다.
+
+
+---
+
+## spatial-rhythm
+
+### 4px 배수 간격 시스템 80%+ 준수
+*Confidence: 74% | Threshold: 7.6/10*
+
+모든 margin/padding/gap이 4px 배수일 때 공간 리듬이 형성된다. 80% 이상 준수가 목표.
+
+> ⚠ Anti-pattern: 임의적 간격(3px, 7px, 11px)이 많으면 디자인이 어수선해 보인다.
+
+
+### 평균 간격 12-32px 범위
+*Confidence: 60% | Threshold: 7.3/10*
+
+평균 간격이 12-32px 범위일 때 밀도 균형이 적절하다.
+
+> ⚠ Anti-pattern: 평균 < 8px: 답답함. 평균 > 48px: 내용 부족으로 보임.
+
+
+---
+
+## layout
+
+### 최소 3개 미디어 쿼리 브레이크포인트
+*Confidence: 73% | Threshold: 6.7/10*
+
+모바일/태블릿/데스크톱 3단계 이상의 반응형 구조가 필요하다.
+
+> ⚠ Anti-pattern: 브레이크포인트 없음: 모바일에서 레이아웃 붕괴.
+
+
+### header/nav/main/footer 시맨틱 구조
+*Confidence: 63% | Threshold: 7.2/10*
+
+4가지 랜드마크(header, nav, main, footer)가 있으면 접근성과 SEO가 향상된다.
+
+> ⚠ Anti-pattern: 모두 div로만 구성 시 스크린리더 탐색 불가.
+
+
+---
+
+## component
+
+### 컴포넌트 스타일 일관성 80%+
+*Confidence: 57% | Threshold: 6.5/10*
+
+버튼 border-radius, 카드 스타일이 80% 이상 일관되어야 한다.
+
+> ⚠ Anti-pattern: 각 컴포넌트마다 다른 radius를 쓰면 시스템이 아닌 수집품처럼 보인다.
+
+
+### 4상태 완전 구현 (default/loading/empty/error)
+*Confidence: 10% | Threshold: 4.9/10*
+
+모든 데이터 표시 컴포넌트는 4가지 상태를 모두 처리해야 한다.
+
+> ⚠ Anti-pattern: loading/empty/error 미구현 시 실제 사용에서 빈 화면 또는 크래시.
+
+
+---
+
+## color
+
+### CSS 커스텀 프로퍼티 2종 이상
+*Confidence: 56% | Threshold: 7.1/10*
+
+색상을 CSS 변수(--color-primary 등)로 관리하면 테마 변경이 용이하다.
+
+> ⚠ Anti-pattern: 하드코딩 색상값 사용 시 다크모드, 브랜드 변경 대응 불가.
+
+
+### WCAG AA 대비율 90%+ 통과
+*Confidence: 33% | Threshold: 6.3/10*
+
+텍스트-배경 색상 쌍의 90% 이상이 4.5:1 이상 대비율을 유지해야 한다.
+
+> ⚠ Anti-pattern: muted 텍스트를 작은 크기에 사용하면 AA 미달 가능.
+