@superdesign/cli 0.1.5 → 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Super Design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/config/constants.d.ts

@@ -12,7 +12,7 @@ export declare const POLL_TIMEOUT_MS: number;
 export declare const AUTH_POLL_INTERVAL_MS = 2000;
 export declare const AUTH_POLL_TIMEOUT_MS: number;
 /** CLI version - should match package.json */
-export declare const CLI_VERSION = "0.1.5";
+export declare const CLI_VERSION = "0.1.6";
 /** Config directory name */
 export declare const CONFIG_DIR_NAME = ".superdesign";
 /** Config file name */
@@ -31,3 +31,6 @@ export declare const EXIT_CODES: {
 export declare const SKILLS_DIR = ".claude/skills/superdesign";
 /** SKILL.md file name */
 export declare const SKILL_FILE_NAME = "SKILL.md";
+/** PostHog analytics configuration */
+export declare const POSTHOG_KEY: string;
+export declare const POSTHOG_HOST: string;

package/dist/index.cjs

@@ -91,8 +91,6 @@ var __webpack_exports__ = {};
     const external_url_namespaceObject = require("url");
     const external_path_namespaceObject = require("path");
     const external_commander_namespaceObject = require("commander");
-    const external_fs_namespaceObject = require("fs");
-    const external_os_namespaceObject = require("os");
     const CONFIG_DIR_NAME = '.superdesign';
     const CONFIG_FILE_NAME = 'config.json';
     const EXIT_CODES = {
@@ -106,6 +104,11 @@ var __webpack_exports__ = {};
     };
     const SKILLS_DIR = '.claude/skills/superdesign';
     const SKILL_FILE_NAME = 'SKILL.md';
+    const POSTHOG_KEY = process.env.POSTHOG_KEY || 'phc_oUcDklFBX3wy8eksSyEC0pataKCgSadur1sio5hBHg4';
+    const POSTHOG_HOST = process.env.POSTHOG_HOST || 'https://eu.i.posthog.com';
+    const external_fs_namespaceObject = require("fs");
+    const external_os_namespaceObject = require("os");
+    var external_os_default = /*#__PURE__*/ __webpack_require__.n(external_os_namespaceObject);
     function getConfigDir() {
         return external_path_namespaceObject.join(external_os_namespaceObject.homedir(), CONFIG_DIR_NAME);
     }
@@ -313,7 +316,7 @@ var __webpack_exports__ = {};
         try {
             startSpinner('Creating auth session...');
             const session = await createSession({
-                cliVersion: "0.1.5",
+                cliVersion: "0.1.6",
                 os: `${external_os_namespaceObject.platform()} ${external_os_namespaceObject.release()}`,
                 hostname: external_os_namespaceObject.hostname()
             });
@@ -512,269 +515,35 @@ var __webpack_exports__ = {};
         return `---
 name: superdesign
 description: Superdesign is a design agent, where it specialised in frontend UI/UX design; Use this skill before you implement any UI that require some design thinking
+metadata:
+  author: superdesign
+  version: "0.0.1"
 ---
 
-SuperDesign helps you (1) find design inspirations/styles and (2) optionally generate/iterate design drafts on an infinite canvas.
-
-Each SuperDesign canvas run creates a new node and returns a \`previewUrl\`.
+SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.
 
 ---
 
-## Core scenarios (what this skill handles)
+# Core scenarios (what this skill handles)
 
 1. **Help me design X** (feature/page/flow)
 2. **Set design system**
 3. **Help me improve design of X**
 
----
-
-## Tooling overview
-
-### A) Inspiration & Style Tools (generic, always available)
-Use these to discover style direction, references, and brand context:
-
-- **Search prompt library** (style/components/pages)
-  \`\`\`bash
-  superdesign search-prompts --keyword "<keyword>" --json
-  superdesign search-prompts --tags "style" --json
-  superdesign search-prompts --tags "style" --keyword "<style keyword>" --json
-  \`\`\`
-
-- **Get full prompt details**
-  \`\`\`bash
-  superdesign get-prompts --slugs "<slug1,slug2,...>" --json
-  \`\`\`
-
-- **Extract brand guide from a URL**
-  \`\`\`bash
-  superdesign extract-brand-guide --url https://example.com --json
-  \`\`\`
-
-### B) Canvas Design Tools (specialised, optional)
-
-Use these when you want to explore multiple directions and show previews:
-
-- Create project (supports prompt / prompt file / HTML)
-- Create design draft
-- Iterate design draft (replace / branch)
-- Plan flow pages → execute flow pages
-- Fetch nodes, export HTML
-
-> Pixel-perfect HTML playground is ONLY required for Canvas workflows.
-
----
-
-## Always-on rules
-
-- Design system should live at: \`.superdesign/design-system.md\`
-- If \`.superdesign/design-system.md\` is missing, run **Design System Setup** first.
-- Use \`askQuestion\` to ask high-signal questions (constraints, taste, tradeoffs).
-- For Canvas workflows: build a simplified/pixel-perfect prototype HTML in:
-  - \`.superdesign/playgrounds/<name>.html\`
-- Always use \`--json\` for machine parsing.
-
----
-
-## Playground rules (Canvas only)
-
-**Playground = BEFORE state (what exists now).** It provides context for SuperDesign agent.
-**Prompt = DESIRED CHANGE (what to add/modify).**
-
-The playground HTML must contain **ONLY UI that currently exists in the codebase**. For NEW features/sections, describe them entirely in the \`--prompt\` flag — do NOT add wireframes, placeholders, or sketches to the playground HTML.
-
-- **DO NOT** design or improve anything in the playground
-- **DO NOT** add placeholder sections like \`<!-- NEW FEATURE - DESIGN THIS -->\`
-- **DO** create pixel-perfect replica of current UI state
-- Valid formats:
-  - **Component-only**: isolated component with enough markup to show core UX/states
-  - **Full page**: replica of page where component operates (shows surrounding context)
-- Save to: \`.superdesign/playgrounds/<name>.html\`
-
-### Example: Adding a "Book Demo" section to home page
-
-**BAD approach:**
-\`\`\`html
-<!-- playground includes a sketched Book Demo section -->
-<section class="book-demo">
-  <!-- DESIGN THIS - Add CTA here -->
-  <h3>Book a Demo</h3>
-  <button>Schedule</button>
-</section>
-\`\`\`
-
-**GOOD approach:**
-\`\`\`html
-<!-- playground is pure replica of existing home page (hero + projects) -->
-<!-- NO book demo section in HTML -->
-\`\`\`
-Then in the iterate command:
-\`\`\`bash
---prompt "Add a Book Demo section between the hero and projects sections. Requirements: minimal card style, horizontal layout..."
-\`\`\`
-
----
-
-# 1) Design System Setup
-
-### Step 0 — Ask user (one question)
-
-"Do you want to **create a new design system** or **extract from the current codebase**?"
-
-### A) Extract from codebase
-
-1. Investigate codebase:
-   - design tokens, typography, colors, spacing, radius, shadows
-   - motion/animation patterns
-   - example components usage + implementation patterns
-   - core product functions + key pages
-2. Write standalone design system to:
-   - \`.superdesign/design-system.md\`
-   - Must be implementable without the codebase
-
-### B) Create a new design system (to improve current UI)
-
-1. Investigate codebase to understand product + needed pages/components
-2. Gather inspirations (generic tools):
-   - \`superdesign search-prompts --tags "style" --json\`
-   - \`superdesign get-prompts --slugs ... --json\`
-   - optional: \`superdesign extract-brand-guide --url ... --json\`
-3. Interview user (\`askQuestion\`) to choose direction
-4. Write:
-   - \`.superdesign/design-system.md\` (adapted to product + references)
-
----
-
-# 2) Designing X (feature/page/flow)
-
-## A) If user wants references / direction only (no canvas)
-
-1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
-2. Use inspiration tools to collect references:
-   - search prompts (style + component/page)
-   - get prompts (full details)
-   - extract brand guide if relevant
-3. Provide a concrete design spec:
-   - layout + hierarchy
-   - component set + states
-   - token guidance (typography/color/spacing/radius/motion)
-   - interaction notes + edge cases
-
-## B) If user wants visual exploration (canvas optional)
-
-Use canvas when direction is uncertain or multiple options are needed.
-
-### Canvas workflow — Add feature to existing page
-
-1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
-2. Build prototype HTML playground (simplified + pixel-perfect enough):
-   - \`.superdesign/playgrounds/<page>-<feature>.html\`
-3. Ask targeted questions (\`askQuestion\`) about requirements + taste
-4. Create project with playground HTML (returns \`draftId\`):
-   \`\`\`bash
-   superdesign create-project \\
-     --title "<feature>" \\
-     --html-file .superdesign/playgrounds/<file>.html \\
-     --prompt-file .superdesign/design-system.md \\
-     --json
-   \`\`\`
-   → Note: \`draftId\` in response is the baseline draft
-5. Branch designs from baseline (use \`draftId\` from step 4):
-   \`\`\`bash
-   superdesign iterate-design-draft \\
-     --draft-id <draftId> \\
-     --prompt "<design requirements>" \\
-     --mode branch \\
-     --count 3 \\
-     --json
-   \`\`\`
-6. Share \`previewUrl\` → collect feedback → iterate
-
-### Canvas workflow — Add new page
-
-Same as above, but playground should include shared UI shell:
-- nav, layout container, spacing rhythm, shared components
-
-### Canvas workflow — Improve current UI
-
-1. Investigate product + current UI states
-2. Ensure design system exists
-3. Propose improvement options:
-   - big restructure
-   - style uplift
-   - low-hanging polish
-4. Pick one → build playground → create project (prompt-file design system) → branch drafts
-5. Share \`previewUrl\` → iterate
-
-### When to use create-design-draft
-
-Only use \`create-design-draft\` when creating from scratch (no HTML baseline).
-
-**Required in prompt:**
-- Full page structure (header, sidebar, main content areas)
-- Component environment/surroundings
-- Layout context (what's above/below/beside)
-
-\`\`\`bash
-superdesign create-design-draft \\
-  --project-id <id> \\
-  --title "Feature X" \\
-  --prompt "Page has: fixed header 64px, left sidebar 240px, main content area. Design a settings panel in the main content area with..." \\
-  --device desktop \\
-  --json
+# How it works
+Fetch fresh guidelines below:
 \`\`\`
-
----
-
-# Advanced usage
-
-### Plan + generate a full user journey
-
-Plan:
-\`\`\`bash
-superdesign plan-flow-pages \\
-  --draft-id <draftId> \\
-  --source-node-id <nodeId> \\
-  --context "<flow context>" \\
-  --json
+https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md
 \`\`\`
 
-Execute:
-\`\`\`bash
-superdesign execute-flow-pages \\
-  --draft-id <draftId> \\
-  --source-node-id <nodeId> \\
-  --pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]' \\
-  --json
-\`\`\`
+Action accordingly based on instruction in the guidelines
 
-### Get HTML reference from a draft
+# Superdesign CLI
 
-\`\`\`bash
-superdesign get-design --draft-id <draftId> --output ./design.html
 \`\`\`
-
----
-
-## Quick reference (key commands)
-
-\`\`\`bash
-# Inspirations
-superdesign search-prompts --keyword "<keyword>" --json
-superdesign search-prompts --tags "style" --json
-superdesign get-prompts --slugs "<slug1,slug2>" --json
-superdesign extract-brand-guide --url https://example.com --json
-
-# Canvas
-superdesign create-project --title "X" --prompt "..." --json
-superdesign create-project --title "X" --prompt-file .superdesign/design-system.md --json
-superdesign create-project --title "X" --html-file ./index.html --prompt-file .superdesign/design-system.md --json
-
-superdesign create-design-draft --project-id <id> --title "X" --prompt "..." --device desktop --json
-superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode replace --json
-superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode branch --count 3 --json
-
-superdesign fetch-design-nodes --project-id <id> --json
-superdesign get-design --draft-id <id> --json
+npm install -g @superdesign/cli@latest
+superdesign init
+superdesign --help
 \`\`\`
 `;
     }
@@ -1509,15 +1278,104 @@ superdesign get-design --draft-id <id> --json
         });
         return command;
     }
+    const external_posthog_node_namespaceObject = require("posthog-node");
+    let posthogClient = null;
+    function getPostHog() {
+        if (!posthogClient && POSTHOG_KEY) posthogClient = new external_posthog_node_namespaceObject.PostHog(POSTHOG_KEY, {
+            host: POSTHOG_HOST
+        });
+        return posthogClient;
+    }
+    function sanitizeOptions(options) {
+        const sensitiveKeys = [
+            'token',
+            'key',
+            'secret',
+            'password',
+            'apiKey',
+            'api_key',
+            'apikey',
+            'auth',
+            'authorization',
+            'credential'
+        ];
+        const sanitized = {};
+        for (const [key, value] of Object.entries(options)){
+            const lowerKey = key.toLowerCase();
+            if (!sensitiveKeys.some((sensitive)=>lowerKey.includes(sensitive))) {
+                if ('string' != typeof value || !(value.length > 100)) sanitized[key] = value;
+            }
+        }
+        return sanitized;
+    }
+    async function trackCommand(opts) {
+        const config = loadConfig();
+        const teamId = config.teamId;
+        const metadata = {
+            command: opts.command,
+            success: opts.success,
+            durationMs: opts.durationMs,
+            errorCode: opts.errorCode,
+            options: opts.options ? sanitizeOptions(opts.options) : void 0,
+            cliVersion: "0.1.6",
+            os: `${external_os_default().platform()} ${external_os_default().release()}`
+        };
+        const posthog = getPostHog();
+        if (posthog) {
+            const distinctId = teamId || `anon_${external_os_default().hostname()}`;
+            posthog.capture({
+                distinctId,
+                event: 'cli_command',
+                properties: {
+                    team_id: teamId,
+                    ...metadata
+                }
+            });
+        }
+        if (manager_isAuthenticated() && teamId) try {
+            const client = getApiClient();
+            await client.post('/external/track', {
+                activityType: 'cli_command',
+                metadata
+            });
+        } catch  {}
+    }
+    async function shutdownAnalytics() {
+        if (posthogClient) {
+            await posthogClient.shutdown();
+            posthogClient = null;
+        }
+    }
     const src_filename = (0, external_url_namespaceObject.fileURLToPath)(__rslib_import_meta_url__);
     const src_dirname = (0, external_path_namespaceObject.dirname)(src_filename);
     (0, external_dotenv_namespaceObject.config)({
         path: (0, external_path_namespaceObject.resolve)(src_dirname, '../.env')
     });
     (0, external_dotenv_namespaceObject.config)();
+    let commandStartTime = 0;
+    let currentCommand = '';
+    function sanitizeCommandOptions(opts) {
+        const sanitized = {};
+        for (const [key, value] of Object.entries(opts))if (!('function' == typeof value || key.startsWith('_'))) sanitized[key] = value;
+        return sanitized;
+    }
     function createProgram() {
         const program = new external_commander_namespaceObject.Command();
-        program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.5");
+        program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.6");
+        program.hook('preAction', ()=>{
+            commandStartTime = Date.now();
+            currentCommand = process.argv[2] || 'unknown';
+        });
+        program.hook('postAction', async (_thisCommand, actionCommand)=>{
+            const durationMs = Date.now() - commandStartTime;
+            await trackCommand({
+                command: currentCommand,
+                success: true,
+                durationMs,
+                options: sanitizeCommandOptions(actionCommand.opts())
+            });
+            await shutdownAnalytics();
+        });
         program.addCommand(createLoginCommand());
         program.addCommand(createLogoutCommand());
         program.addCommand(createInitCommand());

package/dist/index.js

@@ -3,10 +3,11 @@ import { fileURLToPath } from "url";
 import { dirname, join, resolve as external_path_resolve } from "path";
 import { Command } from "commander";
 import { appendFileSync, existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
-import { homedir, hostname, platform, release } from "os";
+import os, { homedir, hostname, platform, release } from "os";
 import axios from "axios";
 import ora from "ora";
 import { writeFile } from "fs/promises";
+import { PostHog } from "posthog-node";
 const CONFIG_DIR_NAME = '.superdesign';
 const CONFIG_FILE_NAME = 'config.json';
 const EXIT_CODES = {
@@ -20,6 +21,8 @@ const EXIT_CODES = {
 };
 const SKILLS_DIR = '.claude/skills/superdesign';
 const SKILL_FILE_NAME = 'SKILL.md';
+const POSTHOG_KEY = process.env.POSTHOG_KEY || 'phc_oUcDklFBX3wy8eksSyEC0pataKCgSadur1sio5hBHg4';
+const POSTHOG_HOST = process.env.POSTHOG_HOST || 'https://eu.i.posthog.com';
 function getConfigDir() {
     return join(homedir(), CONFIG_DIR_NAME);
 }
@@ -223,7 +226,7 @@ async function runAuthFlow(options = {}) {
     try {
         startSpinner('Creating auth session...');
         const session = await createSession({
-            cliVersion: "0.1.5",
+            cliVersion: "0.1.6",
             os: `${platform()} ${release()}`,
             hostname: hostname()
         });
@@ -422,269 +425,35 @@ function getSkillTemplate() {
     return `---
 name: superdesign
 description: Superdesign is a design agent, where it specialised in frontend UI/UX design; Use this skill before you implement any UI that require some design thinking
+metadata:
+  author: superdesign
+  version: "0.0.1"
 ---
 
-SuperDesign helps you (1) find design inspirations/styles and (2) optionally generate/iterate design drafts on an infinite canvas.
-
-Each SuperDesign canvas run creates a new node and returns a \`previewUrl\`.
+SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.
 
 ---
 
-## Core scenarios (what this skill handles)
+# Core scenarios (what this skill handles)
 
 1. **Help me design X** (feature/page/flow)
 2. **Set design system**
 3. **Help me improve design of X**
 
----
-
-## Tooling overview
-
-### A) Inspiration & Style Tools (generic, always available)
-Use these to discover style direction, references, and brand context:
-
-- **Search prompt library** (style/components/pages)
-  \`\`\`bash
-  superdesign search-prompts --keyword "<keyword>" --json
-  superdesign search-prompts --tags "style" --json
-  superdesign search-prompts --tags "style" --keyword "<style keyword>" --json
-  \`\`\`
-
-- **Get full prompt details**
-  \`\`\`bash
-  superdesign get-prompts --slugs "<slug1,slug2,...>" --json
-  \`\`\`
-
-- **Extract brand guide from a URL**
-  \`\`\`bash
-  superdesign extract-brand-guide --url https://example.com --json
-  \`\`\`
-
-### B) Canvas Design Tools (specialised, optional)
-
-Use these when you want to explore multiple directions and show previews:
-
-- Create project (supports prompt / prompt file / HTML)
-- Create design draft
-- Iterate design draft (replace / branch)
-- Plan flow pages → execute flow pages
-- Fetch nodes, export HTML
-
-> Pixel-perfect HTML playground is ONLY required for Canvas workflows.
-
----
-
-## Always-on rules
-
-- Design system should live at: \`.superdesign/design-system.md\`
-- If \`.superdesign/design-system.md\` is missing, run **Design System Setup** first.
-- Use \`askQuestion\` to ask high-signal questions (constraints, taste, tradeoffs).
-- For Canvas workflows: build a simplified/pixel-perfect prototype HTML in:
-  - \`.superdesign/playgrounds/<name>.html\`
-- Always use \`--json\` for machine parsing.
-
----
-
-## Playground rules (Canvas only)
-
-**Playground = BEFORE state (what exists now).** It provides context for SuperDesign agent.
-**Prompt = DESIRED CHANGE (what to add/modify).**
-
-The playground HTML must contain **ONLY UI that currently exists in the codebase**. For NEW features/sections, describe them entirely in the \`--prompt\` flag — do NOT add wireframes, placeholders, or sketches to the playground HTML.
-
-- **DO NOT** design or improve anything in the playground
-- **DO NOT** add placeholder sections like \`<!-- NEW FEATURE - DESIGN THIS -->\`
-- **DO** create pixel-perfect replica of current UI state
-- Valid formats:
-  - **Component-only**: isolated component with enough markup to show core UX/states
-  - **Full page**: replica of page where component operates (shows surrounding context)
-- Save to: \`.superdesign/playgrounds/<name>.html\`
-
-### Example: Adding a "Book Demo" section to home page
-
-**BAD approach:**
-\`\`\`html
-<!-- playground includes a sketched Book Demo section -->
-<section class="book-demo">
-  <!-- DESIGN THIS - Add CTA here -->
-  <h3>Book a Demo</h3>
-  <button>Schedule</button>
-</section>
-\`\`\`
-
-**GOOD approach:**
-\`\`\`html
-<!-- playground is pure replica of existing home page (hero + projects) -->
-<!-- NO book demo section in HTML -->
-\`\`\`
-Then in the iterate command:
-\`\`\`bash
---prompt "Add a Book Demo section between the hero and projects sections. Requirements: minimal card style, horizontal layout..."
-\`\`\`
-
----
-
-# 1) Design System Setup
-
-### Step 0 — Ask user (one question)
-
-"Do you want to **create a new design system** or **extract from the current codebase**?"
-
-### A) Extract from codebase
-
-1. Investigate codebase:
-   - design tokens, typography, colors, spacing, radius, shadows
-   - motion/animation patterns
-   - example components usage + implementation patterns
-   - core product functions + key pages
-2. Write standalone design system to:
-   - \`.superdesign/design-system.md\`
-   - Must be implementable without the codebase
-
-### B) Create a new design system (to improve current UI)
-
-1. Investigate codebase to understand product + needed pages/components
-2. Gather inspirations (generic tools):
-   - \`superdesign search-prompts --tags "style" --json\`
-   - \`superdesign get-prompts --slugs ... --json\`
-   - optional: \`superdesign extract-brand-guide --url ... --json\`
-3. Interview user (\`askQuestion\`) to choose direction
-4. Write:
-   - \`.superdesign/design-system.md\` (adapted to product + references)
-
----
-
-# 2) Designing X (feature/page/flow)
-
-## A) If user wants references / direction only (no canvas)
-
-1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
-2. Use inspiration tools to collect references:
-   - search prompts (style + component/page)
-   - get prompts (full details)
-   - extract brand guide if relevant
-3. Provide a concrete design spec:
-   - layout + hierarchy
-   - component set + states
-   - token guidance (typography/color/spacing/radius/motion)
-   - interaction notes + edge cases
-
-## B) If user wants visual exploration (canvas optional)
-
-Use canvas when direction is uncertain or multiple options are needed.
-
-### Canvas workflow — Add feature to existing page
-
-1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
-2. Build prototype HTML playground (simplified + pixel-perfect enough):
-   - \`.superdesign/playgrounds/<page>-<feature>.html\`
-3. Ask targeted questions (\`askQuestion\`) about requirements + taste
-4. Create project with playground HTML (returns \`draftId\`):
-   \`\`\`bash
-   superdesign create-project \\
-     --title "<feature>" \\
-     --html-file .superdesign/playgrounds/<file>.html \\
-     --prompt-file .superdesign/design-system.md \\
-     --json
-   \`\`\`
-   → Note: \`draftId\` in response is the baseline draft
-5. Branch designs from baseline (use \`draftId\` from step 4):
-   \`\`\`bash
-   superdesign iterate-design-draft \\
-     --draft-id <draftId> \\
-     --prompt "<design requirements>" \\
-     --mode branch \\
-     --count 3 \\
-     --json
-   \`\`\`
-6. Share \`previewUrl\` → collect feedback → iterate
-
-### Canvas workflow — Add new page
-
-Same as above, but playground should include shared UI shell:
-- nav, layout container, spacing rhythm, shared components
-
-### Canvas workflow — Improve current UI
-
-1. Investigate product + current UI states
-2. Ensure design system exists
-3. Propose improvement options:
-   - big restructure
-   - style uplift
-   - low-hanging polish
-4. Pick one → build playground → create project (prompt-file design system) → branch drafts
-5. Share \`previewUrl\` → iterate
-
-### When to use create-design-draft
-
-Only use \`create-design-draft\` when creating from scratch (no HTML baseline).
-
-**Required in prompt:**
-- Full page structure (header, sidebar, main content areas)
-- Component environment/surroundings
-- Layout context (what's above/below/beside)
-
-\`\`\`bash
-superdesign create-design-draft \\
-  --project-id <id> \\
-  --title "Feature X" \\
-  --prompt "Page has: fixed header 64px, left sidebar 240px, main content area. Design a settings panel in the main content area with..." \\
-  --device desktop \\
-  --json
+# How it works
+Fetch fresh guidelines below:
 \`\`\`
-
----
-
-# Advanced usage
-
-### Plan + generate a full user journey
-
-Plan:
-\`\`\`bash
-superdesign plan-flow-pages \\
-  --draft-id <draftId> \\
-  --source-node-id <nodeId> \\
-  --context "<flow context>" \\
-  --json
+https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md
 \`\`\`
 
-Execute:
-\`\`\`bash
-superdesign execute-flow-pages \\
-  --draft-id <draftId> \\
-  --source-node-id <nodeId> \\
-  --pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]' \\
-  --json
-\`\`\`
+Action accordingly based on instruction in the guidelines
 
-### Get HTML reference from a draft
+# Superdesign CLI
 
-\`\`\`bash
-superdesign get-design --draft-id <draftId> --output ./design.html
 \`\`\`
-
----
-
-## Quick reference (key commands)
-
-\`\`\`bash
-# Inspirations
-superdesign search-prompts --keyword "<keyword>" --json
-superdesign search-prompts --tags "style" --json
-superdesign get-prompts --slugs "<slug1,slug2>" --json
-superdesign extract-brand-guide --url https://example.com --json
-
-# Canvas
-superdesign create-project --title "X" --prompt "..." --json
-superdesign create-project --title "X" --prompt-file .superdesign/design-system.md --json
-superdesign create-project --title "X" --html-file ./index.html --prompt-file .superdesign/design-system.md --json
-
-superdesign create-design-draft --project-id <id> --title "X" --prompt "..." --device desktop --json
-superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode replace --json
-superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode branch --count 3 --json
-
-superdesign fetch-design-nodes --project-id <id> --json
-superdesign get-design --draft-id <id> --json
+npm install -g @superdesign/cli@latest
+superdesign init
+superdesign --help
 \`\`\`
 `;
 }
@@ -1418,15 +1187,103 @@ function createGetDesignCommand() {
     });
     return command;
 }
+let posthogClient = null;
+function getPostHog() {
+    if (!posthogClient && POSTHOG_KEY) posthogClient = new PostHog(POSTHOG_KEY, {
+        host: POSTHOG_HOST
+    });
+    return posthogClient;
+}
+function sanitizeOptions(options) {
+    const sensitiveKeys = [
+        'token',
+        'key',
+        'secret',
+        'password',
+        'apiKey',
+        'api_key',
+        'apikey',
+        'auth',
+        'authorization',
+        'credential'
+    ];
+    const sanitized = {};
+    for (const [key, value] of Object.entries(options)){
+        const lowerKey = key.toLowerCase();
+        if (!sensitiveKeys.some((sensitive)=>lowerKey.includes(sensitive))) {
+            if ('string' != typeof value || !(value.length > 100)) sanitized[key] = value;
+        }
+    }
+    return sanitized;
+}
+async function trackCommand(opts) {
+    const config = loadConfig();
+    const teamId = config.teamId;
+    const metadata = {
+        command: opts.command,
+        success: opts.success,
+        durationMs: opts.durationMs,
+        errorCode: opts.errorCode,
+        options: opts.options ? sanitizeOptions(opts.options) : void 0,
+        cliVersion: "0.1.6",
+        os: `${os.platform()} ${os.release()}`
+    };
+    const posthog = getPostHog();
+    if (posthog) {
+        const distinctId = teamId || `anon_${os.hostname()}`;
+        posthog.capture({
+            distinctId,
+            event: 'cli_command',
+            properties: {
+                team_id: teamId,
+                ...metadata
+            }
+        });
+    }
+    if (manager_isAuthenticated() && teamId) try {
+        const client = getApiClient();
+        await client.post('/external/track', {
+            activityType: 'cli_command',
+            metadata
+        });
+    } catch  {}
+}
+async function shutdownAnalytics() {
+    if (posthogClient) {
+        await posthogClient.shutdown();
+        posthogClient = null;
+    }
+}
 const src_filename = fileURLToPath(import.meta.url);
 const src_dirname = dirname(src_filename);
 external_dotenv_config({
     path: external_path_resolve(src_dirname, '../.env')
 });
 external_dotenv_config();
+let commandStartTime = 0;
+let currentCommand = '';
+function sanitizeCommandOptions(opts) {
+    const sanitized = {};
+    for (const [key, value] of Object.entries(opts))if (!('function' == typeof value || key.startsWith('_'))) sanitized[key] = value;
+    return sanitized;
+}
 function createProgram() {
     const program = new Command();
-    program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.5");
+    program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.6");
+    program.hook('preAction', ()=>{
+        commandStartTime = Date.now();
+        currentCommand = process.argv[2] || 'unknown';
+    });
+    program.hook('postAction', async (_thisCommand, actionCommand)=>{
+        const durationMs = Date.now() - commandStartTime;
+        await trackCommand({
+            command: currentCommand,
+            success: true,
+            durationMs,
+            options: sanitizeCommandOptions(actionCommand.opts())
+        });
+        await shutdownAnalytics();
+    });
     program.addCommand(createLoginCommand());
     program.addCommand(createLogoutCommand());
     program.addCommand(createInitCommand());

package/dist/utils/analytics.d.ts

@@ -0,0 +1,25 @@
+/**
+ * CLI Analytics - Dual tracking with PostHog (real-time) and Backend (long-term storage)
+ */
+export interface TrackCommandOptions {
+    command: string;
+    success: boolean;
+    durationMs: number;
+    errorCode?: string;
+    options?: Record<string, unknown>;
+}
+/**
+ * Sanitize command options to remove sensitive values
+ */
+declare function sanitizeOptions(options: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Track a CLI command execution
+ * Sends to both PostHog (real-time dashboards) and backend (long-term storage)
+ */
+export declare function trackCommand(opts: TrackCommandOptions): Promise<void>;
+/**
+ * Shutdown analytics and flush any pending events
+ * Should be called before CLI exits
+ */
+export declare function shutdownAnalytics(): Promise<void>;
+export { sanitizeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdesign/cli",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "CLI for SuperDesign Platform - agent skills for Claude Code",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -20,16 +20,13 @@
     "dist",
     "bin"
   ],
-  "scripts": {
-    "build": "rslib build && chmod +x bin/superdesign.js",
-    "dev": "rslib build --watch"
-  },
   "dependencies": {
     "axios": "^1.6.0",
     "commander": "^11.1.0",
     "dotenv": "^16.3.0",
     "open": "^10.0.0",
-    "ora": "^8.0.0"
+    "ora": "^8.0.0",
+    "posthog-node": "^4.0.0"
   },
   "devDependencies": {
     "@rslib/core": "0.15.1",
@@ -51,5 +48,9 @@
     "url": "https://github.com/superdesigndev/superdesign-platform.git",
     "directory": "packages/cli"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "rslib build && chmod +x bin/superdesign.js",
+    "dev": "rslib build --watch"
+  }
+}