Add StyleSeed design rules (CSS and Styling)

[bitjaru]

Adds a .cursorrules for StyleSeed under CSS and Styling.

It's a framework-agnostic design-judgment rule (based on the open-source StyleSeed engine, MIT): one accent, one radius personality, spacing rhythm, hierarchy, real empty/loading/error states, and UX-writing (buttons that name the action, errors that help instead of blame). The headline rule is coherence — pick one value per axis and apply it everywhere — which is the fastest fix for UI that 'looks AI-generated.'

Follows the existing rules/<name>-cursorrules-prompt-file/.cursorrules folder format. Thanks for maintaining this!

Summary by CodeRabbit

• Documentation

  • Added StyleSeed Design Engine reference to the project rules section.

• Chores

  • Added design specification configuration file for development environment.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new .cursorrules prompt file for the StyleSeed Design Engine (React, Tailwind v4, shadcn/ui) is added with 85 lines of UI/UX design rules covering typography, layout, color tokens, required states, and forbidden patterns. A corresponding entry is added to the root README under "CSS and Styling."

Changes

StyleSeed Design Engine cursorrules addition

Layer / File(s)	Summary
StyleSeed .cursorrules ruleset and README index entry rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules, README.md	Adds a complete 85-line Cursor ruleset defining coherence constraints, typography scale, 8px grid layout rhythm, semantic color token usage, mandatory empty/loading/error states, UX writing conventions, chart constraints, and explicit forbidden patterns. Registers the entry in the root README's CSS and Styling section.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• PatrickJS

Poem

🐇 A seed of style now takes root in the rules,
With tokens and grids among my favorite tools.
No pure black! No mixed radii in sight—
Eight pixels of rhythm, the spacing just right.
I check all four states with a wiggle and hop,
The coherence is perfect—now bunny won't stop! 🌱

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding StyleSeed design rules to the CSS and Styling category.
Description check	✅ Passed	The description covers the Summary, Contribution Type, Value To Cursor Users, and Added Or Changed Files sections, with most Quality Checklist items addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch add-styleseed

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@README.md`:
- Line 178: Move the StyleSeed Design Engine entry to maintain alphabetical
order within the CSS and Styling section of the README. The entry currently
appears at the end of the section but should be repositioned to appear after all
React entries and before the Tailwind entries, since "StyleSeed" begins with "S"
which falls alphabetically between "React" (R) and "Tailwind" (T). Relocate the
StyleSeed Design Engine line so it appears in the correct alphabetical position
within the section.

🪄 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: 52efdc2a-1947-4227-a0f5-ebc82609a4e5

📥 Commits

Reviewing files that changed from the base of the PR and between b044f95 and 28493cd.

📒 Files selected for processing (2)

• README.md
• rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Place entry in alphabetical order within the section.

The repository's coding guidelines require maintaining alphabetical order within each category. As per coding guidelines, entries should be sorted alphabetically by their display name. "StyleSeed Design Engine" should appear after the "React" entries and before the "Tailwind" entries (S comes after R, before T).

The new entry is currently placed at the end of the section, but alphabetically it should be inserted between line 177 (React Chakra UI) and line 171 (Tailwind CSS).

📋 Proposed fix to place entry in alphabetical order

The StyleSeed entry should be moved to appear after the React entries and before the Tailwind entries. The correct alphabetical order for the CSS and Styling section should be:

- [HTML (Tailwind CSS, JavaScript)](./rules/html-tailwind-css-javascript-cursorrules-prompt-fi/.cursorrules) - Cursor rules for HTML development with Tailwind CSS and JavaScript integration.
- [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 (Chakra UI)](./rules/react-chakra-ui-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Chakra UI integration.
- [React (Styled Components)](./rules/react-styled-components-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Styled Components integration.
- [StyleSeed Design Engine (React, Tailwind v4, shadcn/ui)](./rules/styleseed-design-engine-cursorrules-prompt-file/.cursorrules) - Design rules that make Cursor produce professional React + Tailwind CSS UI.
- [Tailwind (React, Firebase)](./rules/tailwind-react-firebase-cursorrules-prompt-file/.cursorrules) - Cursor rules for Tailwind development with React and Firebase integration.
- [Tailwind (shadcn/ui Integration)](./rules/tailwind-shadcn-ui-integration-cursorrules-prompt-/.cursorrules) - Cursor rules for Tailwind development with shadcn/ui integration.
- [Tailwind CSS (Next.js Guide)](./rules/tailwind-css-nextjs-guide-cursorrules-prompt-file/.cursorrules) - Cursor rules for Tailwind CSS development with Next.js integration.

Note: This would also correct the alphabetical ordering of the existing entries in this section.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` at line 178, Move the StyleSeed Design Engine entry to maintain
alphabetical order within the CSS and Styling section of the README. The entry
currently appears at the end of the section but should be repositioned to appear
after all React entries and before the Tailwind entries, since "StyleSeed"
begins with "S" which falls alphabetically between "React" (R) and "Tailwind"
(T). Relocate the StyleSeed Design Engine line so it appears in the correct
alphabetical position within the section.

Source: Coding guidelines