Stack Scaffold

Scaffolds a full-stack project with Next.js App Router, Supabase, Firebase Auth, Vercel, and Cloudflare

Security Scan

The skill's instructions are plausible for scaffolding a Next.js + Supabase/Firebase project, but its declared metadata (claw.json) requests multiple sensitive environment variables — including Firebase private key — that are unnecessary for file scaffolding and contradict the SKILL.md's claim not to read .env files.

Purpose & Capability

The SKILL.md describes a scaffolding tool and its runtime instructions align with that purpose (creating files, running npx create-next-app, initializing git). However claw.json requires numerous environment variables (including FIREBASE_PRIVATE_KEY, FIREBASE_CLIENT_EMAIL) that a scaffolder does not need to run; these are disproportionate and do not match the stated purpose. Required binaries (node, npx, git) are reasonable.

Instruction Scope

The SKILL.md mandates a Planning Protocol and explicitly forbids reading existing .env or credential files; it instructs only to run `ls` and `node -v` to verify the target directory and to create files and run npx commands. The file templates reference process.env.* placeholders (expected for scaffolding). There are no instructions to transmit secrets or inspect unrelated system files. Overall the runtime instructions are scoped to scaffolding, but they rely on templates that assume sensitive env vars exist at runtime.

Install Mechanism

This is an instruction-only skill with no install spec and no code files executed by the platform; that minimizes install-time risk. The skill will instruct the agent to run system tooling (npx, npm) which is expected for a scaffolder.

Credentials

claw.json declares many required env variables (NEXT_PUBLIC_SUPABASE_*, NEXT_PUBLIC_FIREBASE_*, FIREBASE_PRIVATE_KEY, FIREBASE_CLIENT_EMAIL, etc.). For scaffolding files, requesting runtime secrets (especially FIREBASE_PRIVATE_KEY) is unnecessary and excessive. The SKILL.md explicitly says it will not read .env files, creating a direct contradiction with the metadata that marks those env vars as required. This mismatch is the primary security concern.

Persistence & Privilege

The skill is user-invocable, not always-enabled, and does not request unusual persistence. Recommended skillDependencies and permissions in claw.json (filesystem, network) are expected for scaffolding and template fetching.

What to consider before installing

This skill mostly looks like a legitimate project scaffolder, but the package metadata (claw.json) asks for many sensitive environment variables — including the Firebase private key — which are not needed just to create files. Before installing or running it: (1) prefer not to supply secrets to the skill/agent; scaffolding should be done in an empty/new directory without exposing credentials, (2) verify the source (claw.json claims a GitHub homepage but the skill metadata says 'unknown'); prefer skills from a known repository, (3) inspect the generated files (especially any server-side admin initialization like firebase admin) to ensure private keys are not accidentally committed and that .gitignore includes env files, (4) if you must use runtime credentials, create minimal test credentials and never provide production private keys to an agent, and (5) ask the publisher why the metadata marks env vars as required despite SKILL.md saying it won't read .env files — this inconsistency should be resolved before trusting the skill.

You are an expert full-stack developer. When the user asks to create a new project, scaffold the complete structure following the conventions below. Always confirm the project name and target directory with the user before creating files. This skill only creates new files in empty or new directories — it never reads or modifies existing .env, .env.local, or credential files.

Planning Protocol (MANDATORY — execute before ANY action)

Before writing a single file or running any command, you MUST complete this planning phase:

1. Understand the request. Restate what the user wants in your own words. Identify any ambiguities. If the request is vague (e.g., "create a project"), ask one round of clarifying questions (project name, purpose, any specific requirements).

2. Survey the environment. Check the current directory structure and installed tools. Run ls and node -v to confirm the target directory is empty or does not exist yet. Do NOT read, open, or inspect any .env, .env.local, or credential files. This skill only creates new projects — if the directory already contains a project, ask the user to confirm before proceeding.

3. Build an execution plan. Write out the numbered list of steps you will take, including file paths you will create or modify, commands you will run, and the expected outcome of each step. Present this plan to yourself (in your reasoning) before executing.

4. Identify risks. Note any step that could fail or cause data loss (overwriting files, dropping tables, force-pushing). For each risk, define the mitigation (backup, dry-run, confirmation).

5. Execute sequentially. Follow the plan step by step. After each step, verify it succeeded before moving to the next. If a step fails, diagnose the issue, update the plan, and continue.

6. Summarize. After completing all steps, provide a concise summary of what was created, what was modified, and any manual steps the user still needs to take.

Do NOT skip this protocol. Rushing to execute without planning leads to errors, broken state, and wasted time.

Project Initialization

1. Run npx create-next-app@latest <project-name> --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" to create the Next.js project with App Router.
2. cd into the project directory.
3. Ensure .gitignore exists and includes at minimum: .env, .env.local, .env*.local, node_modules/, .next/. The create-next-app template already includes these, but verify before any commit.
4. Initialize git: git init && git add -A && git commit -m "chore: initial Next.js scaffold".

Dependencies

Install the following in a single command:

npm install @supabase/supabase-js @supabase/ssr firebase firebase-admin zod zustand next-themes
npm install -D @types/node vitest @vitejs/plugin-react playwright @playwright/test prettier eslint-config-prettier

Directory Structure

Create this structure inside src/:

src/
├── app/
│   ├── (auth)/
│   │   ├── login/page.tsx
│   │   └── signup/page.tsx
│   ├── (dashboard)/
│   │   └── page.tsx
│   ├── api/
│   │   └── health/route.ts
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/
│   ├── ui/           # Reusable UI primitives
│   └── shared/       # Shared composite components
├── lib/
│   ├── supabase/
│   │   ├── client.ts       # Browser Supabase client
│   │   ├── server.ts       # Server Supabase client (cookies-based)
│   │   ├── middleware.ts    # Auth refresh middleware helper
│   │   └── types.ts        # Generated DB types (placeholder)
│   ├── firebase/
│   │   ├── client.ts       # Firebase client SDK init
│   │   └── admin.ts        # Firebase Admin SDK init (server-only)
│   └── utils.ts
├── hooks/
│   └── use-auth.ts         # Auth state hook
├── stores/
│   └── user-store.ts       # Zustand user store
├── types/
│   └── index.ts
└── middleware.ts            # Next.js middleware for auth

File Contents

src/lib/supabase/client.ts

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

src/lib/supabase/server.ts

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // Called from Server Component — ignore
          }
        },
      },
    }
  );
}

src/lib/firebase/client.ts

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
export const auth = getAuth(app);

src/lib/firebase/admin.ts

import { initializeApp, getApps, cert } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

if (getApps().length === 0) {
  initializeApp({
    credential: cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
    }),
  });
}

export const adminAuth = getAuth();

src/middleware.ts

import { type NextRequest, NextResponse } from "next/server";
import { createServerClient } from "@supabase/ssr";

export async function middleware(request: NextRequest) {
  let response = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          response = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            response.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  await supabase.auth.getUser();

  return response;
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
};

src/app/api/health/route.ts

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ status: "ok", timestamp: new Date().toISOString() });
}

.env.example

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# Firebase Client
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

# Firebase Admin (server-only)
FIREBASE_PROJECT_ID=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

vercel.json

{
  "framework": "nextjs",
  "regions": ["gru1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ]
}

vitest.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: ["./src/tests/setup.ts"],
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Post-Scaffold Steps

1. Copy .env.example to .env.local and remind the user to fill in the values.
2. Create an initial Supabase migration file at supabase/migrations/00000000000000_init.sql with a profiles table:

create table public.profiles (
  id uuid references auth.users on delete cascade primary key,
  email text not null,
  full_name text,
  avatar_url text,
  created_at timestamptz default now() not null,
  updated_at timestamptz default now() not null
);

alter table public.profiles enable row level security;

create policy "Users can view own profile" on public.profiles
  for select using (auth.uid() = id);

create policy "Users can update own profile" on public.profiles
  for update using (auth.uid() = id);

3. Add scripts to package.json:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "test": "vitest",
    "test:e2e": "playwright test",
    "types:supabase": "npx supabase gen types typescript --local > src/lib/supabase/types.ts"
  }
}

4. Commit: git add -A && git commit -m "chore: add full stack scaffold with Supabase, Firebase Auth, Vercel config".

5. Print a summary of what was created and what the user needs to configure manually (env vars, Supabase project, Firebase project, Vercel project link, Cloudflare DNS).

Next Steps — Recommended Skill Sequence

After scaffolding is complete, run the following skills in order:

1. firebase-auth-setup — Configures auth providers (Google, Apple, email/password), creates the auth hook, auth provider component, server-side token verification, and the Firebase-Supabase user sync route. This builds on the Firebase client/admin SDK files created by this scaffold.
2. shadcn-theme-default — Applies the default shadcn/ui Neutral theme with OKLCH CSS variables and dark mode support.
3. cloudflare-guard — Sets up DNS, SSL, rate limiting, and caching for your domain on Cloudflare.
4. deploy-pilot — Runs the pre-deploy checklist and pushes the initial deployment to Vercel.

The scaffold creates placeholder files for Firebase (src/lib/firebase/client.ts, src/lib/firebase/admin.ts) and a basic auth middleware (src/middleware.ts). The firebase-auth-setup skill extends these with full auth flows, user sync, and custom claims.