Add StyleSeed Design Engine cursorrules (React, Tailwind v4, shadcn/ui)#245
Add StyleSeed Design Engine cursorrules (React, Tailwind v4, shadcn/ui)#245bitjaru wants to merge 1 commit intoPatrickJS:mainfrom
Conversation
Adds .cursorrules and README.md for the StyleSeed design engine under CSS and Styling. Extracted from https://github.com/bitjaru/styleseed — an open-source design engine with 69 design rules, 48 shadcn-style components, and brand skins (Toss, Stripe, Linear, Vercel, Notion). The ruleset encodes 10 Golden Rules, a font-size-by-context table, semantic color tokens, and Tailwind v4 anti-pattern guards so Cursor produces professionally-judged UI instead of generic AI output.
📝 WalkthroughWalkthroughA new StyleSeed Design Engine cursorrules file was added to enforce consistent React/Tailwind v4 UI output with strict typography, color, spacing, and component conventions. The root README was updated with an entry referencing this new design system rules guide. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Line 178: Move the "StyleSeed Design Engine (React, Tailwind v4, shadcn/ui)"
entry into the CSS and Styling section so entries remain alphabetically ordered:
place it after the "React (Chakra UI)" entry and before the Tailwind entries
(e.g., before "Tailwind (React, Firebase)" / "Tailwind (shadcn/ui
Integration)"), ensuring the list reads: React (Chakra UI) → React (Styled
Components) → StyleSeed Design Engine → Tailwind entries; update any surrounding
punctuation or list markers to keep formatting consistent.
In `@rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules`:
- Around line 35-41: Update the anti-patterns text to correct the variable name
and clarify the Tailwind behavior: replace the claim "NEVER change `--font-size`
in `theme.css`. Every `rem`-based class (`h-14`, `px-6`, `gap-3`) depends on
it." to reference `--spacing` (e.g., "NEVER change `--spacing` in `theme.css`.
Spacing/sizing utilities (`px-6`, `gap-3`, `h-14`) depend on `--spacing`"), and
revise the `text-[var(--anything)]` line to explain the ambiguity and show the
correct syntaxes (`text-[length:var(--custom)]` or shorthand `text-[--custom]`)
for using CSS variables as font sizes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: de81ea34-770b-4a24-9f7a-1068dbe9c303
📒 Files selected for processing (3)
README.mdrules/styleseed-design-engine-cursorrules-prompt-file/.cursorrulesrules/styleseed-design-engine-cursorrules-prompt-file/README.md
| - [JavaScript (Astro, Tailwind CSS)](./rules/javascript-astro-tailwind-css-cursorrules-prompt-f/.cursorrules) - Cursor rules for JavaScript development with Astro and Tailwind CSS integration. | ||
| - [React (Styled Components)](./rules/react-styled-components-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Styled Components integration. | ||
| - [React (Chakra UI)](./rules/react-chakra-ui-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Chakra UI integration. | ||
| - [StyleSeed Design Engine (React, Tailwind v4, shadcn/ui)](./rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules) - Cursor rules extracted from the StyleSeed design engine. 10 Golden Rules, a font-size-by-context table, semantic color tokens, and Tailwind v4 anti-pattern guards that stop Cursor from generating ugly, generic UI and make it produce Toss / Stripe / Linear quality output. |
There was a problem hiding this comment.
Entry should be placed in alphabetical order.
The "CSS and Styling" section entries should be alphabetically ordered. Currently, the StyleSeed entry is placed at the end, but it should be positioned between "React (Chakra UI)" and the Tailwind entries for alphabetical consistency.
As per coding guidelines: "Maintain alphabetical order within each category in the README.md file".
📝 Suggested reordering of CSS and Styling section
The correct alphabetical order should be:
- HTML (Tailwind CSS, JavaScript)
- JavaScript (Astro, Tailwind CSS)
- React (Chakra UI)
- React (Styled Components)
- StyleSeed Design Engine (React, Tailwind v4, shadcn/ui) ← should be here
- Tailwind (React, Firebase)
- Tailwind (shadcn/ui Integration)
- Tailwind CSS (Next.js Guide)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` at line 178, Move the "StyleSeed Design Engine (React, Tailwind
v4, shadcn/ui)" entry into the CSS and Styling section so entries remain
alphabetically ordered: place it after the "React (Chakra UI)" entry and before
the Tailwind entries (e.g., before "Tailwind (React, Firebase)" / "Tailwind
(shadcn/ui Integration)"), ensuring the list reads: React (Chakra UI) → React
(Styled Components) → StyleSeed Design Engine → Tailwind entries; update any
surrounding punctuation or list markers to keep formatting consistent.
| ## Typography anti-patterns (NEVER do these) | ||
|
|
||
| - ❌ NEVER create CSS variables for font sizes (`--text-sm`, `--fs-body`). They conflict with Tailwind v4's `--text-*` namespace and silently break line-height and spacing. | ||
| - ❌ NEVER use `text-[var(--anything)]` — Tailwind v4 interprets this as a color, not a font size. | ||
| - ❌ NEVER change `--font-size` in `theme.css`. Every `rem`-based class (`h-14`, `px-6`, `gap-3`) depends on it. | ||
| - ✅ ALWAYS use explicit px values: `text-[36px]`, `text-[18px]`, `text-[13px]`. | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Tailwind CSS v4 CSS variable namespaces and arbitrary value syntax for text-[var(--custom)]
💡 Result:
In Tailwind CSS v4, theme variables are organized into specific namespaces defined using the @theme directive. Each namespace corresponds to utility classes or variants. Key namespaces include: --color-: Colors for utilities like bg-red-500, text-sky-300 --font-: Font families like font-sans --text-: Font sizes like text-xl --spacing-: Spacing/sizing like px-4, max-h-16 --radius-: Border radius like rounded-sm --shadow-: Box shadows like shadow-md --breakpoint-: Responsive variants like sm: And others like --font-weight-, --leading-, etc. These are defined in official docs at tailwindcss.com/docs/theme#theme-variable-namespaces. For arbitrary values using CSS variables, like text-[var(--custom)], use the shorthand syntax text-[--custom] which generates font-size: var(--custom);. Tailwind automatically wraps --custom in var. The text- prefix is ambiguous (font-size vs color), so specify the type hint: text-[length:--custom] for font-size: var(--custom); or text-[color:--custom] for color: var(--custom);. This works in v4 as the arbitrary value syntax remains consistent with v3 enhancements.
Citations:
- 1: https://tailwindcss.com/docs/configuration
- 2: https://tailwindcss.com/docs/theme
- 3: https://tailwindcss.com/docs/adding-custom-styles
- 4: http://tailwindcss.com/docs/adding-custom-styles
- 5: https://tailwindcss.com/docs/plugins/
- 6: https://stackoverflow.com/questions/76718979/tailwind-css-use-css-variable-as-arbitrary-value-for-font-size
- 7: https://leohuynh.dev/blog/on-tailwind-css-arbitrary-values
- 8: text- arbitrary value assumes color when enough info present to suggest font size tailwindlabs/tailwindcss#12960
- 9: [v4] Border with arbitrary color using
vartailwindlabs/tailwindcss#14181
🌐 Web query:
Tailwind CSS v4 font-size configuration and rem-based spacing behavior
💡 Result:
In Tailwind CSS v4, font-size configuration uses CSS theme variables with the @theme directive. Default utilities like text-xs to text-9xl map to --text-* variables defined as rem values (e.g., --text-xs: 0.75rem; --text-base: 1rem;), paired with sub-variables for line-height like --text-xs--line-height: calc(1 / 0.75);. Custom font sizes are added via @theme { --text-custom: 1.125rem; --text-custom--line-height: 1.75rem; --text-custom--font-weight: 700; }, generating text-custom utility. Spacing (margin, padding, gap, etc.) uses a dynamic rem-based multiplier system driven by a single --spacing theme variable, defaulting to 0.25rem (4px at 16px root font). Utilities compute as calc(var(--spacing) * N), e.g., m-4 is margin: calc(var(--spacing) * 4); or 1rem. This enables arbitrary values like m-42 without predefined scales. Customize with @theme { --spacing: 1px; } for pixel-based or other units. Values support integers and .25/.5/.75 decimals for legacy compatibility (e.g., m-1.5). Logical properties (ms-, pe-) and space-* utilities also leverage this system.
Citations:
- 1: https://tailwindcss.com/docs/font-size
- 2: https://stackoverflow.com/questions/79569620/how-to-configure-font-styles-with-theme-in-tailwind-css-v4
- 3: https://tailwindcss.com/docs/margin
- 4: Replace default explicit spacing scale with multiplier system tailwindlabs/tailwindcss#14857
- 5: v4.0.0 Beta missing --spacing-* variables tailwindlabs/tailwindcss#15182
- 6: https://tailwindcss.com/docs/customizing-spacing/
- 7: https://tailwindcss.com/docs/padding
Correct the CSS variable that controls spacing classes in the anti-patterns section.
The warning about --text-* namespace conflicts is accurate, but line 39 contains a critical error:
- The claim states: "Every
rem-based class (h-14,px-6,gap-3) depends on it [--font-size]" - Actual behavior: Spacing classes (
px-6,gap-3,h-14, etc.) depend on the--spacingvariable in Tailwind v4, not--font-size. The--spacingvariable defaults to0.25remand controls all spacing/sizing utilities viacalc(var(--spacing) * N). --font-sizeis reserved solely for font configuration and does not affect spacing utilities.
Additionally, the statement about text-[var(--anything)] being "interpreted as a color" is misleading. The actual issue is that the text- prefix is ambiguous without a type hint. Use text-[length:--custom] or the shorthand text-[--custom] for proper font-size application with CSS variables.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules` around
lines 35 - 41, Update the anti-patterns text to correct the variable name and
clarify the Tailwind behavior: replace the claim "NEVER change `--font-size` in
`theme.css`. Every `rem`-based class (`h-14`, `px-6`, `gap-3`) depends on it."
to reference `--spacing` (e.g., "NEVER change `--spacing` in `theme.css`.
Spacing/sizing utilities (`px-6`, `gap-3`, `h-14`) depend on `--spacing`"), and
revise the `text-[var(--anything)]` line to explain the ambiguity and show the
correct syntaxes (`text-[length:var(--custom)]` or shorthand `text-[--custom]`)
for using CSS variables as font sizes.
|
Quick update for reviewers — just shipped a live interactive demo so you can see the engine without cloning anything: 🎬 https://styleseed-demo.vercel.app Click the Toss / Raycast / Arc switcher to watch the same chat UI morph across three brand DNAs — colors, radius, motion, shadows, gradients all driven by StyleSeed tokens via a single |
1 participant
Adds the StyleSeed Design Engine cursorrules under CSS and Styling.
Upstream: https://github.com/bitjaru/styleseed (184 ⭐, MIT)
What this adds
rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules— the actual rulesetrules/styleseed-design-engine-cursorrules-prompt-file/README.md— description / synopsisWhy this is different from existing Tailwind rules
The existing Tailwind / shadcn rules teach Cursor how to use Tailwind and shadcn/ui. StyleSeed teaches Cursor design judgment:
--text-*namespace conflict andtext-[var(--x)]color-vs-size bug that silently break projectstext-brand,bg-card, never hardcoded hexdata-slot,cn(), CVA,asChild,size-4,ms-*— shadcn/ui compatibleThe rules are extracted from the open-source StyleSeed design engine, which distills 69 documented design rules from Toss, Stripe, Linear, Vercel, and Notion.
Checklist
{topic}-cursorrules-prompt-fileconvention.cursorrulesandREADME.mdSummary by CodeRabbit