skill

taste-saas-skill

Portable agent skill — build internal-tool / management-console SaaS frontends in one shot. Linear / Vercel / Notion / Stripe density. Includes visual layout audit.

hrhrng/taste-saas-skillcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/hrhrng/taste-saas-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 23, 2026

taste-saas-skill

An agent skill for building internal-tool / management-console style SaaS frontends in one shot.

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.

Framework-agnostic patterns. Code samples are in React for clarity; the rules transfer to Vue, Svelte, Solid, vanilla.

Not for marketing pages, landing pages, or storefronts — use taste-skill for those.

Install

npx skills add https://github.com/hrhrng/taste-saas-skill

Single skill by install name:

npx skills add https://github.com/hrhrng/taste-saas-skill --skill "taste-saas"

You can also copy skills/taste-saas/SKILL.md directly into your project, or paste it into a ChatGPT / Codex conversation.

What's in the box

Skill	Install name	What it does
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.

The skill includes:

SKILL.md — trunk (~120 lines). Workflow, non-negotiables, order of operations.
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.
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.
check.mjs — relation-based static audit. node ~/.claude/skills/taste-saas/check.mjs <project-root> checks viewport lock, x-axis alignment, sticky thead, etc.

How the skill works

Every taste-saas build picks three things in order:

Structural archetype — pick ONE of 4:
- A: Floating card on stage (Linear / Cron / Height)
- B: Flush pane (Vercel / GitHub / Sentry)
- C: Document workspace (Notion / Linen)
- D: Enterprise data table (Stripe / Plaid / Retool)
Decides sidebar bg, main wrapper, breadcrumb location, row style, card chrome.
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).
Universal mechanics — alignment laws, wireless tokens, DataTable bones, overlay geometry, redundancy hunt. Apply equally to all archetypes.

The 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.

Examples

The 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.

The 4 archetypes side-by-side (iter-4):

A — Linear	B — Vercel	C — Notion	D — Stripe

Visual layout audit — agent-driven, tool-agnostic

The audit is the part that makes this skill different from "add a rule every time something breaks". The agent runs:

// inject audit-overlay.snippet.js into the running app
window.__taste.run();

Returns JSON with:

sidebarSlotDrift — every sidebar icon should share one x. Hint names the offender row when drift detected.
mainChromeLeftDrift — chrome row left edges (toolbar, filter bar, pagination) should match.
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.
crossSeamDrift — sidebar first nav row top y ≈ main first chrome row top y.
gridComplexity — uniqueX > 15 or uniqueY > 20 means ad-hoc paddings are leaking.

A 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).

License

MIT — see LICENSE.

Acknowledgements

Repository structure inspired by leonxlnx/taste-skill. Skills CLI by vercel-labs/agent-skills.