Frontend Code Review
Review frontend changes against one checklist so feedback stays consistent across pull requests.
Before & after
Same prompt, same agent — the only difference is the skill.
Sure, I can take a look at that for you. The component looks generally fine, though there are a few things you might want to consider. One thing could be about performance, depending on how often it re-renders. You might also want to think about accessibility in case that's relevant to your use case. Have you considered using any particular libraries for state management, or are you handling that differently? Let me know if there's anything specific you'd like me to focus on, and I'd be happy to discuss further.
PERFORMANCE BOTTLENECKS • Direct children re-render on every parent state change; wrap in React.memo or useCallback for 1000+ item lists • useState for form validation triggers full component re-render; move to useReducer or separate context • Missing dependency array in useEffect for API calls—will run on every render, not just mount BEST PRACTICES VIOLATIONS • Event handlers defined inline in JSX; hoist outside render to prevent closure issues with stale props • No error boundary; unhandled exceptions in lifecycle crash the entire component tree • Hardcoded theme colors instead of CSS variables; breaks dark mode support and brand updates ACCESSIBILITY GAPS • Tab order not managed; keyboard navigation skips focusable elements • Missing ARIA labels on 4 interactive regions; screen readers miss intent IMPLEMENTATION PRIORITY 1st: Fix useEffect dependencies (quickest win, prevents memory leaks) 2nd: Hoist event handlers (eliminates stale closure bugs) 3rd: Memoize children (needed only if profiler shows re-render slowdown)
About this skill
name: cs-frontend-review description: Use when Structured Claude skill that gives Claude a repeatable workflow for cs frontend review.
Cs Frontend Review
One of 337+ skills in the original author's multi-agent claude-skills mega-collection (~19k GitHub stars). Packages the Cs Frontend Review workflow with its own instructions and validation so outputs stay consistent.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the cs-frontend-review skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Cs Frontend Review; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: cs-frontend-review
description: Use this skill when the user needs a repeatable, structured workflow for reviewing frontend code changes for quality and consistency.
version: 1.0.0
category: AI Agents / Development
author: AgentVolt
license: proprietary
tags:
- ai-agents
- development
---
# Cs Frontend Review
Packages a structured, repeatable review workflow for frontend code changes so feedback stays consistent across pull requests.
## When to use
… (sign up to view the full skill)More ai & agents skills
View all AI & Agents skills →Skill Status Report
Scan every skill in a project and report which pass validation, which are stale, and which lack required metadata.
Skills Scaffolder
Scaffold a new skills directory — folder structure, metadata, a baseline validation pass — with the right conventions from day one.
Research Bundle
Run a multi-step research task as one pipeline: gather sources, extract findings, validate consistency, emit one structured bundle.
Workspace Admin
Administer a Cowork or Claude workspace — settings, access, configuration — with every change scoped and verified.