← ClaudeAtlas

devrites-frontend-craftlisted

Build accessible production UI and all states during /rite-build. Use for frontend or design-system implementation; not for polish 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 the sea