AgentSkillsCN

Frontend Components

按照自上而下的结构与单一职责原则，以最佳实践组织React 19+组件，注重组件的组织方式、状态管理、Props处理以及代码可读性。在创建新React组件、重构现有组件、梳理组件逻辑、管理组件状态、定义Props接口（以I前缀命名IComponentProps），或实现各类组件模式时，可使用此技能。适用于处理React组件文件（*.tsx、*.jsx）、Shadcn/ui组件，或任何前端组件的实现。此技能确保组件结构具有可预测的自上而下布局（导入 → 类型/接口 → 组件 → 钩子 → 派生值 → JSX），在函数签名中合理使用带有默认值的Props解构，将组件规模控制在可管理范围内（超过300行时应拆分），通过Shadcn Slot模式实现组件组合（asChild prop），践行React 19的各类模式（use()钩子用于处理Promise，useActionState用于表单，useOptimistic用于即时反馈），无需手动使用useMemo/useCallback（由React Compiler自动完成记忆化），默认采用Server Components进行数据获取，对加载与错误状态提前返回，并确保组件能够顺利通过滚动测试。

SKILL.md
--- frontmatter
name: Frontend Components
description: Structure React 19+ components following best practices for organization, state management, props handling, and code readability with top-down structure and single responsibility principle. Use this skill when creating new React components, refactoring existing components, organizing component logic, managing component state, defining prop interfaces (IComponentProps with I prefix), or implementing component patterns. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend component implementations. This skill ensures predictable top-down structure (imports → types/interfaces → component → hooks → derived values → JSX), proper props destructuring with defaults in function signature, manageable component size (split at >300 lines), composition via Shadcn Slot pattern (asChild prop), React 19 patterns (use() hook for promises, useActionState for forms, useOptimistic for immediate feedback), no manual useMemo/useCallback (React Compiler handles memoization), Server Components as default for data fetching, early returns for loading/error states, and components that pass the scroll test.

Frontend Components

When to use this skill:

  • •When creating new React components with React 19+ features
  • •When refactoring large components into smaller ones (>300 lines)
  • •When organizing component structure and code order (top-down readability)
  • •When defining component props with TypeScript interfaces (IComponentProps)
  • •When implementing state management with useState, useOptimistic, or Zustand
  • •When using composition patterns with Shadcn/ui Slot and asChild prop
  • •When handling conditional rendering and early returns
  • •When using React 19 Actions API (useActionState, useFormStatus) for forms
  • •When using the use() hook to unwrap promises in Server Components
  • •When extracting reusable component logic into custom hooks
  • •When working on component files (.tsx, .jsx, components/.)
  • •When reviewing component structure for readability (scroll test)
  • •When deciding between local state, lifted state, or global state (Zustand)
  • •When implementing optimistic UI updates with useOptimistic

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

Instructions

For details, refer to the information provided in this file: frontend components