# Modern Web App

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

- Skill: `ahang1598/modern-web-app` (Agent Skill, multi-file: 74 files)
- Install (CLI): `npx skillmds@latest add ahang1598/modern-web-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ahang1598/modern-web-app/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ahang1598 (https://skillmd.com/u/ahang1598)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/ahang1598/modern-web-app

---


# modern-web-app

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

## Workflow

1. `scripts/init-webapp.sh <website-title> [output-dir]` - Initialize project
2. Edit source code in `src/`
3. Build the React app
4. Deploy the build output in `dist/`

## Quick Start

### 1. Initialize

```bash
# Init project in ./app (default) with website title
bash scripts/init-webapp.sh "My Website"

# Or specify custom output directory
bash scripts/init-webapp.sh "My Website" ./my-project

cd ./app  # or your custom directory
```

**AI Agent Notes**:
- Default project path is `./app` (relative to current working directory)
- Second argument allows custom output directory
- 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: `src/sections/`
- Custom React hooks: `src/hooks/`
- TypeScript definitions: `src/types/`

### 3. Build

```bash
cd ./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.

### 4. Deploy

Deploy the build output in `<project-dir>/dist/`

## Debugging

1. Fix source files
2. `npm run build`
3. Test `dist/`
4. Redeploy

## Reference

- [shadcn/ui Components](https://ui.shadcn.com/docs/components)