mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 08:36:25 +03:00
Paul BakausandClaude Opus 4.5
0b9c1846a6
New commands:
- /teach-impeccable: One-time setup that gathers UX-focused design
context (explores codebase first, then asks targeted questions)
- /review: UX design review evaluating hierarchy, clarity, emotional
resonance (complements technical /audit)
Build system improvements:
- Dynamic {{model}}, {{ask_instruction}}, {{config_file}} placeholders
per provider (Claude/Gemini/GPT/the model)
- context: fork support for Claude Code sub-agents (audit, extract)
- Skill reference auto-added to design commands
Skill refinements:
- Merged Design Thinking and Context Awareness sections
- Removed redundant patterns and technical questions
- More direct feedback guidance (radical candor)
Website updates:
- 17 commands (was 16)
- Review demo showing UX issues (HIERARCHY, NO PRIMARY, DEAD END)
- teach-impeccable in System group of periodic table
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
139 lines
4.3 KiB
Markdown
139 lines
4.3 KiB
Markdown
# Impeccable
|
|
|
|
The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.
|
|
|
|
> **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.
|
|
|
|
## Why Impeccable?
|
|
|
|
Anthropic created [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design), a skill that guides Claude toward better UI design. Impeccable builds on that foundation with deeper expertise and more control.
|
|
|
|
Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradients, cards nested in cards, gray text on colored backgrounds.
|
|
|
|
Impeccable fights that bias with:
|
|
- **An expanded skill** with 7 domain-specific reference files
|
|
- **15 steering commands** to audit, polish, simplify, animate, and more
|
|
- **Curated anti-patterns** that explicitly tell the AI what NOT to do
|
|
|
|
## What's Included
|
|
|
|
### The Skill: frontend-design
|
|
|
|
A comprehensive design skill with 7 domain-specific references:
|
|
|
|
| Reference | Covers |
|
|
|-----------|--------|
|
|
| typography | Type systems, font pairing, modular scales, OpenType |
|
|
| color-and-contrast | OKLCH, tinted neutrals, dark mode, accessibility |
|
|
| spatial-design | Spacing systems, grids, visual hierarchy |
|
|
| motion-design | Easing curves, staggering, reduced motion |
|
|
| interaction-design | Forms, focus states, loading patterns |
|
|
| responsive-design | Mobile-first, fluid design, container queries |
|
|
| ux-writing | Button labels, error messages, empty states |
|
|
|
|
### 17 Commands
|
|
|
|
| Command | What it does |
|
|
|---------|--------------|
|
|
| `/teach-impeccable` | One-time setup: gather design context, save to config |
|
|
| `/audit` | Run technical quality checks (a11y, performance, responsive) |
|
|
| `/review` | UX design review: hierarchy, clarity, emotional resonance |
|
|
| `/normalize` | Align with design system standards |
|
|
| `/polish` | Final pass before shipping |
|
|
| `/simplify` | Strip to essence |
|
|
| `/clarify` | Improve unclear UX copy |
|
|
| `/optimize` | Performance improvements |
|
|
| `/harden` | Error handling, i18n, edge cases |
|
|
| `/animate` | Add purposeful motion |
|
|
| `/colorize` | Introduce strategic color |
|
|
| `/bolder` | Amplify boring designs |
|
|
| `/quieter` | Tone down overly bold designs |
|
|
| `/delight` | Add moments of joy |
|
|
| `/extract` | Pull into reusable components |
|
|
| `/adapt` | Adapt for different devices |
|
|
| `/onboard` | Design onboarding flows |
|
|
|
|
### Anti-Patterns
|
|
|
|
The skill includes explicit guidance on what to avoid:
|
|
|
|
- Don't use overused fonts (Arial, Inter, system defaults)
|
|
- Don't use gray text on colored backgrounds
|
|
- Don't use pure black/gray (always tint)
|
|
- Don't wrap everything in cards or nest cards inside cards
|
|
- Don't use bounce/elastic easing (feels dated)
|
|
|
|
## Installation
|
|
|
|
### Option 1: Download from Website (Recommended)
|
|
|
|
Visit [impeccable.style](https://impeccable.style), download the ZIP for your tool, and extract to your project.
|
|
|
|
### Option 2: Copy from Repository
|
|
|
|
**Cursor:**
|
|
```bash
|
|
cp -r dist/cursor/.cursor your-project/
|
|
```
|
|
|
|
**Claude Code:**
|
|
```bash
|
|
# Project-specific
|
|
cp -r dist/claude-code/.claude your-project/
|
|
|
|
# Or global (applies to all projects)
|
|
cp -r dist/claude-code/.claude/* ~/.claude/
|
|
```
|
|
|
|
**Gemini CLI:**
|
|
```bash
|
|
cp dist/gemini/GEMINI*.md your-project/
|
|
cp -r dist/gemini/.gemini/* ~/.gemini/
|
|
```
|
|
|
|
**Codex CLI:**
|
|
```bash
|
|
cp -r dist/codex/.codex/* ~/.codex/
|
|
```
|
|
|
|
## Usage
|
|
|
|
Once installed, use commands in your AI coding tool:
|
|
|
|
```
|
|
/audit # Find issues
|
|
/normalize # Fix inconsistencies
|
|
/polish # Final cleanup
|
|
/simplify # Remove complexity
|
|
```
|
|
|
|
Most commands accept an optional argument to focus on a specific area:
|
|
|
|
```
|
|
/audit header
|
|
/polish checkout-form
|
|
```
|
|
|
|
**Note:** Codex CLI uses a different syntax: `/prompts:audit`, `/prompts:polish`, etc.
|
|
|
|
## Supported Tools
|
|
|
|
- [Cursor](https://cursor.com)
|
|
- [Claude Code](https://claude.ai/code)
|
|
- [Gemini CLI](https://github.com/google-gemini/gemini-cli)
|
|
- [Codex CLI](https://github.com/openai/codex)
|
|
|
|
## Contributing
|
|
|
|
See [DEVELOP.md](DEVELOP.md) for contributor guidelines and build instructions.
|
|
|
|
## License
|
|
|
|
Apache 2.0. See [LICENSE](LICENSE).
|
|
|
|
The frontend-design skill builds on [Anthropic's original](https://github.com/anthropics/skills/tree/main/skills/frontend-design). See [NOTICE.md](NOTICE.md) for attribution.
|
|
|
|
---
|
|
|
|
Created by [Paul Bakaus](https://www.paulbakaus.com)
|