create-skaff 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skaff",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Interactive Next.js project scaffolder: Tailwind, shadcn/ui, Motion, Lucide, Oxlint, Oxfmt, Ultracite, Claude and Codex config",
   "type": "module",
   "bin": {

package/src/components/confirm-prompt.tsx

@@ -6,7 +6,7 @@ export function ConfirmPrompt({ config }: ConfirmPromptProps) {
   return (
     <box flexDirection="column">
       <text>
-        <span fg="#a78bfa">◆</span>  <strong>Scaffold into {projectDir(config)}?</strong>
+        <span fg="#a78bfa">◆</span>  <strong>{config.dryRun ? "Dry run: preview commands for " : "Scaffold into "}{projectDir(config)}?</strong>
       </text>
       <text>
         <span fg="#a78bfa">│  </span>

package/src/components/features-prompt.tsx

@@ -0,0 +1,59 @@
+import { useKeyboard } from "@opentui/react";
+import { useState } from "react";
+import { allFeatures, type FeatureId, featureGroups } from "../lib/features";
+
+type FeaturesPromptProps = { initialValue: FeatureId[]; onSubmit: (features: FeatureId[]) => void };
+
+export function FeaturesPrompt({ initialValue, onSubmit }: FeaturesPromptProps) {
+  const [cursor, setCursor] = useState(0);
+  const [selected, setSelected] = useState<FeatureId[]>(initialValue);
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setCursor((current) => (current + allFeatures.length - 1) % allFeatures.length);
+    } else if (key.name === "down" || key.name === "j") {
+      setCursor((current) => (current + 1) % allFeatures.length);
+    } else if (key.name === "space") {
+      const id = allFeatures[cursor].id;
+      setSelected((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]));
+    } else if (key.name === "a") {
+      setSelected((current) => (current.length === allFeatures.length ? [] : allFeatures.map((feature) => feature.id)));
+    } else if (key.name === "return") {
+      onSubmit(allFeatures.map((feature) => feature.id).filter((id) => selected.includes(id)));
+    }
+  });
+
+  let index = -1;
+  return (
+    <box flexDirection="column">
+      <text>
+        <span fg="#a78bfa">◆</span>  <strong>What to set up</strong>
+      </text>
+      {featureGroups.map((group) => (
+        <box key={group.title} flexDirection="column">
+          <text>
+            <span fg="#a78bfa">│  </span>
+            <span fg="#888888">{group.title}</span>
+          </text>
+          {group.features.map((feature) => {
+            index += 1;
+            const active = index === cursor;
+            const checked = selected.includes(feature.id);
+            return (
+              <text key={feature.id}>
+                <span fg="#a78bfa">│  </span>
+                <span fg={active ? "#a78bfa" : "#555555"}>{active ? "❯ " : "  "}</span>
+                <span fg={checked ? "#4ade80" : "#555555"}>{checked ? "◼ " : "◻ "}</span>
+                <span fg={active ? "#ffffff" : "#aaaaaa"}>{feature.label}</span>
+              </text>
+            );
+          })}
+        </box>
+      ))}
+      <text>
+        <span fg="#a78bfa">│  </span>
+        <span fg="#666666">↑↓ to move · Space to toggle · a to toggle all · Enter to continue · Esc to go back</span>
+      </text>
+    </box>
+  );
+}

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

@@ -1,32 +1,34 @@
-import type { SelectOption } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useState } from "react";
 import { type PackageManager, packageManagers } from "../lib/package-manager";
 
-type PackageManagerPromptProps = { onSelect: (packageManager: PackageManager) => void };
+type PackageManagerPromptProps = { initialValue: PackageManager; onSelect: (packageManager: PackageManager) => void };
 
-const options: SelectOption[] = packageManagers.map((value) => ({ name: value, value, description: "" }));
+export function PackageManagerPrompt({ initialValue, onSelect }: PackageManagerPromptProps) {
+  const [index, setIndex] = useState(Math.max(0, packageManagers.indexOf(initialValue)));
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setIndex((current) => (current + packageManagers.length - 1) % packageManagers.length);
+    } else if (key.name === "down" || key.name === "j") {
+      setIndex((current) => (current + 1) % packageManagers.length);
+    } else if (key.name === "return") {
+      onSelect(packageManagers[index]);
+    }
+  });
 
-export function PackageManagerPrompt({ onSelect }: PackageManagerPromptProps) {
   return (
     <box flexDirection="column">
       <text>
         <span fg="#a78bfa">◆</span>  <strong>Package manager</strong>
       </text>
-      <box flexDirection="row">
-        <text fg="#a78bfa">│  </text>
-        <box width={20} height={packageManagers.length}>
-          <select
-            focused
-            options={options}
-            showDescription={false}
-            selectedIndex={1}
-            onSelect={(_index, option) => {
-              if (option && packageManagers.includes(option.value as PackageManager)) {
-                onSelect(option.value as PackageManager);
-              }
-            }}
-          />
-        </box>
-      </box>
+      {packageManagers.map((value, i) => (
+        <text key={value}>
+          <span fg="#a78bfa">│  </span>
+          {i === index ? <span fg="#4ade80">◉ </span> : <span fg="#555555">○ </span>}
+          <span fg={i === index ? "#ffffff" : "#888888"}>{value}</span>
+        </text>
+      ))}
       <text>
         <span fg="#a78bfa">│  </span>
         <span fg="#666666">↑↓ to move · Enter to continue · Esc to go back</span>

package/src/components/progress-timeline.tsx

@@ -25,7 +25,12 @@ export function ProgressTimeline({ config, onExit }: ProgressTimelineProps) {
           <text fg="#f87171">{error}</text>
         </box>
       ) : null}
-      {finished && !error ? (
+      {finished && !error && config.dryRun ? (
+        <text>
+          <span fg="#4ade80">└  Dry run.</span> <span fg="#888888">Nothing was written.</span>
+        </text>
+      ) : null}
+      {finished && !error && !config.dryRun ? (
         <box flexDirection="column">
           <text>
             <span fg="#4ade80">└  Done.</span> <span fg="#888888">Next steps:</span>

package/src/components/step-row.tsx

@@ -18,7 +18,7 @@ export function StepRow({ step }: StepRowProps) {
       </text>
       <text>
         <span fg="#555555">│  </span>
-        <span fg="#666666">{step.status === "running" ? step.lastLine.slice(0, 80) : ""}</span>
+        <span fg="#666666">{step.detail || (step.status === "running" ? step.lastLine.slice(0, 80) : "")}</span>
       </text>
     </box>
   );

package/src/components/wizard-app.tsx

@@ -1,22 +1,27 @@
 import { useKeyboard, useRenderer } from "@opentui/react";
 import { useState } from "react";
+import { allFeatureIds, allFeatures, type FeatureId } from "../lib/features";
 import type { PackageManager } from "../lib/package-manager";
 import type { ScaffoldConfig } from "../lib/scaffold-steps";
 import { AnsweredRow } from "./answered-row";
 import { ConfirmPrompt } from "./confirm-prompt";
+import { FeaturesPrompt } from "./features-prompt";
 import { NamePrompt } from "./name-prompt";
 import { PackageManagerPrompt } from "./package-manager-prompt";
 import { ProgressTimeline } from "./progress-timeline";
 
-type Screen = "name" | "packageManager" | "confirm" | "progress";
+const screens = ["name", "packageManager", "features", "confirm", "progress"] as const;
 
-type WizardAppProps = { initialName: string; cwd: string };
+type Screen = (typeof screens)[number];
 
-export function WizardApp({ initialName, cwd }: WizardAppProps) {
+type WizardAppProps = { initialName: string; cwd: string; dryRun: boolean };
+
+export function WizardApp({ initialName, cwd, dryRun }: WizardAppProps) {
   const renderer = useRenderer();
   const [screen, setScreen] = useState<Screen>("name");
   const [name, setName] = useState(initialName);
   const [packageManager, setPackageManager] = useState<PackageManager>("pnpm");
+  const [features, setFeatures] = useState<FeatureId[]>(allFeatureIds);
   const [config, setConfig] = useState<ScaffoldConfig | null>(null);
 
   const exit = () => {
@@ -24,34 +29,41 @@ export function WizardApp({ initialName, cwd }: WizardAppProps) {
     process.exit(0);
   };
 
+  const step = screens.indexOf(screen);
+  const answered = (target: Screen) => step > screens.indexOf(target);
+
   useKeyboard((key) => {
     if (key.name === "escape") {
-      if (screen === "packageManager") {
-        setScreen("name");
-      } else if (screen === "confirm") {
-        setScreen("packageManager");
-      } else if (screen === "name") {
+      if (screen === "name") {
         exit();
+      } else if (screen !== "progress") {
+        setScreen(screens[step - 1]);
       }
       return;
     }
     if (screen === "confirm" && key.name === "return") {
-      setConfig({ name, packageManager, cwd });
+      setConfig({ name, packageManager, cwd, features, dryRun });
       setScreen("progress");
     }
   });
 
-  const nameAnswered = screen !== "name";
-  const packageManagerAnswered = screen === "confirm" || screen === "progress";
+  const featureSummary =
+    features.length === 0
+      ? "none"
+      : allFeatures
+          .filter((feature) => features.includes(feature.id))
+          .map((feature) => feature.label)
+          .join(", ");
 
   return (
     <box flexDirection="column" paddingLeft={1} paddingTop={1}>
       <text>
-        <span fg="#555555">┌</span>  <strong fg="#a78bfa">skaff</strong> <span fg="#888888">· Next.js scaffolder</span>
+        <span fg="#555555">┌</span>  <strong fg="#a78bfa">skaff</strong> <span fg="#888888">· Next.js scaffolder{dryRun ? " · dry run" : ""}</span>
       </text>
       <text fg="#555555">│</text>
-      {nameAnswered ? <AnsweredRow label="Project name" value={name} /> : null}
-      {packageManagerAnswered ? <AnsweredRow label="Package manager" value={packageManager} /> : null}
+      {answered("name") ? <AnsweredRow label="Project name" value={name} /> : null}
+      {answered("packageManager") ? <AnsweredRow label="Package manager" value={packageManager} /> : null}
+      {answered("features") ? <AnsweredRow label="What to set up" value={featureSummary} /> : null}
       {screen === "name" ? (
         <NamePrompt
           initialValue={name}
@@ -63,13 +75,23 @@ export function WizardApp({ initialName, cwd }: WizardAppProps) {
       ) : null}
       {screen === "packageManager" ? (
         <PackageManagerPrompt
+          initialValue={packageManager}
           onSelect={(value) => {
             setPackageManager(value);
+            setScreen("features");
+          }}
+        />
+      ) : null}
+      {screen === "features" ? (
+        <FeaturesPrompt
+          initialValue={features}
+          onSubmit={(value) => {
+            setFeatures(value);
             setScreen("confirm");
           }}
         />
       ) : null}
-      {screen === "confirm" ? <ConfirmPrompt config={{ name, packageManager, cwd }} /> : null}
+      {screen === "confirm" ? <ConfirmPrompt config={{ name, packageManager, cwd, features, dryRun }} /> : null}
       {screen === "progress" && config ? <ProgressTimeline config={config} onExit={exit} /> : null}
     </box>
   );

package/src/index.tsx

@@ -3,5 +3,9 @@ import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 import { WizardApp } from "./components/wizard-app";
 
+const args = process.argv.slice(2);
+const dryRun = args.includes("--dry-run");
+const initialName = args.find((arg) => !arg.startsWith("--")) ?? "";
+
 const renderer = await createCliRenderer({ exitOnCtrlC: true });
-createRoot(renderer).render(<WizardApp initialName={process.argv[2] ?? ""} cwd={process.cwd()} />);
+createRoot(renderer).render(<WizardApp initialName={initialName} cwd={process.cwd()} dryRun={dryRun} />);

package/src/lib/features.ts

@@ -0,0 +1,37 @@
+export type FeatureId = "typography" | "shadcn" | "motion" | "lucide" | "ultracite" | "claude" | "codex";
+
+export type Feature = { id: FeatureId; label: string };
+
+export type FeatureGroup = { title: string; features: Feature[] };
+
+export const featureGroups: FeatureGroup[] = [
+  {
+    title: "Styling",
+    features: [
+      { id: "typography", label: "Tailwind Typography" },
+      { id: "shadcn", label: "shadcn/ui (all components)" },
+    ],
+  },
+  {
+    title: "Libraries",
+    features: [
+      { id: "motion", label: "Motion (framer-motion)" },
+      { id: "lucide", label: "Lucide icons" },
+    ],
+  },
+  {
+    title: "Code quality",
+    features: [{ id: "ultracite", label: "Ultracite (Oxlint + Oxfmt)" }],
+  },
+  {
+    title: "AI agents",
+    features: [
+      { id: "claude", label: "Claude config" },
+      { id: "codex", label: "Codex config" },
+    ],
+  },
+];
+
+export const allFeatures: Feature[] = featureGroups.flatMap((group) => group.features);
+
+export const allFeatureIds: FeatureId[] = allFeatures.map((feature) => feature.id);

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

@@ -1,15 +1,22 @@
 import { useEffect, useRef, useState } from "react";
-import { type ScaffoldConfig, scaffoldSteps } from "../scaffold-steps";
+import { buildScaffoldSteps, type ScaffoldConfig } from "../scaffold-steps";
 
 export type StepStatus = "pending" | "running" | "done" | "failed";
 
-export type StepState = { id: string; label: string; status: StepStatus; lastLine: string };
+export type StepState = { id: string; label: string; status: StepStatus; lastLine: string; detail: string };
 
 export type RunnerState = { steps: StepState[]; finished: boolean; error: string | null };
 
 export function useScaffoldRunner(config: ScaffoldConfig): RunnerState {
+  const plan = useRef(buildScaffoldSteps(config.features));
   const [steps, setSteps] = useState<StepState[]>(
-    scaffoldSteps.map(({ id, label }) => ({ id, label, status: "pending", lastLine: "" })),
+    plan.current.map((step) => ({
+      id: step.id,
+      label: step.label,
+      status: "pending",
+      lastLine: "",
+      detail: config.dryRun ? step.describe(config) : "",
+    })),
   );
   const [finished, setFinished] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -25,7 +32,12 @@ export function useScaffoldRunner(config: ScaffoldConfig): RunnerState {
       setSteps((current) => current.map((step) => (step.id === id ? { ...step, ...changes } : step)));
 
     const run = async () => {
-      for (const step of scaffoldSteps) {
+      if (config.dryRun) {
+        setSteps((current) => current.map((step) => ({ ...step, status: "done" })));
+        setFinished(true);
+        return;
+      }
+      for (const step of plan.current) {
         patch(step.id, { status: "running" });
         const result = await step.run(config, (line) => patch(step.id, { lastLine: line }));
         if (!result.ok) {

package/src/lib/scaffold-steps.ts

@@ -1,110 +1,148 @@
 import { join } from "node:path";
+import type { FeatureId } from "./features";
 import { type PackageManager, packageManagerCommands } from "./package-manager";
 import { addTypographyPlugin } from "./utils/add-typography-plugin";
 import { type CommandResult, runCommand } from "./utils/run-command";
+import { writeAgentConfig } from "./utils/write-agent-config";
 
-export type ScaffoldConfig = { name: string; packageManager: PackageManager; cwd: string };
+export type ScaffoldConfig = {
+  name: string;
+  packageManager: PackageManager;
+  cwd: string;
+  features: FeatureId[];
+  dryRun: boolean;
+};
 
 export type ScaffoldStep = {
   id: string;
   label: string;
+  describe: (config: ScaffoldConfig) => string;
   run: (config: ScaffoldConfig, onOutput: (line: string) => void) => Promise<CommandResult>;
 };
 
 export const projectDir = (config: ScaffoldConfig) => (config.name === "." ? config.cwd : 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);
+const command = (
+  build: (config: ScaffoldConfig) => string[],
+  inProject = true,
+): Pick<ScaffoldStep, "describe" | "run"> => ({
+  describe: (config) => `$ ${build(config).join(" ")}`,
+  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 }) => [
+const nextStep: ScaffoldStep = {
+  id: "next",
+  label: "Next.js + Tailwind (create-next-app)",
+  ...command(
+    ({ name, 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"]),
+      "create-next-app@latest",
+      name,
+      "--ts",
+      "--tailwind",
+      "--app",
+      "--no-src-dir",
+      "--import-alias",
+      "@/*",
+      "--yes",
+      packageManagerCommands[packageManager].createNextFlag,
+    ],
+    false,
+  ),
+};
+
+const typographyStep: ScaffoldStep = {
+  id: "typography",
+  label: "Tailwind Typography plugin",
+  describe: (config) =>
+    `$ ${[...packageManagerCommands[config.packageManager].addDev, "@tailwindcss/typography"].join(" ")}, then add @plugin to app/globals.css`,
+  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: "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",
-    ]),
+};
+
+const shadcnInitStep: ScaffoldStep = {
+  id: "shadcn-init",
+  label: "shadcn/ui init (radix, vega preset)",
+  ...command(({ packageManager }) => [
+    ...packageManagerCommands[packageManager].dlx,
+    "shadcn@latest",
+    "init",
+    "-y",
+    "-b",
+    "radix",
+    "-p",
+    "vega",
+    "--silent",
+  ]),
+};
+
+const shadcnAllStep: ScaffoldStep = {
+  id: "shadcn-all",
+  label: "shadcn/ui add --all",
+  ...command(({ packageManager }) => [
+    ...packageManagerCommands[packageManager].dlx,
+    "shadcn@latest",
+    "add",
+    "--all",
+    "-y",
+    "--silent",
+  ]),
+};
+
+const librariesStep = (packages: string[]): ScaffoldStep => ({
+  id: "libraries",
+  label: packages.join(" + "),
+  ...command(({ packageManager }) => [...packageManagerCommands[packageManager].add, ...packages]),
+});
+
+const ultraciteStep = (agents: FeatureId[]): ScaffoldStep => ({
+  id: "ultracite",
+  label: agents.length > 0 ? `Ultracite (Oxlint, Oxfmt, ${agents.join(" + ")} config)` : "Ultracite (Oxlint, Oxfmt)",
+  ...command(({ packageManager }) => [
+    ...packageManagerCommands[packageManager].dlx,
+    "ultracite@latest",
+    "init",
+    "--pm",
+    packageManager,
+    "--linter",
+    "oxlint",
+    ...(agents.length > 0 ? ["--agents", ...agents] : []),
+    "--frameworks",
+    "next",
+    "--editors",
+    "vscode",
+    "--quiet",
+  ]),
+});
+
+const agentConfigStep = (agents: FeatureId[]): ScaffoldStep => ({
+  id: "agents",
+  label: `${agents.join(" + ")} config`,
+  describe: () => `write ${agents.map((agent) => (agent === "claude" ? "CLAUDE.md" : "AGENTS.md")).join(" and ")}`,
+  run: async (config) => {
+    await writeAgentConfig(projectDir(config), agents);
+    return { ok: true, output: "" };
   },
-];
+});
+
+export function buildScaffoldSteps(features: FeatureId[]): ScaffoldStep[] {
+  const has = (id: FeatureId) => features.includes(id);
+  const libraries = [...(has("motion") ? ["motion"] : []), ...(has("lucide") ? ["lucide-react"] : [])];
+  const agents = features.filter((id): id is "claude" | "codex" => id === "claude" || id === "codex");
+  return [
+    nextStep,
+    ...(has("typography") ? [typographyStep] : []),
+    ...(has("shadcn") ? [shadcnInitStep, shadcnAllStep] : []),
+    ...(libraries.length > 0 ? [librariesStep(libraries)] : []),
+    ...(has("ultracite") ? [ultraciteStep(agents)] : agents.length > 0 ? [agentConfigStep(agents)] : []),
+  ];
+}

package/src/lib/utils/write-agent-config.ts

@@ -0,0 +1,19 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import type { FeatureId } from "../features";
+
+const agentsMarkdown = `# Project notes for coding agents
+
+- Next.js App Router with TypeScript and Tailwind CSS v4.
+- Run \`dev\` for the local server and \`build\` before shipping.
+- Keep components in \`components/\`, shared helpers in \`lib/\`.
+`;
+
+export async function writeAgentConfig(projectDir: string, features: FeatureId[]): Promise<void> {
+  if (features.includes("codex")) {
+    await writeFile(join(projectDir, "AGENTS.md"), agentsMarkdown);
+  }
+  if (features.includes("claude")) {
+    await writeFile(join(projectDir, "CLAUDE.md"), features.includes("codex") ? "@AGENTS.md\n" : agentsMarkdown);
+  }
+}