skills.rest
avibebuilder
avibebuilderOFFICIAL
Explore all skills by this author →
GitHub

frontend-development

Fix React and Next.js rendering, styling, and interactivity issues.

113|15|Updated Mar 3, 2026
Search Tags:#typescript#debugging#frontend#react#nextjs#tailwind#component-design
One-click install
npx skills add https://github.com/avibebuilder/claude-prime --skill frontend-development-avibebuilder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/avibebuilder/claude-prime/tree/main/.claude/starter-skills/frontend-development
Command: npx skills add https://github.com/avibebuilder/claude-prime --skill frontend-development-avibebuilder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill centralizes patterns and practical fixes for the browser layer of web apps so engineers can quickly build, debug, and refactor React/Next.js/TypeScript/Tailwind user interfaces without repeatedly re-explaining project conventions or making the wrong server/client tradeoffs.

Core Features & Use Cases

  • Server-first boundaries: Prefer Server Components and add client-only code only where interactivity or browser APIs are required.
  • Debugging rendering & styling: Diagnose hydration mismatches, Tailwind class purge issues, layout shifts, CSS specificity problems, and unstable key bugs.
  • Refactor & architecture: Split Server vs Client Components, colocate types/hooks, follow file naming conventions, and optimize bundle size and data fetching (cache controls).
  • Real-world example: Fix a page that SSRs correctly but hydrates with missing Tailwind classes and a broken form by extracting the interactive form into a client component, safelisting classes, and applying no-store where fresh data is required.

Quick Start

Start by locating the feature boundary, prefer a Server Component, extract only the interactive leaf into a client component, and apply the project's colocation and naming conventions to implement or fix the UI.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I fix React hydration mismatches and missing Tailwind classes after SSR?▼

Fix React hydration mismatches by extracting interactive elements into client components and safelisting dynamically constructed Tailwind classes to prevent purge issues during server-side rendering.

How do I split Server and Client Components in Next.js correctly?▼

Split Next.js Server and Client Components by defaulting to Server Components and adding client-only code exclusively where browser APIs or user interactivity are required.

What is the best way to debug unstable key bugs and CSS layout shifts in React?▼

Debug unstable key bugs and CSS layout shifts by applying stable React keys and diagnosing Tailwind class specificity to resolve browser-layer rendering and styling problems.

When do I need to use no-store cache directives for Next.js data fetching?▼

Use no-store cache directives for Next.js data fetching when fresh data is required, applying proper cache controls to optimize bundle size and rendering boundaries.

Can I use TypeScript types and hooks colocated with my Next.js page components?▼

You can colocate TypeScript types and hooks with Next.js components by following file naming conventions and colocation patterns to maintain Server and Client boundaries.

Related Skills

Explore More Software Engineering Skills→
oto1720oto1720
1

nextjs-ui-standards

Defines a Next.js UI standards framework for component creation, review, and generation.

Community
Advanced
rafaelminatto1rafaelminatto1

nextjs-react-expert

Optimize React and Next.js apps by eliminating waterfalls and reducing bundle size.

Community
Advanced
pelithpelith

zod

Validate TypeScript inputs with Zod schemas using safeParse and z.infer.

Official
Advanced
djankiesdjankies

server-vs-client-boundaries

Classifies text and image inputs for NSFW and safety compliance.

Community
Intermediate