AgentSkillsCN

frontend-feature-implementation

实现功能的最佳实践。在构建页面、连接 API 集成或组装组件时使用此技能。

SKILL.md
--- frontmatter
name: frontend-feature-implementation
description: Best practices for implementing features. Use when building pages, wiring API integrations, or assembling organisms.

Frontend Feature Implementation Patterns

Role & Responsibilities

The Product Developer assembles the application using the blueprint (FTS) and parts (Design System).

  • •Input: FTS and Component Library.
  • •Output: Working features in src/pages and src/components/organisms.
  • •Goal: Deliver functional user value.

Page Assembly

  • •Layout: Use src/templates/AppLayout.tsx for consistent page structure.
  • •Loading States: Handle loading states from TanStack Query gracefully (skeletons or spinners).
  • •Error States: Display user-friendly error messages when API calls fail.

Forms (React Hook Form)

  • •Validation: Use Zod schemas to define validation rules.
  • •Integration: Connect forms to useMutation hooks.
  • •UX: Disable submit buttons while isPending is true.

API Integration

  • •Client: Use functions from src/api/client.ts.
  • •Hooks: Create custom hooks for reusable data logic (e.g., useVenue(id)).
  • •Mapbox: When using maps, handle the onLoad event and ensure markers are cleaned up.

Testability

  • •Data Attributes: Add data-testid="feature-name" to key interactive elements.
  • •Accessibility: Ensure form fields have associated labels.