Design register bootstrap
Skill markoblogo/abvx-agent-skills/skills/design-register-bootstrap
Reviewable capability layer for coding agents. Portable skills, delivery gates, workflow patterns, and verification-first engineering.
npx -y skills add markoblogo/abvx-agent-skills --skill design-register-bootstrapAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Establish frontend design context before implementation. Use when a project lacks a clear PRODUCT.md or DESIGN.md, when the model needs to distinguish brand surfaces from product UI, or when design direction keeps drifting because audience, register, anti-references, and visual constraints are not explicit.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.4 KB, as published. Nobody here has run it
Design Register Bootstrap
Set the design register before styling anything substantial.
This skill exists for cases where the model is about to generate UI from vague vibes, default templates, or half-remembered brand intent.
Use For
- new frontend projects without
PRODUCT.mdorDESIGN.md; - redesigns where the surface is unclear: marketing brand page vs. app/product UI;
- teams that keep getting mismatched typography, palette, density, or motion across tasks;
- sessions where the agent should create or refresh design context before implementation.
Core Rule
Classify the surface first:
brand: marketing site, landing page, portfolio, campaign, editorial page, investor page, event page;product: dashboard, admin UI, internal tool, settings, onboarding flow, forms, data-heavy app shell.
Do not treat these as interchangeable. Brand surfaces can lead with identity and emotion. Product surfaces must optimize comprehension, workflow, and control clarity.
Workflow
- Read current evidence:
- project files, CSS tokens, component library, screenshots, references, user brief;
- any existing
PRODUCT.md,DESIGN.md, brand notes, or design tokens.
- Write a compact design register:
- surface type:
brandorproduct; - audience;
- first-screen job;
- brand/product lane;
- anti-references: what this should explicitly not resemble;
- color strategy: restrained, committed, full palette, or drenched;
- typography direction;
- motion tolerance;
- density and radius rules.
- surface type:
- If context files are missing, create or update:
PRODUCT.mdfor audience, product lane, workflow, tone, anti-references;DESIGN.mdfor colors, typography, spacing, component patterns, do/don't rules.
- If the surface is ambiguous, ask one clarifying question only when the branch between
brandandproductis genuinely unclear. - Use the register as a constraint system for later frontend work. Do not restyle pages in the same pass unless the task explicitly includes implementation.
Output Shape
When working inline, summarize:
registeraudiencedesign thesisanti-referencescolor strategytypography directionmotion and density
When creating files, prefer concise machine-usable docs over long essays.
Guardrails
- Do not default every warm or “premium” brief to beige paper backgrounds.
- Do not default every technical product to dark mode.
- Do not choose palette or typography before writing the surface classification.
- If existing project tokens are coherent, preserve them and document them instead of replacing them.
- If the repo already has a stable design system, this skill should describe and reinforce it, not invent a second one.
Final Report
Include:
- whether the surface was classified as
brandorproduct; - files created or updated;
- unresolved uncertainty;
- downstream skills recommended, such as
frontend-taste-layer,frontend-product-builder, orweb-quality-audit.