← ClaudeAtlas

ultimate-frontend-skillslisted

Use whenever a website, landing page, marketing site, portfolio, microsite, homepage, or any public-facing web page is being built, redesigned, restyled, or made to "look better" - including plain HTML/CSS pages, Next/React/Astro sites, and single-file pages. Supplies the house style (editorial serif typography, warm-neutral and near-black grounds, cinematic imagery, layered scroll parallax, exploded technical views) plus a copy-in CSS chassis, a motion runtime, a section library, a scaffolder, and an audit.
ridelink0/ultimate-frontend-skills · ★ 6 · Web & Frontend · score 78
Install: claude install-skill ridelink0/ultimate-frontend-skills
# Ultimate Frontend Skills The studio's house style, and the code that produces it. This is a pinned art direction for projects without an existing design. A supplied or selected Claude Design project takes precedence. ## Rule zero **Nothing about the design goes in your reply.** No palette, no type scale, no tokens, no section list, no "I chose a warm bone ground because...", no design vocabulary at all. Build the files. Then say what you made in one or two plain sentences and give the paths. If they want the reasoning, they will ask for it. Never use emoji - not in the page, the copy, the commit, or the reply. Icons are inline SVG. For Claude Design work, first read `references/claude-design.md`, then run `node "${CLAUDE_PLUGIN_ROOT}/scripts/design.mjs" detect` rather than assuming a route. On a current Claude Code build Claude Design arrives as the built-in `design` canvas skill and the native `DesignSync` tool, neither of which is an MCP server; the HTTP MCP server is for hosts that need it (Codex among them). `detect` only reports - never register, consent or log in on the user's behalf, and never report a remote Design operation as successful without its actual result. Keep a supplied design's direction intact; otherwise proceed with the local house style without a separate approval pass. For website debugging or final verification, read references/visual-debug.md. Run the rendered debug command and actually open its PNGs before declaring the visual check complet