Cursor rules for frontend design consistency, with four example .mdc files
Put the few rules every request needs in an always-applied rule, attach component rules to src/components with globs, and let Cursor pick the copy rule from its description.
6 min read
Choose each rule's type by when Cursor needs it
Cursor project rules are .mdc files in .cursor/rules. Their frontmatter decides when a rule reaches the agent. A website repository needs only a few rules in every request; the rest matter for one kind of file or one kind of task. Cursor's documentation describes four types, listed in the table below.
A plain .md file in .cursor/rules is ignored, because it has no frontmatter; Cursor's documentation points to AGENTS.md for plain Markdown. Rules can sit in subfolders such as .cursor/rules/frontend/, and the documentation advises keeping each rule under 500 lines.
| Rule type | Frontmatter | When Cursor includes it | Use it for |
|---|---|---|---|
| Always Apply | alwaysApply: true | Every chat session | Where colours live and the main-action label |
| Apply to Specific Files | globs, alwaysApply: false | When a matching file is in context | Component conventions |
| Apply Intelligently | description, alwaysApply: false | When the agent judges the description relevant | Rules for page text |
| Apply Manually | Neither description nor globs | When you @-mention it | A check before a release |
The always-applied rule: what any change can break
Save this as .cursor/rules/design-system.mdc. It goes into every session, so it stays short. It points to the tokens file instead of listing colour values; when a colour changes, you edit tokens.css and the rule stays correct.
---
alwaysApply: true
---
# Wrenboard design system
Wrenboard is a fictional scheduling tool for small dental clinics.
- Colours, type and spacing live in `src/styles/tokens.css`. Use its CSS variables; do not write hex, rgb or hsl values anywhere else.
- Reuse `src/components/Button.tsx` for every button and every link styled as a button.
- The primary action on every page is Book a demo. Use that exact label.
- No gradients, glow effects, glass blur or decorative emoji.The component rule: attached by file pattern
Save this as .cursor/rules/components.mdc. The globs field attaches it when a file under src/components is in context. To cover pages as well, add a second pattern after a comma: src/components/**/*.tsx, src/pages/**/*.tsx.
A script using the picomatch library confirmed that the pattern matches Button.tsx and Hero.tsx in the example project and not src/pages/index.tsx. That checks the pattern, not Cursor's own matcher.
---
globs: src/components/**/*.tsx
alwaysApply: false
---
# Component rules
- Props are typed in the same file. Variants are a string union, for example `variant: "primary" | "secondary"`.
- Every interactive element has a visible focus style: `outline: 2px solid var(--focus)` with `outline-offset: 2px`.
- Text inside a control is at least 16px.
- Do not add a new variant, size or colour to an existing component. Say which one you need and why.The copy rule: chosen from its description
Save this as .cursor/rules/page-copy.mdc. With a description and no globs, the agent decides from the description whether the rule applies. The description therefore lists the tasks it covers: headings, button labels, alt text and metadata on the marketing pages. A description such as “copy rules” gives the agent less to match against the request.
---
description: Writing or editing visible page text, headings, button labels, alt text or metadata for the Wrenboard marketing pages
alwaysApply: false
---
# Page copy rules
- The reader is a practice manager at a small dental clinic. Name the task they do: send reminders, fill a cancelled slot, see tomorrow's list.
- Do not add customer logos, testimonials, ratings or statistics. Wrenboard has none.
- Headings say what the section answers, for example "What happens when a patient cancels".The release check: only when you ask
Save this as .cursor/rules/release-check.mdc. With neither a description nor globs, Cursor includes it only when you mention it, for example “@release-check review the pricing page”. A checklist you run before publishing does not need to sit in every edit.
---
alwaysApply: false
---
# Release check
Before a page ships, open it at 390px and 1280px wide. Check the Book a demo link, keyboard focus on every control, and that no text is clipped.How do you check that the rules work?
Cursor's documentation says its Customize view lists every rule and its status, which tells you whether Cursor found the files. To check behaviour, open a component and ask for a small change without repeating any rule, such as adding a secondary button to the hero. Then read the diff: the button should come from Button.tsx, take its colour from tokens.css and have the focus outline.
Cursor was not installed on the Mac used for this article, so these four files were checked against Cursor's rules documentation on 6 November 2026 and were not run in Cursor. The same rules, written as a CLAUDE.md, were run in Claude Code, where a review found all six breaks planted in one component.
Put the brief into practice
A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.
Start your launch build