server-components

JasonPaff's avatarfrom JasonPaff

Enforces Head Shakers server component conventions for async data fetching, caching integration, streaming with Suspense, and SEO metadata generation. Extends react-coding-conventions with server-specific patterns.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 5, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the implementation of React Server Component (RSC) best practices, ensuring consistent async data fetching, optimized caching strategies, and seamless streaming with Suspense. It streamlines the development of high-performance web applications by enforcing strict coding conventions for server-side logic, security guards, and SEO metadata generation.

Use Cases

  • Developing high-performance Next.js pages and layouts with standardized async data fetching and caching facades.
  • Implementing progressive rendering and streaming UI using Suspense boundaries and custom skeleton loading components.
  • Automating the generation of dynamic SEO metadata and JSON-LD structured data to improve search engine visibility and indexing.
  • Enforcing architectural security and 'server-only' code boundaries while managing complex authentication flows in server-side components.
nameserver-components
descriptionEnforces project server component conventions for async data fetching, caching integration, streaming with Suspense, and SEO metadata generation. Extends react-coding-conventions with server-specific patterns.

Server Components Skill

Purpose

This skill provides server-specific React conventions that extend the base react-coding-conventions skill. It covers patterns unique to server components: async data fetching, caching, streaming, and metadata generation.

When to Use This Skill

Use this skill in the following scenarios:

  • Creating page.tsx, layout.tsx, loading.tsx, or error.tsx files
  • Implementing async server components
  • Adding Suspense streaming or skeleton components
  • Generating page metadata
  • Fetching data in server components through facades

Important: This skill should activate automatically when server component work is detected.

Prerequisite Skills

This skill REQUIRES loading these skills FIRST:

  1. react-coding-conventions - Base React patterns
  2. ui-components - UI component patterns
  3. caching - Cache service patterns (for data fetching)

How to Use This Skill

1. Load Prerequisites and Reference

Before creating or modifying server components:

1. Read .claude/skills/react-coding-conventions/references/React-Coding-Conventions.md
2. Read .claude/skills/ui-components/references/UI-Components-Conventions.md
3. Read .claude/skills/caching/references/Caching-Conventions.md
4. Read .claude/skills/server-components/references/Server-Components-Conventions.md

2. Apply Server Component Patterns

Async Component Structure:

  • Use async arrow functions or async function declarations
  • Add import 'server-only' guard for server-only code
  • Fetch data through facades with caching
  • Use Promise.all for parallel data fetching

Authentication:

  • Use getUserIdAsync() for optional user auth
  • Use getRequiredUserIdAsync() for required user auth (redirect if unauthenticated or user not found)
  • Use checkIsOwnerAsync() for ownership checks

Streaming with Suspense:

  • Wrap async children in <Suspense fallback={<Skeleton />}>
  • Create corresponding skeleton components
  • Use error boundaries for resilience

Metadata Generation:

  • Export generateMetadata for pages
  • Use generatePageMetadata() utility
  • Include JSON-LD structured data

ISR Configuration:

  • Export revalidate constant when appropriate

3. Automatic Convention Enforcement

After generating code:

  1. Scan for violations against server component patterns
  2. Fix automatically without asking permission
  3. Verify completeness before presenting to user

4. Reporting

Provide a brief summary of conventions applied:

Server component conventions enforced:
  - Added 'server-only' import guard
  - Used async arrow function pattern
  - Wrapped children in Suspense with skeleton
  - Added generateMetadata for SEO
  - Used CacheService for data fetching

Component Naming Conventions

  • *Async suffix for async data-fetching components
  • *Server suffix for server-only orchestration
  • *Skeleton suffix for loading states

File Patterns

This skill handles:

  • src/app/**/page.tsx
  • src/app/**/layout.tsx
  • src/app/**/loading.tsx
  • src/app/**/error.tsx
  • src/app/**/components/async/*.tsx
  • src/app/**/components/*-async.tsx
  • src/app/**/components/*-server.tsx
  • *-skeleton.tsx

Workflow Summary

1. Detect server component work (page.tsx, async component, data fetch)
2. Load prerequisites: react-coding-conventions, ui-components, caching
3. Load references/Server-Components-Conventions.md
4. Generate/modify code following ALL conventions
5. Scan for violations
6. Auto-fix violations
7. Report fixes applied