Ready-to-Use AI Prompts for Front-End Developers
Ten battle-tested AI prompt templates for front-end work: component generation, code review, CSS debugging, refactoring, accessibility, performance, TypeScript and more. Copy, fill the placeholders, paste.
On this page (10)
- 1. Generate a component from a spec
- 2. Get a senior-level code review
- 3. Debug a layout that refuses to work
- 4. Decode any error message
- 5. Refactor without changing behaviour
- 6. Run an accessibility audit
- 7. Find performance problems
- 8. Write strict TypeScript types
- 9. Generate meaningful test cases
- 10. Build and verify a regex
1. Generate a component from a spec
The biggest mistake when asking an AI for a component is giving a one-line wish. This prompt forces you to provide the same information you would give a colleague: the tech stack, the props contract, states and edge cases.
Replace everything inside the square brackets before sending.
You are a senior front-end engineer. Build a React component with these exact requirements.
Stack: [React 19 + TypeScript + Tailwind CSS]
Component name: [UserSettingsCard]
Props: [user: {name, email, avatarUrl}, onSave(settings), disabled?]
States to handle: [loading, error, empty, success]
Accessibility: [keyboard navigable, labels on every input, visible focus ring]
Constraints: [no external libraries, component under 120 lines]
Return only the component code and a short note on the trade-offs you made.2. Get a senior-level code review
Paste this along with any function or component. Asking for the review in a fixed format (bugs, risks, improvements, rewrite) keeps the answer focused instead of a vague wall of praise.
Review the following code as a strict senior engineer. Do not be polite — be precise.
For each issue, report:
1. Category: [bug | performance | readability | security | accessibility]
2. Severity: [critical | warning | nitpick]
3. The exact line or expression
4. Why it is a problem
5. A concrete fix
Then give a rewritten version only if at least one critical issue exists.
Code:
"""
[PASTE YOUR CODE HERE]
"""3. Debug a layout that refuses to work
CSS bugs are perfect for AI because they are deterministic. Describe the symptom, paste the HTML and the CSS, and ask for causes ordered by likelihood. You get a checklist instead of guessing.
My layout is broken. Here is the situation:
Expected: [a 3-column grid on desktop that stacks on mobile]
Actual: [the third column drops below and overflows the page]
Browser/device: [Chrome 128, also happens on Safari]
HTML:
"""
[PASTE HTML]
"""
CSS:
"""
[PASTE CSS]
"""
List the 3 most likely causes, ordered from most to least likely, and for each give the one-line fix.4. Decode any error message
Better than copying an error to a search engine: this prompt demands the root cause, the reason it happens, and the minimal fix — plus how to prevent it next time.
I got this error while running [npm run build] in a [Next.js 16 + React 19] project:
"""
[PASTE THE FULL ERROR MESSAGE]
"""
Relevant code:
"""
[PASTE THE FILE / STACK FRAME POINTED TO BY THE ERROR]
"""
Explain:
1. What this error means in plain language
2. Why it happens in this specific case
3. The minimal fix
4. How to prevent this category of error in the future5. Refactor without changing behaviour
The key sentence here is do not change behaviour — without it the model happily 'improves' your code by changing the API. Also ask for the reasoning after the code, so you can review the steps.
Refactor the code below for readability and maintainability.
Hard rules:
- Do NOT change external behaviour, function names or signatures
- Do NOT add dependencies
- Keep the same language and framework
- Prefer early returns, small functions and meaningful names
After the refactored code, list every change you made in one bullet each.
Code:
"""
[PASTE YOUR CODE HERE]
"""6. Run an accessibility audit
A quick WCAG pass before shipping. The prompt asks for issues ordered by severity with concrete ARIA/HTML fixes, which is exactly how audit reports are structured.
Audit the following UI code for accessibility (WCAG 2.1 AA).
Check at minimum: semantic HTML, keyboard navigation, focus management,
labels on form controls, colour contrast hints, images/alt text,
aria attributes used correctly (or missing).
For each issue give: severity, the problem, and the exact code change.
End with a one-paragraph summary of the overall a11y health.
Code:
"""
[PASTE YOUR COMPONENT CODE HERE]
"""7. Find performance problems
Give the model the render context (list size, update frequency) — performance advice without context is usually wrong. This prompt also asks to separate real problems from premature optimization.
Analyse this React code for performance issues.
Context: [renders a list of ~500 rows, updates when the user types in a search box]
Target: [smooth typing, no visible jank on mid-range mobile]
Report only issues that matter for this context. For each:
1. What causes the cost (renders, layout, GC, network)
2. The fix with code
3. Expected improvement
Then list one thing I should NOT bother optimizing.
Code:
"""
[PASTE YOUR CODE HERE]
"""8. Write strict TypeScript types
Describe the data and its invariants, and ask for types that make illegal states unrepresentable. The 'never' check at the end catches missing cases in unions.
Design strict TypeScript types for this data and its rules.
Data: [an order with status draft | submitted | paid | refunded]
Rules:
- [paid orders must have paymentId and paidAt]
- [refunded orders must extend paid orders with refundedAt]
- [draft orders only need an id and items]
Requirements:
- No optional fields where a rule guarantees presence — model it with discriminated unions
- Include the function exhaustiveness trick (switch returning never) for handling statuses
- Add short comments explaining each union member9. Generate meaningful test cases
The trick is asking for the test plan first — a table of inputs and expected outputs — and only then the test code. This separates thinking from typing and usually finds the edge cases you would have missed.
Design test cases for the function below.
Step 1: Give me a table of test cases — columns: description, input, expected output, category (happy path | edge case | error case). Include at least 2 edge cases and 2 error cases.
Step 2: After I approve the table, write the tests with [Vitest].
Function:
"""
[PASTE YOUR FUNCTION HERE]
"""10. Build and verify a regex
Regex is where LLMs genuinely shine — but always demand test vectors. A regex without examples that it matches and rejects is just a rumour.
Write a regular expression for: [Iranian mobile phone numbers — starts with 09, 11 digits total, optional +98 prefix]
Language flavour: [JavaScript]
Then:
1. Explain it piece by piece
2. Give 5 strings it MUST match and 5 it MUST reject
3. Point out one valid real-world case it fails on and how to extend itKeep reading
100 JavaScript Interview Questions — Part 2: Async & Modern Syntax
Questions 11 to 20 of the 100 JavaScript interview questions series: callbacks, promises, async/await, promise combinators, destructuring, spread/rest, currying, map/filter/reduce, memoization and copying objects.
100 JavaScript Interview Questions — Part 1: Foundations
Questions 1 to 10 of the 100 JavaScript interview questions series: var/let/const, hoisting, closures, this, the event loop and other core fundamentals, with clear answers and runnable examples.