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". Always use when the goal is visual
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. **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 the contract says "no cards" — no cards. --- ## Step 1 — Invoke frontend-design IMMEDIATELY Before reading project files. Before understanding the request. Before doing anything else. **Invoke the first-party `frontend-design` skill now** — via the Skill tool (`frontend-design`, or the plugin-qualified `frontend-design:frontend-design`), not by reading a file path. It ships as a skill/plugin in the current ecosystem; a hardcoded `~/.claude/skills/...` path does not resolve under a plugin install. This is not