Add gluestack-ui cursorrules under Mobile Development

[sanketsahu]

Add gluestack-ui cursorrules

Adds a .mdc rule for gluestack-ui, the copy-paste universal component library for React Native, Expo, and Next.js styled with NativeWind. The rule is adapted from the official gluestack/agent-skills repo (MIT-licensed) and translated into the Cursor Project Rules format.

The rule covers patterns I've found agents (Cursor and Claude Code) consistently miss when working on gluestack-ui codebases:

• Resolution hierarchy — component props → className → built-in variants → tva → NativeWind interop → inline styles (last resort). Agents tend to skip straight to className or inline styles when a size / variant / space prop would do.
• Semantic tokens only — bg-primary, text-foreground, bg-card, border-border. Agents frequently fall back to raw Tailwind colors like text-blue-600 or legacy tokens like text-typography-700.
• Compound component requirements — <ButtonText>, <InputField>, FormControl cluster. Critical rule: <InputIcon> MUST be wrapped in <InputSlot> — agents put it directly inside <Input> by default.
• Local-first imports — components live in components/ui/, not node_modules. Don't import from the legacy @gluestack-ui/themed package.
• Setup — official CLI commands (npx gluestack-ui@alpha init, add), GluestackUIProvider requirement, doc URL pattern (https://gluestack.io/ui/docs/components/${componentName}/).
• Cross-platform constraints — guard web-only APIs, use gluestack Pressable, FlatList for lists, Reanimated for animations.
• Anti-patterns that catch agents mixing legacy/current APIs or layering competing libraries.

Added under ### Mobile Development (alphabetical position between Flutter and HarmonyOS), since RN is the primary use case.

Format follows the modern Cursor Project Rules spec — description, globs, alwaysApply frontmatter — per CONTRIBUTING.md.

Summary by CodeRabbit

• Documentation

  • Added Mobile Development guidance for gluestack-ui v4 covering tokens, component patterns, variant standards, accessibility, and cross-platform constraints.

• Chores

  • Added a new rule set prescribing component patterns, styling conventions, accessibility practices, and platform-specific constraints for gluestack-ui v4.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 812da234-fb25-4d9d-a022-0f4dbd8376a7

📥 Commits

Reviewing files that changed from the base of the PR and between 784a7d5 and 4307a01.

📒 Files selected for processing (2)

• README.md
• rules/gluestack-ui-cursorrules-prompt-file.mdc

✅ Files skipped from review due to trivial changes (2)

• README.md
• rules/gluestack-ui-cursorrules-prompt-file.mdc

---

📝 Walkthrough

Walkthrough

Adds a new Cursor rules prompt file for gluestack-ui v4 with styling/component conventions, compound component patterns, cross-platform constraints, tva variant guidance, accessibility/anti-patterns, and a README Mobile Development entry linking to the rule.

Changes

gluestack-ui v4 Cursor Rules Addition

Layer / File(s)	Summary
Core principles and compound component patterns rules/gluestack-ui-cursorrules-prompt-file.mdc	Rule metadata and core styling/principles; enforces prop-first design, semantic NativeWind tokens, className-first styling, spacing scale, compound sub-component patterns (ButtonText/ButtonIcon, InputSlot/InputField, FormControl) and example semantic token usage.
Setup, imports, cross-platform constraints, and accessibility rules/gluestack-ui-cursorrules-prompt-file.mdc	CLI/component import guidance (components/ui), disallow legacy packages, require GluestackUIProvider, cross-platform constraints (avoid document/window, use Pressable, native virtualization, SafeAreaView/insets, prefer Reanimated), accessibility requirements and listed anti-patterns.
tva variant guidance and docs rules/gluestack-ui-cursorrules-prompt-file.mdc	When to extract repeated className combos into tva variants, example tva usage, prohibition of repetitive cn() overrides; includes links to live per-component docs and originating agent-skills repo.
README Mobile Development entry README.md	Inserted Mobile Development bullet linking to rules/gluestack-ui-cursorrules-prompt-file.mdc, summarizing rule coverage (component patterns, NativeWind variant/resolution guidance, cross-platform constraints).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• PatrickJS

Poem

🐰 I hopped through tokens, variants, and view,
Wove compound buttons and inputs anew,
A README note and rules kept neat,
So components align and styles repeat,
Hooray for gluestack—hoppity-beat!

🚥 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 a new Cursor rule for gluestack-ui under the Mobile Development section.
Description check	✅ Passed	The description covers all required template sections with substantial detail: Summary (what/why), Contribution Type (new rule file), Value to Cursor Users (resolves agent failure patterns), Added/Changed Files (two files listed with context), Quality Checklist items, and Notes for Maintainers (licensing and source attribution clearly stated).
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

---

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: 0

[coderabbitai]

Actionable comments posted: 0

[coderabbitai]

Actionable comments posted: 0