mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 18:16:30 +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>
108 lines
4.2 KiB
Markdown
108 lines
4.2 KiB
Markdown
---
|
|
name: review
|
|
description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
|
|
context: fork
|
|
args:
|
|
- name: area
|
|
description: The feature or area to review (optional)
|
|
required: false
|
|
---
|
|
|
|
Conduct a holistic design review, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
|
|
|
|
→ *Apply the frontend-design skill for design principles, if not already in context.*
|
|
|
|
## Design Review
|
|
|
|
Evaluate the interface across these dimensions:
|
|
|
|
### 1. Visual Hierarchy
|
|
- Does the eye flow to the most important element first?
|
|
- Is there a clear primary action? Can you spot it in 2 seconds?
|
|
- Do size, color, and position communicate importance correctly?
|
|
- Is there visual competition between elements that should have different weights?
|
|
|
|
### 2. Information Architecture
|
|
- Is the structure intuitive? Would a new user understand the organization?
|
|
- Is related content grouped logically?
|
|
- Are there too many choices at once? (cognitive overload)
|
|
- Is the navigation clear and predictable?
|
|
|
|
### 3. Emotional Resonance
|
|
- What emotion does this interface evoke? Is that intentional?
|
|
- Does it match the brand personality?
|
|
- Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
|
|
- Would the target user feel "this is for me"?
|
|
|
|
### 4. Discoverability & Affordance
|
|
- Are interactive elements obviously interactive?
|
|
- Would a user know what to do without instructions?
|
|
- Are hover/focus states providing useful feedback?
|
|
- Are there hidden features that should be more visible?
|
|
|
|
### 5. Composition & Balance
|
|
- Does the layout feel balanced or uncomfortably weighted?
|
|
- Is whitespace used intentionally or just leftover?
|
|
- Is there visual rhythm in spacing and repetition?
|
|
- Does asymmetry feel designed or accidental?
|
|
|
|
### 6. Typography as Communication
|
|
- Does the type hierarchy clearly signal what to read first, second, third?
|
|
- Is body text comfortable to read? (line length, spacing, size)
|
|
- Do font choices reinforce the brand/tone?
|
|
- Is there enough contrast between heading levels?
|
|
|
|
### 7. Color with Purpose
|
|
- Is color used to communicate, not just decorate?
|
|
- Does the palette feel cohesive?
|
|
- Are accent colors drawing attention to the right things?
|
|
- Does it work for colorblind users? (not just technically—does meaning still come through?)
|
|
|
|
### 8. States & Edge Cases
|
|
- Empty states: Do they guide users toward action, or just say "nothing here"?
|
|
- Loading states: Do they reduce perceived wait time?
|
|
- Error states: Are they helpful and non-blaming?
|
|
- Success states: Do they confirm and guide next steps?
|
|
|
|
### 9. Microcopy & Voice
|
|
- Is the writing clear and concise?
|
|
- Does it sound like a human (the right human for this brand)?
|
|
- Are labels and buttons unambiguous?
|
|
- Does error copy help users fix the problem?
|
|
|
|
## Generate Review Report
|
|
|
|
Structure your feedback as a design director would:
|
|
|
|
### Overall Impression
|
|
A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
|
|
|
|
### What's Working
|
|
Highlight 2-3 things done well. Be specific about why they work.
|
|
|
|
### Priority Issues
|
|
The 3-5 most impactful design problems, ordered by importance:
|
|
|
|
For each issue:
|
|
- **What**: Name the problem clearly
|
|
- **Why it matters**: How this hurts users or undermines goals
|
|
- **Fix**: What to do about it (be concrete)
|
|
- **Command**: Which command to use (`/polish`, `/simplify`, `/bolder`, `/quieter`, etc.)
|
|
|
|
### Minor Observations
|
|
Quick notes on smaller issues worth addressing.
|
|
|
|
### Questions to Consider
|
|
Provocative questions that might unlock better solutions:
|
|
- "What if the primary action were more prominent?"
|
|
- "Does this need to feel this complex?"
|
|
- "What would a confident version of this look like?"
|
|
|
|
**Remember**:
|
|
- Be direct—vague feedback wastes everyone's time
|
|
- Be specific—"the submit button" not "some elements"
|
|
- Say what's wrong AND why it matters to users
|
|
- Give concrete suggestions, not just "consider exploring..."
|
|
- Prioritize ruthlessly—if everything is important, nothing is
|
|
- Don't soften criticism—developers need honest feedback to ship great design
|