Menú
Scaffold a new frontend web project with Vite, Tailwind CSS, and standard configuration. Supports React, Svelte, and Vue frameworks.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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