菜单
Enforces 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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | server-components |
| description | Enforces 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. |
| user-invocable | false |
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.
Use this skill in the following scenarios:
Important: This skill should activate automatically when server component work is detected.
This skill REQUIRES loading these skills FIRST:
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
Async Component Structure:
import 'server-only' guard for server-only codeAuthentication:
getUserIdAsync() for optional user authgetRequiredUserIdAsync() for required user auth (redirect if unauthenticated or user not found)checkIsOwnerAsync() for ownership checksStreaming with Suspense:
<Suspense fallback={<Skeleton />}>Metadata Generation:
generateMetadata for pagesgeneratePageMetadata() utilityISR Configuration:
revalidate constant when appropriateAfter generating code:
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
*Async suffix for async data-fetching components*Server suffix for server-only orchestration*Skeleton suffix for loading statesThis skill handles:
src/app/**/page.tsxsrc/app/**/layout.tsxsrc/app/**/loading.tsxsrc/app/**/error.tsxsrc/app/**/components/async/*.tsxsrc/app/**/components/*-async.tsxsrc/app/**/components/*-server.tsx*-skeleton.tsx1. 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
Enforces project caching conventions when implementing cache layers using React cache(), Next.js unstable_cache, Upstash Redis, and Cloudinary. This skill ensures consistent patterns for cache keys, tags, TTL configuration, cache invalidation, and domain-specific CacheService helpers.
Enforces project client component conventions for interactive React components with hooks, event handlers, Radix UI integration, and server action consumption. Extends react-coding-conventions with client-specific patterns.
Enforces project Cloudinary media conventions when working with image uploads, URL generation, transformations, social sharing images, and photo management components. This skill covers the complete media workflow including CloudinaryService operations, URL utilities, CldImage/CldUploadWidget components, path organization, type definitions, and Sentry integration.
Enforces project React component testing conventions using Testing Library with proper rendering, user interactions, and accessibility testing.
Enforces project database schema conventions when creating or modifying Drizzle ORM table definitions, including constraints, indexes, relations, and column patterns. This skill should be used proactively whenever working with schema files to ensure consistent schema design for PostgreSQL with Neon serverless.
Enforces project Drizzle ORM coding conventions when creating or modifying database queries, schemas, and migrations. This skill ensures consistent patterns for query structure, type safety, permission filtering, pagination, resilience, and database operations.