Build distinctive, accessible web and mobile UI from a committed design direction and token plan. Use when building or restyling pages, screens, components or Flutter widgets, or from a DESIGN.md or Stitch design; not for backend work.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
<!-- ported-from: plugins/ac/skills/frontend-design/SKILL.md sha256:8c310b1ae1cbf0321db9af5bec42633dd5bc59a5dda2200e570942e97d31d93e -->
# frontend-design
UI work in two parts. The decisions (direction, tokens, critique) go to `ac/design-director`, a read-only agent, when the work needs them. The implementation is yours. `DESIGN.md` is the contract between the two: tokens in YAML, intent in prose. Covers web in any framework, iOS-feel and Material-feel interfaces, and Flutter.
## Standing rules
These hold for the whole run and sit before the procedure so a compaction keeps them.
- Direction before code. No palette, typeface or layout is chosen while writing components. Without a visual `DESIGN.md` or a theme with a point of view, run phase 2. With one, build inside it.
- Tokens only. Every colour, size, radius and duration comes from `DESIGN.md` or the theme files; no literal outside them.
- Generic instructions fail. "Clean and modern" lands on the same palette every time; commit to named hex values and typefaces, and keep the patterns in `references/anti-slop.md` out of the result. The user's own words win over any default here.
…
The line at the top of this page pins the label git:20261101.ae8b686, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_de72g3sho7rqlmnf
GET https://markdownregistry.com/api/v1/resolve?ref=anilcancakir/claude-code/frontend-design
GET https://markdownregistry.com/api/v1/blob/fbd56265da2bdad3f574aee11933950579e9c58184affebe1d88c0c545c4af62
Your AI assistant 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.
anilcancakir/claude-code · opencode/ac/skills/architecture-md-writer/SKILL.md · Write or audit an ARCHITECTURE.md for agents: boundaries, invariants with verify commands, flows and a change guide…
anilcancakir/claude-code · opencode/ac/skills/auto/SKILL.md · Away mode: carry the run in progress, or a new request, to completion unattended, ending at one verification gate. Use…
anilcancakir/claude-code · opencode/ac/skills/commit/SKILL.md · Split the working-tree changes into atomic commits, preflight and push them; also rebase, squash and trace history. Add…
anilcancakir/claude-code · opencode/ac/skills/coordinate/SKILL.md · Turn a large request into a reviewed roadmap of bundles and drive them through parallel ac/lane worktrees. Use when a…
anilcancakir/claude-code · opencode/ac/skills/design-md-writer/SKILL.md · Write or audit a visual-identity DESIGN.md: design tokens plus rationale in the Google Labs format, for UI agents. Use…
anilcancakir/claude-code · opencode/ac/skills/execute/SKILL.md · Run an approved ac plan to completion, wave by wave, with cost-tiered workers, per-wave verification and a final…
anilcancakir/claude-code · opencode/ac/skills/flow/SKILL.md · Run a medium or large request on the main thread: parallel research, interview, build in slices, oracle review. Use…
anilcancakir/claude-code · opencode/ac/skills/github-cli/SKILL.md · Work with GitHub repositories, issues, PRs, releases and Actions runs through the gh CLI instead of web fetches. Use…
anilcancakir/claude-code · opencode/ac/skills/plan/SKILL.md · Plan a change interactively: research in parallel, ask the decisions only you can make, then write a tiered plan…
anilcancakir/claude-code · opencode/ac/skills/product/SKILL.md · Turn an idea into a feasibility-checked PRD and a parallel-ready roadmap through research and an interview. Runs when…
anilcancakir/claude-code · opencode/ac/skills/project-md-writer/SKILL.md · Write or audit a PROJECT.md (what, scope, constraints, decisions) for agents; commands and conventions go in AGENTS.md…
anilcancakir/claude-code · opencode/ac/skills/qa/SKILL.md · Test a session's or a plan's work the way a QA engineer would: derive cases from the requirement and the diff, run them…
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…
anthropics/claude-plugins-official · plugins/frontend-design/skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
mvschwarz/openrig · packages/daemon/specs/agents/shared/skills/process/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
mvschwarz/openrig · skills/_canonical/process/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
