Free tool

Rules file converter

Write a rule once and use it in every coding agent your team runs. Paste a rule in any agent's format and get the file path and frontmatter for 11 targets, keeping when the rule applies. Formats checked against each vendor's docs on 2026-10-19. Nothing leaves your browser.

Your rule (any agent's format, frontmatter included)

---
description: Tailwind CSS v4 conventions
globs: **/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte
alwaysApply: false
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.

Rule name (used for the file name)

Scope: Only for matching files (**/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte)

Detected from: globs

Convert to

Save as: .cursor/rules/tailwind.mdc

---
globs: **/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte
alwaysApply: false
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.

Format source: Cursor docs.

How scope maps between agents

When it applies	Cursor .mdc	Claude Code	GitHub Copilot	Kiro	Antigravity / Devin
Always on	alwaysApply: true	no paths	applyTo: "**"	inclusion: always	trigger: always_on
Matching files	globs	paths	applyTo	inclusion: fileMatch	trigger: glob
Agent decides	description	(use a Skill)	description (VS Code)	inclusion: auto	trigger: model_decision
Manual	no description, no globs	(use a Skill)	neither (VS Code)	inclusion: manual	trigger: manual

AGENTS.md, GEMINI.md and Codex have no frontmatter: put the file in the folder it applies to. Zed reads only the first instruction file it finds, so a .cursorrules file wins over AGENTS.md there.

Rules formats keep changing

Get one email a week when a coding agent changes where it reads rules or how it scopes them.

How scope maps between agents

Related