New to Claude Skills? Learn how to install them →

Scivitai on GitHub

Scaffold Civitai App

Free

Quickly set up a new Civitai application with dependencies.

by civitai7.2k stars on civitai/civitai
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Scaffold Civitai App does

The Scaffold Civitai App skill enables developers to quickly create a new application within the Civitai ecosystem. By running a simple command, users can scaffold a new app in the apps/<name> directory, automatically wiring it to the necessary shared @civitai/* packages. This skill is particularly useful for those looking to create a new monorepo application or a spoke for *.civitai.com, with SvelteKit as the default framework and Next.js also supported.

The scaffolding process is designed to be efficient, cherry-picking only the packages that the new application requires. This means that developers can avoid the overhead of unnecessary packages and dependencies, leading to a leaner application. The skill gathers necessary inputs such as the app name, framework choice, and specific packages to include, ensuring that the generated application is tailored to the user's needs.

In addition to setting up the application structure, the skill also handles critical configurations, such as environment variables and dependency management. It provides clear instructions for integrating various Civitai packages, including authentication, database access, and more, while also addressing common pitfalls that developers may encounter. For instance, it emphasizes the importance of including both Redis URLs when using the Redis package to avoid silent failures.

This skill is ideal for developers who are building new tools or applications within the Civitai framework and want to streamline the setup process. By using this skill, they can focus on building features rather than dealing with the intricacies of dependency management and application structure.

When to use it

Use this skill when creating a new monorepo application or a spoke for `*.civitai.com`.

When not to use it

This skill is not suitable for adding features to an existing application; it is specifically designed for new app scaffolding.

What you can build with it

Creating a New Admin Tool

Use this skill to scaffold a new admin tool within the Civitai ecosystem, ensuring all necessary packages are included.

Setting Up a Dashboard

Quickly set up an internal dashboard application that integrates with Civitai services using this skill.

Building a New Spoke for Civitai

Utilize this skill to create a new spoke for `*.civitai.com`, leveraging the shared packages efficiently.

How to install Scaffold Civitai App

View source

1. Install with the skills CLI

npx skills add civitai/civitai/scaffold-civitai-app --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by civitai

Scaffold a Civitai App

Stands up a new apps/<name> on the shared @civitai/* packages, adding only the packages the app actually needs. Each app cherry-picks; there is no base bundle.

Source of truth (read these, don't restate them from memory — they may have changed):

When to use

A new monorepo app: a moderator/admin tool, a *.civitai.com spoke, an internal dashboard. Not for adding a feature to an existing app.

Workflow (interactive after gathering)

1. Gather inputs

Ask only what can't be inferred:

  • App nameapps/<name>, package name @civitai/<name>-app.
  • Framework → SvelteKit (default, adapter-node) or Next.js. Mirror apps/moderator (SvelteKit) or the old Next shape.
  • Packages to include (cherry-pick) — see the recipe table in §3. Infer from the app's purpose, then confirm. Default for a gated data app: @civitai/auth, @civitai/db, @civitai/db-schema, @civitai/brand.
  • Auth policy → the require predicate (e.g. (u) => u.isModerator === true) and what happens to an authenticated-but-unauthorized user (403, or redirect to https://civitai.com).

2. Scaffold the base (framework files)

Copy the shape of apps/moderator — read those files and adapt names. Base files (no packages yet): package.json ("type": "module", vite/svelte-kit scripts), svelte.config.js (adapter-node), vite.config.ts (process.env shim + empty ssr.noExternal to fill in §3), tsconfig.json, postcss.config.cjs (module.exports = {}), .gitignore, src/app.html, src/app.d.ts, src/global.css, src/routes/+layout.svelte, a landing +page.svelte.

Key bootstrap rules (full detail in the integration guide §3–4):

  • Transpile: packages ship raw TS → add every picked package to Vite ssr.noExternal (or Next transpilePackages), plus workspace peers (@civitai/db ⇒ also @civitai/db-schema).
  • process.env shim (Vite only): loadEnv(mode, process.cwd(), '')process.env[k] ??= …, because the packages read process.env directly and SvelteKit doesn't populate it.

3. Add each picked package (the recipe)

For each package the user picked, apply its row: add the dep(s), add to the transpile list, add the env vars (to both .env and .env.example), and create the shim under src/lib/server/.

PackageDeps to addTranspile list addsEnv (→ .env & .env.example)Shim
@civitai/auth@civitai/auth@civitai/authAUTH_JWT_ISSUER, AUTH_JWKS_URI, AUTH_INTERNAL_TOKENlib/server/auth.ts (createSpokeGuard) + hooks.server.ts
@civitai/db (Kysely)@civitai/db, @civitai/db-schemaboth(none — explicit conn strings) DATABASE_URL, DATABASE_REPLICA_URLlib/server/db.ts (createKyselyClients)
@civitai/db (Prisma)@civitai/db, @civitai/db-schemabothDATABASE_URL, DATABASE_REPLICA_URL, NOTIFICATION_DB_URL, NOTIFICATION_DB_REPLICA_URLlib/server/db.ts (createPrismaClients)
@civitai/redis@civitai/redis@civitai/redisREDIS_URL and REDIS_SYS_URL (both!)lib/server/redis.ts (createRedisClients)
@civitai/clickhouse@civitai/clickhouse@civitai/clickhouseCLICKHOUSE_HOST, CLICKHOUSE_USERNAME, CLICKHOUSE_PASSWORDlib/server/clickhouse.ts (createClickhouseClient)
@civitai/email@civitai/email@civitai/emailEMAIL_HOST, EMAIL_PORT, EMAIL_USER, EMAIL_PASS, EMAIL_FROM (all optional)lib/server/email.ts (re-export sendEmail)
@civitai/axiom@civitai/axiom@civitai/axiomAXIOM_TOKEN, AXIOM_ORG_ID, AXIOM_DATASTREAM (all optional)lib/server/logger.ts (createAxiomLogger)
@civitai/telemetry@civitai/telemetry@civitai/telemetry(none)lib/server/metrics.ts + a /metrics route
@civitai/brand@civitai/brand@civitai/brand(none)routes/favicon.svg/+server.ts (buildFaviconSvg)
@civitai/db-schema(peer of db; rarely alone)@civitai/db-schema(none)import DB / enums directly

Shim snippets live in the package READMEs and the integration guide — read and adapt, don't invent.

Do not add transitive deps (pg, kysely, jose) — they resolve through the workspace packages. Add them only if the app imports them directly (e.g. import { sql } from 'kysely').

4. Critical per-package gotchas (call these out)

  • Redis: both URLs or neither. Setting only REDIS_URL (e.g. just for the auth session cache) without REDIS_SYS_URL makes loadRedisEnv throw — caught as fail-open, so the cache is silently lost.
  • db: pick the right entry. @civitai/db/kysely is env-free and Prisma-free (use for light apps); the @civitai/db Prisma entry requires the full 4-var DB env set.
  • db SSL: pass sslNoVerify: true to createKyselyClients for the cnpg pooler's self-signed cert.
  • auth needs redis only for revocation: the guard fails open to a hub fetch without redis. Only pull @civitai/redis into an auth-only app if you want real-time revocation (isRevoked) or the cache.

5. Verify (always, both commands)

pnpm install
pnpm --filter @civitai/<name>-app run typecheck
pnpm --filter @civitai/<name>-app run build

Both must pass. Then trim-check every dependency you're unsure about: remove it, reinstall, re-run typecheck and build — typecheck can pass on transitive types while runtime still needs the dep (or vice-versa). Report the final dependency list and which packages were wired.

6. Hand off

Surface: the package list chosen, env vars the user must fill in .env (real secrets come from the main app's repo-root .env), and the run command (/dev-server skill). Don't run release/install of secrets without asking.

Frequently asked questions about Scaffold Civitai App

Similar skills