AI Prompts for Cursor for Frontend Development
20 tested prompts across 4 stages. Works with ChatGPT, Claude, and Gemini.
Build polished, performant frontend interfaces faster using Cursor's AI assistance for components, styling, and interactions. Built across 4 distinct stages covering Build UI components, Style and layout, Handle state and data and more, this guide gives you one tested prompt per step so you never have to write from scratch or guess what the AI needs. The prompts work in ChatGPT, Claude, and Gemini and are designed to get usable output on the first try.
Stage 1
Build UI components
These prompts help you write clean, accessible UI components that are easy to reuse.
Build a UI component
Build a [COMPONENT NAME] component in [REACT / VUE / SVELTE] with TypeScript and [TAILWIND / CSS MODULES / STYLED-COMPONENTS]. It should: [DESCRIBE BEHAVIOR AND APPEARANCE]. Make it accessible and reusable.
Implement a design mockup
Implement this design in code: [DESCRIBE THE DESIGN OR PASTE DESIGN TOKENS]. Use [REACT + TAILWIND / OTHER STACK]. Match the spacing, typography, colors, and responsive behavior exactly.
Build a form
Build a form for [DESCRIBE THE FORM FIELDS AND PURPOSE]. Include: validation for each field, error messages, loading state, and success/error feedback after submission.
Build a data table
Build a data table component that displays [DESCRIBE THE DATA]. Include: sortable columns, pagination, row selection, and a loading skeleton. Use [LIBRARY IF ANY, OR BUILD FROM SCRATCH].
Build navigation
Build a navigation component: [DESCRIBE THE NAV: SIDEBAR / TOP NAV / TABS / BREADCRUMBS]. Include: active state highlighting, mobile responsive behavior, and keyboard navigation.
Stage 2
Style and layout
Use these prompts to create layouts and styles that work correctly across devices.
Fix a layout issue
I have a layout problem: [DESCRIBE WHAT IS WRONG]. Here is my code: [PASTE CODE]. Fix it using CSS/Tailwind. Explain what caused the issue and why your fix works.
Make it responsive
Make this component fully responsive: [PASTE CODE]. It should work on mobile (320px+), tablet (768px+), and desktop (1280px+). Use Tailwind responsive prefixes / CSS media queries.
Implement dark mode
Add dark mode support to this component: [PASTE CODE]. Use [TAILWIND DARK: PREFIX / CSS CUSTOM PROPERTIES / NEXT-THEMES]. The colors should respect system preference and user toggle.
Polish UI spacing
Review the spacing and visual rhythm in this component: [PASTE CODE OR DESCRIBE]. Suggest improvements to padding, margin, line-height, and font sizes to improve readability and visual hierarchy.
Add animations
Add tasteful animations to this component: [PASTE CODE]. Use [TAILWIND TRANSITIONS / CSS ANIMATIONS / FRAMER MOTION]. Keep animations under 300ms and ensure they respect prefers-reduced-motion.
Stage 3
Handle state and data
These prompts help you manage application state and data flow in the frontend.
Add client-side state
Add state management to this component: [DESCRIBE THE FEATURE]. What state do I need, how should it update, and what side effects should run when it changes?
Fetch and display data
Write code to fetch data from [DESCRIBE THE API ENDPOINT] and display it in this component: [PASTE OR DESCRIBE COMPONENT]. Handle loading, error, and empty states.
Add optimistic updates
Add optimistic UI updates to this mutation: [PASTE CODE]. Update the UI immediately on action, then reconcile with the server response. Handle rollback on failure.
Handle infinite scroll
Add infinite scroll to this list: [PASTE CODE]. Detect when the user reaches the bottom, load the next page of data, and append it to the list. Show a loading indicator and handle the end of data.
Add search and filter
Add search and filtering to this list component: [PASTE CODE]. Filter should work client-side for [X ITEMS] or hit an API endpoint for larger datasets. Debounce the search input.
Stage 4
Quality and performance
Use these prompts to test your UI, fix issues, and improve performance.
Make it accessible
Make this component accessible: [PASTE CODE]. Check for: missing ARIA attributes, keyboard navigation, focus management, color contrast, and screen reader announcements for dynamic content.
Optimize rendering
This component re-renders too often and is causing performance issues: [PASTE COMPONENT]. Diagnose the cause and optimize with memoization, virtualization for large lists, or state restructuring.
Write component tests
Write tests for this component using [TESTING LIBRARY / VITEST / JEST]: [PASTE COMPONENT]. Test: rendering, user interactions, state changes, and edge cases like empty data or error states.
Write a Storybook story
Write a Storybook story for this component: [PASTE COMPONENT]. Include stories for: the default state, all prop variations, interactive state changes, and edge cases.
Code review a PR
Review this frontend code for a PR: [PASTE CODE]. Check for: accessibility issues, performance problems, missing error handling, and code style consistency with our existing components.
Frequently asked questions
How does Cursor help with frontend development?+
Cursor reads your existing components, design tokens, and utility patterns so it can generate new components that match your codebase's style. It is especially useful for repetitive component creation and fixing hard-to-diagnose CSS layout bugs.
Can Cursor implement designs from Figma?+
You can describe designs to Cursor or paste design tokens and it will implement them in code. For direct Figma integration, some plugins can export component specifications that you can paste into Cursor for implementation.
What frontend framework does Cursor work best with?+
Cursor works well with all major frameworks: React, Vue, Svelte, and Solid. It understands framework-specific patterns and conventions. For styling, it handles Tailwind CSS, CSS Modules, and CSS-in-JS libraries.
How do I use Cursor to fix CSS layout bugs?+
Describe the problem (element overlapping, centering not working, grid layout collapsing), paste the relevant code, and ask Cursor to diagnose and fix it. Explain what the layout should look like versus what is happening.
Can Cursor help me build accessible UIs without knowing all the ARIA specs?+
Yes. Ask Cursor to review any component for accessibility issues and it will identify missing ARIA roles, labels, keyboard interactions, and focus management. It can also generate accessible versions of common patterns like modals, dropdowns, and accordions.
Other prompt packages you might like
AI Prompts for Cursor for React Development
Frontend developers often face challenges in streamlining their React development process.
See prompts
AI Prompts for Cursor for TypeScript
TypeScript developers often face challenges in managing complex codebases and improving productivity.
See promptsAI Prompts for Cursor for Performance Optimization
Identify and fix performance bottlenecks in your codebase using Cursor to deliver faster applications..
See prompts