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

デザインツール

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.

主な機能

Standardized authentication flow using AuthProvider and useAuth hooks
Automated API client and type generation from OpenAPI specifications
Consistent UI development with shadcn/ui and Tailwind-based design tokens
0 GitHub stars
Scalable modular directory structure for complex application logic
Strict type safety and validation patterns using TypeScript and Zod

ユースケース

Building a complex B2B dashboard with deep routing and role-based access
Refactoring a legacy React app into a clean, modular structure
Rapidly developing a type-safe frontend that consumes a documented REST API

概要

主な機能

Standardized authentication flow using AuthProvider and useAuth hooks
Automated API client and type generation from OpenAPI specifications
Consistent UI development with shadcn/ui and Tailwind-based design tokens
0 GitHub stars
Scalable modular directory structure for complex application logic
Strict type safety and validation patterns using TypeScript and Zod

ユースケース

Building a complex B2B dashboard with deep routing and role-based access
Refactoring a legacy React app into a clean, modular structure
Rapidly developing a type-safe frontend that consumes a documented REST API