create-twinbloc-app 0.1.1 → 0.1.2

package/README.md

@@ -1,11 +1,27 @@
 # Create Twinbloc App
 
-Create a React Native app from the Twinbloc starter template.
+Create a React Native app from the Twinbloc starter template (Expo + Expo Router).
 
-## Usage
+## Requirements
+
+- Node.js 18+
+- npm, yarn, pnpm, or bun
+- Xcode for iOS (macOS) and/or Android Studio for Android
+
+## Quick Start
 
 ```bash
 npx create-twinbloc-app@latest MyApp
+cd MyApp
+npm run start
+```
+
+## Using Other Package Managers
+
+```bash
+yarn create twinbloc-app MyApp
+pnpm create twinbloc-app MyApp
+bun create twinbloc-app MyApp
 ```
 
 ## Options
@@ -19,6 +35,41 @@ npx create-twinbloc-app@latest MyApp --pm pnpm
 npx create-twinbloc-app@latest MyApp --pm bun
 ```
 
-## Template
+## Running the App (Dev Client)
+
+This template uses a development build. After creating the project:
+
+```bash
+cd MyApp
+npm run start
+```
+
+Then build and open a dev client:
+
+```bash
+npx expo run:ios
+npx expo run:android
+```
+
+## Project Structure
+
+```
+MyApp/
+  app/              # Expo Router routes
+  assets/           # Images and icons
+  src/              # App state and shared utilities
+  app.json          # Expo configuration
+  package.json      # Scripts and dependencies
+  tsconfig.json     # TypeScript config
+```
+
+## Template Details
+
+- Location: `template/react-native-starter`
+- Framework: Expo SDK 54 + Expo Router
+- State: Zustand example in `src/state`
+
+## Troubleshooting
 
-The generated app is located in the `template/react-native-starter` directory of this package and uses Expo with Expo Router.
+- If install fails, retry with `--pm` to force a package manager.
+- If the folder is not empty, choose a new directory name.

package/bin/cli.js

@@ -5,6 +5,8 @@ import fs from "fs-extra";
 import { spawnSync } from "child_process";
 import chalk from "chalk";
 import { fileURLToPath } from "url";
+import readline from "readline";
+import { stdin as input, stdout as output } from "process";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -64,6 +66,115 @@ const runInstall = (dir, pm) => {
   if (result.status !== 0) process.exit(result.status);
 };
 
+const brandPrimary = chalk.hex("#6CABDD");
+const brandDeep = chalk.hex("#1C2C5B");
+
+const printBanner = () => {
+  const lines = [
+    "████████╗██╗    ██╗██╗███╗   ██╗██████╗ ██╗      ██████╗  ██████╗",
+    "╚══██╔══╝██║    ██║██║████╗  ██║██╔══██╗██║     ██╔═══██╗██╔════╝",
+    "   ██║   ██║ █╗ ██║██║██╔██╗ ██║██████╔╝██║     ██║   ██║██║",
+    "   ██║   ██║███╗██║██║██║╚██╗██║██╔══██╗██║     ██║   ██║██║",
+    "   ██║   ╚███╔███╔╝██║██║ ╚████║██████╔╝███████╗╚██████╔╝╚██████╗",
+    "   ╚═╝    ╚══╝╚══╝ ╚═╝╚═╝  ╚═══╝╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝",
+  ];
+  lines.forEach((line, index) => {
+    const paint = index < 3 ? brandPrimary : brandDeep;
+    console.log(paint(line));
+  });
+  console.log(brandPrimary("React Native Starter"));
+  console.log("");
+};
+
+const agentDirectories = [
+  { key: "Antigravity", path: ".agents", label: ".agents/skills" },
+  { key: "agent", path: ".agent", label: ".agent/skills" },
+  { key: "claude", path: ".claude", label: ".claude/skills" },
+  { key: "codex", path: ".codex", label: ".codex/skills" },
+  { key: "cursor", path: ".cursor", label: ".cursor/skills" },
+  { key: "github", path: ".github", label: ".github/skills" },
+  { key: "kilocode", path: ".kilocode", label: ".kilocode/skills" },
+  { key: "opencode", path: ".opencode", label: ".opencode/skills" },
+  { key: "trae", path: ".trae", label: ".trae" },
+  { key: "vscode", path: ".vscode", label: ".vscode" },
+  { key: "windsurf", path: ".windsurf", label: ".windsurf" },
+];
+
+const getExistingAgentKeys = async (rootDir) => {
+  const existing = new Set();
+  for (const dir of agentDirectories) {
+    if (await fs.pathExists(path.join(rootDir, dir.path))) {
+      existing.add(dir.key);
+    }
+  }
+  return existing;
+};
+
+const renderAgentSelection = (choices, selectedKeys, activeIndex) => {
+  output.write("\x1b[2J\x1b[0;0H");
+  printBanner();
+  console.log(brandPrimary.bold("Select agent configs to include:"));
+  console.log(brandDeep("Use ↑/↓ to move, space to toggle, enter to confirm."));
+  console.log(brandDeep("Press enter with nothing selected for none."));
+  console.log("");
+
+  choices.forEach((choice, index) => {
+    const isActive = index === activeIndex;
+    const isSelected = selectedKeys.has(choice.key);
+    const cursor = isActive ? ">" : " ";
+    const mark = isSelected ? "x" : " ";
+    const line = `${cursor} [${mark}] ${choice.label}`;
+    console.log(isActive ? brandPrimary.bold(line) : brandDeep(line));
+  });
+};
+
+const promptAgentSelection = async (choices, defaultKeys) => {
+  readline.emitKeypressEvents(input);
+  if (input.isTTY) {
+    input.setRawMode(true);
+  }
+
+  const selectedKeys = new Set(defaultKeys);
+  let activeIndex = 0;
+
+  renderAgentSelection(choices, selectedKeys, activeIndex);
+
+  return new Promise((resolve) => {
+    const onKeypress = (_str, key) => {
+      if (key.name === "up") {
+        activeIndex = (activeIndex - 1 + choices.length) % choices.length;
+        renderAgentSelection(choices, selectedKeys, activeIndex);
+        return;
+      }
+      if (key.name === "down") {
+        activeIndex = (activeIndex + 1) % choices.length;
+        renderAgentSelection(choices, selectedKeys, activeIndex);
+        return;
+      }
+      if (key.name === "space") {
+        const choice = choices[activeIndex];
+        if (selectedKeys.has(choice.key)) {
+          selectedKeys.delete(choice.key);
+        } else {
+          selectedKeys.add(choice.key);
+        }
+        renderAgentSelection(choices, selectedKeys, activeIndex);
+        return;
+      }
+      if (key.name === "return") {
+        input.off("keypress", onKeypress);
+        if (input.isTTY) {
+          input.setRawMode(false);
+        }
+        output.write("\n");
+        resolve(selectedKeys);
+      }
+    };
+
+    input.on("keypress", onKeypress);
+  });
+};
+
 const main = async () => {
   const empty = await isEmptyDir(targetDir);
   if (!empty) {
@@ -89,10 +200,20 @@ const main = async () => {
     await fs.copy(examplePath, targetDir, { overwrite: true });
   }
 
+  const existingAgentKeys = await getExistingAgentKeys(targetDir);
+  const defaultKeys = agentDirectories.filter((dir) => existingAgentKeys.has(dir.key)).map((dir) => dir.key);
+
+  const selectedKeys = await promptAgentSelection(agentDirectories, defaultKeys);
+  const selectedLabels = agentDirectories.filter((dir) => selectedKeys.has(dir.key)).map((dir) => dir.label);
+
+  const dirsToRemove = agentDirectories.filter((dir) => !selectedKeys.has(dir.key));
+  await Promise.all(dirsToRemove.map((dir) => fs.remove(path.join(targetDir, dir.path))));
+
+  const appName = path.basename(targetDir);
   const targetPackageJson = path.join(targetDir, "package.json");
   if (fs.existsSync(targetPackageJson)) {
     const pkg = await fs.readJson(targetPackageJson);
-    pkg.name = path.basename(targetDir);
+    pkg.name = appName;
     await fs.writeJson(targetPackageJson, pkg, { spaces: 2 });
   }
 
@@ -104,7 +225,25 @@ const main = async () => {
     runInstall(targetDir, pm);
   }
 
-  console.log(chalk.green("Project created successfully."));
+  printBanner();
+  console.log(
+    [
+      brandPrimary.bold("Project created successfully."),
+      "",
+      brandDeep(`Agent configs: ${selectedLabels.length > 0 ? selectedLabels.join(", ") : "none"}`),
+      "",
+      brandPrimary("Next steps:"),
+      brandDeep(`  cd ${appName}`),
+      options.skipInstall ? brandDeep("  npm install") : null,
+      brandDeep("  npm run start"),
+      "",
+      brandPrimary("Then:"),
+      brandDeep("  - Build a dev client (if you haven’t): npx expo run:ios / npx expo run:android"),
+      brandDeep("  - Open the app from the dev client on your device or simulator"),
+    ]
+      .filter(Boolean)
+      .join("\n"),
+  );
 };
 
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-twinbloc-app",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React Native starter template with optional examples",
   "type": "module",
   "bin": {