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 2 commits 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.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdded a new StyleSeed Design Engine CursorRules prompt file and its README under 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
| ## 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