omp-designer 2.0.0

package/docs/config.yml.example

@@ -0,0 +1,24 @@
+symbolPreset: ascii
+theme: 
+  dark: titanium
+  light: light
+setupVersion: 1
+modelRoles: 
+  default: opencode-go/deepseek-v4-flash:xhigh
+  advisor: opencode-go/deepseek-v4-flash:high
+  smol: opencode-go/deepseek-v4-flash:xhigh
+colorBlindMode: false
+display: 
+  showTokenUsage: true
+steeringMode: one-at-a-time
+compaction: 
+  enabled: false
+autolearn: 
+  enabled: false
+edit: 
+  mode: hashline
+bash: 
+  autoBackground: 
+    enabled: false
+checkpoint: 
+  enabled: true

package/docs/extension-api.md

@@ -0,0 +1,93 @@
+# omp Extension API Rules
+
+## The Factory Function Rule (CRITICAL)
+
+omp extensions MUST export a factory function — a plain object will crash:
+
+```typescript
+// ✅ CORRECT:
+export default function (pi: any) {
+  pi.registerCommand("designer", { ... });
+  pi.on("resources_discover", () => { ... });
+}
+
+// ❌ WRONG — crashes with "not a valid factory function":
+export default {
+  commands: new Map([["designer", { ... }]]),
+  handlers: new Map([["resources_discover", [...]]]),
+};
+```
+
+## The `return {}` Rule (CRITICAL)
+
+Handlers that should return nothing MUST return `undefined` (no return or `return;`).
+Returning `{}` will crash:
+
+```typescript
+// ✅ CORRECT (mode OFF):
+pi.on("resources_discover", () => {
+  if (!isOn()) return; // ← undefined, fine
+  return { skillPaths: [...] };
+});
+
+// ❌ WRONG — will crash somewhere in omp internals:
+pi.on("resources_discover", () => {
+  if (!isOn()) return {}; // ← EXPLODES
+});
+```
+
+## The `message` vs `systemPrompt` Rule (CRITICAL)
+
+In `before_agent_start`, NEVER use `message` — it crashes with
+`h.content is undefined`. Always use `systemPrompt`:
+
+```typescript
+// ✅ CORRECT:
+pi.on("before_agent_start", (event: any) => {
+  if (!isOn()) return;
+  const existing = event?.systemPrompt;
+  const prompts = Array.isArray(existing) ? existing : existing ? [existing] : [];
+  return { systemPrompt: [...prompts, MY_PROMPT] };
+});
+
+// ❌ WRONG — crashes:
+pi.on("before_agent_start", () => {
+  return { message: "some text" };
+});
+```
+
+## Available Events
+
+| Event | Returns | Purpose |
+|-------|---------|---------|
+| `resources_discover` | `{ skillPaths: string[] } \| undefined` | Inject skills into context |
+| `before_agent_start` | `{ systemPrompt: string[], message?: any } \| undefined` | Modify system prompt |
+| `context` | Modified messages array | Alter conversation before sending |
+| `tool_result` | Modified tool result | Intercept/alter tool output |
+| `input` | Modified text/image input | Alter user input before processing |
+
+## Available Commands (registerCommand)
+
+```typescript
+pi.registerCommand("command-name", {
+  description: "what it does",
+  aliases: ["alt-name"],
+  handler: (args: any, ctx: any) => {
+    ctx?.ui?.notify?.("message", "info");
+    ctx?.editor?.setText?.("");
+  },
+});
+```
+
+## Available API Methods (`pi`)
+
+| Method | Purpose |
+|--------|---------|
+| `pi.registerCommand(name, opts)` | Register slash command |
+| `pi.on(event, callback)` | Register event handler |
+| `pi.registerTool(tool)` | Register a custom tool |
+| `pi.registerShortcut(key, opts)` | Register keyboard shortcut |
+| `pi.registerFlag(name, opts)` | Register CLI flag |
+| `pi.setModel(f)` | Change active model |
+| `pi.getFlag(name)` | Get flag value |
+| `pi.on(event, callback)` | Event listener |

package/docs/mcp-setup.md

@@ -0,0 +1,76 @@
+# MCP Server Setup
+
+Configured in `~/.omp/agent/mcp.json`. Two MCP servers:
+
+## 21st-dev-magic
+
+```json
+{
+  "21st-dev-magic": {
+    "command": "npx",
+    "args": ["-y", "@21st-dev/magic@latest"],
+    "env": { "API_KEY": "db28ed54db43b5bab1db3dfdda099b28e4242eaad4bb7d17c99a30c0c25673b3" }
+  }
+}
+```
+
+**Tools:**
+| Tool | Status | Use |
+|------|--------|-----|
+| `logo_search` | ✅ Works | SVG icons, brand graphics (named `logo_search`, NOT `21st_magic_logo_search`) |
+| `21st_magic_component_inspiration` | ✅ Works | Component patterns, variants, code |
+| `21st_magic_component_refiner` | ✅ Works | Refine existing components |
+| `21st_magic_component_builder` | ❌ Timeout (30s) | NEVER call — blocked by prompt |
+
+
+**API Key source:** From old Pi backup (`~/pi-backup/configs/mcp-servers.json`)
+
+## chrome-devtools
+
+```json
+{
+  "chrome-devtools": {
+    "command": "npx",
+    "args": [
+      "-y", "chrome-devtools-mcp@latest",
+      "--isolated", "--headless",
+      "--no-usage-statistics", "--no-performance-crux",
+      "--executable-path", "/home/leandro/.cache/puppeteer/chrome/linux-149.0.7827.22/chrome-linux64/chrome",
+      "--chrome-arg=--no-sandbox", "--chrome-arg=--disable-gpu",
+      "--chrome-arg=--disable-dev-shm-usage"
+    ],
+    "env": {
+      "CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS": "1",
+      "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1"
+    }
+  }
+}
+```
+
+**Chrome Binary:** Puppeteer's bundled Chrome v149.0.7827.22 (641 MB)
+at `~/.cache/puppeteer/chrome/linux-149.0.7827.22/chrome-linux64/chrome`.
+Leftover from the old Pi installation — no download needed.
+
+**Headless:** Yes — runs without visible window. Configured via `--headless` flag.
+
+**Tools used in designer mode:** navigate_page, take_screenshot, take_snapshot,
+list_console_messages, evaluate_script, resize_page.
+
+**Note:** Lighthouse audit on `localhost` often fails (needs public URL).
+
+## MCP Discovery
+
+omp discovers MCP servers from:
+- `{cwd}/.omp/mcp.json` (project)
+- `{cwd}/.omp/.mcp.json` (project)
+- `~/.omp/mcp.json` (user)
+- `~/.omp/.mcp.json` (user)
+- `~/.omp/agent/mcp.json` (user — current location)
+
+Current config stored at `~/.omp/agent/mcp.json` (added `/mcp add` created this path).
+
+## MCP Visibility
+
+Both MCP servers are ALWAYS running (configured in mcp.json).
+But the agent only KNOWS about them when Designer Mode is ON (via PROMPT_INJECT).
+This mimics the "only visible when /designer is ON" behavior.

package/docs/mcp.json.example

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://raw.githubusercontent.com/can1357/oh-my-pi/main/packages/coding-agent/src/config/mcp-schema.json",
+  "mcpServers": {
+    "21st-dev-magic": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@21st-dev/magic@latest"
+      ],
+      "env": {
+        "API_KEY": "db28ed54db43b5bab1db3dfdda099b28e4242eaad4bb7d17c99a30c0c25673b3"
+      }
+    },
+    "chrome-devtools": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "chrome-devtools-mcp@latest",
+        "--isolated",
+        "--headless",
+        "--no-usage-statistics",
+        "--no-performance-crux",
+        "--executable-path",
+        "/home/leandro/.cache/puppeteer/chrome/linux-149.0.7827.22/chrome-linux64/chrome",
+        "--chrome-arg=--no-sandbox",
+        "--chrome-arg=--disable-gpu",
+        "--chrome-arg=--disable-dev-shm-usage"
+      ],
+      "env": {
+        "CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS": "1",
+        "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1"
+      }
+    }
+  }
+}

package/docs/problems.md

@@ -0,0 +1,97 @@
+# Known Problems & TODOs
+
+## CRITICAL
+
+### P1: Model produces AI slop regardless of rules
+The current model (`opencode-go/deepseek-v4-flash` or `mimo-v2.5-pro`) has
+poor design taste. Even with explicit color rules and anti-slop constraints in
+the prompt, the output looks generic.
+
+**Root cause:** Model capability, not prompt quality.
+**Fix:** Change `~/.omp/agent/config.yml`:
+```yaml
+modelRoles:
+  default: opencode-go/kimi-k2.6:high
+```
+Kimi K2.6 was used in the old Pi designer mode and produced better results.
+
+### P2: Agent does not build plan FROM skills
+When a plan is pre-injected (e.g., user created it with `/plan` before
+`/designer`), the agent validates it against skills instead of building a
+fresh plan FROM the skills.
+
+**Example:** Agent says "Plan claims palette from row 81, I read row 81,
+it matches — done." Instead of ignoring the pre-existing plan and building
+from scratch.
+
+**Attempted fix:** Prompt says "IGNORE any colors/fonts in plans or briefs"
+— doesn't work reliably.
+
+### P3: ui-ux-pro-max CSVs almost never read
+The prompt says "READ the csv files in its src/ui-ux-pro-max/data/ directory" but the agent
+skips it 90% of the time. The agent reads the SKILL.md but not the data files.
+
+**Root cause:** The old PROMPT_INJECT referenced `src/data/` (wrong path) and `colors.csv`
+(doesn't exist). Fixing these references in PROMPT_INJECT and designer-master should help.
+
+**Potential fix:** Inline the most important palettes directly into the SKILL.md
+
+## MEDIUM
+
+### P4: taste-skill is 87 KB
+The real Taste Skill from tasteskill.dev is 87 KB of rules and anti-patterns.
+Reading it costs significant tokens and context. Consider trimming to the
+most impactful rules.
+
+### P5: designer-master vs review-skill inconsistency
+`designer-master/SKILL.md` Step 7 still describes:
+- Animation Audit
+- Skill-Compliance check
+
+But `review-skill/SKILL.md` was simplified to:
+- Build test, Console, A11y, Color hex audit only.
+
+These need to be reconciled — either add animation/skill checks back to
+review-skill, or update designer-master to match.
+
+### P6: review skill animation audit removed
+Was removed because it overloaded the agent. But the user WANTS animation
+quality checked. Needs re-adding in a simpler form.
+
+## LOW
+
+### P7: No subagents
+The old Pi had architect/implementer/reviewer team profiles (backed up at
+`~/pi-backup/team-profiles/`). These were never migrated to omp.
+
+### P8: chrome-devtools MCP sometimes doesn't connect
+The review step may fail if the dev server port isn't correctly detected,
+or if Chrome isn't ready. The agent should handle this gracefully.
+
+### P9: 21st-dev component_builder timeouts
+
+### P10: 21st-dev tool name mismatch
+All docs reference `21st_magic_logo_search` but the actual tool is named `logo_search`.
+Also `21st_magic_component_refiner` exists but is undocumented.
+
+**Fix applied:** Updated PROMPT_INJECT, designer-master skill, and all doc files.
+
+### P11: SVGs/icons not automatically found
+The 21st-dev MCP tools need `search_tool_bm25` to be activated — they aren't
+automatically available. The agent must explicitly discover them. Consider adding
+
+## DONE (recent fixes)
+
+- [x] SKILL_PATHS had wrong path: `emil-skill/` → `animate/`
+- [x] Taste-skill was fake `taste-ink-skill` (API connector) → replaced with
+      real Taste Skill from `Leonxlnx/taste-skill` (87 KB anti-slop framework)
+- [x] Color rule was too permissive ("one primary, one secondary max" →
+      agent used 3 accents). Changed to "ONE accent color only."
+- [x] review-skill was too large (150+ lines, animation/style audits) →
+      simplified to functional checks only (41 lines)
+- [x] Extension used wrong export format (`export default { ... }`) →
+      changed to factory function (`export default function(pi)`)
+- [x] `before_agent_start` used `message` → crashed. Changed to `systemPrompt`
+- [x] `return {}` caused crashes → changed to `return;`
+- [x] YAML frontmatter parse errors in taste-skill → quoted description + tools
+- [x] chrome-devtools MCP added (headless, existing Chrome binary from Puppeteer cache)

package/extensions/designer.ts

@@ -0,0 +1,186 @@
+/**
+ * Designer Mode v2 Extension for Pi (pi.dev)
+ *
+ * Adds /designer toggle command.
+ * When ON: injects design workflow system prompt + CSV data path.
+ * Skills are auto-discovered by Pi from the skills/ directory.
+ * MCPs: 21st-dev, chrome-devtools, ui-layouts, designmd.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { homedir } from "node:os";
+import { join, dirname } from "node:path";
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+// ── Paths ──────────────────────────────────────────────────────────────
+
+const HOME = homedir();
+const AGENT_DIR = join(HOME, ".pi", "agent");
+const STATE_FILE = join(AGENT_DIR, "designer-state.json");
+const MCP_CONFIG = join(AGENT_DIR, "mcp.json");
+
+// ── MCP server names managed by designer mode ──────────────────────────
+
+const DESIGNER_MCP_NAMES: Record<string, true> = {
+  "21st-dev-magic": true,
+  "chrome-devtools": true,
+  "ui-layouts": true,
+  "designmd": true,
+};
+
+// ── State ──────────────────────────────────────────────────────────────
+
+interface DesignerState {
+  enabled: boolean;
+}
+
+function readState(): DesignerState {
+  try {
+    if (existsSync(STATE_FILE)) {
+      const raw = JSON.parse(readFileSync(STATE_FILE, "utf-8")) as unknown;
+      if (raw && typeof raw === "object" && "enabled" in raw) {
+        return { enabled: (raw as Record<string, unknown>).enabled === true };
+      }
+    }
+  } catch { /* corrupt → disabled */ }
+  return { enabled: false };
+}
+
+function isOn(): boolean {
+  return readState().enabled;
+}
+
+function setEnabled(v: boolean): void {
+  mkdirSync(AGENT_DIR, { recursive: true });
+  writeFileSync(STATE_FILE, JSON.stringify({ enabled: v }));
+}
+
+// ── MCP config management ──────────────────────────────────────────────
+
+function setDesignerMcpEnabled(enabled: boolean): void {
+  try {
+    if (!existsSync(MCP_CONFIG)) return;
+    const raw = readFileSync(MCP_CONFIG, "utf-8");
+    const config = JSON.parse(raw) as Record<string, unknown>;
+
+    if (!config || typeof config !== "object") return;
+    const servers = config.mcpServers as Record<string, Record<string, unknown>> | undefined;
+    if (!servers || typeof servers !== "object") return;
+
+    let changed = false;
+    for (const [name, server] of Object.entries(servers)) {
+      if (name in DESIGNER_MCP_NAMES && server && typeof server === "object") {
+        if (server.enabled !== enabled) {
+          server.enabled = enabled;
+          changed = true;
+        }
+      }
+    }
+
+    if (changed) {
+      writeFileSync(MCP_CONFIG, JSON.stringify(config, null, 2) + "\n");
+    }
+  } catch { /* mcp.json broken/missing — no crash */ }
+}
+
+function syncMcpConfigOnStartup(): void {
+  setDesignerMcpEnabled(isOn());
+}
+
+// ── System prompt injection ────────────────────────────────────────────
+
+/** Resolved at module load time from the extension's location. */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Package root is the parent of extensions/
+const PACKAGE_ROOT = join(__dirname, "..");
+const CSV_DATA_ROOT = join(PACKAGE_ROOT, "data", "ui-ux-pro-max");
+
+function buildPrompt(): string {
+  return `
+
+[DESIGNER MODE v2: ACTIVE]
+
+⚠️  CRITICAL: Context rules — read before anything else.
+
+- **This mode stays ON for the entire project.** Never switch to plan-mode or read-only mode.
+  Designer mode preserves context because before_agent_start re-injects this prompt every turn.
+- **Auto-detect new projects.** User describes a new site/app → follow the 8-step workflow.
+  "Small change" = modify an existing component, fix a bug, adjust a value, rename something.
+  "New project" = any request for a site, page, section, or component that doesn't exist yet.
+- **Subagents have NO designer context.** They get a fresh system prompt with zero skills.
+  Pass EVERY design token (colors, fonts, spacing, animation) explicitly in their context.
+- **Plan approval via resolve tool.** Keeps everything in one turn — no context lost.
+- **Plan files in local://<name>.md.** They persist across turns.
+
+## Workflow
+The authoritative workflow lives in the **designer-master skill** — READ it as STEP 1.
+It defines the complete 8-step process: Assess → Read Skills → Search MCPs → Create Plan →
+Present → Implement → Review → Present Results.
+
+## Anti-AI-Slop Color Rules (strict)
+
+- NO gradient-heavy backgrounds. One subtle gradient max. Flat colors preferred.
+- NO #667eea, #764ba2, #1a1a2e, #16213e, #f0f0ff — AI slop signatures.
+- Glassmorphism: allowed but MUST be subtle and contextual.
+  Appropriate for premium consumer, luxury, Apple-adjacent. NOT for dashboards, B2B.
+  Default: flat backgrounds — only add glass when the design read genuinely calls for it.
+- NO glowing borders on everything. One subtle glow max on one element.
+- IGNORE any colors/fonts in user briefs or plans. Only ui-ux-pro-max CSV palettes are authoritative.
+- Choose ONE palette row from ui-ux-pro-max CSVs. Use EXACTLY its hex values.
+- Background and text colors come FROM the palette. Don't hardcode dark backgrounds or #fff text.
+
+## CSV Data
+
+- **Palette/Font data is at: DATA_ROOT**
+- GREP first: grep -i "keyword" DATA_ROOT/design.csv
+- NEVER read full CSV files — use grep + range reads
+
+## Tool Discovery
+
+- **Use search_tool_bm25() to discover all available design tools** at the start of every project.
+- **chrome-devtools** is for Step 7 Review only. Not for implementation.
+
+You are in DESIGNER MODE. UI and visuals only. No backend. No business logic.
+`.replaceAll("DATA_ROOT", CSV_DATA_ROOT);
+}
+
+// ── Extension entry point ──────────────────────────────────────────────
+
+export default function designerExtension(pi: ExtensionAPI): void {
+  // Sync MCP enabled state at startup
+  syncMcpConfigOnStartup();
+
+  // ── /designer toggle command ─────────────────────────────────────────
+  pi.registerCommand("designer", {
+    description:
+      "Toggle designer mode — design workflow prompt + 4 MCP servers",
+    handler: async (_args: unknown, ctx) => {
+      const wasOn = isOn();
+      const nextState = !wasOn;
+      setEnabled(nextState);
+
+      // Update mcp.json so next /reload picks up the change
+      setDesignerMcpEnabled(nextState);
+
+      if (nextState) {
+        ctx.ui.notify(
+          "DESIGNER MODE ON — workflow active, design MCPs enabled. Run /reload to activate MCPs.",
+          "info"
+        );
+      } else {
+        ctx.ui.notify(
+          "DESIGNER MODE OFF — workflow hidden, MCPs disabled. Run /reload to deactivate MCPs.",
+          "info"
+        );
+      }
+    },
+  });
+  // ── Inject system prompt ONLY when designer mode is ON ────────────────
+  pi.on("before_agent_start", (event, ctx) => {
+    if (!isOn()) return;
+    const currentPrompt = event.systemPrompt ?? ctx.getSystemPrompt?.() ?? "";
+    return { systemPrompt: currentPrompt + buildPrompt() };
+  });
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "omp-designer",
+  "version": "2.0.0",
+  "type": "module",
+  "description": "Designer Mode for Pi — toggleable UI/UX design workflow with 5 specialized skills, 161 color palettes, 57 font pairings, and 4 MCP integrations",
+  "keywords": [
+    "pi-package",
+    "pi",
+    "design",
+    "ui",
+    "ux",
+    "design-system",
+    "animation",
+    "frontend",
+    "color-palette",
+    "typography",
+    "anti-slop"
+  ],
+  "author": "Leandro",
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/LePro10/omp-designer.git"
+  },
+  "pi": {
+    "extensions": ["./extensions"],
+    "skills": ["./skills"],
+    "image": "https://pi.dev/logo-auto.svg"
+  },
+  "omp": {
+    "extensions": ["./extension/index.ts"]
+  },
+  "files": [
+    "extensions/",
+    "skills/",
+    "data/",
+    "docs/",
+    "AGENTS.md",
+    "architecture.md",
+    "package.json"
+  ]
+}