create-app-skill

A Claude Code skill that scaffolds a production-ready frontend project in minutes.

Install

npx @ubuligan/create-app-skill

Restart Claude Code to pick up the skill.

How to use

Open Claude Code in an empty folder and run:

/init-project

The skill will ask you to choose a framework, then a setup mode:

• Full — framework + Tailwind, Shadcn, Orval API layer, Vitest, Cypress, Husky, landing page.
• Minimal — just the chosen framework at its latest version, nothing else.

Then it sets everything up automatically.

What gets installed

| Feature | Tool | |---------|------| | Framework | Next.js / React+Vite / TanStack Start / Remix | | Styling | Tailwind CSS (latest) | | Components | Shadcn/ui (full library — add --all) | | API client | Orval (generated from Swagger/OpenAPI) + axios httpClient | | Server state | TanStack Query | | Unit tests | Vitest + React Testing Library | | E2E tests | Cypress | | Git hooks | Husky + lint-staged | | Landing page | Navbar + Hero (Shadcn components) |

API layer (all frameworks)

Every scaffold gets a type-safe API layer generated directly from a Swagger / OpenAPI spec:

• Orval reads your backend's …/v3/api-docs and generates TanStack Query hooks + TS types — no hand-written DTOs or fetch calls.
• A reusable httpClient (axios + interceptors: auth-clear on 401/403, toast on errors) lives under services/httpClient/ and is wired into Orval via a custom mutator.
• A minimal zustand auth store, sonner toasts, and a Spring-Pageable-friendly param serializer are included.

The skill asks for your Swagger docs URL during setup, then runs npm run generate:api. Generated code lands in services/generated/ (committed). Works for Next.js, React, TanStack Start, and Remix — only the env-var and proxy lines differ.

Not on Spring Boot? The skill asks about your backend and skips the Spring-specific helpers (paramsSerializer, pageable types), letting Orval use its default serialization.

Generated project structure

The scaffolded app's API layer lands in a predictable layout (identical across frameworks):

services/
  httpClient/
    httpClient.ts      # axios instance + interceptors
    orvalMutator.ts    # what Orval calls per request
  generated/           # Orval output — committed, do not hand-edit
    <tag>-controller/
    model/
  types/               # shared ApiResponse / PagedResponse / Pageable types
config/
  env.ts               # typed env access (NEXT_PUBLIC_* or VITE_*)
  constants.ts
store/
  user-store.ts        # minimal zustand auth store
lib/
  paramsSerializer.ts  # Spring Pageable-friendly query params
scripts/
  fix-generated-types.mjs
orval.config.ts

Extra packages (React only)

When you choose React, these are also installed:

• react-router-dom — routing

License

MIT