[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2970":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},2970,"impeccable","pbakaus\u002Fimpeccable","pbakaus","The design language that makes your AI harness better at design.","https:\u002F\u002Fimpeccable.style",null,"JavaScript",37488,2050,66,18,0,391,3115,10461,2126,44.94,"Apache License 2.0",false,"main",true,[],"2026-06-12 02:00:45","# 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:\u002F\u002Fimpeccable.style) to download ready-to-use bundles.\n\n## Why Impeccable?\n\nAnthropic's [frontend-design](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ffrontend-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\u002F)). 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\u002FSKILL.md)):\n\n| Reference | Covers |\n|-----------|--------|\n| [typography](skill\u002Freference\u002Ftypography.md) | Type systems, font pairing, modular scales, OpenType |\n| [color-and-contrast](skill\u002Freference\u002Fcolor-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility |\n| [spatial-design](skill\u002Freference\u002Fspatial-design.md) | Spacing systems, grids, visual hierarchy |\n| [motion-design](skill\u002Freference\u002Fmotion-design.md) | Easing curves, staggering, reduced motion |\n| [interaction-design](skill\u002Freference\u002Finteraction-design.md) | Forms, focus states, loading patterns |\n| [responsive-design](skill\u002Freference\u002Fresponsive-design.md) | Mobile-first, fluid design, container queries |\n| [ux-writing](skill\u002Freference\u002Fux-writing.md) | Button labels, error messages, empty states |\n\n### 23 Commands\n\nAll commands are accessed through `\u002Fimpeccable`:\n\n| Command | What it does |\n|---------|--------------|\n| `\u002Fimpeccable craft` | Full shape-then-build flow with visual iteration |\n| `\u002Fimpeccable teach` | One-time setup: gather design context, write root PRODUCT.md and DESIGN.md |\n| `\u002Fimpeccable document` | Generate root DESIGN.md from existing project code |\n| `\u002Fimpeccable extract` | Pull reusable components and tokens into the design system |\n| `\u002Fimpeccable shape` | Plan UX\u002FUI before writing code |\n| `\u002Fimpeccable critique` | UX design review: hierarchy, clarity, emotional resonance |\n| `\u002Fimpeccable audit` | Run technical quality checks (a11y, performance, responsive) |\n| `\u002Fimpeccable polish` | Final pass, design system alignment, and shipping readiness |\n| `\u002Fimpeccable bolder` | Amplify boring designs |\n| `\u002Fimpeccable quieter` | Tone down overly bold designs |\n| `\u002Fimpeccable distill` | Strip to essence |\n| `\u002Fimpeccable harden` | Error handling, i18n, text overflow, edge cases |\n| `\u002Fimpeccable onboard` | First-run flows, empty states, activation paths |\n| `\u002Fimpeccable animate` | Add purposeful motion |\n| `\u002Fimpeccable colorize` | Introduce strategic color |\n| `\u002Fimpeccable typeset` | Fix font choices, hierarchy, sizing |\n| `\u002Fimpeccable layout` | Fix layout, spacing, visual rhythm |\n| `\u002Fimpeccable delight` | Add moments of joy |\n| `\u002Fimpeccable overdrive` | Add technically extraordinary effects |\n| `\u002Fimpeccable clarify` | Improve unclear UX copy |\n| `\u002Fimpeccable adapt` | Adapt for different devices |\n| `\u002Fimpeccable optimize` | Performance improvements |\n| `\u002Fimpeccable live` | Visual variant mode: iterate on elements in the browser |\n\nUse `\u002Fimpeccable pin \u003Ccommand>` to create standalone shortcuts (e.g., `pin audit` creates `\u002Faudit`).\n\n#### Usage Examples\n\n```\n\u002Fimpeccable audit blog           # Audit blog hub + post pages\n\u002Fimpeccable critique landing     # UX design review\n\u002Fimpeccable polish settings      # Final pass before shipping\n\u002Fimpeccable harden checkout      # Add error handling + edge cases\n```\n\nOr use `\u002Fimpeccable` directly with a description:\n```\n\u002Fimpeccable 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\u002Fgray (always tint)\n- Don't wrap everything in cards or nest cards inside cards\n- Don't use bounce\u002Felastic easing (feels dated)\n\n## See It In Action\n\nVisit [impeccable.style](https:\u002F\u002Fimpeccable.style#casestudies) to see before\u002Fafter case studies of real projects transformed with Impeccable commands.\n\n## Installation\n\n### Option 1: Download from Website (Recommended)\n\nVisit [impeccable.style](https:\u002F\u002Fimpeccable.style), download the ZIP for your tool, and extract to your project.\n\n### Option 2: Copy from Repository\n\n**Cursor:**\n```bash\ncp -r dist\u002Fcursor\u002F.cursor your-project\u002F\n```\n\n> **Note:** Cursor skills require setup:\n> 1. Switch to Nightly channel in Cursor Settings → Beta\n> 2. Enable Agent Skills in Cursor Settings → Rules\n>\n> [Learn more about Cursor skills](https:\u002F\u002Fcursor.com\u002Fdocs\u002Fcontext\u002Fskills)\n\n**Claude Code:**\n```bash\n# Project-specific\ncp -r dist\u002Fclaude-code\u002F.claude your-project\u002F\n\n# Or global (applies to all projects)\ncp -r dist\u002Fclaude-code\u002F.claude\u002F* ~\u002F.claude\u002F\n```\n\n**OpenCode:**\n```bash\ncp -r dist\u002Fopencode\u002F.opencode your-project\u002F\n```\n\n**Pi:**\n```bash\ncp -r dist\u002Fpi\u002F.pi your-project\u002F\n```\n\n**Gemini CLI:**\n```bash\ncp -r dist\u002Fgemini\u002F.gemini your-project\u002F\n```\n\n> **Note:** Gemini CLI skills require setup:\n> 1. Install preview version: `npm i -g @google\u002Fgemini-cli@preview`\n> 2. Run `\u002Fsettings` and enable \"Skills\"\n> 3. Run `\u002Fskills list` to verify installation\n>\n> [Learn more about Gemini CLI skills](https:\u002F\u002Fgeminicli.com\u002Fdocs\u002Fcli\u002Fskills\u002F)\n\n**Codex CLI:**\n```bash\n# Project-local\ncp -r dist\u002Fagents\u002F.agents your-project\u002F\n\n# Or user-wide\nmkdir -p ~\u002F.agents\u002Fskills\ncp -r dist\u002Fagents\u002F.agents\u002Fskills\u002F* ~\u002F.agents\u002Fskills\u002F\n```\n\n**GitHub Copilot:**\n```bash\ncp -r dist\u002Fgithub\u002F.github your-project\u002F\n```\n\n**Trae:**\n```bash\n# Trae China (domestic version)\ncp -r dist\u002Ftrae\u002F.trae-cn\u002Fskills\u002F* ~\u002F.trae-cn\u002Fskills\u002F\n\n# Trae International\ncp -r dist\u002Ftrae\u002F.trae\u002Fskills\u002F* ~\u002F.trae\u002Fskills\u002F\n```\n\n> **Note:** Trae has two versions with different config directories:\n> - **Trae China**: `~\u002F.trae-cn\u002Fskills\u002F`\n> - **Trae International**: `~\u002F.trae\u002Fskills\u002F`\n>\n> After copying, restart Trae IDE to activate the skills.\n\n**Rovo Dev:**\n```bash\n# Project-specific\ncp -r dist\u002Frovo-dev\u002F.rovodev your-project\u002F\n\n# Or global (applies to all projects)\ncp -r dist\u002Frovo-dev\u002F.rovodev\u002Fskills\u002F* ~\u002F.rovodev\u002Fskills\u002F\n```\n\n**Qoder:**\n```bash\n# Project-specific\ncp -r dist\u002Fqoder\u002F.qoder your-project\u002F\n\n# Or global (applies to all projects)\ncp -r dist\u002Fqoder\u002F.qoder\u002Fskills\u002F* ~\u002F.qoder\u002Fskills\u002F\n```\n\n## Usage\n\nOnce installed, use commands in your AI harness:\n\n```\n\u002Faudit           # Find issues\n\u002Fnormalize       # Fix inconsistencies\n\u002Fpolish          # Final cleanup\n\u002Fdistill         # Remove complexity\n```\n\nMost commands accept an optional argument to focus on a specific area:\n\n```\n\u002Faudit header\n\u002Fpolish checkout-form\n```\n\n**Note:** Codex uses skills here, not `\u002Fprompts:` commands. Open `\u002Fskills` or type `$impeccable`. Repo-local installs live in `.agents\u002Fskills\u002F`; user-wide installs live in `~\u002F.agents\u002Fskills\u002F`. GitHub Copilot uses `.github\u002Fskills\u002F`. 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\u002F                   # scan a directory\nnpx impeccable detect index.html             # scan an HTML file\nnpx impeccable detect https:\u002F\u002Fexample.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:\u002F\u002Fcursor.com)\n- [Claude Code](https:\u002F\u002Fclaude.ai\u002Fcode)\n- [OpenCode](https:\u002F\u002Fopencode.ai)\n- [Pi](https:\u002F\u002Fpi.dev)\n- [Gemini CLI](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fgemini-cli)\n- [Codex CLI](https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex)\n- [VS Code Copilot](https:\u002F\u002Fcode.visualstudio.com)\n- [Kiro](https:\u002F\u002Fkiro.dev)\n- [Trae](https:\u002F\u002Ftrae.ai)\n- [Rovo Dev](https:\u002F\u002Fwww.atlassian.com\u002Fsoftware\u002Frovo)\n- [Qoder](https:\u002F\u002Fqoder.com)\n\n## Community & Ecosystem\n\nJoin the community and ecosystem conversations:\n\n- GitHub Discussions: file bugs, request features, and help newcomers.\n- [Impeccable on npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fimpeccable): 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:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ffrontend-design). See [NOTICE.md](NOTICE.md) for attribution.\n\n---\n\nCreated by [Paul Bakaus](https:\u002F\u002Fwww.paulbakaus.com)\n","Impeccable 是一种设计语言，旨在提升AI在前端设计方面的能力。它提供了7个领域参考文件（包括排版、色彩对比、空间设计等），23个命令如`polish`、`audit`、`critique`等，以及27条确定性的反模式规则，帮助开发者与AI协作创建高质量的设计。项目基于JavaScript开发，支持通过CLI和浏览器扩展运行部分功能而无需API密钥。适用于需要改进现有网站或应用界面设计、确保设计方案符合最佳实践标准的场景。",2,"2026-06-11 02:51:59","top_language"]