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

•

设计工具

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

关于

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.

主要功能

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

使用场景

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

关于

主要功能

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

使用场景

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