react-core

Codify reusable React patterns with TypeScript, Vite, and ShadCN.

3|Updated Feb 25, 2026

Search Tags:#typescript #documentation #react #routing #vite #tailwind #ui-patterns

Ready to run

npx skills add https://github.com/Basilisk-Systems/claude-toolkit --skill react-core-basilisk-systems

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-core
Source: https://github.com/Basilisk-Systems/claude-toolkit/tree/main/skills/react-core
Command: npx skills add https://github.com/Basilisk-Systems/claude-toolkit --skill react-core-basilisk-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React projects often struggle with inconsistent architecture and duplicated boilerplate as teams scale. This guide codifies core patterns for TypeScript, Vite, React Router, TailwindCSS, and ShadCN/ui to speed up component creation and ensure maintainable, scalable apps.

Core Features & Use Cases

Project structure guidance: a consistent src layout with app, components, features, pages, routes, and utilities.
Typing and quality standards: TypeScript interfaces, type-safe props, JSDoc documentation, and module headers.
Performance and styling conventions: Tailwind/Tailwind + ShadCN patterns, router configs, and reusable UI primitives.
Use Case: when starting a new React project or adding major features, apply these patterns to maintain cohesion across teams.

Quick Start

Use the React core patterns to scaffold a new UI component with TS types, routing, and styling.

Frequently Asked Questions about react-core

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

FAQPage Schema

How do I structure a scalable React project with TypeScript and Vite?▼

Structure a scalable React project by enforcing a consistent src layout with app, components, features, pages, routes, and utilities directories. This organization speeds up component creation and ensures maintainable codebases as teams grow.

What TypeScript standards should I use for reusable React UI components?▼

Apply TypeScript interfaces, type-safe props, JSDoc documentation, and module headers to reusable React UI components. These typing and quality standards ensure maintainability and consistency across your codebase.

Does this React pattern guide work with TailwindCSS and ShadCN/ui?▼

Yes, the React pattern guide explicitly supports TailwindCSS and ShadCN/ui. It provides performance and styling conventions, including reusable UI primitives, to maintain cohesive styling across your application.

How do I set up routing in a React application using Vite?▼

Set up routing in a Vite React application by applying the provided router configurations within the structured routes directory. This approach ensures scalable and maintainable navigation setup for your project.

When do I need to apply these React core patterns?▼

Apply these React core patterns when starting a new project or adding major features to an existing one. Using them early maintains cohesion across teams and prevents inconsistent architecture and duplicated boilerplate.

What is the best way to enforce consistent architecture in a growing React codebase?▼

The best way to enforce consistent architecture is by codifying core patterns for TypeScript, Vite, React Router, and TailwindCSS. This standardization prevents duplicated boilerplate and ensures maintainable, scalable apps.