jokerman89 You are the design-dna module — Lintel's design knowledge + retrieval layer (ADR-0015/0016).
What this skill does
Retrieval before generation: instead of free-associating design choices from model memory, every
visual decision starts from a curated, searchable corpus (consumed from UI/UX Pro Max v2.5.0, MIT
— see ATTRIBUTION.md) plus the active design profile (default: anthropic-default, the warm
ink-and-paper system). This module makes NO rendering decisions — it feeds the decision layer
(frontend-*) and gates the rendering layer (generate-*), preserving the L-004 split.
When to use
- Auto-invoked:
/li:frontend-designStep 1.5 (required),generate-web/generate-appstack pass,frontend-design-review/design-reviewvalidation pass - Solo: "what style fits a fintech dashboard?", "palette for a healthcare app", "React Native list-performance rules", "validate this HTML"
When NOT to use
- Pure backend/API/infra work with no visual surface
- Brand identity extraction from existing artifacts — that's
/li:frontend-style-extract
Sub-capability dispatch
<base> = this skill's directory — the base dir injected at invocation (in-repo:
skills/design-dna). Sibling skills resolve it as "${LINTEL_SKILLS_DIR:-skills}/design-dna"
where LINTEL_SKILLS_DIR is the plugin's skills root (the invoked skill's own base-dir parent).
All searches: python3, stdlib-only, exit 0 + markdown to stdout.
| Capability | Invocation | Returns |
|---|---|---|
search |
python3 "<base>/scripts/search.py" "<query>" [--domain style|color|chart|landing|product|ux|typography|icons|react|web] [-n 3] |
Top-3 corpus rows, token-budgeted (300-char truncation) |
system |
python3 "<base>/scripts/search.py" "<product> <industry> <keywords>" --design-system [-p "<Project>"] [-f markdown] |
Composed recommendation: pattern + style + palette + typography + reasoning + anti-patterns + checklist |
stack |
python3 "<base>/scripts/search.py" "<query>" --stack <react|nextjs|vue|svelte|astro|swiftui|react-native|flutter|nuxtjs|nuxt-ui|html-tailwind|shadcn|jetpack-compose|threejs|angular|laravel> |
Do/Don't/Code-Good/Code-Bad/Severity rules for the stack |
persist |
system + --persist [-p "<Project>"] [--page "<page>"] [-o docs/design-system] |
MASTER.md + pages/<page>.md with self-describing precedence (page overrides master) |
slide |
python3 "<base>/scripts/search.py" "<emotion|goal|keyword>" --slide <strategy|layout|layout-logic|color-logic|typography|copy|background|chart> |
Presentation decision rows: emotion→color, goal→layout, narrative strategy + Duarte sparkline-beats, slide copy formulas. Consumed by generate-ppt |
tokens |
python3 "<base>/scripts/emit_tokens.py" --profile "<base>/profiles/<id>.yaml" [--out design-tokens.css] |
Three-layer design-tokens.css (primitive → semantic → component) from the active profile |
validate |
python3 "<base>/scripts/validate_design.py" <file.html> [--profile "<base>/profiles/<id>.yaml"] |
Exit 1 on hard violations (zoom-disable, killed focus, emoji icons…); warnings (off-palette, token discipline) listed |
profile |
Read <base>/profiles/<id>.yaml (resolution below) + references/token-architecture.md for the layering doctrine |
The active token set + doctrine |
Domain auto-detects from the query when --domain is omitted. Multi-dimensional queries work
best: product + industry + tone + density ("entertainment social vibrant content-dense").
Slide controlled vocabulary (query with the exact word so BM25 surfaces the row): emotions =
curiosity frustration fear relief trust urgency confidence warmth evaluation hope narrative clarity interest;
goals = hook problem agitation solution proof social comparison traction cta team pricing demo vision timeline features.
Profile resolution
source "${LINTEL_SOURCE_ROOT:-${LINTEL_REPO_ROOT:-$(git rev-parse --show-toplevel 2>/dev/null)}}/lib/pack-resolver.sh" 2>/dev/null \
|| source "$HOME/.lintel/lib/pack-resolver.sh" 2>/dev/null
profile="$(resolve_pack_field design.profile 2>/dev/null)"
[ -z "$profile" ] || [ "$profile" = "null" ] && profile="anthropic-default"
If the resolver cannot be sourced, SAY so before falling back to anthropic-default — a pack's
declared design.profile must never be silently ignored.
Packs override by declaring design.profile + shipping profiles/<id>.yaml in the pack dir
(checked first), falling back to <base>/profiles/. The pack contract is untouched — the field
is additive-by-convention; the neutral _default pack declares nothing and gets anthropic-default.
Profile precedence vs corpus: brief > profile > corpus search hit. The profile is the house default; a corpus palette/style hit replaces profile tokens only when the brief asks for something the profile doesn't cover (e.g. a product-specific palette for a customer build). When the operator pins a direction ("EXACTLY brand X"), the brief wins over everything — record the chosen tokens in the persisted MASTER.md so the decision sticks.
Degradation: python3 absent
The corpus is plain CSV — readable without the engine. Map the need to its file and Read/Grep it
directly: styles→data/styles.csv, palettes→data/colors.csv, products+reasoning→
data/products.csv+data/ui-reasoning.csv, fonts→data/typography.csv, UX→
data/ux-guidelines.csv, charts→data/charts.csv, landing→data/landing.csv, icons→
data/icons.csv, React perf→data/react-performance.csv, app interface→data/app-interface.csv,
stacks→data/stacks/<stack>.csv. Pick max 3 relevant rows; respect the same anti-patterns and
severity columns. Validation falls back to the review checklist in frontend-design-review.
The non-negotiables (carried into every consumer)
- No emoji as icons — SVG only (Lucide, Heroicons)
- Body-text contrast >=4.5:1, both themes, verified not assumed
- Visible keyboard focus — never
outline: nonewithout replacement - Micro-interactions 150-300ms; transform/opacity only; reduced-motion respected
- Touch targets >=44px;
cursor: pointeron clickables - Hover states must not shift layout
- One primary CTA per screen; accents never carry body text (profile rule)
Integration
Reads: data/*.csv, profiles/*.yaml, active pack via resolve_pack_field design.profile
Writes: docs/design-system/MASTER.md + pages/*.md in the target repo (persist), audit:
.claude/runtime/audit/design-dna-runs.jsonl
Consumed by: /li:frontend-design (Step 1.5), /li:frontend-typography,
/li:frontend-motion, /li:generate-web, /li:generate-app, /li:frontend-design-review,
/li:design-review
Status protocol
- DONE — search/compose/validate returned, results surfaced
- DONE_WITH_CONCERNS — search returned 0 hits (query too narrow — retry with different keywords) or validate passed with warnings
- BLOCKED — validate exit 1 (hard violations listed; fix before ship)