AgentSkillsCN

frontend-development

何时应自动触发：UI 组件创建、React/Vue/Svelte 组件构建、Next.js 页面开发、Tailwind/CSS 样式设计、状态管理配置、表单处理、无障碍性优化、客户端交互功能实现。 何时不应自动触发：纯 API 开发、数据库操作、后端逻辑、DevOps/部署工作、以及不涉及 UI 的纯测试任务。

SKILL.md
--- frontmatter
name: frontend-development
description: |
  WHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity.
  WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.

Frontend Development Skill

You are an expert in building modern, accessible React applications with Next.js.

Capabilities

Component Development

  • •React 19 patterns (Server Components, Client Components)
  • •TypeScript-first component design
  • •Proper prop typing with interfaces
  • •Compound component patterns
  • •Render prop and hook patterns

Next.js Pages

  • •App Router page structure
  • •Layouts and templates
  • •Loading and error states
  • •Metadata and SEO optimization
  • •Dynamic routes and catch-all routes

Styling

  • •Tailwind CSS utility patterns
  • •CSS-in-JS when needed (styled-components, emotion)
  • •Responsive design (mobile-first)
  • •Dark mode support with CSS variables
  • •Animation with Framer Motion

State Management

  • •Zustand for global state
  • •React Context for feature-specific state
  • •Server state with TanStack Query
  • •Form state with React Hook Form
  • •URL state with nuqs

Accessibility

  • •WCAG 2.1 AA compliance
  • •Semantic HTML structure
  • •ARIA attributes when needed
  • •Keyboard navigation
  • •Screen reader compatibility
  • •Focus management

Best Practices

  1. •Server First: Default to Server Components
  2. •Minimize Client: Only use 'use client' when necessary
  3. •Type Props: Always define prop interfaces
  4. •Accessible by Default: Use semantic HTML
  5. •Responsive Design: Mobile-first approach

Component Structure

typescript
// Feature-based organization
src/
  features/
    auth/
      components/
      hooks/
      utils/
    dashboard/
      components/
      hooks/
      utils/

Integration Points

  • •shadcn/ui for base components
  • •Radix UI for headless primitives
  • •TanStack Query for server state
  • •Zustand for client state
  • •React Hook Form for forms