AgentSkillsCN

Frontend Components

按照现代架构模式设计与构建可复用、可维护的UI组件，适用于React、Vue或其他框架。当创建组件文件（.jsx、.tsx、.vue）、实现组件逻辑、管理组件状态、定义props接口，或在components/、views/、pages/等目录中组织组件层级时，使用此技能。在构建带有钩子的函数组件（React）、组合API组件（Vue）、单文件组件，实现组件组合模式，管理局部与提升状态，或创建共享逻辑的自定义钩子时，应用此技能。此技能确保组件遵循单一职责原则，封装得当，拥有清晰的props接口与TypeScript类型，支持跨上下文复用，遵循原子设计、容器/表现分离、复合组件等现代模式。

SKILL.md
--- frontmatter
name: Frontend Components
description: Design and build reusable, maintainable UI components following modern architecture patterns for React, Vue, or other frameworks. Use this skill when creating component files (.jsx, .tsx, .vue), implementing component logic, managing component state, defining props interfaces, or organizing component hierarchies in directories like components/, views/, or pages/. Apply this skill when building functional components with hooks (React), composition API components (Vue), single-file components, implementing component composition patterns, managing local vs. lifted state, or creating custom hooks for shared logic. This skill ensures components follow single responsibility principle, are properly encapsulated, have clear prop interfaces with TypeScript types, support reusability across contexts, and follow modern patterns like atomic design, container/presentational separation, and compound components.

Frontend Components

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.

When to use this skill

  • •When creating or modifying React (.jsx, .tsx), Vue (.vue), or other framework component files
  • •When implementing functional components with hooks (useState, useEffect, custom hooks)
  • •When using Vue Composition API or Single File Components (SFC)
  • •When defining component props, interfaces, or TypeScript types for components
  • •When managing component state (local state, lifted state, context, or global state)
  • •When building reusable UI components (buttons, cards, forms, modals, dropdowns)
  • •When implementing component composition or compound component patterns
  • •When organizing components in feature-based or atomic design structures
  • •When creating custom hooks (React) or composables (Vue) for shared logic
  • •When implementing component lifecycle logic, side effects, or data fetching
  • •When optimizing component rendering with memoization (React.memo, useMemo, useCallback)
  • •When working with component styling (CSS modules, styled-components, scoped styles)
  • •When implementing controlled vs. uncontrolled component patterns for forms
  • •When creating container/presentational component separation for better maintainability

Instructions

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