windowook-skills 1.0.0

package/README.md

@@ -0,0 +1,88 @@
+# Claude-Code-Lab Skills Installer
+
+Claude Code 스킬을 개별 또는 번들로 설치하는 CLI 도구입니다. (by window-ook)
+
+<br>
+
+## 📖 사용법
+
+### 스킬 & 번들 목록 보기
+
+```bash
+npx windowook-skills list
+```
+
+### 개별 스킬 설치
+
+```bash
+npx windowook-skills install <skill-name>
+```
+
+### 번들 설치
+
+```bash
+npx windowook-skills install --bundle <bundle-name>
+```
+
+### 모든 스킬 설치
+
+```bash
+npx windowook-skills install --all
+```
+
+<br>
+
+## 📦 번들
+
+| 번들         | 설명                         | 포함 스킬                                                                               |
+| ------------ | ---------------------------- | --------------------------------------------------------------------------------------- |
+| `analysis`   | 코드 분석 & 시각화 스킬 그룹 | `code-flow-report`, `excalidraw`                                                        |
+| `practical`  | 범용 실무 스킬 그룹          | `save-context`, `slack-thread`, `clean-tailwind`, `execute-figma-plan`, `figma-plan`, `figma-reference-plan` |
+
+<br>
+
+## 🔧 개별 스킬
+
+| 스킬                   | 설명                                         |
+| ---------------------- | -------------------------------------------- |
+| `code-flow-report`     | 코드 플로우 시각화 리포트 생성               |
+| `excalidraw`           | Excalidraw 아키텍처 다이어그램 생성          |
+| `save-context`         | 작업 컨텍스트 저장 및 복구                   |
+| `slack-thread`         | Slack 스레드용 문서 정리 (회의록/건의/보고서) |
+| `clean-tailwind`       | Tailwind CSS 클래스 순서 정렬                |
+| `execute-figma-plan`   | Figma 구현 계획서 실행                       |
+| `figma-plan`           | Figma 디자인 분석 → 구현 계획서 작성         |
+| `figma-reference-plan` | Figma + 참조 코드 기반 구현 계획서 작성      |
+
+<br>
+
+## 📍 설치 위치
+
+스킬은 현재 디렉토리의 `.claude/skills/` 폴더에 설치됩니다.
+
+```
+your-project/
+└── .claude/
+    └── skills/
+        └── excalidraw/    # 설치된 스킬
+            ├── SKILL.md
+            └── references/
+```
+
+<br>
+
+## 💡 예시
+
+```bash
+# 개별 스킬 설치
+npx windowook-skills install excalidraw
+
+# 코드 분석 번들 설치
+npx windowook-skills install --bundle analysis
+
+# 실무 번들 설치
+npx windowook-skills install --bundle practical
+
+# 전체 설치
+npx windowook-skills install --all
+```

package/bin/cli.js

@@ -0,0 +1,344 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const SKILLS_DIR = path.join(__dirname, '..', 'skills');
+const TARGET_DIR = path.join(process.cwd(), '.claude', 'skills');
+
+const C = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  orange: '\x1b[38;5;208m',
+  gold: '\x1b[38;5;220m',
+  peach: '\x1b[38;5;216m',
+  gray: '\x1b[38;5;245m',
+  lightBlue: '\x1b[38;5;117m',
+  pink: '\x1b[38;5;213m',
+};
+
+function printLogo() {
+  const pkg = require(path.join(__dirname, '..', 'package.json'));
+
+  log('');
+  log(`  ${C.orange}     ╲   │   ╱${C.reset}`);
+  log(`  ${C.orange}      ╲  │  ╱${C.reset}`);
+  log(`  ${C.orange}  ────  ${C.gold}${C.bold}✦${C.reset}${C.orange}  ────${C.reset}`);
+  log(`  ${C.orange}      ╱  │  ╲${C.reset}`);
+  log(`  ${C.orange}     ╱   │   ╲${C.reset}`);
+  log('');
+  log(`  ${C.gold}${C.bold}  Claude-Code-Lab${C.reset}`);
+  log(`  ${C.peach}  by window-ook${C.reset}`);
+  log(`  ${C.gray}  v${pkg.version}${C.reset}`);
+  log('');
+}
+
+const BUNDLES = {
+  analysis: {
+    name: 'Analysis',
+    emoji: '🔬',
+    description: '코드 분석 & 시각화 스킬 그룹',
+    skills: ['code-flow-report', 'excalidraw'],
+  },
+  practical: {
+    name: 'Practical',
+    emoji: '🛠️',
+    description: '범용 실무 스킬 그룹',
+    skills: [
+      'save-context',
+      'slack-thread',
+      'clean-tailwind',
+      'execute-figma-plan',
+      'figma-plan',
+      'figma-reference-plan',
+    ],
+  },
+};
+
+const SKILL_DESCRIPTIONS = {
+  'code-flow-report': '코드 플로우 시각화 리포트 생성',
+  'excalidraw': 'Excalidraw 아키텍처 다이어그램 생성',
+  'save-context': '작업 컨텍스트 저장 및 복구',
+  'slack-thread': 'Slack 스레드용 문서 정리 (회의록/건의/보고서)',
+  'clean-tailwind': 'Tailwind CSS 클래스 순서 정렬',
+  'execute-figma-plan': 'Figma 구현 계획서 실행',
+  'figma-plan': 'Figma 디자인 분석 → 구현 계획서 작성',
+  'figma-reference-plan': 'Figma + 참조 코드 기반 구현 계획서 작성',
+};
+
+function log(msg) {
+  console.log(msg);
+}
+
+function getAvailableSkills() {
+  if (!fs.existsSync(SKILLS_DIR)) return [];
+
+  return fs.readdirSync(SKILLS_DIR).filter(name => {
+    const skillPath = path.join(SKILLS_DIR, name);
+    return fs.statSync(skillPath).isDirectory() &&
+      fs.existsSync(path.join(skillPath, 'SKILL.md'));
+  });
+}
+
+function collectFiles(dir, base = '') {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const rel = base ? `${base}/${entry.name}` : entry.name;
+
+    if (entry.isDirectory()) {
+      results.push({ type: 'dir', path: rel });
+      results.push(...collectFiles(path.join(dir, entry.name), rel));
+    } else {
+      results.push({ type: 'file', path: rel });
+    }
+  }
+
+  return results;
+}
+
+function copyDirRecursive(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) copyDirRecursive(srcPath, destPath);
+    else fs.copyFileSync(srcPath, destPath);
+  }
+}
+
+function installSkill(skillName, { verbose = false } = {}) {
+  const skillSrc = path.join(SKILLS_DIR, skillName);
+  const skillDest = path.join(TARGET_DIR, skillName);
+
+  if (!fs.existsSync(skillSrc)) {
+    log(`  ${C.red}✗ 오류: '${skillName}' 스킬을 찾을 수 없습니다.${C.reset}`);
+    return false;
+  }
+
+  if (fs.existsSync(skillDest)) {
+    log(`  ${C.yellow}⚠ ${skillName} 이미 존재합니다. 덮어씁니다.${C.reset}`);
+    fs.rmSync(skillDest, { recursive: true });
+  }
+
+  log(`  ${C.orange}🚀 Installing skill: ${C.bold}${skillName}${C.reset}`);
+
+  // 파일별 상세 로그
+  const files = collectFiles(skillSrc);
+
+  for (const f of files) {
+    if (f.type === 'dir') log(`  ${C.gray}📂 Copying directory: ${C.lightBlue}${f.path}/${C.reset}`);
+    else log(`  ${C.green}✓${C.reset} ${C.bold}Copied: ${C.lightBlue}${f.path}${C.reset}`);
+  }
+
+  fs.mkdirSync(TARGET_DIR, { recursive: true });
+  copyDirRecursive(skillSrc, skillDest);
+
+  return true;
+}
+
+function installBundle(bundleName) {
+  const bundle = BUNDLES[bundleName];
+
+  if (!bundle) {
+    log(`\n  ${C.red}✗ 오류: '${bundleName}' 번들을 찾을 수 없습니다.${C.reset}`);
+    log(`  ${C.yellow}사용 가능한 번들:${C.reset}`);
+    Object.entries(BUNDLES).forEach(([key, b]) => {
+      log(`    ${C.cyan}${b.emoji} ${key}${C.reset} — ${b.description}`);
+    });
+    log('');
+    process.exit(1);
+  }
+
+  log('');
+  log(`  ${C.gold}${bundle.emoji} Installing bundle: ${C.bold}${bundle.name}${C.reset}`);
+  log(`  ${C.gold}${bundle.description}${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+  log(`  ${C.pink}📦 Installing ${bundle.skills.length} skills...${C.reset}`);
+  log('');
+
+  let successCount = 0;
+  for (const skill of bundle.skills) {
+    if (installSkill(skill)) successCount++;
+    log('');
+  }
+
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+  log(`  ${C.green}✅ 완료: ${C.bold}${successCount}/${bundle.skills.length}${C.reset}${C.green}개 스킬 설치됨${C.reset}`);
+  log(`  ${C.cyan}📍 경로: ${TARGET_DIR}${C.reset}`);
+  log('');
+}
+
+function listSkills() {
+  const skills = getAvailableSkills();
+
+  printLogo();
+
+  if (skills.length === 0) {
+    log(`  ${C.yellow}설치 가능한 스킬이 없습니다.${C.reset}`);
+    return;
+  }
+
+  // 번들 목록
+  log(`  ${C.orange}📦 Bundles${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+
+  Object.entries(BUNDLES).forEach(([key, bundle]) => {
+    log(`  ${bundle.emoji} ${C.bold}${C.gold}${key}${C.reset} ${C.gray}— ${bundle.description} (${bundle.skills.length}개)${C.reset}`);
+    bundle.skills.forEach(s => {
+      const desc = SKILL_DESCRIPTIONS[s] || '';
+      log(`     ${C.gray}└─${C.reset} ${C.lightBlue}${s}${C.reset} ${C.dim}${desc}${C.reset}`);
+    });
+    log('');
+  });
+
+  // 개별 스킬 목록
+  log(`  ${C.orange}🔧 Skills${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+
+  skills.forEach(skill => {
+    const desc = SKILL_DESCRIPTIONS[skill] || '설명 없음';
+    log(`  ${C.green}●${C.reset} ${C.bold}${skill}${C.reset}`);
+    log(`    ${C.dim}${desc}${C.reset}`);
+  });
+
+  log('');
+}
+
+function showHelp() {
+  printLogo();
+  log(`  ${C.orange}📖 Usage${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+  log(`  ${C.white}npx windowook-skills ${C.green}list${C.reset}                    ${C.dim}스킬 & 번들 목록${C.reset}`);
+  log(`  ${C.white}npx windowook-skills ${C.green}install ${C.lightBlue}<name>${C.reset}          ${C.dim}개별 스킬 설치${C.reset}`);
+  log(`  ${C.white}npx windowook-skills ${C.green}install ${C.gold}--bundle ${C.lightBlue}<name>${C.reset}  ${C.dim}번들 설치${C.reset}`);
+  log(`  ${C.white}npx windowook-skills ${C.green}install ${C.gold}--all${C.reset}              ${C.dim}모든 스킬 설치${C.reset}`);
+  log('');
+  log(`  ${C.orange}📦 Bundles${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+
+  Object.entries(BUNDLES).forEach(([key, bundle]) => {
+    log(`  ${bundle.emoji} ${C.bold}${C.gold}${key}${C.reset}  ${C.dim}${bundle.description} (${bundle.skills.length}개)${C.reset}`);
+  });
+
+  log('');
+  log(`  ${C.orange}💡 Examples${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+  log(`  ${C.cyan}$ npx windowook-skills install excalidraw${C.reset}`);
+  log(`  ${C.cyan}$ npx windowook-skills install --bundle analysis${C.reset}`);
+  log(`  ${C.cyan}$ npx windowook-skills install --all${C.reset}`);
+  log('');
+  log(`  ${C.orange}📍 Install Path${C.reset}`);
+  log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+  log(`  ${C.dim}현재 디렉토리의 ${C.lightBlue}.claude/skills/${C.reset}${C.dim} 폴더에 설치됩니다.${C.reset}`);
+  log('');
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  if (!command || command === 'help' || command === '--help' || command === '-h') {
+    showHelp();
+    return;
+  }
+
+  if (command === 'list' || command === 'ls') {
+    listSkills();
+    return;
+  }
+
+  if (command === 'install' || command === 'i') {
+    const option = args[1];
+
+    if (!option) {
+      log(`\n  ${C.red}✗ 오류: 설치할 스킬 또는 옵션을 입력해주세요.${C.reset}`);
+      log(`  ${C.dim}사용법: npx windowook-skills install <skill-name>${C.reset}`);
+      log(`  ${C.dim}        npx windowook-skills install --bundle <bundle-name>${C.reset}`);
+      log(`  ${C.dim}        npx windowook-skills install --all${C.reset}`);
+      log(`  ${C.dim}목록 보기: npx windowook-skills list${C.reset}\n`);
+      process.exit(1);
+    }
+
+    // --all: 모든 스킬
+    if (option === '--all' || option === '-a') {
+      const skills = getAvailableSkills();
+
+      log('');
+      log(`  ${C.gold}🚀 Installing all skills...${C.reset}`);
+      log(`  ${C.pink}📦 Installing ${skills.length} skills...${C.reset}`);
+      log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+      log('');
+
+      let successCount = 0;
+      for (const skill of skills) {
+        if (installSkill(skill)) successCount++;
+        log('');
+      }
+
+      log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+      log(`  ${C.green}✅ 완료: ${C.bold}${successCount}/${skills.length}${C.reset}${C.green}개 스킬 설치됨${C.reset}`);
+      log(`  ${C.cyan}📍 경로: ${TARGET_DIR}${C.reset}`);
+      log('');
+      return;
+    }
+
+    // --bundle: 번들 설치
+    if (option === '--bundle' || option === '-b') {
+      const bundleName = args[2];
+
+      if (!bundleName) {
+        log(`\n  ${C.red}✗ 오류: 번들 이름을 입력해주세요.${C.reset}`);
+        log(`  ${C.yellow}사용 가능한 번들:${C.reset}`);
+        Object.entries(BUNDLES).forEach(([key, bundle]) => {
+          log(`    ${C.cyan}${bundle.emoji} ${key}${C.reset} — ${bundle.description}`);
+        });
+        log('');
+        process.exit(1);
+      }
+
+      installBundle(bundleName);
+      return;
+    }
+
+    // 개별 스킬 설치
+    const skillName = option;
+    const available = getAvailableSkills();
+
+    if (!available.includes(skillName)) {
+      log(`\n  ${C.red}✗ 오류: '${skillName}' 스킬을 찾을 수 없습니다.${C.reset}`);
+      log(`  ${C.yellow}사용 가능한 스킬:${C.reset}`);
+      available.forEach(s => log(`    ${C.green}●${C.reset} ${s}`));
+      log(`\n  ${C.dim}번들 설치: npx windowook-skills install --bundle <name>${C.reset}\n`);
+      process.exit(1);
+    }
+
+    log('');
+    installSkill(skillName);
+    log('');
+    log(`  ${C.gray}${'─'.repeat(45)}${C.reset}`);
+    log(`  ${C.green}✅ 설치 완료${C.reset}`);
+    log(`  ${C.cyan}📍 경로: ${TARGET_DIR}/${skillName}${C.reset}`);
+    log('');
+    return;
+  }
+
+  log(`\n  ${C.red}✗ 알 수 없는 명령어: ${command}${C.reset}`);
+  showHelp();
+  process.exit(1);
+}
+
+main();

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "windowook-skills",
+  "version": "1.0.0",
+  "description": "Claude Code 스킬을 개별 또는 번들로 설치하는 CLI 도구 (by window-ook)",
+  "bin": {
+    "windowook-skills": "./bin/cli.js"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "skills",
+    "ai",
+    "cli",
+    "window-ook"
+  ],
+  "author": "window-ook",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/window-ook/claude-code-lab"
+  },
+  "files": [
+    "bin",
+    "skills",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/skills/clean-tailwind/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: clean-tailwind
+description: Use when refactoring Tailwind CSS class order in React/Next.js components, when className strings feel disorganized, or when establishing consistent CSS ordering conventions across a codebase
+argument-hint: '[파일 또는 디렉토리 경로]'
+disable-model-invocation: true
+---
+
+# Clean Tailwind
+
+## Overview
+
+Tailwind CSS 클래스를 일관된 순서로 정렬하는 기법입니다. **핵심 원칙**: 시각적 렌더링 순서(바깥→안쪽→콘텐츠)를 따릅니다.
+
+## When to Use
+
+**Use when:**
+
+- `className` 문자열이 길고 무질서해 보일 때
+- 팀 코드 리뷰에서 Tailwind 순서 일관성 문제가 제기될 때
+- 새 프로젝트에 Tailwind 정렬 규칙을 도입할 때
+
+**Don't use for:**
+
+- shadcn/ui, Radix 등 외부 라이브러리 컴포넌트
+- CSS-in-JS나 styled-components 프로젝트
+
+## Quick Reference
+
+| 순위 | 카테고리       | 속성                                                                                        |
+| ---- | -------------- | ------------------------------------------------------------------------------------------- |
+| 0    | 커스텀 CSS     | `card-tilt`, `hover-button` 등 프로젝트 커스텀 클래스 (맨 앞)                               |
+| 1    | 포지션         | `absolute`, `relative`, `fixed`, `sticky`, `static`, `inset-*`, `top-*`, `right-*`, `bottom-*`, `left-*`, `z-*` |
+| 2    | 레이아웃       | `w-*`, `h-*`, `size-*`, `min-w-*`, `max-w-*`, `min-h-*`, `max-h-*`, `overflow-*`, `aspect-*`, `container`, `block`, `inline-*`, `hidden`, `visible`, `invisible` |
+| 3    | 공백           | `m-*`, `mx-*`, `my-*`, `mt-*`, `mr-*`, `mb-*`, `ml-*`, `p-*`, `px-*`, `py-*`, `pt-*`, `pr-*`, `pb-*`, `pl-*`, `gap-*`, `gap-x-*`, `gap-y-*`, `space-x-*`, `space-y-*` |
+| 4    | 외곽 효과      | `border-*`, `rounded-*`, `shadow-*`, `ring-*`, `outline-*`, `divide-*` |
+| 5    | 배경색         | `bg-*`, `opacity-*`, `backdrop-*`, `gradient-*`, `from-*`, `via-*`, `to-*` |
+| 6    | Flex/Grid      | `flex`, `flex-row`, `flex-col`, `flex-wrap`, `flex-1`, `grow`, `shrink`, `basis-*`, `grid`, `grid-cols-*`, `grid-rows-*`, `col-span-*`, `row-span-*`, `justify-*`, `items-*`, `self-*`, `place-*`, `order-*` |
+| 7    | 폰트           | `text-*`, `font-*`, `leading-*`, `tracking-*`, `whitespace-*`, `truncate`, `line-clamp-*`, `break-*`, `underline`, `line-through`, `no-underline`, `uppercase`, `lowercase`, `capitalize`, `italic`, `not-italic`, `list-*`, `indent-*` |
+| 8    | 애니메이션     | `animate-*` |
+| 9    | 트랜지션       | `transition-*`, `duration-*`, `ease-*`, `delay-*` |
+| -    | 인터랙션       | `cursor-*`, `pointer-events-*`, `select-*`, `touch-*`, `scroll-*`, `snap-*`, `will-change-*` — 해당 속성 바로 뒤에 배치 (hover:/focus:와 동일 위치) |
+| -    | 조건부         | `hover:`, `focus:`, `active:`, `disabled:`, `group-hover:`, `peer-*:` — 해당 기본 클래스 바로 뒤에 배치 |
+| -    | 반응형         | `sm:`, `md:`, `lg:`, `xl:`, `2xl:` — 해당 기본 클래스 바로 뒤에 배치 |
+
+## Core Pattern
+
+### Before/After
+
+```tsx
+// ❌ Before: 무질서한 순서
+className =
+  'px-4 hover:bg-blue-600 py-2 bg-blue-500 text-white rounded-lg font-bold';
+
+// ✅ After: 정렬된 순서 (외곽→배경→공백→폰트)
+className =
+  'rounded-lg bg-blue-500 hover:bg-blue-600 px-4 py-2 font-bold text-white';
+```
+
+### 조건부 클래스 배치
+
+조건부 클래스(`hover:`, `focus:`, `disabled:`)는 **해당 기본 클래스 바로 뒤**에 배치:
+
+```tsx
+// ✅ 올바름: bg-blue-500 바로 뒤에 hover:bg-blue-600
+className = 'rounded-lg bg-blue-500 hover:bg-blue-600 px-4 py-2';
+
+// ❌ 잘못됨: hover가 bg와 분리됨
+className = 'rounded-lg bg-blue-500 px-4 py-2 hover:bg-blue-600';
+```
+
+### 동일 크기는 size-\* 사용
+
+```tsx
+// ❌ Before
+className = 'w-8 h-8';
+
+// ✅ After
+className = 'size-8';
+```
+
+## Dynamic Classes
+
+### 템플릿 리터럴 처리
+
+동적 클래스가 포함된 경우, 정적 부분만 정렬하고 동적 부분은 원래 위치 유지:
+
+```tsx
+// 동적 클래스 (${cardColor})는 해당 카테고리 위치에 배치
+className={`card-tilt size-full p-4 border-6 ${cardColorByGrade} rounded-2xl flex flex-col`}
+//          커스텀    레이아웃  공백  외곽    동적(외곽/배경)    외곽      Flex
+```
+
+### 조건부 스타일 객체
+
+조건부 스타일 객체는 순서 변경 없이 유지:
+
+```tsx
+className={cn(
+  "rounded-lg bg-white px-4 py-2",  // 정적 부분만 정렬
+  isDarkMode && "bg-gray-800",       // 조건부는 그대로
+  isActive && "ring-2 ring-blue-500" // 조건부는 그대로
+)}
+```
+
+## Common Mistakes
+
+| 실수                          | 수정                                  |
+| ----------------------------- | ------------------------------------- |
+| 공백이 외곽보다 먼저          | `px-4 rounded-lg` → `rounded-lg px-4` |
+| 포지션이 레이아웃 뒤에        | `w-full relative` → `relative w-full` |
+| 조건부가 기본 클래스와 분리됨 | 기본 클래스 바로 뒤로 이동            |
+| w-8 h-8 중복                  | `size-8`로 통합                       |
+
+## Batch Workflow
+
+대규모 리팩토링 시 권장 워크플로우:
+
+1. **브랜치 생성**: `git checkout -b refactor/tailwind-class-order`
+2. **배치 분할**: 5-8개 파일/배치로 나누기
+3. **배치 작업**: 파일 읽기 → 정렬 → 저장 → UI 확인
+4. **배치 커밋**: 각 배치별 커밋으로 롤백 용이성 확보
+5. **최종 검증**: E2E 테스트 + 빌드 확인
+
+## Red Flags
+
+작업 시 주의 신호:
+
+- 외부 라이브러리(shadcn-ui 등) 컴포넌트 수정하려 함
+- 동적 클래스 로직을 변경하려 함
+- 테스트 없이 여러 배치 연속 작업
+- 커밋 없이 대량 파일 수정