mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 07:06:45 +03:00
skill: drop quality tiers, keep the real brand-craft guardrails
Codex's craft/brand pass introduced fast/ship/showpiece "quality bars" plus brand-specific build gates, asset ledgers, sub-agent review, and self-graded fallback labels. In practice those tiers became escape hatches rather than craft pressure: the final output should always be 10/10, and the real decision points are splashiness and maximalism, not quality. Removed: - All quality-bar / showpiece / fast / ship framing in shape.md and craft.md - Standalone Brand Direction (#4) and Asset Requirements (#10) sections in shape's brief; renumbered back to 1-10 - The Brand hard rules section in brand.md (folded its real prohibitions into the existing Imagery and Brand bans sections) - Brand-specific build-gate item, mock-fidelity bullet, production-bar bullet, present-step bullet in craft.md - Asset ledger ceremony in craft Step 4 - Review-only sub-agents and "self-reviewed fallback, not independently validated" machinery in craft.md and polish.md - The For brand surfaces, assess hard failures subsection in polish.md and the brand checklist row - tests/brand-showpiece-reference.test.mjs (and its package.json wiring) Kept (the real nuggets): - Asset-substitution prohibition: image-led briefs ship real/generated assets or canvas/SVG/WebGL, not generic CSS panels, cards, bullets, or copy - Repeated tiny uppercase tracked kicker labels as a brand ban - Detector/QA output is defect evidence only, never proof of quality - "What visual assets are real content here?" discovery question - Inspect each major section individually for brand and long-form work - repeated-section-kickers detection rule + fixture - CLI improvements (JSON to stdout, -json/-fast aliases, severity field) - critique.md: npx impeccable detect --json fix Harness output dirs refreshed via bun run build. Full test suite (186) passes. 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
e587004ee4
commit
a8b032d362
@@ -79,7 +79,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
|
||||
|
||||
**When the brief implies imagery (restaurants, hotels, magazines, photography, hobbyist communities, food, travel, fashion, product), you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse.
|
||||
**When the brief implies imagery (restaurants, hotels, magazines, photography, hobbyist communities, food, travel, fashion, product), you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse. If the approved comp or brief is image-led, ship real project assets, generated raster assets, or a credible canvas/SVG/WebGL scene. Do not replace photographic, architectural, product, or place imagery with generic CSS panels, decorative diagrams, cards, bullets, or copy.
|
||||
|
||||
- **For greenfield work without local assets, use stock imagery.** Unsplash is the default. The URL shape is `https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w=1600&q=80`. Pick real Unsplash photo IDs you're confident exist (`photo-1559339352-11d035aa65de`, `photo-1590490360182-c33d57733427`, etc.); if unsure, pick fewer photos but don't substitute colored `<div>` placeholders.
|
||||
- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
|
||||
@@ -102,6 +102,7 @@ Tech / dev-tool brands are the exception where zero imagery can be correct; a de
|
||||
- Timid palettes and average layouts. Safe = invisible.
|
||||
- Zero imagery on a brief that implies imagery (restaurant, hotel, food, travel, fashion, photography, hobbyist). Colored blocks where a hero photo belongs.
|
||||
- Defaulting to editorial-magazine aesthetics (display serif + italic + drop caps + broadsheet grid) on briefs that aren't magazine-shaped. Editorial is ONE aesthetic lane, not the default brand aesthetic.
|
||||
- Repeated tiny uppercase tracked labels above every section heading. A single strong kicker can be voice; repeating it as section grammar is AI scaffolding unless it's a deliberate, named brand system.
|
||||
|
||||
## Brand permissions
|
||||
|
||||
|
||||
@@ -105,12 +105,16 @@ Before building, inventory the approved mock's major visible ingredients:
|
||||
|
||||
For each ingredient, decide how it will be implemented: semantic HTML/CSS/SVG, generated asset, sourced project asset, icon library, canvas/WebGL, or an explicitly accepted omission. Do not substitute a different hero composition or new visual driver after approval unless the user approves the change.
|
||||
|
||||
If a photographic, architectural, product, or place-led mock becomes generic CSS scenery, decorative diagrams, cards, bullets, or copy, stop and fix it. That is not a harmless interpretation; it is a broken implementation.
|
||||
|
||||
Treat the mock as a **north star**, not a screenshot to trace. Do **not** rasterize core UI text or let the mock override the confirmed brief. But if the live result lacks the mock's major visible ingredients, the implementation is wrong.
|
||||
|
||||
## Step 4: Asset Extraction (Need-Gated)
|
||||
|
||||
If the chosen direction includes image-native visual ingredients that would materially improve the implementation, generate them as separate assets before building.
|
||||
|
||||
Do not replace required visual content with generic cards, bullets, emoji, fake metrics, decorative CSS panels, or filler copy just because sourcing or generating assets would take another step.
|
||||
|
||||
Good candidates:
|
||||
|
||||
- stickers
|
||||
@@ -155,6 +159,8 @@ Implement the feature following the design brief. Build in passes so structure,
|
||||
|
||||
Open the result in a browser. In Codex, use browser-use or equivalent browser automation when available; otherwise use Playwright or ask the user for screenshots. Inspect screenshots, not just DOM or terminal output.
|
||||
|
||||
Detector or QA output is defect evidence only. A clean detector, empty array, or script pass never means the design is strong. Do not cite clean automated checks as proof that the work is finished.
|
||||
|
||||
### Required viewport pass
|
||||
|
||||
Check the experience at the viewports that matter for the brief. Default minimum:
|
||||
@@ -165,6 +171,8 @@ Check the experience at the viewports that matter for the brief. Default minimum
|
||||
|
||||
For each viewport, capture or inspect the rendered state and look for visual defects: overlap, clipping, weak hierarchy, off-grid alignment, awkward whitespace, cramped controls, unreadable type, broken imagery, hover-only functionality, layout shift, and text overflow.
|
||||
|
||||
For brand-register and long-form surfaces, inspect each major section individually, not only the full page. Full-page screenshots hide spacing, clipping, and cascade defects.
|
||||
|
||||
### Critique and fix loop
|
||||
|
||||
After the first browser pass, write a short critique for yourself and patch the implementation. Repeat browser inspection after fixes. Continue until no material issues remain against this checklist:
|
||||
|
||||
@@ -43,7 +43,7 @@ Run the bundled deterministic detector, which flags 27 specific patterns (AI slo
|
||||
|
||||
**CLI scan**:
|
||||
```bash
|
||||
npx impeccable --json [--fast] [target]
|
||||
npx impeccable detect --json [--fast] [target]
|
||||
```
|
||||
|
||||
- Pass HTML/JSX/TSX/Vue/Svelte files or directories as `[target]` (anything with markup). Do not pass CSS-only files.
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
|
||||
|
||||
Detector and automated QA output are defect evidence only. A clean script result is never proof that the design is strong; gather browser evidence and inspect the real interaction path.
|
||||
|
||||
## Design System Discovery
|
||||
|
||||
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.
|
||||
@@ -216,11 +218,12 @@ Sweat the details. Zoom in until the alignment is right and the spacing reads as
|
||||
|
||||
Before marking as done:
|
||||
|
||||
- **Use it yourself**: Actually interact with the feature
|
||||
- **Test on real devices**: Not just browser DevTools
|
||||
- **Ask someone else to review**: Fresh eyes catch things
|
||||
- **Compare to design**: Match intended design
|
||||
- **Check all states**: Don't just test happy path
|
||||
- **Use it yourself**: Actually interact with the feature.
|
||||
- **Test on real devices**: Not just browser DevTools.
|
||||
- **Ask someone else to review**: Fresh eyes catch things.
|
||||
- **Compare to design**: Match intended design.
|
||||
- **Check all states**: Don't just test happy path.
|
||||
- **Treat automation carefully**: Run detector or QA commands when they are available and relevant, fix their defects, but never cite a clean result as proof that the work is polished.
|
||||
|
||||
## Clean Up
|
||||
|
||||
@@ -230,4 +233,3 @@ After polishing, ensure code quality:
|
||||
- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish.
|
||||
- **Consolidate tokens**: If you introduced new values, check whether they should be tokens.
|
||||
- **Verify DRYness**: Look for duplication introduced during polishing and consolidate.
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@ Discovery must include at least one user-answer round unless PRODUCT.md, DESIGN.
|
||||
- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items)
|
||||
- What are the edge cases? (Empty state, error state, first-time use, power user)
|
||||
- Is any content dynamic? What changes and how often?
|
||||
- What visual assets are real content here? Note required images, product shots, illustrations, maps, textures, diagrams, generated objects, or existing project assets.
|
||||
|
||||
### Design Direction
|
||||
|
||||
@@ -136,7 +137,7 @@ List every state the feature needs: default, empty, loading, error, success, edg
|
||||
How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion?
|
||||
|
||||
**8. Content Requirements**
|
||||
What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges.
|
||||
What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. For image-led surfaces, also list the required image/media roles and their likely source (project asset, generated raster, semantic SVG/CSS, canvas/WebGL, icon library, or accepted omission).
|
||||
|
||||
**9. Recommended References**
|
||||
Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features).
|
||||
|
||||
Reference in New Issue
Block a user