skills.rest
yugasun
yugasunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

1|Updated Jan 29, 2026
Search Tags:#typescript#react#scaffold#bun#vite#tailwind#web
One-click install
npx skills add https://github.com/yugasun/skills --skill dev-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-web
Source: https://github.com/yugasun/skills/tree/main/skills/web
Command: npx skills add https://github.com/yugasun/skills --skill dev-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of modern web frontends by standardizing tooling, project structure, and UI scaffolding using Bun, Vite, React 19, TypeScript 5, Tailwind CSS 4, and shadcn/ui.

Core Features & Use Cases

  • Automated project scaffolding: Quickly bootstrap a web frontend project with the recommended stack and configurations.
  • UI component readiness: Integrates shadcn/ui components and Tailwind for consistent design systems.
  • Data and routing setup: Includes TanStack routing and query patterns for robust frontend apps.
  • Use Case: Build a new admin dashboard in minutes with a ready-to-use React + TypeScript setup.

Quick Start

Use the web skill to initialize a new project in the web/ directory with bun create vite web --template react-ts, then run bun install and start the dev server.

Frequently Asked Questions about dev-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React app with Bun and Vite?▼

To scaffold a React app with Bun and Vite, you initialize a new project in the web/ directory using `bun create vite web --template react-ts`, run `bun install`, and start the dev server. This setup includes React 19 and TypeScript 5.

What is the best way to set up Tailwind CSS 4 and shadcn/ui in a new web project?▼

The best way to set up Tailwind CSS 4 and shadcn/ui is using an automated scaffolding skill that configures them alongside Bun and Vite. This standardizes your styling and UI component systems for consistent frontend development.

Does this React scaffolding tool include routing and data fetching setup?▼

Yes, this React scaffolding tool includes initial configuration for TanStack routing and query patterns. This provides robust data fetching and routing setup directly within your newly scaffolded web frontend project.

Can I use this scaffolding tool to build an admin dashboard?▼

Yes, you can use this scaffolding tool to build an admin dashboard in minutes. It provides a ready-to-use React, TypeScript, Tailwind CSS, and shadcn/ui setup within the web/ workspace.

What package manager do I need to set up a modern web frontend with Vite and React 19?▼

You need Bun as the package manager to set up a modern web frontend with Vite and React 19. The skill requires Bun specifically for installing dependencies and running the Vite build process.

How do I initialize a UI component library within my web workspace?▼

To initialize a UI component library within your web workspace, you use this scaffolding skill to set up the project structure with React 19, TypeScript 5, and shadcn/ui, ensuring component readiness and consistent design.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

bun

Run JavaScript and TypeScript scripts, install dependencies, bundle, and test with Bun.

Community
Basic
mklozmkloz

react-dev

Builds type-safe React applications with TypeScript and React 19 features.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
2good4me2good4me

templates

Generate project scaffolding templates for Next.js, React Native, Flutter, Express.js, and Astro.

Community
Basic