vibe-designlisted

Frontend design workflow that produces non-generic, editorial-quality UI. Immediately invokes the frontend-design skill for aesthetic direction before any code is written. Enforces a written design contract that is re-read before every single component — not once and forgotten. Creates separate files per page and component, never monolithic output. Reads DESIGN.md if present for exact brand tokens. Derives the design from the product's domain × audience × emotion (ANTI_GENERIC.md) — killing BOTH the SaaS-generic look AND the anti-generic cliché (warm-cream+terracotta, the Fraunces/DM-Sans reflex, dark-as-premium, SaaS layouts on non-SaaS products). Reads SITE_TYPE_PLAYBOOK.md for domain-specific design worlds well beyond software. Triggers on "design:" prefix, "style this", "make this look better", "redesign this page", "the UI needs work", "can you polish", "do a design pass", "it looks too plain", "it looks generic", "it looks like a saas dashboard", "make separate pages". Two review modes: "design: critiqu
aakashdhar/vibe-skill · ★ 7 · Web & Frontend · score 68

Install: claude install-skill aakashdhar/vibe-skill

# Vibe Design Skill Handles all visual styling for a vibe project. Invokes frontend-design first. Commits to a design contract. Re-reads that contract before every component. Creates separate files. > **Autonomous / headless mode.** At startup resolve the settings with > `python3 ~/.claude/skills/vibe-mode/scripts/vibe_state.py mode`. If `vibe_mode` is > `autonomous`, every "wait", "ask", "confirm" and approval step in this skill follows > vibe-mode's `references/HEADLESS.md` §2 instead: take the recommended option, accept your > own draft after one self-check, log each choice to `vibe/DECISIONS.md`, never ask the > user, and stop — writing `vibe/.run_state.json` — only when a person is genuinely required. **The separation of concerns:** - **vibe agent** — spec compliance, data flow, logic, tests, docs - **vibe-design** — aesthetics, layout, feel, interactions, visual polish --- ## CRITICAL: How this skill works The reason AI design tools produce generic output is that they commit to a direction once and then forget it during implementation. This skill works differently: 1. **frontend-design is invoked first** — before reading any project files 2. **A design contract is written** — specific, named, irreversible choices 3. **The contract is re-read before every single component** — not once, every time 4. **Each page gets its own file** — never one monolithic output If you find yourself about to write a white card with shadow-md — stop. Re-read the design contract. If