skills.rest
clfigueiredo
clfigueiredoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-react-nextjs

Reviews and guides React and Next.js frontend implementation with accessibility and performance checklists.

5|15|Updated Jul 8, 2026
Search Tags:#code review#accessibility#frontend#react#responsive design#components#nextjs
One-click install
npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill frontend-react-nextjs-clfigueiredo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-react-nextjs
Source: https://github.com/clfigueiredo/hermes-infra-skills/tree/main/.hermes/skills/curso-hermes/frontend-react-nextjs
Command: npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill frontend-react-nextjs-clfigueiredo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building React/Next.js interfaces often leads to oversized components, misused state, missing loading/error handling, broken accessibility, and premature optimization. This Skill provides a structured checklist and bug-fix pattern so students ship clean, responsive, accessible frontends without over-engineering. ## Core Features & Use Cases - Implementation Checklist: Nine concrete rules covering component size, typed props, state management (local vs TanStack/Zustand/Context), data states, forms, accessibility, performance, responsiveness, and build verification. - Bug Fix Pattern: A standard Cause/Fix/Validation format for documenting and verifying React/Next.js corrections. - Common Pitfalls List: Warns against 500-line components, useEffect overuse, duplicated derived state, and clickable divs without buttons. - Use Case: A student building a dashboard page asks for a review; the Skill checks mobile layout, keyboard navigation, error/loading states, and runs the build before delivery. ## Quick Start Ask the assistant to review your React or Next.js component for accessibility, state management, and responsiveness using this frontend checklist.

Frequently Asked Questions about frontend-react-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React components for a Next.js project?▼

Keep each component small with a single responsibility and explicit typed props, avoiding untyped any. Manage simple UI state locally and only introduce TanStack, Zustand, or Context when sharing state is genuinely required.

How to handle loading and error states in React data fetching?▼

Always model four states for data: loading, error, empty, and success. Skipping error or empty states is a common bug source, so render explicit UI for each before considering the feature complete.

When should I use Zustand or Context instead of local state?▼

Use local state for simple UI concerns first. Reach for TanStack Query, Zustand, or Context only when state must be shared across distant components or cached from a server, avoiding premature global state.

Does this checklist cover accessibility requirements for React apps?▼

Yes, it requires labels, focus management, keyboard navigation, contrast, and semantic HTML. It explicitly flags clickable div elements without button semantics as an accessibility violation to fix.

Why does my React component have performance problems?▼

Common causes are heavy inline objects and functions recreated each render and missing memoization where it matters. Measure before optimizing, since memoizing everything adds complexity without guaranteed gains.

Related Skills

Explore More Software Engineering Skills→
School-Agent-IncSchool-Agent-Inc
1

web-builder

Scaffold Next.js/React websites with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
kamushadeneskamushadenes

verification-loops

Execute tests, browser checks, linting, and build verification before task completion.

Community
Basic
sobhanashinesobhanashine
1

security-review

Detect SQL injection, XSS, CSRF, and secret exposure in Next.js 16 App Router applications.

Community
Advanced
ravnhqravnhq
3

vite

Configure Vite projects with vite.config.ts and plugin APIs.

Official
Advanced