{"id":39031193,"url":"https://github.com/pbakaus/impeccable","last_synced_at":"2026-05-29T06:01:17.593Z","repository":{"id":324617110,"uuid":"1097346685","full_name":"pbakaus/impeccable","owner":"pbakaus","description":"The design language that makes your AI harness better at design.","archived":false,"fork":false,"pushed_at":"2026-04-27T21:55:17.000Z","size":30757,"stargazers_count":22266,"open_issues_count":23,"forks_count":1093,"subscribers_count":44,"default_branch":"main","last_synced_at":"2026-04-27T22:25:26.369Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://impeccable.style","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pbakaus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE.md","maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-11-16T01:52:04.000Z","updated_at":"2026-04-27T22:15:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"93f78cdd-60ff-495a-974b-148d257e49fe","html_url":"https://github.com/pbakaus/impeccable","commit_stats":null,"previous_names":["pbakaus/vibe-design-plugins","pbakaus/impeccable"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/pbakaus/impeccable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pbakaus%2Fimpeccable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pbakaus%2Fimpeccable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pbakaus%2Fimpeccable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pbakaus%2Fimpeccable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pbakaus","download_url":"https://codeload.github.com/pbakaus/impeccable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pbakaus%2Fimpeccable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32441502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T17:39:37.090Z","updated_at":"2026-05-29T06:01:17.544Z","avatar_url":"https://github.com/pbakaus.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Prompt engineering","Best Picks","Repos","10x your design","others","設計 Design","Skills Catalog","🤖 AI \u0026 Machine Learning"],"sub_categories":["opencode - resources","Remix / React Router","Workflow (110)"],"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\u003e **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/reference/interaction-design.md) | Forms, focus states, loading patterns |\n| [responsive-design](skill/reference/responsive-design.md) | Mobile-first, fluid design, container queries |\n| [ux-writing](skill/reference/ux-writing.md) | Button labels, error messages, empty states |\n\n### 23 Commands\n\nAll commands are accessed through `/impeccable`:\n\n| Command | What it does |\n|---------|--------------|\n| `/impeccable craft` | Full shape-then-build flow with visual iteration |\n| `/impeccable init` | One-time setup: gather design context, write PRODUCT.md and DESIGN.md, configure live mode, recommend next steps |\n| `/impeccable document` | Generate root DESIGN.md from existing project code |\n| `/impeccable extract` | Pull reusable components and tokens into the design system |\n| `/impeccable shape` | Plan UX/UI before writing code |\n| `/impeccable critique` | UX design review: hierarchy, clarity, emotional resonance |\n| `/impeccable audit` | Run technical quality checks (a11y, performance, responsive) |\n| `/impeccable polish` | Final pass, design system alignment, and shipping readiness |\n| `/impeccable bolder` | Amplify boring designs |\n| `/impeccable quieter` | Tone down overly bold designs |\n| `/impeccable distill` | Strip to essence |\n| `/impeccable harden` | Error handling, i18n, text overflow, edge cases |\n| `/impeccable onboard` | First-run flows, empty states, activation paths |\n| `/impeccable animate` | Add purposeful motion |\n| `/impeccable colorize` | Introduce strategic color |\n| `/impeccable typeset` | Fix font choices, hierarchy, sizing |\n| `/impeccable layout` | Fix layout, spacing, visual rhythm |\n| `/impeccable delight` | Add moments of joy |\n| `/impeccable overdrive` | Add technically extraordinary effects |\n| `/impeccable clarify` | Improve unclear UX copy |\n| `/impeccable adapt` | Adapt for different devices |\n| `/impeccable optimize` | Performance improvements |\n| `/impeccable live` | Visual variant mode: iterate on elements in the browser |\n\nUse `/impeccable pin \u003ccommand\u003e` to create standalone shortcuts (e.g., `pin audit` creates `/audit`).\n\n#### Usage Examples\n\n```\n/impeccable audit blog           # Audit blog hub + post pages\n/impeccable critique landing     # UX design review\n/impeccable polish settings      # Final pass before shipping\n/impeccable harden checkout      # Add error handling + edge cases\n```\n\nOr use `/impeccable` directly with a description:\n```\n/impeccable redo this hero section\n```\n\n### Anti-Patterns\n\nThe skill includes explicit guidance on what to avoid:\n\n- Don't use overused fonts (Arial, Inter, system defaults)\n- Don't use gray text on colored backgrounds\n- Don't use pure black/gray (always tint)\n- Don't wrap everything in cards or nest cards inside cards\n- Don't use bounce/elastic easing (feels dated)\n\n## See It In Action\n\nVisit [impeccable.style](https://impeccable.style#casestudies) to see before/after case studies of real projects transformed with Impeccable commands.\n\n## Installation\n\n### Option 1: CLI installer (Recommended)\n\nFrom the root of your project, run:\n\n```bash\nnpx impeccable skills install\n```\n\nThis auto-detects your harness and writes the build compiled for it to the right location (`.claude/skills/`, `.cursor/skills/`, etc.). Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other supported tool. Reload your harness afterward.\n\nClaude Code users can alternatively install the plugin with `/plugin marketplace add pbakaus/impeccable`. The general-purpose `npx skills add pbakaus/impeccable` also works, though it installs one shared build for all harnesses rather than the one compiled for yours.\n\n### Option 2: Download from Website\n\nVisit [impeccable.style](https://impeccable.style), download the ZIP for your tool, and extract to your project.\n\n### Option 3: Copy from Repository\n\n**Cursor:**\n```bash\ncp -r dist/cursor/.cursor your-project/\n```\n\n\u003e **Note:** Cursor skills require setup:\n\u003e 1. Switch to Nightly channel in Cursor Settings → Beta\n\u003e 2. Enable Agent Skills in Cursor Settings → Rules\n\u003e\n\u003e [Learn more about Cursor skills](https://cursor.com/docs/context/skills)\n\n**Claude Code:**\n```bash\n# Project-specific\ncp -r dist/claude-code/.claude your-project/\n\n# Or global (applies to all projects)\ncp -r dist/claude-code/.claude/* ~/.claude/\n```\n\n**OpenCode:**\n```bash\ncp -r dist/opencode/.opencode your-project/\n```\n\n**Pi:**\n```bash\ncp -r dist/pi/.pi your-project/\n```\n\n**Gemini CLI:**\n```bash\ncp -r dist/gemini/.gemini your-project/\n```\n\n\u003e **Note:** Gemini CLI skills require setup:\n\u003e 1. Install preview version: `npm i -g @google/gemini-cli@preview`\n\u003e 2. Run `/settings` and enable \"Skills\"\n\u003e 3. Run `/skills list` to verify installation\n\u003e\n\u003e [Learn more about Gemini CLI skills](https://geminicli.com/docs/cli/skills/)\n\n**Codex CLI:**\n```bash\n# Project-local\ncp -r dist/agents/.agents your-project/\n\n# Or user-wide\nmkdir -p ~/.agents/skills\ncp -r dist/agents/.agents/skills/* ~/.agents/skills/\n```\n\n\u003e The asset-producer subagent ships nested inside the skill's own `agents/` folder, which Codex auto-discovers. No separate `.codex/agents/` copy is needed.\n\n**GitHub Copilot:**\n```bash\ncp -r dist/github/.github your-project/\n```\n\n**Trae:**\n```bash\n# Trae China (domestic version)\ncp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/\n\n# Trae International\ncp -r dist/trae/.trae/skills/* ~/.trae/skills/\n```\n\n\u003e **Note:** Trae has two versions with different config directories:\n\u003e - **Trae China**: `~/.trae-cn/skills/`\n\u003e - **Trae International**: `~/.trae/skills/`\n\u003e\n\u003e After copying, restart Trae IDE to activate the skills.\n\n**Rovo Dev:**\n```bash\n# Project-specific\ncp -r dist/rovo-dev/.rovodev your-project/\n\n# Or global (applies to all projects)\ncp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/\n```\n\n**Qoder:**\n```bash\n# Project-specific\ncp -r dist/qoder/.qoder your-project/\n\n# Or global (applies to all projects)\ncp -r dist/qoder/.qoder/skills/* ~/.qoder/skills/\n```\n\n## Usage\n\nOnce installed, every command runs through the single `/impeccable` skill:\n\n```\n/impeccable audit        # Find issues\n/impeccable polish       # Final cleanup\n/impeccable distill      # Remove complexity\n/impeccable critique     # Full design review\n```\n\nType `/impeccable` alone to see the full command list.\n\nMost commands accept an optional argument to focus on a specific area:\n\n```\n/impeccable audit the header\n/impeccable polish the checkout form\n```\n\nIf you reach for one command often, pin it with `/impeccable pin audit` to get `/audit` as a standalone shortcut.\n\n**Note:** Codex uses skills here, not `/prompts:` commands. Open `/skills` or type `$impeccable`. Repo-local installs live in `.agents/skills/`; user-wide installs live in `~/.agents/skills/`. GitHub Copilot uses `.github/skills/`. Restart the tool if a newly installed skill does not appear.\n\n## CLI\n\nImpeccable includes a standalone CLI for detecting anti-patterns without an AI harness:\n\n```bash\nnpx impeccable detect src/                   # scan a directory\nnpx impeccable detect index.html             # scan an HTML file\nnpx impeccable detect https://example.com    # scan a URL (Puppeteer)\nnpx impeccable detect --fast --json .        # regex-only, JSON output\n```\n\nThe detector catches 24 issues across AI slop (side-tab borders, purple gradients, bounce easing, dark glows) and general design quality (line length, cramped padding, small touch targets, skipped headings, and more).\n\n## Supported Tools\n\n- [Cursor](https://cursor.com)\n- [Claude Code](https://claude.ai/code)\n- [OpenCode](https://opencode.ai)\n- [Pi](https://pi.dev)\n- [Gemini CLI](https://github.com/google-gemini/gemini-cli)\n- [Codex CLI](https://github.com/openai/codex)\n- [VS Code Copilot](https://code.visualstudio.com)\n- [Kiro](https://kiro.dev)\n- [Trae](https://trae.ai)\n- [Rovo Dev](https://www.atlassian.com/software/rovo)\n- [Qoder](https://qoder.com)\n\n## Community \u0026 Ecosystem\n\nJoin the community and ecosystem conversations:\n\n- GitHub Discussions: file bugs, request features, and help newcomers.\n- [Impeccable on npm](https://www.npmjs.com/package/impeccable): grab the CLI, follow releases, and star the package.\n- Follow @pbakaus on Twitter for release notes, sample lint reports, and video highlights of new rules.\n\n## Contributing\n\nSee [DEVELOP.md](DEVELOP.md) for contributor guidelines and build instructions.\n\n## License\n\nApache 2.0. See [LICENSE](LICENSE).\n\nThe impeccable skill builds on [Anthropic's original frontend-design skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design). See [NOTICE.md](NOTICE.md) for attribution.\n\n---\n\nCreated by [Paul Bakaus](https://www.paulbakaus.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpbakaus%2Fimpeccable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpbakaus%2Fimpeccable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpbakaus%2Fimpeccable/lists"}