react-vite-expert by questfortech-investments/claude-code-skills
npx skills add https://github.com/questfortech-investments/claude-code-skills --skill react-vite-expert变身为 React + Vite 专家,精通现代 React 开发模式、最佳项目组织方式、性能优化技巧以及生产就绪配置。此技能提供使用 Vite 作为构建工具构建快速、可维护且可扩展的 React 应用程序所需的一切。
指导用户构建 React 应用程序,以实现最大的可维护性和可扩展性。
参考:references/project_architecture.md
这份全面的指南涵盖:
何时查阅:
关键决策树:
使用生产就绪的模板自动化组件、钩子和功能的创建。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
可用脚本:
scripts/create_component.py 生成包含所有必要文件的完整组件:
# 创建基础组件
python scripts/create_component.py Button --type component
# 创建具有懒加载功能的页面组件
python scripts/create_component.py Dashboard --type page
# 创建带有 children prop 的组件
python scripts/create_component.py Card --children
# 创建带有 Storybook 故事的组件
python scripts/create_component.py Button --story
# 不包含测试
python scripts/create_component.py SimpleComponent --no-tests
何时使用:
scripts/create_hook.py 为常见模式生成自定义钩子模板:
# 创建自定义钩子
python scripts/create_hook.py useAuth --type custom
# 创建数据获取钩子
python scripts/create_hook.py useUserData --type fetch
# 创建 localStorage 钩子
python scripts/create_hook.py useSettings --type localStorage
# 创建防抖钩子
python scripts/create_hook.py useSearchDebounce --type debounce
何时使用:
优化 React 应用程序以实现最大性能和最小打包体积。
参考:references/performance_optimization.md
本指南涵盖:
何时查阅:
快速性能检查清单:
python scripts/analyze_bundle.py 以识别大型依赖项references/performance_optimization.md 获取优化策略React.lazy(() => import('./Page'))React.memo(Component)useMemo()assets/vite.config.optimized.ts 中的 Vite 配置scripts/analyze_bundle.py 分析构建输出并提供优化建议:
# 运行打包分析
python scripts/analyze_bundle.py
它分析的内容:
何时运行:
部署优化的 Vite 配置和项目设置。
可用资源:
assets/vite.config.optimized.ts 完全优化的 Vite 配置,包含:
何时使用:
如何使用:
assets/vite.config.optimized.ts 复制到项目根目录npm install -D rollup-plugin-visualizernpm run build:analyzeassets/tsconfig.optimized.json TypeScript 配置,包含:
何时使用:
assets/package.json.example 完整的 package.json,包含:
何时使用:
assets/project-structure-example.md 完整的项目结构,包含:
何时使用:
实现现代 React 模式并避免常见陷阱。
参考:references/best_practices.md
本指南涵盖:
何时查阅:
模式决策指南:
使用正确的 TypeScript 模式编写类型安全的 React 代码。
references/best_practices.md 中的关键 TypeScript 模式:
当用户询问 TypeScript 时:
references/best_practices.md 中的相关部分常见的 TypeScript 问题:
为 React 应用程序实现全面的测试。
references/best_practices.md 中的测试模式:
测试理念:
当用户需要测试帮助时:
scripts/create_component.pyreferences/best_practices.md 中的测试部分assets/project-structure-example.md 中的测试设置选择并实施正确的状态管理解决方案。
状态管理决策树 (来自 references/project_architecture.md):
是来自 API 的服务器数据吗?
└─ 是 → TanStack Query (React Query)
是组件本地的状态吗?
└─ 是 → useState
是在 2-3 个组件之间共享的状态吗?
└─ 是 → 状态提升 (props)
是全局但简单的状态吗 (主题、认证)?
└─ 是 → 上下文 + useState
是全局且复杂的状态吗?
├─ 小型/中型应用 → Zustand
└─ 具有复杂异步的大型应用 → Redux Toolkit
何时查阅 references/project_architecture.md:
理解需求:
提供结构:
assets/project-structure-example.md设置配置:
assets/vite.config.optimized.tsassets/tsconfig.optimized.jsonassets/package.json.example 获取脚本生成初始组件:
# 创建基础 UI 组件
python scripts/create_component.py Button --type component --story
python scripts/create_component.py Input --type component
# 创建页面
python scripts/create_component.py HomePage --type page
# 创建钩子
python scripts/create_hook.py useAuth --type custom
解释后续步骤:
分析当前状态:
# 运行打包分析器
python scripts/analyze_bundle.py
审查分析输出:
查阅优化指南:
references/performance_optimization.md应用优化 (按影响顺序):
assets/vite.config.optimized.ts测量改进:
references/project_architecture.mdassets/project-structure-example.md 中的相关部分使用组件生成器:
# 一次性生成多个组件
python scripts/create_component.py UserCard --type component
python scripts/create_component.py ProductCard --type component
python scripts/create_component.py OrderCard --type component
解释结构:
创建共享模式:
参考模式指南:
references/best_practices.md 中的复合组件模式参考测试设置:
assets/project-structure-example.md设置测试工具:
生成带测试的组件:
# 组件默认附带测试
python scripts/create_component.py Button
解释测试模式:
references/best_practices.md设置 CI/CD:
assets/package.json.example 添加测试脚本何时阅读:
关键部分:
何时阅读:
关键部分:
何时阅读:
关键部分:
# 生成组件
python scripts/create_component.py ComponentName --type component
# 生成页面
python scripts/create_component.py PageName --type page
# 生成钩子
python scripts/create_hook.py useHookName --type custom
# 分析打包
python scripts/analyze_bundle.py
references/project_architecture.mdreferences/performance_optimization.md + 运行 analyze_bundle.pyreferences/best_practices.mdassets/vite.config.optimized.tsassets/package.json.examplereferences/project_architecture.md对于这些主题,提供一般的 React 指导,但要承认局限性。
你的 React + Vite 项目应实现:
每周安装量
149
仓库
GitHub 星标数
4
首次出现
2026年1月22日
安全审计
安装于
opencode130
gemini-cli128
codex125
github-copilot114
cursor114
claude-code103
Transform into a React + Vite expert with deep knowledge of modern React development patterns, optimal project organization, performance optimization techniques, and production-ready configurations. This skill provides everything needed to build fast, maintainable, and scalable React applications using Vite as the build tool.
Guide users in structuring React applications for maximum maintainability and scalability.
Reference:references/project_architecture.md
This comprehensive guide covers:
When to consult:
Key Decision Trees:
Automate component, hook, and feature creation with production-ready templates.
Scripts available:
scripts/create_component.py Generates complete component with all necessary files:
Component file (.tsx)
TypeScript types (.types.ts)
CSS Module (.module.css)
Tests (.test.tsx)
Storybook story (.stories.tsx) [optional]
Index file for clean imports
python scripts/create_component.py Button --type component
python scripts/create_component.py Dashboard --type page
python scripts/create_component.py Card --children
python scripts/create_component.py Button --story
python scripts/create_component.py SimpleComponent --no-tests
When to use:
scripts/create_hook.py Generates custom hooks with templates for common patterns:
State management hooks
Effect hooks
Data fetching hooks
LocalStorage hooks
Debounce hooks
Interval hooks
python scripts/create_hook.py useAuth --type custom
python scripts/create_hook.py useUserData --type fetch
python scripts/create_hook.py useSettings --type localStorage
python scripts/create_hook.py useSearchDebounce --type debounce
When to use:
Optimize React applications for maximum performance and minimal bundle size.
Reference:references/performance_optimization.md
This guide covers:
When to consult:
Quick Performance Checklist:
python scripts/analyze_bundle.py to identify large dependenciesreferences/performance_optimization.md for optimization strategiesReact.lazy(() => import('./Page'))React.memo(Component)useMemo() for expensive calculationsassets/vite.config.optimized.tsscripts/analyze_bundle.py Analyzes build output and provides optimization recommendations:
# Run bundle analysis
python scripts/analyze_bundle.py
What it analyzes:
When to run:
Deploy optimized Vite configurations and project setups.
Assets available:
assets/vite.config.optimized.ts Fully optimized Vite configuration with:
When to use:
How to use:
assets/vite.config.optimized.ts to project rootnpm install -D rollup-plugin-visualizernpm run build:analyzeassets/tsconfig.optimized.json TypeScript configuration with:
When to use:
assets/package.json.example Complete package.json with:
When to use:
assets/project-structure-example.md Complete project structure with:
When to use:
Implement modern React patterns and avoid common pitfalls.
Reference:references/best_practices.md
This guide covers:
When to consult:
Pattern Decision Guide:
Write type-safe React code with proper TypeScript patterns.
Key TypeScript patterns inreferences/best_practices.md:
When user asks about TypeScript:
references/best_practices.mdCommon TypeScript Questions:
Implement comprehensive testing for React applications.
Testing patterns inreferences/best_practices.md:
Testing Philosophy:
When user needs testing help:
scripts/create_component.pyreferences/best_practices.mdassets/project-structure-example.mdChoose and implement the right state management solution.
State management decision tree (fromreferences/project_architecture.md):
Is it server data (from API)?
└─ Yes → TanStack Query (React Query)
Is it local to a component?
└─ Yes → useState
Is it shared between 2-3 components?
└─ Yes → Lift state up (props)
Is it global but simple (theme, auth)?
└─ Yes → Context + useState
Is it global and complex?
├─ Small/medium app → Zustand
└─ Large app with complex async → Redux Toolkit
When to consultreferences/project_architecture.md:
Understand requirements :
Provide structure :
assets/project-structure-example.mdSet up configuration :
assets/vite.config.optimized.tsassets/tsconfig.optimized.jsonassets/package.json.example for scriptsGenerate initial components :
# Create basic UI components
python scripts/create_component.py Button --type component --story
python scripts/create_component.py Input --type component
# Create pages
python scripts/create_component.py HomePage --type page
# Create hooks
python scripts/create_hook.py useAuth --type custom
Analyze current state :
# Run bundle analyzer
python scripts/analyze_bundle.py
Review analysis output :
Consult optimization guide :
references/performance_optimization.mdApply optimizations (in order of impact):
assets/vite.config.optimized.tsAssess current size :
Reference architecture guide :
references/project_architecture.mdRecommend structure :
Show concrete example :
assets/project-structure-example.mdProvide migration path :
Use component generator :
# Generate multiple components at once
python scripts/create_component.py UserCard --type component
python scripts/create_component.py ProductCard --type component
python scripts/create_component.py OrderCard --type component
Explain structure :
Create shared patterns :
Reference patterns guide :
references/best_practices.mdReference testing setup :
assets/project-structure-example.mdSet up test utilities :
Generate components with tests :
# Components come with tests by default
python scripts/create_component.py Button
Explain testing patterns :
references/best_practices.mdSet up CI/CD :
assets/package.json.exampleRead when:
Key sections:
Read when:
Key sections:
Read when:
Key sections:
# Generate component
python scripts/create_component.py ComponentName --type component
# Generate page
python scripts/create_component.py PageName --type page
# Generate hook
python scripts/create_hook.py useHookName --type custom
# Analyze bundle
python scripts/analyze_bundle.py
references/project_architecture.mdreferences/performance_optimization.md + run analyze_bundle.pyreferences/best_practices.mdassets/vite.config.optimized.tsassets/package.json.examplereferences/project_architecture.mdFor these topics, provide general React guidance but acknowledge limitations.
Your React + Vite project should achieve:
Weekly Installs
149
Repository
GitHub Stars
4
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode130
gemini-cli128
codex125
github-copilot114
cursor114
claude-code103
Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践
2,600 周安装
付费墙与升级界面CRO优化指南:提升应用内转化率的专家策略
1 周安装
页面转化率优化CRO工具 - 营销页面分析与提升转化率建议
1 周安装
NotebookLM 研究助手技能:基于 Google NotebookLM 的文档智能查询与自动化管理工具
1 周安装
GitHub Actions 安全审查工具 - 自动化检测 CI/CD 工作流漏洞与利用场景
148 周安装
NoSQL专家指南:Cassandra与DynamoDB分布式数据库设计模式与性能优化
1 周安装
Next.js Supabase 认证集成指南:App Router 中间件与服务器操作最佳实践
1 周安装
Explain next steps :
Measure improvement :