# Dev Web

> Create and manage modern React web applications using Bun, Vite, React 19, Tailwind CSS 4, and shadcn/ui. Use this skill when the user asks to build a frontend, a web app, or modify UI components.

- **Type:** Skill
- **Install:** `agentstack add skill-yugasun-skills-dev-web`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [yugasun](https://agentstack.voostack.com/s/yugasun)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [yugasun](https://github.com/yugasun)
- **Source:** https://github.com/yugasun/skills/tree/main/skills/dev-web

## Install

```sh
agentstack add skill-yugasun-skills-dev-web
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Web Development Skill

## Instructions

Use this skill to scaffold and maintain web frontend projects in the `web/` directory. Follow the stack preferences and configuration details below.

### Quick Start

1.  **Initialize**: Use `bun create vite web --template react-ts`.
2.  **Install**: `bun install`.
3.  **Styling**: Configure Tailwind CSS 4.
4.  **Components**: Initialize `shadcn/ui`.

## Core Stack preferences

### Package Manager & Runtime (Bun)

Use **Bun** as the primary package manager and runtime.

| Command | Description |
|---------|-------------|
| `bun install` | Install dependencies |
| `bun add ` | Add dependency |
| `bun add -d ` | Add dev dependency |
| `bun run dev` | Start development server |

### Project Location

The web frontend project should be initialized in the `web/` directory.

### Framework & Build (Vite + React 19)

Use **Vite** with **React 19** and **TypeScript 5**.

To create a new project:
```bash
bun create vite web --template react-ts
```

### Styling (Tailwind CSS 4)

Use **Tailwind CSS v4**.

-   Install using the Vite plugin: `@tailwindcss/vite` and `tailwindcss`.
-   Use the CSS-first configuration approach where possible (`@import "tailwindcss";`).

Installation:
```bash
bun add tailwindcss@next @tailwindcss/vite
```

### UI Library (shadcn/ui 3)

Use **shadcn/ui v3** for the component system.

-   Initialize with `bunx --bun shadcn@latest init`.
-   Configure `components.json` to resolve paths correctly (e.g., `@/components`, `@/lib/utils`).
-   Use `bunx --bun shadcn@latest add ` to add components.

### Data & Routing (TanStack)

Use the **TanStack** suite for complex app needs:

-   **@tanstack/react-query**: For async state management.
-   **@tanstack/react-router**: For type-safe routing.

Installation:
```bash
bun add @tanstack/react-query @tanstack/react-router
```

---

## Configuration Details

### TypeScript

Ensure `tsconfig.json` is set to strict mode.

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

### Vite Configuration

Update `vite.config.ts` to include the Tailwind CSS 4 plugin and path aliases.

```ts
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import path from "node:path"
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

### Global CSS

In `src/index.css`:

```css
@import "tailwindcss";

/* Configuration for shadcn/ui CSS variables should be added here if not automatically handled by the CLI init */
```

---

## References

### Styling & Theming

| Topic | Description | Reference |
|-------|-------------|-----------|
| Theming System | CSS variables, Dark mode, and Tailwind v4 configuration | [theme](references/theme.md) |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [yugasun](https://github.com/yugasun)
- **Source:** [yugasun/skills](https://github.com/yugasun/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-yugasun-skills-dev-web
- Seller: https://agentstack.voostack.com/s/yugasun
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.