react-ts-vite / rules
Cursor rule1 starsChanged 25 days agoMITView on GitHub
How to style screens consistently with tokens, dark mode and accessible interactive components.
Where files are headingNew Cursor rule files have more rules about planning and tracking tasks, and fewer about code style.
Of the Cursor rule files we read, the 4,183 first seen in the last six months, against the older ones: the kind of rule that gained most share, and the kind that lost most. About files like this in general, not this one, and an estimate, since a kind is a pattern in the words.
In this repository18 other files it gives its agents.
- AGENTS.mdAGENTS.md
- docs/agents.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .github/copilot-instructions.mdCopilot instructions
- .cursor/rules/rtv-architecture.mdcCursor rule
- .cursor/rules/rtv-code-style.mdcCursor rule
- .cursor/rules/rtv-git-workflow.mdcCursor rule
- .cursor/rules/rtv-testing.mdcCursor rule
- accessibility-auditSkill
- ci-cd-dockerSkill
- clean-code-reviewSkill
- dependency-upgradeSkill
- deployment-insightsSkill
- project-architectureSkill
- react-componentSkill
- scaffold-featureSkill
- tailwind-design-systemSkill
- testing-vitestSkill
The file
We split this rtv-design-system.mdc into the rules it gives an agent
1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
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
- Very specific: line 17
Forms: use @tailwindcss/forms base styles plus ring-1 ring-inset borders and focus:ring-2 focus:ring-brand-600.
≈ “Common” is an estimate: at least 1 in 5 of the 6,668 Cursor rule 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.
Files
---
description: "How to style screens consistently with tokens, dark mode and accessible interactive components."
globs:
alwaysApply: true
---
<!-- rtv:generated -->
<!-- Generated from .agent/rules/design-system.md by `npm run agent:sync`. -->
# Design system
- **Utilities first.** Style with Tailwind utility classes in JSX. Custom CSS belongs only in `src/index.css` (`@layer base`) for tokens and global resets. No inline `style` except for truly dynamic values (e.g. a computed width).
- **Tokens.** The brand colour scale is defined once as CSS variables in `src/index.css` and exposed as `brand-50 … brand-950` (e.g. `bg-brand-600`, `text-brand-400`, `ring-brand-600/20`). Use `brand-*` for primary actions and accents, Tailwind greys for surfaces and text. Re-theming means changing the variables, never find-and-replace in components.
- **Dark mode** uses the `class` strategy (`darkMode: 'class'`): add `dark:` variants for every surface, text and border colour you set. The `useTheme` hook (dashboard template) toggles the `dark` class on `<html>` and persists the choice.
- **Layout**: mobile-first (`sm:` → `lg:` → `xl:`), max-width containers (`mx-auto max-w-7xl px-6 lg:px-8`), the 4-pt spacing scale, consistent radii (`rounded-md` controls, `rounded-lg`/`rounded-2xl` surfaces) and shadows (`shadow-sm` controls, `shadow` cards).
- **Interactive patterns come from Headless UI v2** (`Dialog`, `DialogPanel`, `Menu`, `MenuItems`, `Listbox`, `Switch`, `Disclosure`, `Popover`, `Transition`). Use the named exports and state styling via data attributes (`data-[focus]:bg-gray-50`, `data-[open]:…`). Never re-implement focus traps, keyboard navigation or aria wiring by hand.
- **Icons** are Heroicons: `@heroicons/react/24/outline` for navigation and UI chrome, `24/solid` for emphasis, `20/solid` for dense/inline use. Always `aria-hidden="true"` and give the surrounding control an accessible name (`<span class="sr-only">`).
- **Forms** use `@tailwindcss/forms` base styles plus `ring-1 ring-inset` borders and `focus:ring-2 focus:ring-brand-600`. Every field has a visible `<label>`; errors are linked with `aria-describedby`.
- **Accessibility is part of the design**: semantic landmarks (`header`, `nav`, `main`, `footer`), one `h1` per page, visible `focus-visible:outline` styles, `aria-current="page"` on active nav, `role="status"`/`aria-live` for async feedback, WCAG AA contrast (the default brand scale passes on white and gray-900).
- **Conditional classes**: compose with array `.join(' ')` or a tiny `cn` helper in `@utils`; keep class strings static where possible so Tailwind can see them.
- **Class order** is enforced by `prettier-plugin-tailwindcss`; do not reorder by hand.
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
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.