How is the directory structure organized?

It follows a modular pattern (modules, components, hooks, providers, services) designed to remain manageable even as the application grows in complexity.

What UI framework does this skill prefer?

The skill is built around shadcn/ui, utilizing Tailwind CSS and design tokens to maintain visual consistency across the application.

Does this skill work with Next.js?

This skill is specifically optimized for pure client-side React SPAs using React Router and is designed to be independent of Next.js or server-side rendering features.

How does it handle API integration?

It uses OpenAPI definitions to automatically generate type-safe clients using Orval or openapi-typescript, eliminating the need for manual API type definitions.

React Frontend SPA Architect

Name: React Frontend SPA Architect
Author: Higashi-Masafumi

byHigashi-Masafumi

0•

Design Tools

Implements scalable, type-safe React Single Page Applications using standardized routing, authentication, and design patterns.

This skill equips Claude with a rigorous framework for building and maintaining production-grade React SPAs. It prioritizes client-side architecture using React Router, strictly enforcing TypeScript standards and Zod-based validation. By integrating shadcn/ui for design consistency and automating API client generation via OpenAPI, it ensures that frontend applications remain maintainable and synchronized with backend services. It is ideal for developers who need a robust, modular structure without the overhead of server-side frameworks like Next.js.

Key Features

01Standardized authentication flow using AuthProvider and useAuth hooks

02Automated API client and type generation from OpenAPI specifications

03Consistent UI development with shadcn/ui and Tailwind-based design tokens

040 GitHub stars

05Scalable modular directory structure for complex application logic

06Strict type safety and validation patterns using TypeScript and Zod

Use Cases

01Building a complex B2B dashboard with deep routing and role-based access

02Refactoring a legacy React app into a clean, modular structure

03Rapidly developing a type-safe frontend that consumes a documented REST API

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add higashi-masafumi/ai-coding-template react-frontend-spa

For use in Claude.ai and ChatGPT

Download Skill