agentleFS
Sign inStart free
HarrypatriaHarrypatria/tastemaker/skills/taste-components/SKILL.md

taste-components

Skill4 starsChanged 16 days agoMITView on GitHub

Implements accessible, token-themed interfaces with shadcn/ui, Radix and Tailwind CSS (v3 or v4) - app shells, page headers, forms with react-hook-form + zod, data tables with TanStack, charts, overlays, command palette, dark mode - plus a Portable Mode in plain HTML for .NET, Spring and air-gapped stacks. Use when building or restyling components, "use shadcn", "Tailwind", "dark mode", "make this form/table better", or wiring a design system into code.

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Every async surface renders loading (skeleton at final size), empty, error (retry), success.

    line 30
  2. Very specific:

    No npm or a server-rendered stack: semantic HTML that mirrors shadcn markup and ARIA, precompiled Tailwind or tokens.css, vanilla modules …

    line 39

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Taste Components: built, not generated

Consumes design-tokens.json / tokens.css and BUILD_MANIFEST.md. taste-guard checks the result.

1. Detect (silently, before writing code)

package.json (framework, React major, Tailwind major, existing kit, icons, motion), components.json (shadcn style, aliases, cssVariables), tsconfig paths (@/*), CSS entry. Apply the matching row in tastemaker/references/stacks.md. Never add a second kit, icon set or CSS approach.

shadcn missing: npx shadcn@latest init, then add only the components used (list them in wire-up notes). cn() lives in lib/utils.ts (twMerge(clsx(...))).

2. Theme wiring

Map tokens to shadcn variables with taste-tokens' generated tokens.css. Components use only semantic classes: bg-background text-foreground border-border bg-card text-muted-foreground bg-primary text-primary-foreground ring-ring. No palette classes (V12), no dark: color overrides in components (V18), no raw values (V08). Dark mode: class strategy; next-themes in Next.js (suppressHydrationWarning on <html>), a 15-line provider in Vite.

3. Build order

Atoms -> molecules -> organisms -> templates -> pages. Each layer imports only from below. Reuse before create: one Button (cva), one DataTable<T>, one Stat, one EmptyState.

Recipes for shells, headers, KPI rows, dashboards, master-detail, settings, auth, forms, tables and charts: references/recipes.md. Component choice per need: references/shadcn-map.md.

4. Non-negotiables

  • Interactive elements are button, a, or Radix primitives; never clickable div (U02). Focus traps, menus, tooltips come from Radix, never hand-rolled.
  • Icon-only buttons: aria-label + Tooltip (U01). Lucide icons aria-hidden, sized 16/20/24.
  • Every async surface renders loading (skeleton at final size), empty, error (retry), success.
  • Forms: visible labels, aria-invalid + aria-describedby, focus first invalid, keep input on server error, submit shows spinner and disables only while pending.
  • Motion: transition-colors duration-150 for hover/focus; transforms behind motion-safe:; overlays animate opacity + translate only.
  • Elevation: border first; shadow only on overlays (popover, dialog, toast).
  • Truncate with truncate + title, or line-clamp-*. Numbers tabular-nums, right-aligned.
  • Layout: grid/flex + gap, no margin stacks; min-h-dvh; container queries for reusable panels.

5. Portable Mode

No npm or a server-rendered stack: semantic HTML that mirrors shadcn markup and ARIA, precompiled Tailwind or tokens.css, vanilla modules with data-* hooks. Fragments and behaviour in references/portable.md.

Quality gate

  • Only semantic token classes; tastemaker scan clean.
  • Radix/shadcn for every overlay, menu and focus-managed widget.
  • All states implemented and reachable; dark mode verified per component; no hydration flash.
  • 320 / 768 / 1280 verified; no horizontal page scroll.
  • New dependencies and shadcn components listed in wire-up notes.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free