React Component Generation
Giving v0 exact design tokens (colors, radius, font weights, spacing) produces consistent output that matches your design system instead of random defaults.
Create a {{component_name}} React component using shadcn/ui and Tailwind CSS.\n\nDescription: {{component_description}}\n\nDesign specs:\n- Color palette: {{primary_color}} primary, neutral grays for backgrounds\n- Border radius: 8px on cards, 6px on buttons and inputs\n- Font: Inter or system sans-serif, 14px base, 600 weight for headings\n- Spacing: 16px padding inside cards, 24px gap between sections\n\nStates to include:\n- Default / idle\n- Hover (subtle background shift + shadow)\n- Loading (skeleton placeholder)\n- Empty (friendly illustration or message)\n\nMake it fully responsive. Use TypeScript with proper prop types.
Variables to customize
Why this prompt works
Giving v0 exact design tokens (colors, radius, font weights, spacing) produces consistent output that matches your design system instead of random defaults.
Save this prompt to your library
Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.
Related prompts
Forcing the agent to plan before acting prevents premature execution and wasted steps. Explicit dependency mapping enables parallel execution and catches logical gaps early.
Tool Selection AgentThe ReAct pattern (Reason + Act) creates an explicit reasoning trace that improves tool selection accuracy. The error-handling rule prevents infinite retry loops.
Prompt CompressorExplicitly requiring all functional requirements to be preserved prevents the model from over-compressing and losing critical instructions.
Memory Management AgentExplicit memory read/write instructions create agents that improve over time. Categorization keeps memories organized, and the deduplication rule prevents context bloat.