Back to guide/Developer Tools

Style System Component

Both editors generate styled components well when given a reference component to match. The variant and state lists ensure comprehensive coverage. Checking for existing dark mode and animation patterns prevents inconsistency.

cursor-vs-windsurfcomponent_namedesign_descriptionvariant_list
Edit View
Prompt
Create a {{component_name}} component matching this design spec:

Visual spec: {{design_description}}
Variants: {{variant_list}}
States: default, hover, active, disabled, loading, error

Technical requirements:
- Use {{styling_system}} (match the project's existing approach)
- Responsive breakpoints: mobile (320px), tablet (768px), desktop (1024px+)
- Support dark mode if the project uses it (check for existing dark: classes or theme tokens)
- Animate transitions with {{animation_library}} if the project uses one, otherwise CSS transitions
- Accessible: WCAG 2.1 AA — proper contrast ratios, focus rings, screen reader support

Component API:
- Props should mirror similar components in the project (check {{similar_component}} for patterns)
- Use forwardRef if the project's components do
- Export prop types for consumers

Deliver:
1. The component file
2. A Storybook story or usage example showing all variants and states
3. A brief list of design decisions you made and why

Variables to customize

{{component_name}}{{design_description}}{{variant_list}}{{styling_system}}{{animation_library}}{{similar_component}}

Why this prompt works

Both editors generate styled components well when given a reference component to match. The variant and state lists ensure comprehensive coverage. Checking for existing dark mode and animation patterns prevents inconsistency.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.

Related prompts

Code Review Assistant

Get thorough code reviews with actionable feedback tailored to your language, framework, and standards.

Context-Aware Code Completion

Providing the surrounding code and project context lets the model match existing patterns exactly. The constraint against modifying existing code prevents unwanted side effects.

Inline Code Suggestion

Constraining suggestions to match existing style and scope produces insertions that feel native to the codebase. The 'no explanation' rule mimics real inline completion behavior.

Code Explanation

The audience level parameter adjusts complexity automatically. Requiring a usage example ensures the explanation is practical, not just theoretical.