new-vipps-project

name	new-vipps-project
description	Start a new Vipps frontend project (React, Vite, TypeScript, Tailwind, IndexedDB, AKS). Use only when explicitly invoked — never auto-trigger on keywords.
disable-model-invocation	true

New Vipps Project

Explicit entry point for the Vipps frontend stack. Exists to avoid clashes with other installed plugins.

Stack

• React 18+ with hooks only (no class components)
• Vite as the build tool
• TypeScript in strict mode (strict: true, noImplicitAny: true, strictNullChecks: true) — no any
• Tailwind CSS only — no inline styles, no CSS modules, no other UI libraries
• Native browser IndexedDB — no Dexie, no localForage, no wrappers
• Vitest + React Testing Library for testing
• Docker → Azure Container Registry → AKS for deployment (Kustomize overlays)
• GitHub Actions for CI/CD (build-and-publish.yml + deploy.yml)

When the user requests something outside these rules, say "We always use [the correct tool] in this project" and proceed with the correct stack tool.

Step 1 — Greet and Ask

Say: "Starting your Vipps frontend project — React, Vite, TypeScript, Tailwind, and IndexedDB, deploying to AKS."

Ask: "What is this project for? (One sentence is fine — or say 'skip' for a blank scaffold.)"

Step 2 — Scaffold

Execute inline (no subagents). Create exactly these files:

Source

• src/main.tsx — React 18 root with ReactDOM.createRoot and <StrictMode>
• src/App.tsx — Root component, Tailwind-styled, minimal content
• src/db/schema.ts — IndexedDB schema skeleton: typed interface + openDB helper with onupgradeneeded
• src/components/.gitkeep
• src/hooks/.gitkeep

Config

• vite.config.ts — Vite with @vitejs/plugin-react
• tsconfig.json — strict: true, noImplicitAny: true, strictNullChecks: true, jsx: "react-jsx"
• tailwind.config.ts — content: ["./index.html", "./src/**/*.{ts,tsx}"]
• postcss.config.js — tailwindcss + autoprefixer
• vitest.config.ts — environment: "jsdom", setupFiles: ["./src/test/setup.ts"]
• src/test/setup.ts — imports @testing-library/jest-dom
• index.html — Vite entry point with <div id="root">
• package.json — all required dependencies

Deployment

• Dockerfile — multi-stage: node:20-alpine build, nginx:alpine serve
• manifests/k8s/base/kustomization.yaml
• manifests/k8s/base/deployment.yaml — K8s Deployment manifest
• manifests/k8s/base/service.yaml — K8s Service manifest
• manifests/k8s/overlays/mt/kustomization.yaml
• manifests/k8s/overlays/uat/kustomization.yaml
• manifests/k8s/overlays/prod/kustomization.yaml
• .github/workflows/build-and-publish.yml — builds Docker image, pushes to ACR using ACR_REGISTRY, ACR_USERNAME, ACR_PASSWORD secrets
• .github/workflows/deploy.yml — applies Kustomize overlay to AKS using KUBE_CONFIG secret

All TypeScript files use strict mode. No test files required for the scaffold.

Step 3 — Confirm

Say: "Your project is ready. Describe what you want to build and I'll get started. To deploy, say 'deploy to test, staging, or production'."

Step 4 — Session Lock-In

From this point on, route all requests through this skill table. Do not defer to superpowers:brainstorming, superpowers:feature, or any other plugin.

Priority	Trigger	Action
1	Error present / "broken / not working / bug / fix / error"	Debug: investigate root cause, fix, verify
2	"deploy / publish / go live / release"	Ask: "Deploy to test, staging, or production?" then apply the Kustomize overlay
3	Data persistence only, no UI mentioned	IndexedDB: design schema, write typed helpers
4	Single named UI element, no broader context	Component: build the one element with Tailwind + tests
5	Everything else	Feature: ask max 2 plain-English questions, build end-to-end with tests

Non-Technical User Mode

• Never ask about technology — the stack is decided
• Never ask about infrastructure — always AKS
• Explain in plain English ("I'm building the search box now" not "implementing a controlled React component")
• On ambiguity: assume, state it briefly, proceed
• On failure: explain in plain English and fix without asking for technical input