{"id":"2938872b-c785-4e4d-b031-b25f2cffce55","slug":"taste-saas-skill","kind":"skill","name":"taste-saas-skill","summary":"Portable agent skill — build internal-tool / management-console SaaS frontends in one shot. Linear / Vercel / Notion / Stripe density. Includes visual layout audit.","owner":"hrhrng","repoUrl":"https://github.com/hrhrng/taste-saas-skill","license":"MIT","licenseTier":"permissive","trust":"community","stars":1,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-06-03T06:34:49.000Z","addedAt":"2026-10-21T12:51:54.766Z","logoUrl":"https://avatars.githubusercontent.com/u/56460657?u=60de0f23cd5b6fb6388830ad33f8ff62b01ed90a&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["developer-tools","files-documents","productivity"],"tags":["dashboard","frontend","saas"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-23T05:45:03.395Z","sample":false,"url":"https://conduits.dev/tools/taste-saas-skill","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# taste-saas-skill\n\n> An agent skill for building internal-tool / management-console style SaaS frontends in one shot.\n\n`taste-saas` is a portable Claude/Codex/Cursor skill that teaches the agent how to build sidebar-shell SaaS consoles that feel deliberate from the first commit — Linear, Vercel, Notion, or Stripe density depending on the archetype you pick. Sidebar shell, list pages with sticky header + filter chips + server-side filters, wireless detail pages, KPI / chart dashboards, global Cmd+K command palette.\n\nFramework-agnostic patterns. Code samples are in React for clarity; the rules transfer to Vue, Svelte, Solid, vanilla.\n\n**Not** for marketing pages, landing pages, or storefronts — use [`taste-skill`](https://github.com/Leonxlnx/taste-skill) for those.\n\n## Install\n\n```bash\nnpx skills add https://github.com/hrhrng/taste-saas-skill\n```\n\nSingle skill by install name:\n\n```bash\nnpx skills add https://github.com/hrhrng/taste-saas-skill --skill \"taste-saas\"\n```\n\nYou can also copy `skills/taste-saas/SKILL.md` directly into your project, or paste it into a ChatGPT / Codex conversation.\n\n## What's in the box\n\n| Skill | Install name | What it does |\n|---|---|---|\n| **taste-saas** | `taste-saas` | The full SaaS-console skill: 4 structural archetypes (Linear / Vercel / Notion / Stripe), 8 visual style knobs, wireless tokens, alignment invariants, DataTable mechanics, overlays, Cmd+K, an agent-driven visual layout audit. |\n\nThe skill includes:\n\n- **`SKILL.md`** — trunk (~120 lines). Workflow, non-negotiables, order of operations.\n- **`references/`** — 20 deep-dive files on archetypes, alignment, tokens, datatable, forms, overlays, sheets, menus, bulk-actions, toast, debug playbook, etc. The trunk points to them in workflow order.\n- **`audit-overlay.snippet.js`** — tool-agnostic JS that injects a numbered overlay + alignment grid into the running app. Returns a JSON index with four drift reports (`sidebarSlotDrift`, `mainChromeLeftDrift`, `mainTextAnchorDrift`, `crossSeamDrift`) and a `gridComplexity` summary. Paste into chrome-devtool MCP, agent-browser, Playwright, Puppeteer, or the devtools console.\n- **`check.mjs`** — relation-based static audit. `node ~/.claude/skills/taste-saas/check.mjs <project-root>` checks viewport lock, x-axis alignment, sticky thead, etc.\n\n## How the skill works\n\nEvery taste-saas build picks three things in order:\n\n1. **Structural archetype** — pick ONE of 4:\n   - **A: Floating card on stage** (Linear / Cron / Height)\n   - **B: Flush pane** (Vercel / GitHub / Sentry)\n   - **C: Document workspace** (Notion / Linen)\n   - **D: Enterprise data table** (Stripe / Plaid / Retool)\n\n   Decides sidebar bg, main wrapper, breadcrumb location, row style, card chrome.\n\n2. **Visual style knobs** — pick values within the archetype's allowed ranges across 8 independent dials (brand hue / saturation / stage tint / surface contrast / radius / type / density / shadow).\n\n3. **Universal mechanics** — alignment laws, wireless tokens, DataTable bones, overlay geometry, redundancy hunt. Apply equally to all archetypes.\n\nThe biggest historical failure mode was defaulting to Archetype A (Linear floating-card) for every prompt. The skill now requires the agent to **ask the user** when there's no archetype hint, and includes a built-in audit step so the agent can't ship cross-seam misalignment by accident.\n\n## Examples\n\nThe `examples/` folder shows the same archetype (D-Stripe) built across three skill iterations as the alignment-invariants reference was strengthened. iter-4 ships with icon-x drift; iter-5 fixes that but leaves cross-seam y-drift; iter-7 catches both via the grep audit + verify loop. See [`examples/progression-report.html`](examples/progression-report.html).\n\nThe 4 archetypes side-by-side (iter-4):\n\n| A — Linear | B — Vercel | C — Notion | D — Stripe |\n|---|---|---|---|\n| ![Linear](examples/archetypes-iter-4/archetype-a-linear.png) | ![Vercel](examples/archetypes-iter-4/archetype-b-vercel.png) | ![Notion](examples/archetypes-iter-4/archetype-c-notion.png) | ![Stripe](examples/archetypes-iter-4/archetype-d-stripe.png) |\n\n## Visual layout audit — agent-driven, tool-agnostic\n\nThe audit is the part that makes this skill different from \"add a rule every time something breaks\". The agent runs:\n\n```js\n// inject audit-overlay.snippet.js into the running app\nwindow.__taste.run();\n```\n\nReturns JSON with:\n\n- `sidebarSlotDrift` — every sidebar icon should share one x. Hint names the offender row when drift detected.\n- `mainChromeLeftDrift` — chrome row left edges (toolbar, filter bar, pagination) should match.\n- `mainTextAnchorDrift` — the alignment line your eye actually sees: first text x for page title, filter chips, table thead, first cell. Row borders aren't enough.\n- `crossSeamDrift` — sidebar first nav row top y ≈ main first chrome row top y.\n- `gridComplexity` — `uniqueX > 15` or `uniqueY > 20` means ad-hoc paddings are leaking.\n\nA dashed grid through every coordinate shared by 2+ elements paints over the screenshot. Drift shows up as parallel lines where there should be one. Each item carries `text` (60-char snippet), `className`, `bbox`, `firstTextX`, and `source.file:line` from the React fiber (dev build).\n\n## License\n\nMIT — see [`LICENSE`](LICENSE).\n\n## Acknowledgements\n\nRepository structure inspired by [`leonxlnx/taste-skill`](https://github.com/leonxlnx/taste-skill). Skills CLI by [`vercel-labs/agent-skills`](https://github.com/vercel-labs/agent-skills).\n"}