frontend-engineer

What problem does it solve?

Frontend development can be complex, involving intricate state management, efficient data fetching, and ensuring robust type safety. This Skill provides a structured, opinionated approach to building maintainable and scalable React applications, significantly reducing development time and common errors.

Core Features & Use Cases

• Structured React Development: Guides on leveraging React 18, TypeScript, TanStack Query for server state, and Zustand for client state, ensuring a clear and consistent architecture.
• Type Safety & Validation: Emphasizes Zod for runtime validation and @journey/schema for defining API types, guaranteeing seamless and type-safe communication between frontend and backend.
• Component & API Integration: Offers proven patterns for creating reusable components, handling forms with react-hook-form, and securely integrating with backend APIs using credentials: "include".
• Use Case: When tasked with adding a new feature to the Lighthouse Journey Timeline, such as a "Node Detail View," this skill guides you through component creation, data fetching with TanStack Query, state management with Zustand, and ensuring all interactions are type-safe and thoroughly tested.

Quick Start

I need to implement a new React component for the Lighthouse Journey Timeline. Guide me through the process, including data fetching, state management, and testing, following the established patterns.