AI Prompts for Coding

My CSS isn't working as expected. Help me debug it. Here's my HTML: [paste your HTML here] Here's my CSS: [paste your CSS here] What I expected: [describe what you expected to happen] What's actually happening: [describe the current behavior] Please: 1. Identify why the style isn't being applied 2. Check for specificity conflicts, typos, or inheritance issues 3. Show me the corrected CSS with comments explaining each fix 4. If there are multiple possible causes, list them in order of likelihood

Convert this design into clean, semantic HTML and CSS. Design description: [describe the layout in detail — header with logo left and nav right, hero section with centered text over a background image, 3-column card grid below, sticky footer, etc.] Requirements: - Semantic HTML5 elements (header, nav, main, section, footer) - Mobile-first responsive CSS (breakpoints at 768px and 1024px) - Use CSS Grid or Flexbox where appropriate - No frameworks — vanilla HTML and CSS only - Include hover states for interactive elements - Add CSS custom properties for colors and spacing Color palette: [list your colors, e.g., primary: #4a9c3f, background: #0a0a0a, text: #e8e8e8] Font: [e.g., Inter, system-ui]

Make this page fully responsive. Here's my current code: HTML: [paste your HTML] CSS: [paste your CSS] Please: 1. Add a mobile-first responsive approach 2. Include breakpoints for mobile (<768px), tablet (768px-1024px), and desktop (>1024px) 3. Convert any fixed widths to relative units (%, rem, vw) 4. Make sure images scale properly 5. Adjust font sizes for readability on small screens 6. Handle any horizontal overflow issues 7. Show me the complete updated CSS with media queries commented by breakpoint

Audit this HTML for accessibility issues and fix them. [paste your HTML here] Please check for: 1. Missing or incorrect ARIA attributes 2. Images without alt text (provide descriptive suggestions) 3. Form inputs without associated labels 4. Color contrast issues (if colors are visible in the code) 5. Keyboard navigation problems 6. Heading hierarchy (h1 > h2 > h3 in order) 7. Missing landmark roles 8. Focus indicator styling For each issue found: - Explain what's wrong and why it matters - Show the fix with the corrected code - Rate the severity (critical / major / minor) Return the fully corrected HTML at the end.

Explain CSS specificity for this situation: I have these CSS rules, and I'm confused about which one wins and why: [paste your conflicting CSS rules here, e.g.: .container .btn { color: red; } #main .btn { color: blue; } div.container button.btn { color: green; }] Please: 1. Calculate the specificity score for each rule (in the a,b,c format) 2. Explain which rule wins and why 3. Show me the specificity hierarchy from lowest to highest 4. Suggest the cleanest way to organize these rules to avoid specificity wars 5. Explain when !important is and isn't acceptable to use

I'm getting this JavaScript error and I need help fixing it. Error message: [paste the full error message from the console, including the stack trace] Here's the relevant code: [paste the code around the line mentioned in the error] What I was trying to do: [describe the feature or behavior] Please: 1. Explain what this error means in plain English 2. Identify the root cause (not just the symptom) 3. Show me the fixed code 4. Explain what to check for to prevent this type of error in the future 5. If there are multiple possible causes, list them all

Refactor this JavaScript code to be cleaner and more maintainable. Don't change what it does — just improve how it's written. [paste your messy code here] Please: 1. Break large functions into smaller, single-purpose functions 2. Replace magic numbers and strings with named constants 3. Improve variable and function names to be self-documenting 4. Remove code duplication 5. Add JSDoc comments for any function that isn't immediately obvious 6. Use modern JS features where they improve readability (destructuring, optional chaining, nullish coalescing, etc.) 7. Keep the same behavior — show me a before/after comparison of each change you make and explain why it's better

Write unit tests for this function: [paste your function here] Testing framework: [Jest / Vitest / Mocha / vanilla assert] Please write tests that cover: 1. Normal/expected inputs (happy path) 2. Edge cases (empty strings, zero, null, undefined, very large values) 3. Error cases (invalid input types, missing required arguments) 4. Boundary conditions (min/max values, off-by-one) 5. Return value types and shapes For each test: - Use a clear, descriptive test name that reads like a sentence - Add a brief comment explaining WHY that case matters - Use arrange-act-assert structure Aim for at least 10 test cases.

Explain this code line by line. I'm a [beginner / intermediate / advanced] developer. [paste the code you want explained] For each line or block: 1. What it does in plain English 2. Why it's needed (what breaks if you remove it) 3. Any gotchas or non-obvious behavior After the line-by-line breakdown: - Summarize the overall purpose of this code in 2-3 sentences - Rate the code quality (is this well-written? any improvements?) - Identify any potential bugs or issues - Explain any patterns or techniques used (closures, memoization, event delegation, etc.)

Convert this callback-based (or Promise chain) code to use async/await: [paste your callback or .then() chain code here] Please: 1. Convert to async/await with proper try/catch error handling 2. Keep the same behavior and return values 3. Handle all error paths (don't just wrap everything in one try/catch) 4. Add error logging that includes context about which step failed 5. If there are operations that can run in parallel, use Promise.all() 6. Show me the before and after, with comments explaining the changes 7. Point out any potential issues with the original code that the refactor reveals

Build a React component based on this description: Component name: [e.g., UserProfileCard] What it does: [describe the component — e.g., "Displays a user's avatar, name, bio, and a Follow button. The Follow button toggles between Follow/Unfollow states."] Props it should accept: [list props — e.g., name (string), avatarUrl (string), bio (string), isFollowing (boolean), onFollowToggle (function)] Requirements: - Functional component with hooks - TypeScript types for all props - CSS Modules (or styled-components, specify your preference) - Handle loading and error states - Include PropTypes or TypeScript interface - Mobile responsive - Add accessibility attributes (aria labels, roles) - Include a usage example showing how to render the component

My React component is re-rendering too often and I need help fixing it. Here's the component: [paste your full component code] Parent component (if relevant): [paste the parent component] Symptoms: [e.g., "The list re-renders every time I type in an unrelated input field" or "performance is sluggish with 100+ items"] Please: 1. Identify every cause of unnecessary re-renders in this code 2. Explain WHY each one triggers a re-render 3. Apply the right fix for each (React.memo, useMemo, useCallback, state restructuring) 4. Show the complete fixed component 5. Explain when NOT to use these optimizations (premature optimization warning) 6. Suggest how I can verify the fix worked (React DevTools Profiler steps)

Convert this JavaScript React component to TypeScript with proper types: [paste your JS component here] Please: 1. Create interfaces for all props (not inline types) 2. Type all state variables, event handlers, and refs 3. Use proper React types (React.FC, React.ChangeEvent, React.MouseEvent, etc.) 4. Type any API response data with interfaces 5. Add generics where they make the code more reusable 6. Don't use 'any' — use 'unknown' with type guards if the type is truly dynamic 7. Export the interfaces so parent components can use them 8. Add brief comments explaining any non-obvious type choices

Create a custom React hook for the following use case: Purpose: [describe what the hook should do — e.g., "Manage form state with validation, track dirty fields, and handle submission with loading states"] It should: [list specific behaviors — e.g., - Accept initial form values - Validate on blur and on submit - Return field values, errors, touched state, and handlers - Support async validation (like checking if an email exists) - Reset the form to initial state] Please: 1. Name the hook following the useXxx convention 2. Include full TypeScript types 3. Handle cleanup (abort controllers, event listener removal) 4. Add JSDoc documentation 5. Show 2-3 usage examples with different configurations 6. Include a unit test for the main functionality

Audit this React code for performance issues and optimize it: [paste your component(s) here] Context: [e.g., "This is a data table with 500+ rows and filtering/sorting. It feels sluggish when typing in the search field."] Please review and fix: 1. Unnecessary re-renders (objects/arrays created in render, missing memo) 2. Expensive computations that should be memoized 3. Large lists that need virtualization (suggest react-window or react-virtualized) 4. Event handlers that should be debounced or throttled 5. State that's in the wrong place (too high in the tree) 6. Bundle size concerns (large imports that could be lazy loaded) 7. Network waterfalls (requests that could be parallelized) For each fix, explain the performance impact (rough estimate of improvement). Show the complete optimized code at the end.

Write a commit message for these changes. Follow the Conventional Commits format. Here's the diff (or description of changes): [paste your git diff or describe what you changed — e.g., "Added input validation to the signup form, including email format check and password strength meter. Also fixed a bug where the form could be submitted twice by double-clicking."] Rules: 1. Format: type(scope): subject (max 72 characters) 2. Types: feat, fix, refactor, docs, test, chore, perf, style 3. Body: explain WHAT changed and WHY (not HOW — the code shows how) 4. Footer: reference any issue numbers 5. If the changes cover multiple concerns, suggest splitting into separate commits Give me 2-3 options ranging from concise to detailed.

Help me resolve this git merge conflict. Here's the conflicting file with the conflict markers: [paste the file content showing <<<<<<< HEAD, =======, and >>>>>>> markers] Context: - My branch ([branch name]) was trying to: [describe your changes] - The other branch ([branch name]) changed: [describe their changes if you know] Please: 1. Explain what each side of the conflict is doing 2. Recommend which changes to keep (or how to merge both) 3. Show me the resolved file with no conflict markers 4. Flag any subtle issues where combining both changes could cause bugs 5. Show me the git commands to complete the merge after I've resolved the file

Create a CI/CD pipeline configuration for my project. Project details: - Language/framework: [e.g., React with TypeScript, Node.js API, Python Flask] - CI platform: [GitHub Actions / GitLab CI / CircleCI] - Hosting/deployment: [Vercel / Netlify / AWS / Docker + VPS] - Package manager: [npm / yarn / pnpm] The pipeline should: 1. Run on every push to main and on pull requests 2. Install dependencies (with caching for speed) 3. Run linting (ESLint or equivalent) 4. Run all tests with coverage reporting 5. Build the project 6. Deploy to staging on PR merge, production on release tag 7. Send a notification on failure (Slack webhook or email) Include comments explaining each step so I can customize it later. Add a badge URL I can put in my README.

Review this code as a senior developer would in a pull request. [paste your code here] Context: [brief description of what this code does and where it fits in the project] Please review for: 1. **Bugs** — Logic errors, off-by-one, race conditions, null/undefined risks 2. **Security** — XSS, injection, exposed secrets, insecure defaults 3. **Performance** — Unnecessary loops, memory leaks, N+1 queries 4. **Readability** — Naming, structure, comments (too many or too few) 5. **Maintainability** — DRY violations, tight coupling, missing error handling 6. **Edge cases** — Empty arrays, null values, concurrent access Format your review as: - [CRITICAL] — Must fix before merging - [SUGGESTION] — Would improve the code - [NITPICK] — Style preference, take or leave End with an overall assessment: approve, request changes, or needs discussion.

Write documentation for this code: [paste the code — function, class, module, or API endpoint] Generate: 1. **Overview** — One paragraph explaining what this does and why it exists 2. **Parameters/Props** — Table with name, type, required/optional, default, and description 3. **Return value** — What it returns and in what format 4. **Usage examples** — At least 3 examples showing common use cases 5. **Error handling** — What errors it can throw and how to handle them 6. **Edge cases** — Known limitations or gotchas Format: [Markdown / JSDoc / TSDoc / README section] Audience: [beginner developers / experienced team members / external API consumers] Keep it concise — developers don't read walls of text. Lead with the most common use case.

Explain [concept — e.g., closures, the event loop, Docker containers, REST vs GraphQL, database indexing] to me like I'm a beginner developer. Please: 1. Start with a real-world analogy (not a textbook definition) 2. Show the simplest possible code example that demonstrates the concept 3. Then show a realistic, practical example I'd actually use in a project 4. Explain common mistakes beginners make with this concept 5. List 3 situations where I'd use this in a real job 6. End with "you'll know you understand this when you can..." (one sentence) Avoid jargon. If you use a technical term, define it in parentheses the first time. Keep the total explanation under 500 words.

Help me plan the implementation of this feature before I write any code. Feature: [describe the feature — e.g., "Add a real-time notification system that shows toast messages when other users comment on your posts"] Current tech stack: [e.g., React, Node.js, PostgreSQL, Redis] Please create a plan covering: 1. **Data model** — What new tables/collections/fields are needed 2. **API design** — Endpoints, request/response shapes, WebSocket events 3. **Frontend components** — Component tree, state management approach 4. **User flow** — Step by step what happens when a user triggers this feature 5. **Edge cases** — What could go wrong? (network failures, race conditions, permissions) 6. **Implementation order** — What to build first, second, third (dependencies) 7. **Testing strategy** — What to unit test vs integration test vs E2E test 8. **Estimated complexity** — Rough time estimate and biggest risk areas Don't write any actual code yet — just the plan. I'll ask for code once the plan looks good.

Write a regular expression that matches: [describe the pattern — e.g., "email addresses", "URLs with or without protocol", "dates in MM/DD/YYYY or YYYY-MM-DD format", "phone numbers in US format"] Language: [JavaScript / Python / PHP / Go] Please: 1. Give me the regex pattern 2. Break it down piece by piece — explain what each part matches 3. Show 5+ examples of strings that SHOULD match 4. Show 5+ examples of strings that should NOT match 5. Provide a ready-to-use code snippet with the regex 6. Mention any edge cases the regex might miss 7. If the regex is complex, also provide a simpler version that covers 90% of cases I'd rather have a readable regex with a comment than a perfect but cryptic one.

Design a database schema for: [describe the application — e.g., "a project management app like Trello with boards, lists, cards, labels, comments, and team members"] Database: [PostgreSQL / MySQL / MongoDB / SQLite] Please provide: 1. **Tables/collections** with all columns, types, and constraints 2. **Relationships** — foreign keys, one-to-many, many-to-many (with junction tables) 3. **Indexes** — which columns to index and why (query patterns) 4. **Sample data** — 2-3 rows per table so I can visualize the structure 5. **SQL CREATE statements** (or Mongoose schemas for MongoDB) 6. **Common queries** — The 5 most frequent queries this app would run, with SQL 7. **Migration plan** — How to add a new feature later without breaking existing data Optimize for: [read-heavy / write-heavy / balanced] Expected scale: [hundreds / thousands / millions of records]

Create a complete API endpoint for the following: Endpoint: [e.g., POST /api/users/register] Framework: [Express / Fastify / Next.js API route / Flask / Django] Database: [PostgreSQL with Prisma / MongoDB with Mongoose / etc.] What it does: [e.g., "Register a new user with email and password. Hash the password, check for duplicate emails, send a verification email, and return a JWT token."] Please include: 1. Route handler with full request validation (Zod, Joi, or manual) 2. Database query/mutation 3. Error handling with proper HTTP status codes (400, 401, 404, 409, 500) 4. Input sanitization 5. Authentication/authorization middleware (if applicable) 6. Rate limiting consideration 7. Response format (consistent JSON shape for success and error) 8. Unit test for the happy path and 2 error cases 9. Example curl command to test the endpoint

This database query is slow and I need help optimizing it. The query: [paste your SQL query here] Table structure: [paste CREATE TABLE statements or describe the schema] Current performance: [e.g., "Takes 3.2 seconds on a table with 2M rows"] EXPLAIN output (if available): [paste EXPLAIN ANALYZE output] Please: 1. Identify why the query is slow (full table scan, missing index, N+1, etc.) 2. Suggest indexes to add (with CREATE INDEX statements) 3. Rewrite the query if it can be restructured for better performance 4. Show the expected improvement 5. Warn about any trade-offs (write performance, storage, maintenance) 6. If the query needs to stay complex, suggest caching or materialized view strategies

Help me debug this production issue systematically. What's happening: [describe the symptoms — e.g., "Users are seeing a blank white page after login, but only on mobile Safari. Desktop Chrome works fine. Started happening after yesterday's deploy."] What I've checked so far: [list anything you've already tried] Error logs (if any): [paste relevant log entries] Recent changes: [paste the git log or describe what was deployed recently] Please: 1. Create a prioritized debugging checklist (most likely cause first) 2. For each potential cause, give me the exact command or check to verify it 3. Suggest a quick mitigation (rollback? feature flag? hotfix?) while I investigate 4. Once we identify the cause, provide the fix with a test to prevent regression 5. Recommend monitoring/alerting to catch this earlier next time