frontend-feature-implementation

star 2

Best practices for implementing features. Use when building pages, wiring API integrations, or assembling organisms.

michaellperry By michaellperry schedule Updated 1/2/2026
play_arrow Run Skill in Manus View GitHub

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.
Install via CLI
npx skills add https://github.com/michaellperry/aaad --skill frontend-feature-implementation
Repository Details
star Stars 2
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator
michaellperry
michaellperry Explore all skills →