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.

主要功能

01Implementation patterns for feature-based directory structures

02Design system governance for shadcn/ui and Tailwind CSS

032 GitHub stars

04Automated architecture guidance for Vite and React projects

05Standardized CLAUDE.md template generation for project rules

06Tailored tech stack recommendations based on project complexity

使用场景

01Determining the most appropriate state management and testing tools for a specific use case

02Establishing design system boundaries and styling conventions for a team

03Bootstrapping a new React project with a scalable feature-based architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add khw1031/hynu-plugins vite-react-setup-guide

For use in Claude.ai and ChatGPT

Download Skill