agentleFS
Sign inStart free
fracazofracazo/design-system/template/CLAUDE.md

design-system / template

CLAUDE.md4 starsChanged 51 days agoMITView on GitHub

A new product on @fracazo/design-system, written by ds-init from the package's template/: Next 16, Tailwind v4, the package, one blank brand file, the guardrails on. Rewrite the top of this file to describe the product and keep the rules below. When shaping, building, reviewing or writing copy for user-facing UI, load node_modules/@fracazo/design-system/skills/product-design/SKILL.md first It names the request mode, routes to the reference that applies and cites rules by stable ID. Skip it for backend-only work, telemetry, generated files and tests…

The file

We split this CLAUDE.md into the rules it gives an agent

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

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    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. Very specific:

    When shaping, building, reviewing or writing copy for user-facing UI, load …

    line 12
  2. Distinctive:

    Never use em dashes, anywhere.

    line 35
  3. Distinctive:

    Do not add dependencies without discussing first.

    line 38

≈ “Common” is an estimate: at least 1 in 5 of the 26,980 CLAUDE.md 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
CLAUDE.md

CLAUDE.md

What this is

A new product on @fracazo/design-system, written by ds-init from the package's template/: Next 16, Tailwind v4, the package, one blank brand file, the guardrails on. Rewrite the top of this file to describe the product and keep the rules below.

Read first

When shaping, building, reviewing or writing copy for user-facing UI, load node_modules/@fracazo/design-system/skills/product-design/SKILL.md first It names the request mode, routes to the reference that applies and cites rules by stable ID. Skip it for backend-only work, telemetry, generated files and tests with no shipped UI.

node_modules/@fracazo/design-system/DESIGN.md is the written authority: who the reader is, the priority order, how a page is composed, the reject list. css/roles.css in the same package holds the roles and the brand contract. The component intent lives in each component's source.

Rules

  • The brand lives in src/system/brands/*.css and nowhere else. No colour literal, radius literal or clamp() size in a className; ESLint errors on them. A value the roles do not cover is a proposal for the design-system repo, not a local addition.
  • Components come from @fracazo/design-system/ui/*. Never copy one into this repo to change it; change it upstream and bump the dependency. A component that must import app code is the exception and stays here.
  • pnpm lint runs ESLint and the brand contract check and must pass before a merge. pnpm typecheck and pnpm build too.
  • Never use em dashes, anywhere. Commas, colons, full stops instead.
  • Feature branch, then fast-forward merge to main; no PRs. Conventional Commits, present tense.
  • Do not add dependencies without discussing first.

Tooling notes

  • pnpm 11: pnpm-workspace.yaml approves the native build scripts and excludes @fracazo/design-system from the minimum-release-age gate, so a fresh release of the package installs the day it ships.
  • The site follows the system colour scheme; there is no manual toggle. The inline script in layout.tsx sets .dark before first paint and ThemeSync follows live changes.

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