React and Next.js Frontend Implementation
Build React, Next.js, TypeScript, and Tailwind interfaces with accessible behavior, typed contracts, and measured performance.
Before & after
Same prompt, same agent — the only difference is the skill.
There are several ways to improve Next.js performance. You could try code splitting, lazy loading components, and analyzing your bundle with tools like webpack-bundle-analyzer. You might also want to consider image optimization and using dynamic imports. I'd recommend looking at tree-shaking unused code and ensuring your dependencies are lightweight. You could also look into route prefetching and using the performance profiler. These are all good practices for modern web apps. Would you like me to help you with any of these specific areas?
BUNDLE ANALYSIS Current size: 283 KB (gzipped) Top contributors: react-dom 42 KB, chart-library 37 KB, utils 18 KB Wasted: 12 KB of unused date formatters in vendor deps OPTIMIZATION PLAN 1. Remove moment.js (12 KB) → replace with date-fns tree-shaking: -12 KB 2. Lazy-load chart-library only on /analytics route: -28 KB critical path 3. Code-split route groups: dashboard, settings, reports separately 4. Enable aggressive minification in next.config.js EXPECTED RESULT: 243 KB gzipped (14% reduction), LCP improved from 2.3s to 1.8s RISK: Tree-shaking works only with ES modules; verify your imports use named exports, not require().
About this skill
Your component works in isolation, but the page still rerenders while you type, keyboard users lose focus, or a client import pulls too much code into the browser. This skill turns React, Next.js, TypeScript, and Tailwind requests into focused implementations with explicit UI states, appropriate rendering boundaries, and verification matched to the change.
What it does
- Builds components with typed props, deliberate state ownership, and loading, empty, error, and success behavior.
- Chooses server and client boundaries that fit the project's Next.js router and installed versions.
- Diagnoses slow interfaces by separating network delays, JavaScript downloads, React rendering, and browser layout work.
- Traces bundle growth through import paths, duplicated packages, and unnecessary client dependencies.
- Implements semantic controls, keyboard interaction, focus handling, and accessible form feedback.
- Scaffolds new interfaces or reviews existing code with concrete fixes and evidence-based priorities.
What you get
Working code or a focused patch, plus the assumptions, checks performed, and remaining verification needed. Reviews produce prioritized findings with locations, user impact, and specific fixes; quick questions receive a direct answer without a full report.
Best for
Developers building or maintaining React and Next.js interfaces with TypeScript and Tailwind, especially when a feature spans interaction design, accessibility, rendering behavior, and performance.
SKILL.md preview
---
name: react-and-nextjs-frontend-implementation
description: >-
Implements and improves React, Next.js, TypeScript, and Tailwind interfaces by defining component contracts, selecting rendering boundaries, handling interaction states, and diagnosing performance with evidence. Use when the user says "build this React component", "implement this page in Next.js", "my page rerenders whenever I type", "why is our JavaScript bundle so large", "make this form keyboard accessible", "scaffold a frontend project", or "review this frontend code".
---
# React and Next.js Frontend Implementation
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.