How do I install the Webapp Building skill?

Run npx skillmds@latest add serejaris/webapp-building in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Webapp Building safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Webapp Building?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Webapp Building free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Webapp Building?

serejaris (@serejaris) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Webapp Building by serejaris — Agent Skill

Name: Webapp Building
Author: serejaris

Webapp Building

Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management. Supports optional templates for specialized requirement.

serejaris 95bc6a2 199 files · 5.1 MB Updated Sep 17, 2026

File contents

WebApp Building

Stack: React + TypeScript + Vite + Tailwind CSS + shadcn/ui

Workflow

scripts/init-webapp.sh <website-title> [template-name] — Initialize project in /mnt/agents/output/app
- Without template: creates base project with 40+ shadcn/ui components
- With template: applies specialized template and outputs template-specific config info
Edit source code in src/ (or src/config.ts for templates)
Build the React app

Quick Start

1. Initialize

# init project in /mnt/agents/output/app with website title
bash scripts/init-webapp.sh <website-title> [template-name]
cd /mnt/agents/output/app

AI Agent Notes:

The project path is /mnt/agents/output/app
Non-interactive execution with auto-confirm
If template-name is provided, the script will output template-specific information (config options, build instructions, etc.)

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/.

For templates: edit src/config.ts to customize content. Do not modify component files — all content configuration is in config.ts.

3. Build

# within project:
cd /mnt/agents/output/app && npm run build 2>&1

Output (dist/):

index.html — Entry point
assets/index-[hash].js — Bundled JS
assets/index-[hash].css — Bundled CSS
Optimized images, fonts, other assets

Optimizations: Tree-shaking, code splitting, asset compression, minification, cache-busting hashes.

Debugging

Fix source files
npm run build
Test dist/

Reference

shadcn/ui Components

---name: webapp-buildingdescription: Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management. Supports optional templates for specialized requirement.---# WebApp Building**Stack**: React + TypeScript + Vite + Tailwind CSS + shadcn/ui## Workflow1. `scripts/init-webapp.sh <website-title> [template-name]` — Initialize project in /mnt/agents/output/app - Without template: creates base project with 40+ shadcn/ui components - With template: applies specialized template and outputs template-specific config info2. Edit source code in `src/` (or `src/config.ts` for templates)3. Build the React app ## Quick Start### 1. Initialize```bash# init project in /mnt/agents/output/app with website titlebash scripts/init-webapp.sh <website-title> [template-name]cd /mnt/agents/output/app```**AI Agent Notes**:- The project path is /mnt/agents/output/app- Non-interactive execution with auto-confirm- If template-name is provided, the script will output template-specific information (config options, build instructions, etc.)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. DevelopEdit generated files in `src/`: page sections go in `src/sections/`, custom React hooks in `src/hooks/`, and TypeScript definitions in `src/types/`.For templates: edit `src/config.ts` to customize content. Do not modify component files — all content configuration is in config.ts.### 3. Build```bash# within project:cd /mnt/agents/output/app && npm run build 2>&1```**Output** (`dist/`):- `index.html` — Entry point- `assets/index-[hash].js` — Bundled JS- `assets/index-[hash].css` — Bundled CSS- Optimized images, fonts, other assets**Optimizations**: Tree-shaking, code splitting, asset compression, minification, cache-busting hashes.## Debugging1. Fix source files2. `npm run build`3. Test `dist/`## Reference- [shadcn/ui Components](https://ui.shadcn.com/docs/components)

Frequently asked questions