Menu
Scaffold a new frontend web project with Vite, Tailwind CSS, and standard configuration. Supports React, Svelte, and Vue frameworks.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Browse, screenshot, or visually verify a local web app using the pre-installed browser-check and playwright-cli (never install your own browser). Use when asked to screenshot, browse, open/view a page, check the UI, or confirm the site is running.
Prioritize open TODO items by effort and impact, recommend what to work on next. Add the `full` keyword to also weigh project notes and stash context.
Resume a session โ read the paste-back handoff note to recall what we last worked on, falling back to a git+TODO status when none exists. Add the `full` keyword to also deep-scan project notes and memory.
Write the paste-back handoff note (scratch/resume-session.md) so the next session can hit the ground running. Add the `full` keyword to also save durable knowledge to denote notes + TODO and commit.
Get oriented on host-level, cross-project knowledge by reading the stash README map. Use when starting fresh in a container, or when you need the lay of the land for hardware, dotfiles/preferences, Emacs, Linux, or cross-project conventions that live outside the current repo.
Work autonomously while the user is away. Create multiple feature branches sequentially, each with a self-contained improvement.
| name | j-scaffold-web |
| description | Scaffold a new frontend web project with Vite, Tailwind CSS, and standard configuration. Supports React, Svelte, and Vue frameworks. |
Scaffold a new frontend web project with Vite and standard configuration.
name (required): Project name--framework: react (default), svelte, or vueCreate the project using Vite:
pnpm create vite <name> --template <framework>-ts
Change into the project directory and install dependencies:
cd <name> && pnpm install
Add and configure Tailwind CSS:
pnpm add -D tailwindcss postcss autoprefixer
pnpm tailwindcss init -p
Configure the dev server to bind to 0.0.0.0 and use $PORT:
server: {
host: "0.0.0.0",
port: Number(process.env.PORT ?? 4000),
}
Set up Tailwind in the main CSS file with the standard directives.
Update package.json scripts:
dev: runs the dev server on $PORTbuild: builds for productionpreview: uses 0.0.0.0Create a basic folder structure:
src/
components/
styles/
Use hooks/ for React, lib/ for Svelte or Vue if needed.
Replace the starter screen with a minimal page that proves Tailwind is wired correctly.
If the project uses this repo's devcontainer conventions, ensure:
just dev is the default development entrypointhttp://localhost:$PORTpnpm over npmInitialize git if not already in a repo.
/j-scaffold-web myapp
/j-scaffold-web dashboard --framework svelte