mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
improve(polish): make polish a true superset of retired /normalize
Aligning to the design system is now non-optional, drift gets named by root cause (missing token / one-off / conceptual), and a new Information Architecture & Flow dimension covers the user-flow shape that polish previously left to chance. Folds the missing pieces from the deprecated normalize skill into the v3.0.1 changelog bullet rather than a new bump. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
4fa02bf573
commit
89ffd73d4b
@@ -4,17 +4,17 @@ Perform a meticulous final pass to catch all the small details that separate goo
|
||||
|
||||
## Design System Discovery
|
||||
|
||||
Before polishing, understand the system you are polishing toward:
|
||||
Aligning the feature to the design system is **not optional**. Polish without alignment is decoration on top of drift, and it makes the next person's job harder. Discovery comes before any other polish work.
|
||||
|
||||
1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API.
|
||||
2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established?
|
||||
3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale.
|
||||
1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: design principles, target audience, color tokens, spacing scale, typography styles, component API, motion conventions.
|
||||
2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? What flow shapes are used for comparable actions (modal vs full-page, inline vs route, save-on-blur vs explicit submit)?
|
||||
3. **Identify drift, then name the root cause**: For every deviation, classify it as a **missing token** (the value should exist in the system but doesn't), a **one-off implementation** (a shared component already exists but wasn't used), or a **conceptual misalignment** (the feature's flow, IA, or hierarchy doesn't match neighboring features). The fix differs by category — patch the value, swap to the shared component, or rework the flow. Fixing the symptom without naming the cause is how drift compounds.
|
||||
|
||||
If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase.
|
||||
If a design system exists, polish **must** align the feature with it. If none exists, polish against the conventions visible in the codebase. **If anything about the system is ambiguous, ask — never guess at design system principles.**
|
||||
|
||||
## Pre-Polish Assessment
|
||||
|
||||
Understand the current state and goals:
|
||||
Understand the current state and goals before touching anything:
|
||||
|
||||
1. **Review completeness**:
|
||||
- Is it functionally complete?
|
||||
@@ -22,13 +22,18 @@ Understand the current state and goals:
|
||||
- What's the quality bar? (MVP vs flagship feature?)
|
||||
- When does it ship? (How much time for polish?)
|
||||
|
||||
2. **Identify polish areas**:
|
||||
2. **Think experience-first**: Who actually uses this, and what's the best possible experience for them? Effective design beats decorative polish — a feature that looks beautiful but fights the user's flow is not polished. Walk the path from their perspective before opening DevTools.
|
||||
|
||||
3. **Identify polish areas**:
|
||||
- Visual inconsistencies
|
||||
- Spacing and alignment issues
|
||||
- Interaction state gaps
|
||||
- Copy inconsistencies
|
||||
- Edge cases and error states
|
||||
- Loading and transition smoothness
|
||||
- Information architecture and flow drift (does this feature reveal complexity the way neighboring features do?)
|
||||
|
||||
4. **Triage cosmetic vs functional**: Classify each issue as **cosmetic** (looks off, doesn't impede the user) or **functional** (breaks, blocks, or confuses the experience). When polish time is tight, functional issues ship first; cosmetic ones can land in a follow-up. Quality should be consistent — never perfect one corner while leaving another rough.
|
||||
|
||||
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
|
||||
|
||||
@@ -50,6 +55,16 @@ Work through these dimensions methodically:
|
||||
- Test at multiple viewport sizes
|
||||
- Look for elements that "feel" off
|
||||
|
||||
### Information Architecture & Flow
|
||||
|
||||
Visual polish on a misshapen flow is wasted work. Match the *shape* of the experience to the system, not just the surface.
|
||||
|
||||
- **Progressive disclosure**: Match how much is revealed when, compared to neighboring features. A settings page exposing 40 fields when the rest of the app reveals 5 at a time is drift, even if every field is perfectly styled.
|
||||
- **Established user flows**: Multi-step actions follow the same shape as comparable flows elsewhere — modal vs full-page, inline edit vs separate route, save-on-blur vs explicit submit, optimistic vs pessimistic updates.
|
||||
- **Hierarchy & complexity**: The same conceptual weight gets the same visual weight throughout. Primary actions don't become tertiary in one corner of the product, and tertiary actions don't shout.
|
||||
- **Empty, loading, and arrival transitions**: How content arrives, updates, and leaves matches how it does in adjacent features.
|
||||
- **Naming and mental model**: The feature uses the same nouns and verbs as the rest of the system. A "Workspace" here shouldn't be a "Project" three screens away.
|
||||
|
||||
### Typography Refinement
|
||||
|
||||
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
|
||||
@@ -158,6 +173,8 @@ Every interactive element needs all states:
|
||||
|
||||
Go through systematically:
|
||||
|
||||
- [ ] Aligned to the design system (drift named and resolved by root cause)
|
||||
- [ ] Information architecture and flow shape match neighboring features
|
||||
- [ ] Visual alignment perfect at all breakpoints
|
||||
- [ ] Spacing uses design tokens consistently
|
||||
- [ ] Typography hierarchy consistent
|
||||
@@ -183,12 +200,15 @@ Go through systematically:
|
||||
|
||||
**NEVER**:
|
||||
- Polish before it's functionally complete
|
||||
- Polish without aligning to the design system — that's decoration on drift
|
||||
- Guess at design system principles instead of asking when something is ambiguous
|
||||
- Spend hours on polish if it ships in 30 minutes (triage)
|
||||
- Introduce bugs while polishing (test thoroughly)
|
||||
- Ignore systematic issues (if spacing is off everywhere, fix the system)
|
||||
- Ignore systematic issues (if spacing is off everywhere, fix the system, not just one screen)
|
||||
- Perfect one thing while leaving others rough (consistent quality level)
|
||||
- Create new one-off components when design system equivalents exist
|
||||
- Hard-code values that should use design tokens
|
||||
- Introduce new patterns or flows that diverge from established ones
|
||||
|
||||
## Final Verification
|
||||
|
||||
|
||||
Reference in New Issue
Block a user