개요
Impeccable은 공유 디자인 어휘, 도메인 참조 및 안티패턴 규칙을 제공하여 AI 모델의 프론트엔드 디자인 출력을 향상합니다. 23개의 명령이 포함되어 있으며, 다양한 코딩 어시스턴트의 스킬로 사용할 수 있습니다.
README 미리보기
# Impeccable\n\nThe vocabulary you didn't know you needed. 1 skill, 23 commands, and curated anti-patterns for impeccable frontend design.\n\n> **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.\n\n## Why Impeccable?\n\nAnthropic's [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) was the first widely-used design skill for Claude. Impeccable started from there.\n\nEvery model trained on the same SaaS templates. Skip the guidance and you get the same handful of tells on every project: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, the rounded-square icon tile above every heading.\n\nImpeccable adds:\n- **7 domain reference files** ([view source](skill/)). Typography, color, motion, spatial, interaction, responsive, UX writing. Load on every command, alongside a brand-vs-product register that adjusts the defaults.\n- **23 commands.** A shared design vocabulary with your AI: `polish`, `audit`, `critique`, `distill`, `animate`, `bolder`, `quieter`, and more.\n- **27 deterministic anti-pattern rules** plus a 12-rule LLM critique pass. CLI and browser extension run the deterministic ones with no LLM and no API key. Each is tied to specific design guidance the skill teaches against.\n\n## What's Included\n\n### The Skill: impeccable\n\nA comprehensive design skill with 7 domain-specific references ([view skill](skill/SKILL.src.md)):\n\n| Reference | Covers |\n|-----------|--------|\n| [typography](skill/reference/typography.md) | Type systems, font pairing, modular scales, OpenType |\n| [color-and-contrast](skill/reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility |\n| [spatial-design](skill/reference/spatial-design.md) | Spacing systems, grids, visual hierarchy |\n| [motion-design](skill/reference/motion-design.md) | Easing curves, staggering, reduced motion |\n| [interaction-design](skill/refer
FAQ (5)
문제 해결impeccable의 detect.mjs를 실행할 때 'bundled detector not found' 오류가 발생하는 이유는 무엇인가요?
이 오류는 npx skills 설치 프로그램이 스킬 하위 트리(skill subtree)만 배포하고 검출기 엔진(detector engine)이 누락되었기 때문에 발생했습니다. 최신 릴리스에서 문제가 해결되었으므로 스킬을 업데이트하세요. 업데이트가 불가능한 경우 다음 해결 방법을 사용하세요: mkdir -p .agents/skills/impeccable/scripts/detector && ln -sf "$(pwd)/node_modules/impeccable/cli/engine/detect-antipatterns.mjs" .agents/skills/impeccable/scripts/detector/detect-antipatterns.mjs. 이 명령은 impeccable npm 패키지의 엔진을 예상 위치에 심볼릭 링크로 연결합니다.
문제 해결critique-storage.mjs 스크립트가 Windows에서 출력을 반환하지 않는 이유는 무엇인가요?
스크립트의 진입점 가드가 import.meta.url(Windows에서는 슬래시 사용)과 file://${process.argv[1]}(백슬래시)를 비교했기 때문에 동등성 검사가 실패하여 main()이 호출되지 않았습니다. 이 버그는 v3.1.1에서 구분 기호를 정규화하는 pathToFileURL(process.argv[1]).href로 전환하여 수정되었습니다. 다음 명령어로 스킬을 업데이트하십시오: npx skills add pbakaus/impeccable
문제 해결왜 pnpm workspace 내부에서 impeccable live-server --background가 타임아웃을 보고하고 'stop'은 서버를 찾지 못하나요?
알려진 루트 해석 버그 (skill 4.6.0 / engine 0.1.15): pnpm 워크스페이스 내부에서 부모 프로세스와 분리된 백그라운드 자식 프로세스가 서로 다른 프로젝트 루트를 해석하므로, server.json이 명령을 실행한 디렉터리가 아닌 형제 워크스페이스 앱(예: apps/web/.impeccable/live/server.json)에 기록됩니다. 이후 부모는 잘못된 경로를 폴링하고 Timed out waiting for live server to start.를 출력한 뒤 종료 코드 1로 종료되지만, 서버 자체는 정상입니다(curl http://127.0.0.1:8400/health가 ok를 반환). --target .을 전달해도 도움이 되지 않습니다. 이 플래그는 자식 프로세스가 생성되기 전에 소비됩니다.
해결 방법:
1. 상태 파일이 실제로 생성된 위치 찾기: find . -path '*/.impeccable/live/server.json'
2. 바로 그 디렉터리(형제 앱)에서 stop을 실행하여 고아 상태의 서버 중지: cd apps/web && impeccable live-server stop --keep-inject
3. 또는 포트로 프로세스 종료: lsof -nP -iTCP:8400 -sTCP:LISTEN으로 PID를 확인한 다음 kill <PID>.
4. 문제를 완전히 방지하려면 워크스페이스 루트에서 impeccable live-server를 시작하거나, 정적 목 파일을 pnpm 워크스페이스 외부의 독립 디렉터리로 이동하세요. 이 버그는 그런 환경에서는 발생하지 않습니다.
참고: 형제 앱에서 인자 없이 stop을 실행하면 잘못된 프로젝트의 진입 파일에 대해 live-inject --remove도 실행되므로, 정리할 때는 --keep-inject를 사용하세요.
문제 해결impeccable detect가 패딩 없는 내부 래퍼를 포함하는 래퍼에 대해 cramped-padding 오탐을 보고하는 이유는 무엇인가요?
impeccable ≤4.1.0에서는 cramped-padding 플러시 검사가 직계 자식만 측정합니다. 색상이 지정된 래퍼의 유일한 자식이 투명하고 텍스트가 없는 내부 div(예: container-query 크기 조정 래퍼)인 경우, 해당 내부 박스가 네 모서리 모두에 닿게 되므로 텍스트를 담고 있는 손자 요소들이 정상적인 패딩을 갖고 있더라도 규칙이 발동합니다. 해결 방법: 파일 범위 무시를 추가하세요 — ignore-value cramped-padding "*" --file <glob> — 단, 이는 해당 파일에서 실제 cramped-padding 발견 사항도 함께 억제한다는 점에 유의하세요. 영구 수정: PR #1059는 규칙이 실제로 쌓이는 자식을 둔 투명하고 텍스트가 없는 래퍼 하나를 꿰뚫어 보고(block/flow-root 또는 column flex; row-flex 자식은 top/bottom에 플러시될 수 없음) 대신 그 자식들에서 인셋을 측정하도록 합니다. 해당 PR이 릴리스되면 impeccable을 업그레이드하세요.
방법세션 간에 Impeccable critique 결과를 유지하여 해결된 문제를 다시 제기하지 않도록 하는 방법은 무엇인가?
이전 비평 출력을 저장하기 위해 수동 CRITIQUE.md 파일을 생성하세요. 새로운 /impeccable critique를 실행하기 전에, 에이전트에게 맥락을 위해 CRITIQUE.md를 읽고 검토 후 업데이트하도록 지시하세요. 이 해결 방법은 내장 지속성이 도입될 때까지 제안된 기능을 모방합니다.