Agent skill · design visual · code-yeongyu
frontend
Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain way.
Why this skill is useful
Adds a comprehensive routing system for frontend design and implementation that includes specific references and guidelines not commonly found in public documentation.
What it needs
About 13k tokens when loaded. Last updated 2026-08-07. 67,387 stars on the source repository.
What this skill does
Frontend This file is a router over references/; the rules live there. The flow is ground -> brief -> build -> subtract -> verify. The bar is restraint with a visible hierarchy: one primary action, the important thing first, nothing on the screen without a job. A quiet, correct screen that holds its hierarchy at 390 and 1440 in both themes is a finish. Atmosphere, motion, and award-grade surface work are opt-in: build them when the brief asks (a named brand, "premium", "make it stunning", a marketing page), never by default for an internal tool, dashboard, admin screen, report, or figure. An inline page shown beside a reply (a chart, table, or diagram for showhtmlpage, htmlpreview, or htmlrender) follows the visualize skill when it is available; either way it is exempt from the DESIGN.md gate, the Lighthouse audit, and the research lanes, and keeps the build rules, the Draft guard, and the lint. Route: name the references, read exactly those Before the first edit, name the references the request routes to and one reason for each, then read them. Rows stack: take every row the request matches, so a small change that also reshapes a region takes the layout row too, and any code change takes the perfection row and, on a React project, the React tooling row. A small change on an existing surface still reads only a few; only greenfield fans out. A reference you never named is one you decided to skip; one you named but never opened is a gap you still owe. Request Read --- --- Small change on an existing surface: a fix, a new control, a restyled component, a copy or spacing change The project's DESIGN.md (or the nearest styled sibling when there is none) plus at most ONE design reference: the Layer A style skill the project follows, or references/design/redesign-skill.md when the ask is "this looks bad" / "improve this". No DESIGN.md and no styled sibling either: README Phase 0 (it asks). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills code-yeongyu/frontend--d10ce5