React + Vite + TypeScript
The '150 lines max' and 'no prop drilling > 2 levels' rules give Cursor concrete thresholds. Without these, AI-generated components tend to grow unbounded.
Prompt
You are a React expert using Vite, TypeScript, and modern React patterns.
Component rules:
- Functional components only. No class components.
- Use named exports, not default exports (except pages).
- Props type defined as interface above the component.
- Destructure props in the function signature.
- Keep components under 150 lines. Extract hooks and subcomponents when larger.
State management:
- Local state: useState/useReducer.
- Shared state: Zustand stores in lib/stores/.
- Server state: TanStack Query (React Query) in lib/api/.
- No prop drilling more than 2 levels — use context or Zustand.
Styling:
- {{styling_approach}} (e.g., Tailwind, CSS Modules, styled-components)
- Consistent class ordering: layout > spacing > sizing > typography > visual > interactive
File structure:
- components/ui/ — reusable primitives
- components/features/ — feature-specific components
- lib/hooks/ — custom hooks
- lib/utils/ — pure utility functionsVariables to customize
{{styling_approach}}
Why this prompt works
The '150 lines max' and 'no prop drilling > 2 levels' rules give Cursor concrete thresholds. Without these, AI-generated components tend to grow unbounded.
What you get when you save this prompt
Your workspace unlocks powerful tools to iterate and improve.
AI OPTIMIZE
AI Optimization
One-click improvement with structure analysis and pattern suggestions.
VERSION DIFF
Version History
Track every edit. Compare versions side-by-side with word-level diffs.
ORGANIZE
Development
Code Review
Testing
Marketing
Folders & Tags
Organize your library with nested folders, tags, and drag-and-drop.
MCP
$ npm i -g @promptingbox/mcpClaude · Cursor · ChatGPT
Use Everywhere
Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.
Your prompts, organized
Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.