← ClaudeAtlas

frontend-designlisted

Use when designing, building, auditing, or redesigning any user interface, or studying a design reference. The anti-AI-slop craft skill -- one committed aesthetic direction from a named lane catalog, typography-first hierarchy, a spacing system, tokens, designed states, and non-negotiable accessibility.
xsefirosus/sefi-agents · ★ 1 · Web & Frontend · score 70
Install: claude install-skill xsefirosus/sefi-agents
# Frontend Design -- anti-slop craft Craft skill backing the ui-ux-designer and the software-engineer above the API seam. The goal is UI that looks decided, not generated. Deep material lives in three references, read on demand: references/direction-lanes.md (the named direction catalog), references/anti-slop-checklist.md (the tells, in two tiers), and references/industry-patterns.md (domain heuristics, illustrative only). User instructions always override this skill. All factual output follows the anti-hallucination skill: cite or mark UNKNOWN, never guess (this includes design tokens -- never cite a token that is not in the spec). ## Rule block 1. Direction first: commit to ONE named aesthetic direction before any markup -- a lane from references/direction-lanes.md or an original named with the same rigor -- with a one-line rationale tied to the audience. The default lane is restrained; immersive/maximalist is opt-in and requires the brief to ask for it. "Clean and modern" is the absence of a direction. 2. Typography carries the hierarchy: a deliberate type scale (not browser defaults), real hierarchy between heading levels, line lengths capped for reading. If the design works in grayscale, the hierarchy is real; if it needs color to read, it is not. 3. Spacing is a system: one scale in 0.25rem increments, applied everywhere. Ad-hoc pixel values are the tell that no system exists. 4. Color is restrained and intentional: defined color roles (surfac