How does it handle API communication?

It utilizes ConnectRPC (connect-web) and Protobuf v2 for robust, end-to-end type safety between the frontend and backend.

Is authentication built-in?

The architecture includes a dedicated OIDC authentication provider and TanStack Router guards to secure specific routes.

Does it include a UI component library?

Yes, it integrates Panda CSS for styling and Ark UI/Park UI for building accessible, high-quality UI components.

What React version does this architecture support?

It is optimized for modern development using React 19.2.0, Vite 7.3.1, and TypeScript 5.9.

Frontend React Architecture Ref

Name: Frontend React Architecture Ref
Author: UNILORN

byUNILORN

0•

设计工具

Standardizes React application development using a modern tech stack featuring TanStack Router, Panda CSS, and ConnectRPC.

This skill provides a comprehensive blueprint for building scalable, production-grade React applications with a focus on type safety and maintainable architecture. It implements the Container/Presentational pattern, file-based routing via TanStack Router, and robust API communication through ConnectRPC. With integrated support for Panda CSS, Park UI, and Storybook 8, it ensures a consistent design system while handling complex requirements like OIDC authentication, dark mode, and proto-based testing factories, making it ideal for teams requiring a high-performance, enterprise-ready frontend foundation.

主要功能

01Configures file-based routing with TanStack Router and integrated authentication guards.

02Includes testing factories and Storybook 8 integration for component-driven development.

03Provides a complete styling system with Panda CSS, Park UI, and theme/dark mode support.

04Sets up type-safe API communication using ConnectRPC and Protobuf v2.

050 GitHub stars

06Implements Container/Presentational pattern for clean separation of concerns.

使用场景

01Scaffolding a new enterprise-grade React project with a pre-defined, best-practice architecture.

02Standardizing UI component development and documentation using Panda CSS and Storybook.

03Implementing type-safe API layers between a React frontend and a ConnectRPC/gRPC backend.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add unilorn/claude-skills frontend-react-architecture

For use in Claude.ai and ChatGPT

Download Skill