← ClaudeAtlas

devrites-frontend-craftlisted

Implement frontend at senior designer-engineer quality — every state covered, anti-AI-slop, WCAG 2.2 AA. Use when the user says "build the UI", "design system", "a11y", or `/rite-build` detects UI. Not for polishing a built feature or design exploration.
ViktorsBaikers/DevRites · ★ 1 · Web & Frontend · score 60
Install: claude install-skill ViktorsBaikers/DevRites
# devrites-frontend-craft — UI like a senior designer-engineer Build UI that belongs in *this* product, handles every state, and avoids generic-AI tells. Integrated into the feature slice, not a separate design project. ## 1. Foundation discovery Framework, routing, components, tokens, CSS methodology, icon set, existing UI patterns, and any `PRODUCT.md` / `DESIGN.md` / design docs. Use the project's system — don't import a new one. (Detail: `reference/design-references.md`.) - **Load the design brief + references the spec gathered** — `.devrites/work/<slug>/design-brief.md` (the UX/UI contract from `devrites-ux-shape` — the primary build target) plus `references.md` + the saved files in `references/` (screenshots, Figma, video, links). Honor the role in `references.md`: match **targets**, satisfy **constraints**, and extract only the named principle from **inspiration** (pull Figma context if a Figma integration is available). For targets, extract type / spacing / color-roles / layout / component behavior deliberately; don't eyeball it (`reference/design-references.md` — *Building to a supplied reference*). A reference that conflicts with the design system is a question for the user, not a silent choice. ## Reuse first — search before you build Before creating any new component, style, token, icon, hook, util, or helper, search the project for an existing one and **reuse → extend → build new** — see [reference/reuse-first.md](reference/reuse-first.md) for