Skip to content

Commit d351248

Browse files
fix: format all files with prettier
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent c42460b commit d351248

6 files changed

Lines changed: 124 additions & 63 deletions

File tree

.cursor-plugin/plugin.json

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@
1111
"homepage": "https://github.com/ofershap/tailwind-best-practices",
1212
"repository": "https://github.com/ofershap/tailwind-best-practices",
1313
"license": "MIT",
14-
"keywords": ["tailwind", "tailwindcss", "css", "best-practices", "v4", "cursor-plugin", "claude-code", "ai-agent"],
14+
"keywords": [
15+
"tailwind",
16+
"tailwindcss",
17+
"css",
18+
"best-practices",
19+
"v4",
20+
"cursor-plugin",
21+
"claude-code",
22+
"ai-agent"
23+
],
1524
"logo": "assets/logo.svg"
1625
}

README.md

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Tailwind CSS Best Practices
22

3-
Stop your AI agent from generating Tailwind CSS v3 code. 20+ rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns agents produce.
3+
Stop your AI agent from generating Tailwind CSS v3 code. 20+ rules for v4 syntax, CSS-first config,
4+
modern utility patterns, and common anti-patterns agents produce.
45

56
## Install
67

@@ -28,27 +29,32 @@ Or copy `skills/` into your `.cursor/skills/` or `.claude/skills/` directory.
2829

2930
### Skills
3031

31-
- **tailwind-best-practices** - Stop your AI agent from generating Tailwind CSS v3 code. 20+ rules for v4 syntax, CSS-first config, modern utility patterns.
32+
- **tailwind-best-practices** - Stop your AI agent from generating Tailwind CSS v3 code. 20+ rules
33+
for v4 syntax, CSS-first config, modern utility patterns.
3234

3335
### Rules
3436

35-
- **best-practices** - Always-on rules that enforce current Tailwind CSS v4 patterns
37+
- **best-practices** - Always-on rules that enforce current Tailwind CSS v4 patterns
3638

3739
### Commands
3840

39-
- `/audit` - Scan your codebase for Tailwind CSS anti-patterns
41+
- `/audit` - Scan your codebase for Tailwind CSS anti-patterns
4042

4143
## Why This Plugin?
4244

43-
AI agents are trained on data that includes outdated Tailwind patterns. This plugin ensures your agent uses Tailwind v4 best practices. Agents commonly get wrong:
44-
45-
1. **tailwind.config.js** - v4 uses CSS-first @theme; agents keep generating JavaScript config
46-
2. **bg-opacity-50, text-opacity-25** - v4 uses inline opacity: bg-red-500/50, text-white/80
47-
3. **@tailwind directives** - v4 uses @import "tailwindcss"; agents output the old three-line setup
48-
4. **bg-gradient-to-r** - v4 prefers bg-linear-to-r and bg-linear-45 for gradients
49-
5. **!important placement** - v4 puts ! at the end (flex!) not the start (!flex); agents use the old syntax
50-
6. **CSS variables in arbitrary values** - v4 requires bg-(--var) not bg-[--var]; agents use square brackets
51-
7. **Commas in grid/object arbitrary values** - v4 requires underscores: grid-cols-[max-content_auto]
45+
AI agents are trained on data that includes outdated Tailwind patterns. This plugin ensures your
46+
agent uses Tailwind v4 best practices. Agents commonly get wrong:
47+
48+
1. **tailwind.config.js** - v4 uses CSS-first @theme; agents keep generating JavaScript config
49+
2. **bg-opacity-50, text-opacity-25** - v4 uses inline opacity: bg-red-500/50, text-white/80
50+
3. **@tailwind directives** - v4 uses @import "tailwindcss"; agents output the old three-line setup
51+
4. **bg-gradient-to-r** - v4 prefers bg-linear-to-r and bg-linear-45 for gradients
52+
5. **!important placement** - v4 puts ! at the end (flex!) not the start (!flex); agents use the old
53+
syntax
54+
6. **CSS variables in arbitrary values** - v4 requires bg-(--var) not bg-[--var]; agents use square
55+
brackets
56+
7. **Commas in grid/object arbitrary values** - v4 requires underscores:
57+
grid-cols-[max-content_auto]
5258

5359
## License
5460

commands/audit.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: Audit the current codebase for Tailwind CSS v4 best practice violat
66
Scan the current project for Tailwind CSS anti-patterns and best practice violations.
77

88
For each issue found:
9+
910
1. Show the file and line
1011
2. Explain what's wrong
1112
3. Show the correct pattern

package.json

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,16 @@
88
"format": "prettier --write .",
99
"format:check": "prettier --check ."
1010
},
11-
"keywords": ["tailwind", "tailwindcss", "css", "best-practices", "v4", "cursor-plugin", "claude-code", "ai-agent"],
11+
"keywords": [
12+
"tailwind",
13+
"tailwindcss",
14+
"css",
15+
"best-practices",
16+
"v4",
17+
"cursor-plugin",
18+
"claude-code",
19+
"ai-agent"
20+
],
1221
"author": {
1322
"name": "Ofer Shapira",
1423
"url": "https://github.com/ofershap"

scripts/validate.mjs

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,7 @@ function parseFrontmatter(content) {
4949
}
5050

5151
async function validatePlugin() {
52-
const pluginJson = await readJson(
53-
path.join(root, ".cursor-plugin", "plugin.json"),
54-
);
52+
const pluginJson = await readJson(path.join(root, ".cursor-plugin", "plugin.json"));
5553
if (!pluginJson) {
5654
error(".cursor-plugin/plugin.json is missing or invalid");
5755
return;
@@ -89,8 +87,7 @@ async function validatePlugin() {
8987
error(`Skill ${skill}/SKILL.md is missing frontmatter`);
9088
} else {
9189
if (!fm.name) error(`Skill ${skill}/SKILL.md missing name in frontmatter`);
92-
if (!fm.description)
93-
error(`Skill ${skill}/SKILL.md missing description in frontmatter`);
90+
if (!fm.description) error(`Skill ${skill}/SKILL.md missing description in frontmatter`);
9491
}
9592
}
9693
console.log(` Skills: ${skills.length} found`);
@@ -115,37 +112,31 @@ async function validatePlugin() {
115112

116113
const commandsDir = path.join(root, "commands");
117114
if (await exists(commandsDir)) {
118-
const commands = (await fs.readdir(commandsDir)).filter((f) =>
119-
f.endsWith(".md"),
120-
);
115+
const commands = (await fs.readdir(commandsDir)).filter((f) => f.endsWith(".md"));
121116
for (const cmd of commands) {
122117
const content = await fs.readFile(path.join(commandsDir, cmd), "utf8");
123118
const fm = parseFrontmatter(content);
124119
if (!fm) {
125120
error(`Command ${cmd} missing frontmatter`);
126121
} else {
127122
if (!fm.name) error(`Command ${cmd} missing name in frontmatter`);
128-
if (!fm.description)
129-
error(`Command ${cmd} missing description in frontmatter`);
123+
if (!fm.description) error(`Command ${cmd} missing description in frontmatter`);
130124
}
131125
}
132126
console.log(` Commands: ${commands.length} found`);
133127
}
134128

135129
const agentsDir = path.join(root, "agents");
136130
if (await exists(agentsDir)) {
137-
const agents = (await fs.readdir(agentsDir)).filter((f) =>
138-
f.endsWith(".md"),
139-
);
131+
const agents = (await fs.readdir(agentsDir)).filter((f) => f.endsWith(".md"));
140132
for (const agent of agents) {
141133
const content = await fs.readFile(path.join(agentsDir, agent), "utf8");
142134
const fm = parseFrontmatter(content);
143135
if (!fm) {
144136
error(`Agent ${agent} missing frontmatter`);
145137
} else {
146138
if (!fm.name) error(`Agent ${agent} missing name in frontmatter`);
147-
if (!fm.description)
148-
error(`Agent ${agent} missing description in frontmatter`);
139+
if (!fm.description) error(`Agent ${agent} missing description in frontmatter`);
149140
}
150141
}
151142
console.log(` Agents: ${agents.length} found`);

0 commit comments

Comments
 (0)