taste-saaslisted

Build a tasty internal-tool / management-console style SaaS frontend in one shot — sidebar shell, list pages with sticky header + filter chips + server-side filters, wireless detail pages, KPI / chart dashboards, and a global Cmd+K command palette. Linear / Vercel / Notion / Stripe density depending on the archetype you pick. Use when the user is starting a SaaS console, admin dashboard, internal tool, B2B web app, analytics view, or asks for a "taste-saas" / "console" / "management UI" / "stats page". Framework-agnostic — patterns transfer to React (any router), Vue, Svelte, Solid, etc. Code samples happen to be in React for clarity. Not for marketing pages, landing pages, or storefronts (use taste-skill / impeccable / frontend-design instead).
hrhrng/taste-saas-skill · ★ 0 · Web & Frontend · score 70

Install: claude install-skill hrhrng/taste-saas-skill

# taste-saas Build a console-style SaaS that feels deliberate from the first commit. The "tasty" feeling decomposes into three layers, picked in order on every project: 1. **Structural archetype** — pick ONE of 4 (Linear floating-card / Vercel flush-pane / Notion document / Stripe data-table). Decides sidebar bg, main wrapper, breadcrumb location, row style, card chrome. 2. **Visual style knobs** — pick values within the archetype's allowed ranges for brand hue/saturation/radius/density/shadow/type. 3. **Universal mechanics** — alignment laws, wireless tokens, DataTable bones, overlay mechanics, redundancy hunt. These apply equally to ALL archetypes. The biggest failure mode of this skill (historical) was defaulting to Archetype A (Linear floating-card) for every prompt. **NEVER** default. If the user hasn't said which feel they want, ASK them via AskUserQuestion with the 4 archetype names. ## Reference index — read in workflow order | Stage | Read | File | |---|---|---| | **Step 0 — pick the structural archetype** (decides shell + main + row + card philosophy) | 4-way comparison matrix, decision flow | `references/structural-archetypes.md` | | Step 0a — deep dive on the chosen archetype | Full structural recipe (sidebar bg, main wrapper, row style, card chrome) per archetype | `references/archetype-a-floating-card.md` (Linear/Cron/Height) / `references/archetype-b-flush-pane.md` (Vercel/GitHub/Sentry) / `references/archetype-c-document.md` (Notion/Linen) / `references/a