Skip to main content
temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Frontend Code Review Checklist Generator

Generates a structured, severity-rated frontend code review checklist tailored to your tech stack, team maturity, and product requirements covering logic, performance, security, and accessibility.

terminalclaude-opus-4-6trending_upRisingcontent_copyUsed 213 timesby Community
code-reviewfrontendchecklisttypescriptaccessibility
claude-opus-4-6
0 words
System Message
You are a Senior Frontend Engineering Lead specializing in code review standards, engineering excellence programs, and frontend quality gates for cross-functional teams. Your task is to generate a comprehensive, actionable frontend code review checklist. For every checklist generated, organize items into these categories: 1. **Logic & Correctness** — Null/undefined handling, edge cases, off-by-one errors, race conditions, async/await error propagation 2. **Type Safety (TypeScript)** — No 'any' usage, discriminated unions for state, proper generic constraints, strict null checks, type assertion justification 3. **Performance** — Memoization opportunities, lazy loading, unnecessary re-renders, N+1 query patterns, payload size 4. **Security** — XSS via dangerouslySetInnerHTML/innerHTML, CSRF token presence, sensitive data in localStorage vs sessionStorage vs memory, dependency vulnerability review 5. **Accessibility (WCAG 2.2)** — Keyboard navigability, ARIA roles/labels, color contrast, focus management, screen reader text 6. **Code Maintainability** — Naming clarity, magic numbers/strings, function length, cyclomatic complexity, dead code 7. **Test Coverage** — Happy path covered, error states tested, edge cases in test plan, test naming convention 8. **CSS & Styling** — No hardcoded px for responsive values, z-index management, CSS variable usage, print stylesheet consideration For each item: - Assign severity: BLOCKER / MAJOR / MINOR / SUGGESTION - Write 1-sentence rationale - Provide a 'bad pattern' code snippet (2-5 lines) - Suggest ESLint rule or SonarQube check that auto-catches it When given {&{TECH_STACK}}, {&{TYPESCRIPT_STRICTNESS}}, and {&{TEAM_FOCUS_AREAS}}, produce the complete tailored checklist in markdown table format. Do NOT include obvious items like 'ensure code compiles'. Every item must require judgment or domain knowledge.
User Message
Tech Stack: {&{TECH_STACK}} TypeScript Strictness: {&{TYPESCRIPT_STRICTNESS}} Team Focus Areas: {&{TEAM_FOCUS_AREAS}} Product Type: {&{PRODUCT_TYPE}} Generate a comprehensive code review checklist.

About this prompt

Generic code review checklists are ignored. Stack-specific, context-aware review checklists become team rituals. This prompt generates a production-grade frontend code review checklist precisely calibrated to your tech stack (React/Angular/Vue), TypeScript strictness level, performance SLOs, accessibility requirements, and security posture. Each checklist item includes: a severity rating (Blocker / Major / Minor / Suggestion), the rationale explaining why it matters, a concrete bad-code example, and an automated detection hint (ESLint rule, SonarQube check, or manual verification step). The output organizes items into review categories: Logic Correctness, Type Safety, Performance Impact, Security (XSS/CSRF), Accessibility, Code Maintainability, and Test Coverage. Teams can import this into their PR template, Linear ticket templates, or GitHub PR description defaults to standardize review quality.
signal_cellular_altintermediatefolderMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right
Getting Started with PromptShip: From Zero to Your First Prompt in 5 MinutesArticle
person Adminschedule 5 min read

Getting Started with PromptShip: From Zero to Your First Prompt in 5 Minutes

A quick-start guide to PromptShip. Create your account, write your first prompt, test it across AI models, and organize your work. All in under 5 minutes.

AI Prompt Security: What Your Team Needs to Know Before Sharing PromptsArticle
person Adminschedule 5 min read

AI Prompt Security: What Your Team Needs to Know Before Sharing Prompts

Your prompts might contain more sensitive information than you realize. Here is how to keep your AI workflows secure without slowing your team down.

Prompt Engineering for Non-Technical Teams: A No-Jargon GuideArticle
person Adminschedule 5 min read

Prompt Engineering for Non-Technical Teams: A No-Jargon Guide

You do not need to know how to code to write great AI prompts. This guide is for marketers, writers, PMs, and anyone who uses AI but does not consider themselves technical.

How to Build a Shared Prompt Library Your Whole Team Will Actually UseArticle
person Adminschedule 5 min read

How to Build a Shared Prompt Library Your Whole Team Will Actually Use

Most team prompt libraries fail within a month. Here is how to build one that sticks, based on what we have seen work across hundreds of teams.

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?Article
person Adminschedule 5 min read

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?

We tested the same prompts across GPT-4o, Claude 4, and Gemini 2.5 Pro. The results surprised us. Here is what we found.

The Complete Guide to Prompt Variables (With 10 Real Examples)Article
person Adminschedule 5 min read

The Complete Guide to Prompt Variables (With 10 Real Examples)

Stop rewriting the same prompt over and over. Learn how to use variables to create reusable AI prompt templates that save hours every week.

pin_invoke

Token Counter

Real-time tokenizer for GPT & Claude.

monitoring

Cost Tracking

Analytics for model expenditure.

api

API Endpoints

Deploy prompts as managed endpoints.

rule

Auto-Eval

Quality scoring using similarity benchmarks.