frontend-design is agent-read markdown (skill) from nahid-sparktales/agent-dispatcher: Establish a visual direction for new or reshaped UI so it reads as designed for this product rather than assembled from defaults — hierarchy, typography, colour, spacing, density. Use when building a new surface, when something looks templated and needs a direction rather than a tweak, or when asked to make an interface feel considered. Prefer the official Anthropic frontend-design skill when it is installed; this is the local counterpart for when it is not. Not for critiquing an existing interf.
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.
What the file says
# Frontend design
Defaults compose into something that looks like everyone else's work. A direction is a small set
of decisions made once, deliberately, and applied consistently — not decoration added at the end.
## When this fires
A surface is new, or is being reshaped, and the visual decisions are genuinely yours to make. It
does not fire when a design system already decides type, colour and spacing — there, overriding it
is a defect rather than a direction, and `design-systems` applies. It does not fire for judging an
interface that already exists; that is `ui-audit`.
## Procedure
1. **Look before deciding.** Read the screens that ship next to this one, any existing tokens or
brand material, and the platform's own conventions. A direction that ignores its neighbours is
a second direction, not a better one. If brand material exists and you have not read it, stop
and read it.
2. **Name the register in one sentence** — who it is for, what it should feel like, and one thing
it must *not* feel like. "Dense and factual, for people who live in it all day; not a marketing
page." Every decision below gets checked against that sentence. Skip this and you will pick by
…
Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.
GET https://markdownregistry.com/api/v1/artifacts/art_frbxr3n4emhf7osx
GET https://markdownregistry.com/api/v1/resolve?ref=nahid-sparktales/agent-dispatcher/frontend-design
GET https://markdownregistry.com/api/v1/blob/4bdaa3d321f6a48db3922ccbfdb8c303d2871d8a83c37b5e551672cbe86ae392
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
nahid-sparktales/agent-dispatcher · skills/agent-dispatcher/SKILL.md · Route work to a specialist role and load its task-specific guidance. Use when the user invokes /agent-dispatcher, names…
nahid-sparktales/agent-dispatcher · skills/ai/agent-design/SKILL.md · Scope an agent or subagent before it is built — the one job it owns, the smallest tool set that closes that job, what…
nahid-sparktales/agent-dispatcher · skills/ai/agent-evals/SKILL.md · Build an eval suite that can actually detect a regression — cases pulled from real traffic, graders that check…
nahid-sparktales/agent-dispatcher · skills/ai/context-engineering/SKILL.md · Decide what actually occupies the model's window — progressive disclosure through an index, retrieval versus inlining…
nahid-sparktales/agent-dispatcher · skills/ai/llm-observability/SKILL.md · See what an agent actually did — one trace per run with nested model, tool and retrieval spans, token and latency…
nahid-sparktales/agent-dispatcher · skills/ai/mcp-design/SKILL.md · Build an MCP server, or bring an existing one into a project — choosing the transport, deciding which tools, resources…
nahid-sparktales/agent-dispatcher · skills/ai/memory-design/SKILL.md · Decide what an agent should remember, which layer holds it, who it is scoped to, and how a stale or contradicted memory…
nahid-sparktales/agent-dispatcher · skills/ai/model-routing/SKILL.md · Pick a model per job and degrade sensibly when one fails — a quality bar per call site, candidates compared on the same…
nahid-sparktales/agent-dispatcher · skills/ai/prompt-engineering/SKILL.md · Write or revise a prompt so it holds up — output contract, instruction placement, examples that earn their place, an…
nahid-sparktales/agent-dispatcher · skills/ai/prompt-injection-defense/SKILL.md · Treat everything an agent reads but did not author as data rather than instructions — an explicit trust boundary, a…
nahid-sparktales/agent-dispatcher · skills/ai/retrieval-rag/SKILL.md · Build and fix retrieval that actually returns the right passage — structure-aware chunking, one pinned embedding model…
nahid-sparktales/agent-dispatcher · skills/ai/structured-output/SKILL.md · Get parseable, trustworthy structured results out of a model — schema design, the enforcement mechanism the provider…
anthropics/skills · skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
bytedance/deer-flow · skills/public/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
thinkinaixyz/deepchat · resources/skills/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
iflytek/skillhub · builtin-skills/skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
dicklesworthstone/pi_agent_rust · tests/ext_conformance/artifacts/npm/mitsupi/skills/frontend-design/SKILL.md · Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction. Use when asked…
