What is a feature-based architecture?

It is an organizational pattern where code is grouped by functional features (like 'auth' or 'profile') rather than technical types, promoting better isolation and scalability.

Can I use this for existing projects?

While optimized for setup, it can be used to refactor existing projects into a more structured feature-based layout or to integrate better code quality tools.

Does this skill recommend specific styling tools?

Yes, it recommends Tailwind CSS and shadcn/ui, providing specific rules on how to wrap components to maintain a consistent design system.

When does the Vite + React Setup Guide activate?

The skill automatically activates during the planning and design phase, specifically when you ask questions about project architecture, tech stack selection, or directory structures.

Vite + React Setup Guide

Name: Vite + React Setup Guide
Author: khw1031

bykhw1031

•

Design Tools

Guides the architectural planning and tech stack selection for modern Vite and React applications using industry best practices.

About

This skill assists developers during the initial planning and design phases of a web project by providing a standardized, feature-based architecture guide. It offers curated recommendations for core technologies like TypeScript and Vite, state management solutions like Zustand or Redux Toolkit, and styling frameworks such as Tailwind CSS and shadcn/ui. By enforcing a strict feature-based directory structure and providing a CLAUDE.md template, it ensures that new projects are scalable, maintainable, and follow consistent coding standards from day one.

Key Features

Implementation patterns for feature-based directory structures
Design system governance for shadcn/ui and Tailwind CSS
2 GitHub stars
Automated architecture guidance for Vite and React projects
Standardized CLAUDE.md template generation for project rules
Tailored tech stack recommendations based on project complexity

Use Cases

Determining the most appropriate state management and testing tools for a specific use case
Establishing design system boundaries and styling conventions for a team
Bootstrapping a new React project with a scalable feature-based architecture

About

Key Features

Implementation patterns for feature-based directory structures
Design system governance for shadcn/ui and Tailwind CSS
2 GitHub stars
Automated architecture guidance for Vite and React projects
Standardized CLAUDE.md template generation for project rules
Tailored tech stack recommendations based on project complexity

Use Cases

Determining the most appropriate state management and testing tools for a specific use case
Establishing design system boundaries and styling conventions for a team
Bootstrapping a new React project with a scalable feature-based architecture