mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul BakausandClaude
68eeb93b3d
910 words to 682, same 35 rule markers, no guidance dropped. - Two sections instead of three. "Absolute bans" and "detector-blind reflexes" split the same list by whether our scanner happens to catch it, which is a fact about our tooling and tells the model nothing about the design. Merged into one Refuse list, grouped as page scaffolds and surface habits, which is a distinction the model can act on. - Folded three duplicates: text-overflow was already in the Type check, the uniform section reveal was the other half of the Motion check, and card-everything was already inside the card-grid ban. - Cut explanation the model does not need. It knows what gradient text is and what group-hover does; it needs the refusal, not the mechanism. The gemini block goes from four sentences to three short ones, and the motion palette line drops the CSS tutorial for "reach past transform and opacity." - The authority note moves to the header so no item has to hedge. Co-Authored-By: Claude <noreply@anthropic.com>
5.0 KiB
5.0 KiB
Craft floor
Load this after the direction is settled, and build without announcing the checklist. A pinned brief or the committed visual world overrides anything here; your own habit does not.
Verify
Each of these is a check on the built result, not an intention.
- Contrast: body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces tint secondary text from that hue or the foreground; never gray.
- Depth: shadows carry an offset and a soft blur. A zero-offset colored halo is decoration.
- Spacing: tight groups, generous separation, more space above a heading than below it. Read the computed values.
- Type: body measure 65–75ch, display max 6rem, tracking floor -0.04em, balanced headings, obvious scale and weight steps. Run the real copy at every breakpoint and fix what overflows.
- Motion: one authored moment, not scattered effects and not one identical entrance on every section. Exponential ease-out from an already-visible default. Reach past transform and opacity: blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth.
- States: hover, disabled, loading, error, empty. Plus real content, working controls, responsive composition, keyboard focus.
- Copy: the product's own language. Controls name their action; errors name the problem and the recovery.
- Coverage: every brief requirement present and findable within seconds.
Refuse
These are the shapes you reach for when you are not deciding. Recognizing one means rewriting the element, not softening it.
Page scaffolds:
- Same-size cards of icon plus heading plus text as the page structure. Cards are the lazy container; nested cards are always wrong.
- The hero-metric template: big number, small label, supporting stats, accent.
- A tracked uppercase eyebrow over every section. One named kicker is a system; an eyebrow everywhere is grammar you did not choose.
- Section numbers (01 / 02 / 03) unless the sequence itself carries information the reader needs.
- A modal for a task that needs neither interruption nor protected focus.
Surface habits:
- Gradient text. Emphasis comes from weight or size.
- Glass and blur as decoration rather than as a specific effect.
- A colored
border-leftorborder-rightabove 1px on cards, list items, callouts, or alerts. - Sparklines, progress rings, and soft-shadowed rounded rectangles standing in for content.
- Monospace as a costume for "technical" rather than for code, data, or measurement.
- Light or dark picked by category. Pick it from the use scene: who, where, under what ambient light.
When this session has no automatic hook, run the mechanical detector once over the finished web UI: node {{scripts_path}}/detect.mjs --json <changed targets>. Never during concept selection, and never twice.