create-skaff 0.0.1

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "create-skaff",
+  "version": "0.0.1",
+  "description": "Interactive Next.js project scaffolder: Tailwind, shadcn/ui, Motion, Lucide, Oxlint, Oxfmt, Ultracite, Claude and Codex config",
+  "type": "module",
+  "bin": {
+    "create-skaff": "./src/index.tsx",
+    "skaff": "./src/index.tsx"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "bun src/index.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "bun": ">=1.3.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@opentui/core": "^0.5.11",
+    "@opentui/react": "^0.5.11",
+    "react": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.2",
+    "@types/react": "^19.3.0",
+    "typescript": "^7.0.2"
+  }
+}

package/src/components/confirm-step.tsx

@@ -0,0 +1,33 @@
+import type { ScaffoldConfig } from "../lib/scaffold-steps";
+import { scaffoldSteps } from "../lib/scaffold-steps";
+
+type ConfirmStepProps = { config: ScaffoldConfig };
+
+export function ConfirmStep({ config }: ConfirmStepProps) {
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>
+        <strong>Ready to scaffold</strong>
+      </text>
+      <box flexDirection="column" border borderStyle="rounded" paddingLeft={1} paddingRight={1}>
+        <text>
+          name: <span fg="#7dd3fc">{config.name}</span>
+        </text>
+        <text>
+          package manager: <span fg="#7dd3fc">{config.packageManager}</span>
+        </text>
+        <text>
+          directory: <span fg="#7dd3fc">{`${config.cwd}/${config.name}`}</span>
+        </text>
+      </box>
+      <box flexDirection="column">
+        {scaffoldSteps.map((step) => (
+          <text key={step.id} fg="#aaaaaa">
+            · {step.label}
+          </text>
+        ))}
+      </box>
+      <text fg="#888888">Enter to start · Esc to go back</text>
+    </box>
+  );
+}

package/src/components/name-step.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+type NameStepProps = { initialValue: string; onSubmit: (name: string) => void };
+
+export function NameStep({ initialValue, onSubmit }: NameStepProps) {
+  const [value, setValue] = useState(initialValue);
+  const name = value.trim();
+  const valid = /^[a-z0-9][a-z0-9._-]*$/.test(name);
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>
+        <strong>Project name</strong>
+      </text>
+      <box border borderStyle="rounded" paddingLeft={1} paddingRight={1} width={40}>
+        <input
+          focused
+          placeholder="my-app"
+          value={initialValue}
+          onInput={setValue}
+          onSubmit={() => {
+            if (valid) {
+              onSubmit(name);
+            }
+          }}
+        />
+      </box>
+      <text fg="#888888">lowercase letters, numbers, dots, dashes · Enter to continue</text>
+    </box>
+  );
+}

package/src/components/package-manager-step.tsx

@@ -0,0 +1,29 @@
+import type { SelectOption } from "@opentui/core";
+import { type PackageManager, packageManagers } from "../lib/package-manager";
+
+type PackageManagerStepProps = { onSelect: (packageManager: PackageManager) => void };
+
+const options: SelectOption[] = packageManagers.map((value) => ({ name: value, value, description: "" }));
+
+export function PackageManagerStep({ onSelect }: PackageManagerStepProps) {
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>
+        <strong>Package manager</strong>
+      </text>
+      <box border borderStyle="rounded" width={40} height={5}>
+        <select
+          focused
+          options={options}
+          showDescription={false}
+          onSelect={(_index, option) => {
+            if (option && packageManagers.includes(option.value as PackageManager)) {
+              onSelect(option.value as PackageManager);
+            }
+          }}
+        />
+      </box>
+      <text fg="#888888">↑↓ to move · Enter to continue · Esc to go back</text>
+    </box>
+  );
+}

package/src/components/progress-step.tsx

@@ -0,0 +1,40 @@
+import { useKeyboard } from "@opentui/react";
+import { useScaffoldRunner } from "../lib/hooks/use-scaffold-runner";
+import type { ScaffoldConfig } from "../lib/scaffold-steps";
+import { StepRow } from "./step-row";
+
+type ProgressStepProps = { config: ScaffoldConfig; onExit: () => void };
+
+export function ProgressStep({ config, onExit }: ProgressStepProps) {
+  const { steps, finished, error } = useScaffoldRunner(config);
+  useKeyboard((key) => {
+    if (finished && (key.name === "q" || key.name === "return")) {
+      onExit();
+    }
+  });
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>
+        <strong>{finished ? (error ? "Failed" : "Done") : "Scaffolding…"}</strong>
+      </text>
+      <box flexDirection="column">
+        {steps.map((step) => (
+          <StepRow key={step.id} step={step} />
+        ))}
+      </box>
+      {error ? (
+        <box border borderStyle="rounded" borderColor="#f87171" paddingLeft={1} paddingRight={1}>
+          <text fg="#f87171">{error}</text>
+        </box>
+      ) : null}
+      {finished && !error ? (
+        <box flexDirection="column">
+          <text fg="#4ade80">Next steps:</text>
+          <text>{`  cd ${config.name}`}</text>
+          <text>{`  ${config.packageManager} run dev`}</text>
+        </box>
+      ) : null}
+      <text fg="#888888">{finished ? "Enter or q to exit" : "running… Ctrl+C to abort"}</text>
+    </box>
+  );
+}

package/src/components/step-row.tsx

@@ -0,0 +1,24 @@
+import type { StepState } from "../lib/hooks/use-scaffold-runner";
+
+const glyphs: Record<StepState["status"], { icon: string; color: string }> = {
+  pending: { icon: "○", color: "#666666" },
+  running: { icon: "◐", color: "#facc15" },
+  done: { icon: "●", color: "#4ade80" },
+  failed: { icon: "✕", color: "#f87171" },
+};
+
+type StepRowProps = { step: StepState };
+
+export function StepRow({ step }: StepRowProps) {
+  const glyph = glyphs[step.status];
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg={glyph.color}>{glyph.icon}</span> {step.label}
+      </text>
+      {step.status === "running" && step.lastLine ? (
+        <text fg="#888888">{`    ${step.lastLine.slice(0, 80)}`}</text>
+      ) : null}
+    </box>
+  );
+}

package/src/components/wizard-app.tsx

@@ -0,0 +1,69 @@
+import { useKeyboard, useRenderer } from "@opentui/react";
+import { useState } from "react";
+import type { PackageManager } from "../lib/package-manager";
+import type { ScaffoldConfig } from "../lib/scaffold-steps";
+import { ConfirmStep } from "./confirm-step";
+import { NameStep } from "./name-step";
+import { PackageManagerStep } from "./package-manager-step";
+import { ProgressStep } from "./progress-step";
+
+type Screen = "name" | "packageManager" | "confirm" | "progress";
+
+type WizardAppProps = { initialName: string; cwd: string };
+
+export function WizardApp({ initialName, cwd }: WizardAppProps) {
+  const renderer = useRenderer();
+  const [screen, setScreen] = useState<Screen>("name");
+  const [name, setName] = useState(initialName);
+  const [packageManager, setPackageManager] = useState<PackageManager>("pnpm");
+  const [config, setConfig] = useState<ScaffoldConfig | null>(null);
+
+  const exit = () => {
+    renderer.destroy();
+    process.exit(0);
+  };
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      if (screen === "packageManager") {
+        setScreen("name");
+      } else if (screen === "confirm") {
+        setScreen("packageManager");
+      } else if (screen === "name") {
+        exit();
+      }
+      return;
+    }
+    if (screen === "confirm" && key.name === "return") {
+      setConfig({ name, packageManager, cwd });
+      setScreen("progress");
+    }
+  });
+
+  return (
+    <box flexDirection="column" padding={1} gap={1}>
+      <text>
+        <strong fg="#a78bfa">skaff</strong> <span fg="#888888">· Next.js scaffolder</span>
+      </text>
+      {screen === "name" ? (
+        <NameStep
+          initialValue={name}
+          onSubmit={(value) => {
+            setName(value);
+            setScreen("packageManager");
+          }}
+        />
+      ) : null}
+      {screen === "packageManager" ? (
+        <PackageManagerStep
+          onSelect={(value) => {
+            setPackageManager(value);
+            setScreen("confirm");
+          }}
+        />
+      ) : null}
+      {screen === "confirm" ? <ConfirmStep config={{ name, packageManager, cwd }} /> : null}
+      {screen === "progress" && config ? <ProgressStep config={config} onExit={exit} /> : null}
+    </box>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,7 @@
+#!/usr/bin/env bun
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { WizardApp } from "./components/wizard-app";
+
+const renderer = await createCliRenderer({ exitOnCtrlC: true });
+createRoot(renderer).render(<WizardApp initialName={process.argv[2] ?? ""} cwd={process.cwd()} />);

package/src/lib/hooks/use-scaffold-runner.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from "react";
+import { type ScaffoldConfig, scaffoldSteps } from "../scaffold-steps";
+
+export type StepStatus = "pending" | "running" | "done" | "failed";
+
+export type StepState = { id: string; label: string; status: StepStatus; lastLine: string };
+
+export type RunnerState = { steps: StepState[]; finished: boolean; error: string | null };
+
+export function useScaffoldRunner(config: ScaffoldConfig): RunnerState {
+  const [steps, setSteps] = useState<StepState[]>(
+    scaffoldSteps.map(({ id, label }) => ({ id, label, status: "pending", lastLine: "" })),
+  );
+  const [finished, setFinished] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const started = useRef(false);
+
+  useEffect(() => {
+    if (started.current) {
+      return;
+    }
+    started.current = true;
+
+    const patch = (id: string, changes: Partial<StepState>) =>
+      setSteps((current) => current.map((step) => (step.id === id ? { ...step, ...changes } : step)));
+
+    const run = async () => {
+      for (const step of scaffoldSteps) {
+        patch(step.id, { status: "running" });
+        const result = await step.run(config, (line) => patch(step.id, { lastLine: line }));
+        if (!result.ok) {
+          patch(step.id, { status: "failed" });
+          setError(result.output.trim().split("\n").slice(-12).join("\n"));
+          setFinished(true);
+          return;
+        }
+        patch(step.id, { status: "done", lastLine: "" });
+      }
+      setFinished(true);
+    };
+
+    run();
+  }, [config]);
+
+  return { steps, finished, error };
+}

package/src/lib/package-manager.ts

@@ -0,0 +1,12 @@
+export type PackageManager = "npm" | "pnpm" | "bun";
+
+export const packageManagers: PackageManager[] = ["npm", "pnpm", "bun"];
+
+export const packageManagerCommands: Record<
+  PackageManager,
+  { dlx: string[]; add: string[]; addDev: string[]; createNextFlag: string }
+> = {
+  npm: { dlx: ["npx", "-y"], add: ["npm", "install"], addDev: ["npm", "install", "-D"], createNextFlag: "--use-npm" },
+  pnpm: { dlx: ["pnpm", "dlx"], add: ["pnpm", "add"], addDev: ["pnpm", "add", "-D"], createNextFlag: "--use-pnpm" },
+  bun: { dlx: ["bunx"], add: ["bun", "add"], addDev: ["bun", "add", "-d"], createNextFlag: "--use-bun" },
+};

package/src/lib/scaffold-steps.ts

@@ -0,0 +1,110 @@
+import { join } from "node:path";
+import { type PackageManager, packageManagerCommands } from "./package-manager";
+import { addTypographyPlugin } from "./utils/add-typography-plugin";
+import { type CommandResult, runCommand } from "./utils/run-command";
+
+export type ScaffoldConfig = { name: string; packageManager: PackageManager; cwd: string };
+
+export type ScaffoldStep = {
+  id: string;
+  label: string;
+  run: (config: ScaffoldConfig, onOutput: (line: string) => void) => Promise<CommandResult>;
+};
+
+const projectDir = (config: ScaffoldConfig) => join(config.cwd, config.name);
+
+const command =
+  (build: (config: ScaffoldConfig) => string[], inProject = true): ScaffoldStep["run"] =>
+  (config, onOutput) =>
+    runCommand(build(config), inProject ? projectDir(config) : config.cwd, onOutput);
+
+export const scaffoldSteps: ScaffoldStep[] = [
+  {
+    id: "next",
+    label: "Next.js + Tailwind (create-next-app)",
+    run: command(
+      ({ name, packageManager }) => [
+        ...packageManagerCommands[packageManager].dlx,
+        "create-next-app@latest",
+        name,
+        "--ts",
+        "--tailwind",
+        "--app",
+        "--no-src-dir",
+        "--import-alias",
+        "@/*",
+        "--yes",
+        packageManagerCommands[packageManager].createNextFlag,
+      ],
+      false,
+    ),
+  },
+  {
+    id: "typography",
+    label: "Tailwind Typography plugin",
+    run: async (config, onOutput) => {
+      const result = await runCommand(
+        [...packageManagerCommands[config.packageManager].addDev, "@tailwindcss/typography"],
+        projectDir(config),
+        onOutput,
+      );
+      if (result.ok) {
+        await addTypographyPlugin(projectDir(config));
+      }
+      return result;
+    },
+  },
+  {
+    id: "shadcn-init",
+    label: "shadcn/ui init (radix, vega preset)",
+    run: command(({ packageManager }) => [
+      ...packageManagerCommands[packageManager].dlx,
+      "shadcn@latest",
+      "init",
+      "-y",
+      "-b",
+      "radix",
+      "-p",
+      "vega",
+      "--silent",
+    ]),
+  },
+  {
+    id: "shadcn-all",
+    label: "shadcn/ui add --all",
+    run: command(({ packageManager }) => [
+      ...packageManagerCommands[packageManager].dlx,
+      "shadcn@latest",
+      "add",
+      "--all",
+      "-y",
+      "--silent",
+    ]),
+  },
+  {
+    id: "motion-lucide",
+    label: "Motion + Lucide icons",
+    run: command(({ packageManager }) => [...packageManagerCommands[packageManager].add, "motion", "lucide-react"]),
+  },
+  {
+    id: "ultracite",
+    label: "Ultracite (Oxlint, Oxfmt, Claude + Codex config)",
+    run: command(({ packageManager }) => [
+      ...packageManagerCommands[packageManager].dlx,
+      "ultracite@latest",
+      "init",
+      "--pm",
+      packageManager,
+      "--linter",
+      "oxlint",
+      "--agents",
+      "claude",
+      "codex",
+      "--frameworks",
+      "next",
+      "--editors",
+      "vscode",
+      "--quiet",
+    ]),
+  },
+];

package/src/lib/utils/add-typography-plugin.ts

@@ -0,0 +1,14 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+const importLine = '@import "tailwindcss";';
+const pluginLine = '@plugin "@tailwindcss/typography";';
+
+export async function addTypographyPlugin(projectDir: string): Promise<void> {
+  const cssPath = join(projectDir, "app", "globals.css");
+  const css = await readFile(cssPath, "utf8");
+  if (css.includes(pluginLine)) {
+    return;
+  }
+  await writeFile(cssPath, css.replace(importLine, `${importLine}\n${pluginLine}`));
+}

package/src/lib/utils/run-command.ts

@@ -0,0 +1,27 @@
+import { spawn } from "node:child_process";
+
+export type CommandResult = { ok: boolean; output: string };
+
+export function runCommand(args: string[], cwd: string, onOutput: (line: string) => void): Promise<CommandResult> {
+  return new Promise((resolve) => {
+    const [command, ...rest] = args;
+    const child = spawn(command, rest, {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: { ...process.env, CI: "1", FORCE_COLOR: "0" },
+    });
+    const chunks: string[] = [];
+    const push = (data: Buffer) => {
+      const text = data.toString();
+      chunks.push(text);
+      const line = text.trim().split("\n").at(-1);
+      if (line) {
+        onOutput(line);
+      }
+    };
+    child.stdout.on("data", push);
+    child.stderr.on("data", push);
+    child.on("error", (error) => resolve({ ok: false, output: error.message }));
+    child.on("close", (code) => resolve({ ok: code === 0, output: chunks.join("") }));
+  });
+}