💡 How to use these prompts:
Replace everything in [BRACKETS] with your specific details before sending.
Click Copy to copy any prompt to your clipboard instantly.
Build a [COMPONENT TYPE — e.g. dropdown menu, data table, modal, form] in [FRAMEWORK — React / Vue / Svelte / plain HTML]. Requirements: - [REQUIREMENT 1] - [REQUIREMENT 2] Style with [Tailwind / CSS Modules / styled-components — specify]. Make it accessible (ARIA labels, keyboard navigation). Output clean, commented code I can paste directly.
Convert the following design description into working [FRAMEWORK] code: Design: [DESCRIBE THE UI IN DETAIL — layout, colors, typography, interactions] Breakpoints: [MOBILE / TABLET / DESKTOP requirements] Interactions: [HOVER STATES / ANIMATIONS / CLICK BEHAVIOR] Output production-ready code.
I need to refactor [MODULE NAME] as part of a larger codebase migration. This is a multi-step task: Step 1: [DESCRIBE FIRST CHANGE] Step 2: [DESCRIBE SECOND CHANGE] Step 3: [DESCRIBE THIRD CHANGE] Constraints: - Do not break the public API - Maintain all existing tests - Each step should be independently committable Context: [PASTE RELEVANT CODE] Work through each step systematically.
I have a bug: [DESCRIBE THE BUG BEHAVIOR] Relevant files: [PASTE UP TO 1M TOKENS OF RELEVANT CODE] Please: 1. Identify the exact root cause 2. Show the fix 3. Explain why the bug occurred 4. Suggest a test to prevent regression
Review and optimize the following CSS/layout code. Focus on: - Removing redundant or conflicting rules - Improving responsive behavior - Reducing specificity conflicts - Improving render performance [PASTE CSS HERE] Context: [FRAMEWORK / BROWSER TARGETS / KNOWN ISSUES]
Write integration tests for the following feature or API endpoint. Use [FRAMEWORK — Playwright / Cypress / Supertest — specify]. Feature: [DESCRIBE WHAT IS BEING TESTED] Cover: - Happy path with expected inputs - Error states and edge cases - Auth or permissions requirements Code to test: [PASTE RELEVANT CODE]