skills.rest
Light-houseAI
Light-houseAIOFFICIAL
Explore all skills by this author →
GitHub

frontend-engineer

Develop React components with TypeScript, TanStack Query, and Zustand for the Lighthouse Journey Timeline.

Updated Aug 23, 2026
Search Tags:#typescript#testing#web development#state management#frontend#react#api integration
One-click install
npx skills add https://github.com/Light-houseAI/lighthouse-journey-canvas --skill frontend-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/Light-houseAI/lighthouse-journey-canvas/tree/main/.claude/skills/frontend-engineer
Command: npx skills add https://github.com/Light-houseAI/lighthouse-journey-canvas --skill frontend-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React components with TypeScript and type-safe state management?▼

Build React components using TypeScript for type safety, TanStack Query for server state management, and Zustand for client state. This structured approach ensures consistent architecture, reduces errors, and enables seamless integration between frontend and backend layers within your application.

What's the best way to fetch data and manage server state in React?▼

Use TanStack Query for server state management combined with a credentials-enabled HTTP client. TanStack Query handles caching, synchronization, and background updates automatically, eliminating common data-fetching pitfalls while keeping server state separate from client state.

How do I validate forms and API data in TypeScript React applications?▼

Implement validation using Zod for runtime schema validation paired with react-hook-form for form handling. This combination ensures type safety at compile time and runtime, catching data inconsistencies before they reach your backend API.

Can I use React with Tailwind CSS, TanStack Query, and Zustand together?▼

Yes. These tools work in synergy: Tailwind CSS handles styling, TanStack Query manages server state, Zustand handles client state, and TypeScript enforces type safety across all layers. This stack provides a complete, maintainable solution for scalable React applications.

How do I integrate React components securely with backend APIs?▼

Use an HTTP client configured with `credentials: "include"` for authenticated requests, combined with Zod validation and `@journey/schema` for type-safe API contracts. This ensures secure, type-safe communication and prevents common integration errors.

Why should I separate server state from client state in React?▼

Separating state prevents synchronization bugs and simplifies debugging. TanStack Query isolates server concerns like caching and invalidation, while Zustand handles UI state independently. This separation makes applications easier to test, maintain, and scale.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tooling-setup

Configure React 19 frontend tooling with Vite, TypeScript, Biome, and Vitest.

Official
Intermediate
chiruu12chiruu12
1

canary

Monitor production apps for errors and regressions after deployment.

Community
Advanced
ouzayrouzayr

fullstack-js

Build full-stack JavaScript apps with drizzle-zod, wouter, react-hook-form, react-query, and Tailwind CSS.

Community
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

react-redux-spa-patterns

Provide React 17 SPA patterns with Redux, React Router v6, and Formik.

Official
Advanced