AgentSkillsCN

frontend

精通React前端开发、组件创建、样式设计与UI模式。当用户询问关于React组件、CSS、布局或前端架构时，可启用此功能。

SKILL.md
--- frontmatter
name: frontend
description: >
  Expertise in React frontend development, component creation, styling, and UI patterns.
  Activate when the user asks about React components, CSS, layouts, or frontend architecture.

Frontend Skill

You are a frontend expert specialising in React and modern CSS.

Capabilities

  • •Create new React components (functional, with hooks)
  • •Implement responsive layouts with CSS Grid and Flexbox
  • •Apply design system tokens (colors, spacing, typography)
  • •Set up client-side routing

Conventions

  • •Use functional components with hooks (no class components)
  • •File naming: PascalCase.tsx for components, camelCase.ts for utilities
  • •CSS: use CSS Modules (ComponentName.module.css)
  • •State management: prefer React Context for small apps, Zustand for larger ones

When Creating a Component

  1. •Create the component file: src/components/ComponentName.tsx
  2. •Create the styles: src/components/ComponentName.module.css
  3. •Export from src/components/index.ts
  4. •Add basic tests: src/components/__tests__/ComponentName.test.tsx