frontend-developer

Implement React and TypeScript frontend UI components with forms and API integration.

6|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/gajakannan/nebula-crm --skill frontend-developer-gajakannan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/gajakannan/nebula-crm/tree/main/agents/frontend-developer
Command: npx skills add https://github.com/gajakannan/nebula-crm --skill frontend-developer-gajakannan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables teams to deliver scalable, high-quality frontend UI implementations with a consistent pattern across screens, components, forms, and API integration in React + TypeScript projects.

Core Features & Use Cases

  • Build type-safe React UI components with a modern toolchain (Vite, Tailwind, shadcn/ui) and a clear component architecture.
  • Implement forms using JSON Schema validation (AJV) or dynamic forms (RJSF) aligned with backend contracts, including accessible validation and error handling.
  • Integrate server data using TanStack Query, with caching, optimistic updates, and robust error handling.
  • Ensure accessibility, responsive design, and comprehensive testing (Vitest + RTL) across features; supports Phase C implementation of experience modules.

Quick Start

Follow the Frontend Developer SKILL guidelines in SKILL.md and use the scaffolding scripts under agents/frontend-developer/scripts to generate components, pages, and API bindings.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build type-safe React forms with JSON Schema validation?

Build type-safe React forms with JSON Schema validation using AJV for static schemas or RJSF for dynamic forms, ensuring accessible validation, error handling, and alignment with backend contracts.

How does TanStack Query integrate with React for server state management?

TanStack Query integrates with React by managing server data through caching, optimistic updates, and robust error handling, ensuring scalable and type-safe API data fetching across UI components.

What's the best way to scaffold accessible React UI components with TypeScript?

Scaffold accessible React UI components with TypeScript using Vite, Tailwind, and shadcn/ui. This approach ensures a clear component architecture with responsive design, tested via Vitest and React Testing Library.

Do I need Vite and npm to use this frontend React implementation workflow?

Yes, this React implementation workflow requires standard frontend tooling including Node.js, npm or yarn, and Vite, along with project conventions defined in planning-mds to scaffold components properly.

Can I use React JSON Schema Form (RJSF) for dynamic form generation in TypeScript?

Yes, you can use RJSF for dynamic form generation in TypeScript projects. It provides an optional approach to render forms dynamically, complementing standard AJV validation for backend-aligned contracts.

Why use AJV for form validation instead of React state in TypeScript projects?

Use AJV for form validation to align frontend forms with backend JSON Schema contracts directly, ensuring type-safe validation and accessible error handling without relying solely on manual React state management.