mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Sync built skill outputs after validate skill removal
Updates the per-provider built skill files (.agents/, .claude/, .codex/, .cursor/, .gemini/, .kiro/, .opencode/, .pi/, .rovodev/, .trae-cn/, .trae/) to reflect the source removal of the /validate skill: deletes the validate/SKILL.md output across all providers, drops /validate from the command lists in audit and critique, and updates the impeccable craft reference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
b391485e16
commit
bb4de8ed9b
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -208,7 +208,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -145,7 +145,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -210,7 +210,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, STOP and call the AskUserQuestion tool to clarify. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -107,7 +107,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: $animate, $validate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -126,7 +126,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `$command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `$command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: $animate, $validate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive. Map findings to the most appropriate command. End with `$polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive. Map findings to the most appropriate command. End with `$polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -142,7 +142,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: $animate, $validate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive)
|
||||
- **Suggested command**: Which command could address this (from: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -207,7 +207,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: $animate, $validate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive
|
||||
- Only recommend commands from: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run $validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke $impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run $impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run $validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → $arrange, copy issues → $clarify), suggest that command instead of fixing manually.
|
||||
@@ -106,7 +106,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -125,7 +125,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -141,7 +141,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -206,7 +206,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -106,7 +106,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -125,7 +125,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -141,7 +141,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -206,7 +206,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -106,7 +106,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -125,7 +125,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -141,7 +141,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -206,7 +206,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -145,7 +145,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -210,7 +210,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, STOP and call the `question` tool to clarify. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -106,7 +106,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -125,7 +125,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -208,7 +208,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -145,7 +145,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -210,7 +210,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -208,7 +208,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
@@ -108,7 +108,7 @@ For each issue, document:
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
@@ -127,7 +127,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
|
||||
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
|
||||
2. **[P?] `/command-name`** — Brief description (specific context)
|
||||
|
||||
**Rules**: Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
|
||||
|
||||
After presenting the summary, tell the user:
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](refere
|
||||
- **[P?] What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
- **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
|
||||
|
||||
#### Persona Red Flags
|
||||
> *Consult [personas](reference/personas.md)*
|
||||
@@ -208,7 +208,7 @@ List recommended commands in priority order, based on the user's answers:
|
||||
...
|
||||
|
||||
**Rules for recommendations**:
|
||||
- Only recommend commands from: /animate, /validate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
|
||||
- Order by the user's stated priorities first, then by impact
|
||||
- Each item's description should carry enough context that the command knows what to focus on
|
||||
- Map each Priority Issue to the appropriate command
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run /validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature.
|
||||
user-invocable: true
|
||||
argument-hint: "[area to validate]"
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run /validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, ask the user directly to clarify what you cannot infer. whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → /arrange, copy issues → /clarify), suggest that command instead of fixing manually.
|
||||
Reference in New Issue
Block a user