skills.rest
hontauadrian
hontauadrianCOMMUNITY
Explore all skills by this author →
GitHub

web-patterns

Implements Next.js App Router patterns for server components, theming, images, and error handling.

Updated Apr 7, 2026
Search Tags:#theming#accessibility#react#next.js#tailwind#web components#app router
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill web-patterns-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-patterns
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/scout/skills/web-patterns
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill web-patterns-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web developers working with Next.js App Router often struggle with deciding between server and client components, structuring providers, optimizing images, and handling errors consistently across pages. ## Core Features & Use Cases - Component Architecture Guidance: Defines when to use server vs client components and how to keep "use client" boundaries narrow. - Theming and Styling Patterns: Covers Tailwind CSS with CSS variables, dark mode, and theme token usage without hardcoded values. - Performance and Accessibility: Provides patterns for next/image usage, lazy loading with dynamic imports, skeleton loading states, and semantic HTML. - Use Case: When building a new page in a Next.js monorepo, follow these patterns to structure thin route wrappers, wire up QueryClientProvider and ThemeProvider, and handle loading and error states consistently. ## Quick Start Ask the AI to scaffold a new Next.js page following the web-patterns conventions for providers, theming, and image handling.

Frequently Asked Questions about web-patterns

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

FAQPage Schema
How do I decide between server and client components in Next.js App Router?▼

Server components are the default and suit static layouts, metadata, and code without hooks or state. Client components require the "use client" directive and are needed for hooks, state, and event handlers. Keep client boundaries as narrow as possible.

How to set up providers in Next.js App Router?▼

Create a providers.tsx file marked with "use client" that wraps children in QueryClientProvider and ThemeProvider. Then render the Providers component inside the root layout, which itself remains a server component.

Should I use next/image or a regular img tag in Next.js?▼

Use next/image for all images instead of raw img tags. It supports width and height for fixed images, fill with sizes for responsive containers, and the priority flag for above-the-fold content.

Why does hydration mismatch happen in Next.js and how to fix it?▼

Hydration mismatch occurs when server-rendered HTML differs from client rendering, often due to browser-only APIs. Fix it by moving client-only code into useEffect or using dynamic imports with ssr set to false.

How should loading states be handled in Next.js pages?▼

Use skeleton screens that mirror the live UI layout, driven by a uiModel.isLoading flag rendered inline. This approach avoids separate loading.tsx files and keeps the visual structure stable during data fetching.

Related Skills

Explore More Software Engineering Skills→
kingdoubleglazingkingdoubleglazing

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

Community
Intermediate
fusenginefusengine
1

security-headers

Audit and configure HTTP security headers for Next.js, Laravel, Express, and Django applications.

Community
Intermediate
bovinphangbovinphang
21

fec-component-testing

Write and audit UI component tests for props, emits, interactions, and accessibility.

Community
Advanced
ricablericable

expo-app-design

Build cross-platform Expo app interfaces with Expo Router and NativeWind styling.

Community
Intermediate