impeccable-dp

Files (54)

• SKILL.md
• detector-exclusions.md
• adapt.md · reference/
• animate.md · reference/
• audit.md · reference/
• bolder.md · reference/
• brand-dp.md · reference/
• clarify.md · reference/
• codex.md · reference/
• cognitive-load.md · reference/
• color-and-contrast.md · reference/
• colorize.md · reference/
• craft.md · reference/
• critique.md · reference/
• delight.md · reference/
• distill.md · reference/
• extract-dp.md · reference/
• harden.md · reference/
• heuristics-scoring.md · reference/
• interaction-design.md · reference/
• layout.md · reference/
• live.md · reference/
• motion-design.md · reference/
• onboard.md · reference/
• optimize.md · reference/
• overdrive.md · reference/
• personas.md · reference/
• polish.md · reference/
• product-dp.md · reference/
• quieter.md · reference/
• responsive-design.md · reference/
• shape.md · reference/
• spatial-design.md · reference/
• typeset.md · reference/
• typography.md · reference/
• ux-writing.md · reference/
• detect.mjs · scripts/
• index.mjs · scripts/detector/browser/injected/
• main.mjs · scripts/detector/cli/
• detect-antipatterns-browser.js · scripts/detector/
• detect-antipatterns.mjs · scripts/detector/
• detect-url.mjs · scripts/detector/engines/browser/
• detect-text.mjs · scripts/detector/engines/regex/
• css-cascade.mjs · scripts/detector/engines/static-html/
• detect-html.mjs · scripts/detector/engines/static-html/
• screenshot-contrast.mjs · scripts/detector/engines/visual/
• findings.mjs · scripts/detector/
• file-system.mjs · scripts/detector/node/
• profiler.mjs · scripts/detector/profile/
• antipatterns.mjs · scripts/detector/registry/
• checks.mjs · scripts/detector/rules/
• color.mjs · scripts/detector/shared/
• constants.mjs · scripts/detector/shared/
• page.mjs · scripts/detector/shared/

SKILL.md (first lines)

Designs and iterates production-grade frontend interfaces using DesignerPunk's design language. Real working code, committed design choices, exceptional craft — filtered through DesignerPunk's mathematical token system and behavioral contracts.

## Setup

Before any design work:
1. Load design philosophy context via MCP queries (see Context Loading below).
2. Identify the register (brand or product) from Product MCP.
3. Load the matching register reference (`brand-dp.md` or `product-dp.md`).
4. If a specific command is invoked (e.g., `craft`, `shape`, `audit`), load its reference file.

### Context Loading (replaces load-context.mjs)

Query DesignerPunk's MCP infrastructure for design context:

```
1. Application MCP: get_design_philosophy()    → north star, description, characteristics
2. Application MCP: get_design_rules()         → named constraints with rationale
3. Application MCP: get_design_guidance()      → categorized do's and don'ts
4. Application MCP: get_color_strategy()       → four-tier color vocabulary
5. Product MCP: get_product_overview()         → register, platforms, description
6. Product MCP: get_brand_context()            → personality, voice, anti-references (if configured)
```

If Application MCP is unavailable: proceed with token-only guidance. Note limitation.
If design philosophy is not authored: proceed with DesignerPunk token semantics and component contracts. Note limitation.
If brand context is not configured: use register defaults from the register reference file.

### Register

Every design task is **brand** (marketing, landing, portfolio, presentation: design IS the product) or **product** (app UI, dashboard, settings, tool: design SERVES the product).

Determine from Product MCP's `get_product_overview()` register field. If not set, infer from the surface being designed:
- Brand signals: `/`, `/about`, hero sections, marketing content, presentations
- Product signals: `/app/*`, `/dashboard`, `/settings`, forms, data tables, authenticated surfaces

Load the matching reference: `reference/brand-dp.md` or `reference/product-dp.md`.

## DesignerPunk Design Laws

These override Impeccable's shared design laws where they conflict:

### Spacing
- **8px baseline grid** for layout (NOT 4pt). Typography on 4px sub-grid. All elements cumulatively align to multiples of 8.
- Use semantic spacing tokens: `space.grouped.*`, `space.related.*`, `space.separated.*`, `space.sectioned.*`, `space.inset.*`
- `space075` (6) and `space125` (10) are valid for typographic alignment.

### Color
- Use DesignerPunk's semantic color tokens (`color.action.primary`, `color.feedback.error.*`, etc.)
- Semantic roles: cyan=action, purple=tech/data, pink=error, yellow=attention, green=success, orange=warning, teal=info
- Glow effects for surface layering with complementary color pairings
- Mode-neutral: both light and dark must feel intentionally DesignerPunk

### Typography
- **Rajdhani** (display/headings), **Figtree** (body/UI), **Commit Mono** (code/data/tokens)
- Do NOT apply Impeccable's font selection procedure or reflex-reject list. Fonts are system-defined.
- Weight contrast for hierarchy within families, not font switching.
- Cap body at 65-75ch.

### Motion
- Expo-out on web/Android. Spring physics on iOS.
- No bounce. No elastic on web/Android. (iOS spring is the exception.)
- `prefers-reduced-motion` on everything.

### Elevation
- Surface lightness progression for depth (not shadow intensity)
- Shadows tinted toward blue or gray (warm-light-cool-shadow principle)
- Glow effects for accent emphasis (same-hue glow, complementary pairings)

### Absolute Bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

- **Side-stripe borders.** `border-left` or `border-right` greater than 1px as a colored accent on cards, list items, callouts, or alerts. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
- **Gradient text.** `background-clip: text` combined with a gradient background. Use a single solid color. Emphasis via weight or size.
- **Glassmorphism as default.** Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
- **The hero-metric template.** Big number, small label, supporting stats, gradient accent. SaaS cliché.
- **Identical card grids.** Same-sized cards with icon + heading + text, repeated endlessly.
- **Modal as first thought.** Modals are interruptions. Use inline expansion, drawers, or navigation first.
- **The cream / sand / beige body background.** The whole warm-neutral band (OKLCH L 0.84–0.97, C < 0.06, hue 40–100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like `--paper`, `--cream`, `--sand`, `--bone`, `--flour`, `--linen`, `--parchment`, `--wheat`, `--biscuit`, `--ivory` are tells in themselves. If the brief says "warm" or "editorial," DO NOT translate that into a near-white warm-tinted bg. Pick: (a) a saturated brand color as the body, (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" is carried by accent + typography + imagery, not by body bg.
- **Numbered section markers as default scaffolding (01 / 02 / 03).** Putting `01 · About / 02 · Process / 03 · Pricing` above every section is the eyebrow trope one tier deeper. Numbers earn their place when the section actually IS a sequence (a real process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
- **Text that overflows its container.** Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.
- **Tiny uppercase tracked eyebrow above every section.** The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is the saturated AI scaffold; it appears on 55–95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Frequency is the detector: if more than one section on the page has an eyebrow, you're scaffolding by reflex.

### Conflict Resolution

When Impeccable's domain references conflict with DesignerPunk:
```
Priority 1: DesignerPunk token values
Priority 2: DesignerPunk named design rules
Priority 3: DesignerPunk behavioral contracts
Priority 4: Impeccable domain knowledge (universal principles)
Priority 5: Impeccable taste opinions (where DP is silent)
```

Note conflicts in output: `[CONFLICT] Impeccable recommends X. DesignerPunk uses Y. → Applying DesignerPunk (Priority N).`

## Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). Take attention to detail seriously: every page, section or component crafted is battle tested.

### General rules

#### Color

- **Verify contrast.** Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
- Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

#### Typography

- Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
- Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
- Use `text-wrap: balance` on h1–h3 for even line lengths; `text-wrap: pretty` on long prose to reduce orphans.
- Cap font-family count at 3 (display + body + optional mono). More than 3 reads as indecision, not richness. One well-tuned family with weight contrast usually beats three competing typefaces.
- Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
- No all-caps body copy. Reserve uppercase for short labels (≤4 words), section eyebrows (used sparingly per the Absolute bans), and badges. Sentences in ALL CAPS are unreadable at body sizes.
- Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales.

#### Layout

From 3fn/DesignerPunk, Apache-2.0.

More from 3fn/DesignerPunk