What technologies does this skill support?

It is specifically designed for modern React stacks involving Vite, React Router, TanStack Query, Biome, and TypeScript.

What is the Bulletproof React architecture?

It is an opinionated methodology for structuring React applications into self-contained feature packages, promoting scalability and maintainability.

How does this skill handle cross-feature imports?

It enforces a strict rule where features never import from each other; instead, they communicate through a shared layer or an app-level coordinator.

Does this skill provide styling guidance?

While it focuses on structure, it includes references to specialized skills for Tailwind CSS and general styling best practices.

Can I use this for refactoring an existing project?

Yes, the skill includes rules for auditing project structures and reorganizing files into a more sustainable, layered hierarchy.

Bulletproof React Architect

Name: Bulletproof React Architect
Author: ng-hai

byng-hai

•

Productivity & Workflow

Standardizes production-ready React applications using feature-based architecture and modern development standards.

This skill provides an opinionated architectural blueprint for building scalable, high-performance React applications using Vite, React Router, and TanStack Query. It enforces a modular 'feature-packages' approach to code organization, ensuring unidirectional data flow and strict layer hierarchy while serving as a central hub for specialized guidance on performance, state management, and security. It is ideal for developers who want to avoid technical debt by establishing rigorous project structures and coding standards from day one.

Key Features

01Configures modern tooling standards including Biome, TypeScript, and pnpm

02Serves as an umbrella skill for component patterns, testing, and security

034 GitHub stars

04Implements scalable feature-based project architecture and folder organization

05Enforces strict unidirectional import flows to prevent circular dependencies

06Provides structural blueprints for Vite and TanStack Query integration

Use Cases

01Scaffolding a new production-ready React project with standardized conventions

02Auditing and refactoring existing React codebases for better scalability

03Onboarding engineering teams to a unified set of React architectural standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude bulletproof-react

For use in Claude.ai and ChatGPT

Download Skill