AgentSkillsCN

component-development

在创建或修改 React 组件时使用。确保正确的服务器/客户端组件模式、性能优化和可访问性。

SKILL.md
--- frontmatter
name: component-development
description: Use when creating or modifying React components. Ensures proper Server/Client component patterns, performance optimization, and accessibility.
allowed-tools: Read, Edit, Write, Glob, Grep

See React patterns for full reference.

Quick rules:

  • •Default to Server Components (no directive)
  • •Use 'use client' only for: onClick, useState, useEffect, browser APIs
  • •Push client boundary to smallest component
  • •Tailwind only, use dark: variants

Example:

tsx
// Server Component (default)
export function TaskCard({ task }: { task: Task }) {
  return <div className="p-4 dark:bg-gray-800">{task.title}</div>
}

Checklist: Minimal client components, dark: variants, accessible inputs.