Dev web

Skill yugasun/skills/skills/dev-web

A collection of high-quality, opinionated agent skills for modern full-stack development. These skills are designed to be used with AI agents (like Cursor, Windsurf, or custom agents) to standardize project creation and maintenance.

Install

npx -y skills add yugasun/skills --skill dev-web

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.3 KB, as published. Nobody here has run it

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

Initialize: Use bun create vite web --template react-ts.
Install: bun install.
Styling: Configure Tailwind CSS 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 <pkg>`	Add dependency
`bun add -d <pkg>`	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:

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:

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 <component> 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:

bun add @tanstack/react-query @tanstack/react-router

Configuration Details

TypeScript

Ensure tsconfig.json is set to strict mode.

{
  "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.

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:

@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