Agent Skills
› aresbit/MateBot2tg
› webapp-building
webapp-building
GitHub用于构建现代React Web应用的技能，基于TypeScript、Vite、Tailwind CSS和shadcn/ui。提供从项目初始化、源码编辑到生产环境构建与部署的完整工作流，适用于复杂UI组件和状态管理场景。
Trigger Scenarios
需要创建新的React前端项目
使用shadcn/ui快速搭建带样式的Web应用
执行前端项目的初始化和构建流程
Install
npx skills add aresbit/MateBot2tg --skill webapp-building -g -y
SKILL.md
Frontmatter
{
"name": "webapp-building",
"description": "Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn\/ui. Best suited for applications with complex UI components and state management."
}
WebApp Building
Stack: React + TypeScript + Vite + Tailwind CSS + shadcn/ui
Workflow
scripts/init-webapp.sh <website-title>— Initialize project in /mnt/okcomputer/output/app, with website title- Edit source code in
src/ - Build the React app
- Deploy the build output in
/mnt/okcomputer/output/app/dist/
Quick Start
1. Initialize
# init project in /mnt/okcomputer/output/app with website title
bash scripts/init-webapp.sh <website-title>
cd /mnt/okcomputer/output/app
AI Agent Notes:
- The project path is /mnt/okcomputer/output/app
- Non-interactive execution with auto-confirm
This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.19 with shadcn/ui theming system
- ✅ Path aliases (
@/) configured - ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Production build optimization with Vite
- ✅ Node 20+ compatibility (auto-detects and pins Vite version)
2. Develop
Edit generated files in src/: page sections go in src/sections/, custom React hooks in src/hooks/, and TypeScript definitions in src/types/.
3. Build
# within project:
cd /mnt/okcomputer/output/app && npm run build 2>&1
Output (dist/):
index.html— Entry pointassets/index-[hash].js— Bundled JSassets/index-[hash].css— Bundled CSS- Optimized images, fonts, other assets
Optimizations: Tree-shaking, code splitting, asset compression, minification, cache-busting hashes.
4. Deploy
Deploy the build output in /mnt/okcomputer/output/app/dist/
Debugging
- Fix source files
npm run build- Test
dist/ - Redeploy
Reference
Version History
- 2328a17 Current 2026-08-20 10:32
