@vm0/cli 9.165.3 → 9.167.0

package/zero.js

@@ -152,7 +152,7 @@ import {
   zeroAgentCustomSkillNameSchema,
   zeroLocalAgentCommand,
   zeroTokenAllowsFeatureSwitch
-} from "./chunk-X7OEKYPB.js";
+} from "./chunk-34LCMNHI.js";
 import {
   __toESM,
   init_esm_shims
@@ -6850,6 +6850,44 @@ import { mkdir, writeFile } from "fs/promises";
 import { join as join6 } from "path";
 var COMPUTER_USE_SCREENSHOT_DIR = "/tmp/vm0/computer-use";
 var DATA_URL_PATTERN = /^data:([^;,]+);base64,(.*)$/s;
+var COMPUTER_USE_HELP_TEXT = `
+Workflow:
+  1. Start the Zero Desktop app and make sure Computer Use is online.
+  2. Run "zero computer-use list-apps" to find the target app name or bundle id.
+  3. Run "zero computer-use get-app-state --app <app>" to get a screenshot,
+     snapshotId, visible element indexes, and accessibility state.
+  4. Prefer element actions with --snapshot-id and --element-index. Use --x/--y
+     only when the target is visible in the returned screenshot but has no useful
+     accessibility element.
+  5. Read the JSON result. Screenshot data is saved under /tmp/vm0/computer-use
+     and replaced with a local file path in CLI output.
+
+Notes:
+  Write commands are sent to the connected Desktop host and may wait for local
+  approval before they run. Coordinate fallbacks use screenshot coordinates from
+  get-app-state; pass the matching --snapshot-id when acting on a prior snapshot.
+
+Examples:
+  List available apps:
+    zero computer-use list-apps
+
+  Inspect Safari state:
+    zero computer-use get-app-state --app Safari
+
+  Click element index 7 from snapshot desktop_abc:
+    zero computer-use click --app Safari --snapshot-id desktop_abc --element-index 7
+
+  Click screenshot coordinate (320, 240) from snapshot desktop_abc:
+    zero computer-use click --app Safari --snapshot-id desktop_abc --x 320 --y 240
+
+  Type text into the current focus in Safari:
+    zero computer-use type-text --app Safari --text "Hello"
+
+  Press a keyboard shortcut:
+    zero computer-use press-key --app Safari --key Command+L
+
+  Open an app without activating the current foreground app:
+    zero computer-use open-app --app Things`;
 function sleep2(ms) {
   return new Promise((resolve2) => {
     setTimeout(resolve2, ms);
@@ -7144,7 +7182,7 @@ var openAppCommand = appOption(
     )
   )
 );
-var zeroComputerUseCommand = new Command().name("computer-use").description("Desktop app computer use through Zero CLI").addCommand(listAppsCommand).addCommand(getAppStateCommand).addCommand(clickCommand).addCommand(scrollCommand).addCommand(setValueCommand).addCommand(typeTextCommand).addCommand(pressKeyCommand).addCommand(performActionCommand).addCommand(openAppCommand);
+var zeroComputerUseCommand = new Command().name("computer-use").description("Desktop app computer use through Zero CLI").addHelpText("after", COMPUTER_USE_HELP_TEXT).addCommand(listAppsCommand).addCommand(getAppStateCommand).addCommand(clickCommand).addCommand(scrollCommand).addCommand(setValueCommand).addCommand(typeTextCommand).addCommand(pressKeyCommand).addCommand(performActionCommand).addCommand(openAppCommand);
 
 // src/commands/zero/built-in/index.ts
 init_esm_shims();
@@ -7179,26 +7217,606 @@ function sourceRef(repo, commit, path) {
 function source(path) {
   return sourceRef(OPEN_DESIGN_REPO, OPEN_DESIGN_COMMIT, path);
 }
-var OPEN_DESIGN_REGISTRY = [
-  {
-    id: "od:skill:data-report",
+var STYLE_OPEN_DESIGN_SKILL_SLUGS = [
+  "8-bit-orbit-video-template",
+  "after-hours-editorial-template",
+  "algorithmic-art",
+  "apple-hig",
+  "brainstorming",
+  "brand-guidelines",
+  "canvas-design",
+  "card-twitter",
+  "card-xiaohongshu",
+  "color-expert",
+  "creative-director",
+  "d3-visualization",
+  "deck-guizang-editorial",
+  "deck-open-slide-canvas",
+  "deck-swiss-international",
+  "design-consultation",
+  "design-md",
+  "design-review",
+  "digits-fintech-swiss-template",
+  "doc-kami-parchment",
+  "editorial-burgundy-principles-template",
+  "enhance-prompt",
+  "faq-page",
+  "field-notes-editorial-template",
+  "figma-create-design-system-rules",
+  "figma-generate-design",
+  "figma-generate-library",
+  "figma-implement-design",
+  "flutter-animating-apps",
+  "frame-data-chart-nyt",
+  "frame-flowchart-sticky",
+  "frame-glitch-title",
+  "frame-light-leak-cinema",
+  "frame-liquid-bg-hero",
+  "frame-logo-outro",
+  "frame-macos-notification",
+  "frontend-design",
+  "frontend-dev",
+  "frontend-skill",
+  "frontend-slides",
+  "gsap-core",
+  "gsap-react",
+  "gsap-scrolltrigger",
+  "gsap-timeline",
+  "hand-drawn-diagrams",
+  "hatch-pet",
+  "html-ppt-retro-quarterly-review",
+  "login-flow",
+  "mockup-device-3d",
+  "paywall-upgrade-cro",
+  "plan-design-review",
+  "platform-design",
+  "poster-hero",
+  "ppt-keynote",
+  "release-notes-one-pager",
+  "resume-modern",
+  "screenshots-marketing",
+  "shadcn-ui",
+  "shader-dev",
+  "slack-gif-creator",
+  "slides",
+  "social-reddit-card",
+  "social-spotify-card",
+  "social-x-post-card",
+  "stitch-loop",
+  "swiftui-design",
+  "swiss-creative-mode-template",
+  "swiss-user-research-video-template",
+  "taste-skill",
+  "theme-factory",
+  "threejs",
+  "ui-skills",
+  "ui-ux-pro-max",
+  "vfx-text-cursor",
+  "video-hyperframes",
+  "web-design-guidelines",
+  "weread-year-in-review-video-template",
+  "wpds"
+];
+var STYLE_OPEN_DESIGN_SKILL_DESCRIPTIONS = {
+  "8-bit-orbit-video-template": "Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.",
+  "after-hours-editorial-template": "Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.",
+  "algorithmic-art": "Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.",
+  "apple-hig": "Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.",
+  brainstorming: "Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.",
+  "brand-guidelines": "Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.",
+  "canvas-design": "Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.",
+  "card-twitter": "Twitter quote or data card designed to pair with a post.",
+  "card-xiaohongshu": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
+  "color-expert": "Color science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory.",
+  "creative-director": "AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.",
+  "d3-visualization": "Teaches the agent to produce D3 charts and interactive data visualizations. Useful for editorial dashboards, reports, and explanatory graphics.",
+  "deck-guizang-editorial": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
+  "deck-open-slide-canvas": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
+  "deck-swiss-international": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
+  "design-consultation": "Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.",
+  "design-md": "Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.",
+  "design-review": "Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.",
+  "digits-fintech-swiss-template": "Swiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.",
+  "doc-kami-parchment": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
+  "editorial-burgundy-principles-template": "Editorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.",
+  "enhance-prompt": "Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.",
+  "faq-page": 'A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering. Use when the brief asks for "FAQ", "help center", "questions", or "support page".',
+  "field-notes-editorial-template": 'Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.',
+  "figma-create-design-system-rules": "Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.",
+  "figma-generate-design": "Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.",
+  "figma-generate-library": "Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.",
+  "figma-implement-design": "Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.",
+  "flutter-animating-apps": "Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.",
+  "frame-data-chart-nyt": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
+  "frame-flowchart-sticky": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
+  "frame-glitch-title": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
+  "frame-light-leak-cinema": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
+  "frame-liquid-bg-hero": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
+  "frame-logo-outro": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
+  "frame-macos-notification": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
+  "frontend-design": "Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.",
+  "frontend-dev": "Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.",
+  "frontend-skill": "Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.",
+  "frontend-slides": "Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.",
+  "gsap-core": "Core GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives.",
+  "gsap-react": "GSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps.",
+  "gsap-scrolltrigger": "GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.",
+  "gsap-timeline": "GSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences.",
+  "hand-drawn-diagrams": "Generate hand-drawn Excalidraw diagrams from a prompt - animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.",
+  "hatch-pet": "Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",
+  "html-ppt-retro-quarterly-review": "Retro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode).",
+  "login-flow": "Mobile login and authentication flow screens",
+  "mockup-device-3d": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
+  "paywall-upgrade-cro": "Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.",
+  "plan-design-review": "Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.",
+  "platform-design": "300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.",
+  "poster-hero": "Vertical poster or Moments-style share image with strong visual impact.",
+  "ppt-keynote": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
+  "release-notes-one-pager": 'Release notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details.',
+  "resume-modern": "Modern minimal resume, single A4 page, ready for print or PDF export.",
+  "screenshots-marketing": "Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.",
+  "shadcn-ui": "Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.",
+  "shader-dev": "GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.",
+  "slack-gif-creator": "Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.",
+  slides: "Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.",
+  "social-reddit-card": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
+  "social-spotify-card": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
+  "social-x-post-card": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
+  "stitch-loop": "Iterative design-to-code feedback loop. Critique adjust ship cycle for tightening visual fidelity between brief and built UI.",
+  "swiftui-design": "SwiftUI skill - anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.",
+  "swiss-creative-mode-template": "Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.",
+  "swiss-user-research-video-template": "Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.",
+  "taste-skill": "High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop.",
+  "theme-factory": "Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.",
+  threejs: "Three.js skills for creating 3D elements and interactive experiences in the browser - scenes, materials, controls, and post-processing.",
+  "ui-skills": "Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.",
+  "ui-ux-pro-max": "Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.",
+  "vfx-text-cursor": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
+  "video-hyperframes": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
+  "web-design-guidelines": "Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.",
+  "weread-year-in-review-video-template": "WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.",
+  wpds: "WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites."
+};
+var ADDITIONAL_OPEN_DESIGN_TEMPLATE_DESCRIPTIONS = {
+  "audio-jingle": "Audio generation skill \u2014 jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.",
+  "blog-post": 'A long-form article / blog post \u2014 masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".',
+  "clinical-case-report": 'Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".',
+  critique: `Run a 5-dimension expert design review on any HTML artifact in the project \u2014 Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0\u201310. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 \u7EF4\u5EA6\u8BC4\u5BA1", "design audit", or "what's wrong with my design".`,
+  "dating-web": 'A consumer-feeling dating / matchmaking dashboard \u2014 left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.',
+  "dcf-valuation": 'Discounted cash flow valuation and intrinsic value analysis for public companies. Use when the brief asks for DCF, fair value, intrinsic value, price target, undervalued or overvalued analysis, or "what is this company worth?"',
+  "digital-eguide": `A two-spread digital e-guide preview \u2014 page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "\u7535\u5B50\u6307\u5357".`,
+  "email-marketing": 'A brand product-launch email \u2014 masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".',
+  "eng-runbook": 'An engineering runbook \u2014 service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions "runbook", "ops doc", "on-call guide", "SRE doc", or "\u8FD0\u7EF4\u624B\u518C".',
+  "flowai-live-dashboard-template": "Team-management dashboard skill in the FlowAI aesthetic \u2014 three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.",
+  "gamified-app": `A multi-frame gamified mobile-app prototype \u2014 three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".`,
+  "github-dashboard": "GitHub repository analytics dashboard \u2014 stars, forks, contributors, issues, pull requests, recent activity, and top contributors. Use when the brief asks for a GitHub repo dashboard, open-source growth report, repository health page, or GitHub analytics view.",
+  "guizang-ppt": '\u751F\u6210"\u7535\u5B50\u6742\u5FD7 \xD7 \u7535\u5B50\u58A8\u6C34"\u98CE\u683C\u7684\u6A2A\u5411\u7FFB\u9875\u7F51\u9875 PPT\uFF08\u5355 HTML \u6587\u4EF6\uFF09\uFF0C\u542B WebGL \u6D41\u4F53\u80CC\u666F\u3001\u886C\u7EBF\u6807\u9898 + \u975E\u886C\u7EBF\u6B63\u6587\u3001\u7AE0\u8282\u5E55\u5C01\u3001\u6570\u636E\u5927\u5B57\u62A5\u3001\u56FE\u7247\u7F51\u683C\u7B49\u6A21\u677F\u3002\u5F53\u7528\u6237\u9700\u8981\u5236\u4F5C\u5206\u4EAB / \u6F14\u8BB2 / \u53D1\u5E03\u4F1A\u98CE\u683C\u7684\u7F51\u9875 PPT\uFF0C\u6216\u63D0\u5230"\u6742\u5FD7\u98CE PPT"\u3001"horizontal swipe deck"\u3001"editorial magazine"\u3001"e-ink presentation"\u65F6\u4F7F\u7528\u3002',
+  "hr-onboarding": `A new-hire onboarding plan as a single page \u2014 first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when\u2026" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "\u5165\u804C".`,
+  "html-ppt": 'HTML PPT Studio \u2014 author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "\u5E7B\u706F\u7247", "\u6F14\u8BB2\u7A3F", "\u505A\u4E00\u4EFD PPT", "\u505A\u4E00\u4EFD slides", a reveal-style HTML deck, a \u5C0F\u7EA2\u4E66 \u56FE\u6587, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "\u5E7B\u706F\u7247", "\u6F14\u8BB2\u7A3F", "\u5206\u4EAB\u7A3F", "\u5C0F\u7EA2\u4E66\u56FE\u6587", "talk slides", "pitch deck", "tech sharing", "technical presentation".',
+  "html-ppt-course-module": "Online-course / workshop module deck \u2014 warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.",
+  "html-ppt-dir-key-nav-minimal": '8 \u9875\u6781\u7B80\u65B9\u5411\u952E keynote \u2014 \u6BCF\u9875\u4E00\u4E2A\u72EC\u7ACB\u5355\u8272\u80CC\u666F\uFF08\u975B / \u5976 / \u7EDB / \u7FE0 / \u7070 / \u7D2B / \u767D / \u70AD\uFF09\uFF0C\u5404\u81EA\u914D\u8272\uFF0C160px display \u6807\u9898 + 4px \u77ED\u7C97 accent \u7EBF\u5206\u9694\u3001\u7BAD\u5934 \u2192 \u524D\u7F00\u7684 Mono \u5217\u8868\u3001\u5DE6\u4E0B \u2190 \u2192 kbd \u63D0\u793A + \u53F3\u4E0B\u9875\u7801\u3001\u5DE8\u5927\u547C\u5438\u7559\u767D\u3002\u9002\u5408"\u6709\u8BDD\u8981\u8BF4\u4F46\u6CA1\u4EC0\u4E48\u53EF\u770B"\u7684 keynote\u3001launch\u3001\u516C\u5F00\u6F14\u8BB2\u3002',
+  "html-ppt-hermes-cyber-terminal": "\u6697\u7EC8\u7AEF honest-review deck \u2014 #0a0c10 \u9ED1\u5E95 + 56px \u8D5B\u535A\u7F51\u683C + CRT \u6697\u89D2 + \u626B\u63CF\u7EBF\u3001\u7A97\u53E3\u7EA2\u7EFF\u706F chrome\u3001`$ prompt` \u547D\u4EE4\u884C\u6807\u9898\u3001\u8584\u8377\u7EFF #7ed3a4 \u5927\u5B57\u3001JetBrains Mono\u3001stroke-only \u67F1\u72B6\u56FE\u3001blinking \u5149\u6807\u3001\u7425\u73C0/\u7EFF/\u7EA2\u4E09\u6863 tag\u3001\u6697\u8272\u4EE3\u7801\u5757\u3002\u9002\u5408 CLI / agent / dev tool \u6D4B\u8BC4\uFF08\u542B trace\u3001diff\u3001benchmark\uFF09\u3002",
+  "html-ppt-knowledge-arch-blueprint": "\u5976\u6CB9\u84DD\u56FE\u67B6\u6784 deck \u2014 \u5976\u6CB9\u7EB8 #F0EAE0 \u5E95\u8272 + \u5355\u4E00\u9508\u7EA2 #B5392A \u9AD8\u4EAE\u300148px \u84DD\u56FE\u7F51\u683C mask\u30012px \u9ED1\u8FB9\u786C\u5361\u7247\u3001pipeline \u6B65\u9AA4\u76D2\uFF08\u5176\u4E2D\u4E00\u4E2A\u62AC\u9AD8\uFF09\u3001\u53F3\u4FA7\u9508\u7EA2 insight callout\u3001Playfair \u886C\u7EBF\u5927\u5B57\u3001SVG \u865A\u7EBF\u53CD\u9988\u73AF\u3002\u96F6\u6E10\u53D8\u96F6\u8F6F\u9634\u5F71\uFF0C\u8BA4\u771F\u4E14\u5370\u5237\u53CB\u597D\u3002",
+  "html-ppt-obsidian-claude-gradient": "GitHub \u6697\u7D2B\u6E10\u53D8 deck \u2014 GitHub-dark #0d1117 + \u7D2B\u84DD radial \u73AF\u5883\u5149 + 60px \u7F51\u683C mask\u3001\u5C45\u4E2D\u5E03\u5C40\u3001\u7D2B\u8272 pill \u6807\u7B7E\u3001\u4E09\u8272\u6E10\u53D8\u6807\u9898\uFF08#a855f7\u2192#60a5fa\u2192#34d399\uFF09\u3001GitHub \u98CE\u4EE3\u7801 palette\u3001\u7D2B\u8272\u5DE6\u8FB9\u6846\u9AD8\u4EAE\u5757\u3002\u9002\u5408\u5F00\u53D1\u8005\u5DE5\u4F5C\u6D41 / MCP / Agent / dev tool \u6559\u7A0B\uFF0C\u7C7B\u4F3C GitHub Blog / Linear Changelog\u3002",
+  "html-ppt-pitch-deck": "Investor-ready 10-slide HTML pitch deck \u2014 white + blue\u2192purple gradient hero, big numbers, traction bar chart, $4.5M-style ask page. Use when the user wants a fundraising deck, seed-round pitch, or VC meeting slides.",
+  "html-ppt-presenter-mode-reveal": '\u6F14\u8BB2\u8005\u6A21\u5F0F\u4E13\u7528 deck \u2014 tokyo-night \u9ED8\u8BA4\u4E3B\u9898\uFF0C5 \u5957\u4E3B\u9898 T \u952E\u5207\u6362\uFF0C\u6BCF\u9875\u5E26 150-300 \u5B57\u9010\u5B57\u7A3F\u793A\u4F8B\uFF08<aside class="notes">\uFF09\uFF0C\u6309 S \u6253\u5F00 popup\uFF08CURRENT / NEXT / SCRIPT / TIMER \u56DB\u5F20\u78C1\u5438\u5361\u7247\uFF09\u3002\u7528\u4E8E\u6280\u672F\u5206\u4EAB\u3001\u516C\u5F00\u6F14\u8BB2\u3001\u8BFE\u7A0B\u8BB2\u89E3\uFF0C\u6015\u5FD8\u8BCD\u6216\u8981\u63D0\u8BCD\u5668\u7684\u573A\u666F\u3002',
+  "html-ppt-product-launch": "Launch keynote deck \u2014 dark hero + light content, warm orange\u2192peach accent, feature cards, pricing tiers, CTA. Use when announcing a product, launching a feature, or doing a keynote-style reveal.",
+  "html-ppt-taste-brutalist": "16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode).",
+  "html-ppt-taste-editorial": "16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.",
+  "html-ppt-tech-sharing": "Conference / internal tech-talk deck \u2014 GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharing sessions, conference talks, and code-heavy walkthroughs.",
+  "html-ppt-testing-safety-alert": "\u7EA2\u7425\u73C0\u8B66\u793A deck \u2014 \u9876/\u5E95 45\xB0 \u7EA2\u9ED1 hazard \u6761\u7EB9\u3001\u7EA2\u8272\u5220\u9664\u7EBF\u5426\u5B9A\u6807\u9898\u3001L1/L2/L3 \u7EFF/\u7425\u73C0/\u7EA2 tier \u5361\u7247\u3001\u5706\u70B9\u72B6\u6001 alert box\u3001policy-yaml \u4EE3\u7801\u5757\uFF08\u7EA2\u5DE6\u8FB9\u6846 + bad \u5173\u952E\u8BCD\u9AD8\u4EAE\uFF09\u3001\u7EA2\u7EFF checklist\u3001Q1 \u4E8B\u6545\u5806\u53E0\u67F1\u72B6\u56FE\u3002\u9002\u5408\u5B89\u5168 / \u98CE\u9669 / \u4E8B\u6545\u590D\u76D8 / \u7EA2\u961F / \u4E0A\u7EBF\u524D AI \u8BC4\u5BA1 / policy-as-code\u3002",
+  "html-ppt-weekly-report": "Team weekly / status-update deck \u2014 corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table. Use for \u5468\u62A5, business reviews, team status updates, and exec dashboards.",
+  "html-ppt-xhs-pastel-card": '\u67D4\u548C\u9A6C\u5361\u9F99\u6162\u751F\u6D3B deck \u2014 \u5976\u6CB9 #fef8f1 \u5E95 + \u4E09\u4E2A\u67D4\u5149 blob\u3001Playfair \u659C\u4F53\u886C\u7EBF display \u6807\u9898\u6DF7 sans \u6B63\u6587\u300128px \u5706\u89D2\u9A6C\u5361\u9F99\u5361\u7247\uFF08\u6843 / \u8584\u8377 / \u5929 / \u7D2B / \u67E0 / \u73AB\uFF09\u3001Playfair \u659C\u4F53 01-04 \u5E8F\u53F7\u3001SVG donut \u56FE\u3001chip+page \u9876\u680F\u3002\u9002\u5408\u751F\u6D3B\u65B9\u5F0F / \u4E2A\u4EBA\u6210\u957F / \u6162\u751F\u6D3B / \u60C5\u7EEA\u7C7B\u5185\u5BB9\uFF0C"\u6742\u5FD7\u3001\u624B\u4F5C\u3001\u4E0D\u592A\u79D1\u6280"\u7684\u611F\u89C9\u3002',
+  "html-ppt-xhs-post": "\u5C0F\u7EA2\u4E66 / Instagram \u98CE 9 \u9875 3:4 \u7AD6\u7248\u56FE\u6587\uFF08810\xD71080\uFF09\u2014 \u6696\u8272 pastel\u3001\u865A\u7EBF sticker \u5361\u7247\u3001\u5E95\u90E8\u9875\u7801\u70B9\u70B9\u3002\u7528\u4E8E\u53D1\u5C0F\u7EA2\u4E66\u56FE\u6587\u3001Instagram carousel\u3001\u54C1\u724C\u79CD\u8349\u5185\u5BB9\u3002",
+  "html-ppt-xhs-white-editorial": "\u767D\u5E95\u6742\u5FD7\u98CE deck \u2014 \u7EAF\u767D\u80CC\u666F + \u9876\u90E8 10 \u8272\u5F69\u8679 bar\u300180-110px display \u6807\u9898\u3001\u7D2B\u2192\u84DD\u2192\u7EFF\u2192\u6A59\u2192\u7C89\u6E10\u53D8\u6587\u5B57\u3001\u9A6C\u5361\u9F99\u8F6F\u5361\u7247\u7EC4\uFF08\u7C89/\u7D2B/\u84DD/\u7EFF/\u6A59\uFF09\u3001\u9ED1\u5E95\u767D\u5B57 .focus pill\u3001\u5F15\u7528\u5927\u5757\u3002\u540C\u65F6\u9002\u5408\u53D1\u5C0F\u7EA2\u4E66\u56FE\u6587 + \u6A2A\u7248 PPT \u53CC\u7528\u3002",
+  "html-ppt-zhangzara-8-bit-orbit": "8-Bit Orbit \u2014 Pixel-art neon arcade aesthetic on a deep navy void. Anything that should feel like a CRT screen at 2am: cyberpunk, gaming, web3, indie dev tools, hackathon demos.",
+  "html-ppt-zhangzara-biennale-yellow": "Biennale Yellow \u2014 Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients. Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives.",
+  "html-ppt-zhangzara-block-frame": "BlockFrame \u2014 Neobrutalist deck with pastel-neon color blocks and chunky black borders. Anything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns.",
+  "html-ppt-zhangzara-blue-professional": "Blue Professional \u2014 Cream paper background with electric cobalt blue accents; clean modern professional. Anything that should feel modern-considered and lightly authoritative: B2B SaaS pitches, consulting deliverables, advisory updates, investor reports.",
+  "html-ppt-zhangzara-bold-poster": "Bold Poster \u2014 Editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent. Anything that should land like a magazine cover: brand manifestos, founder vision decks, editorial / cultural pitches, creative reviews.",
+  "html-ppt-zhangzara-broadside": "Broadside \u2014 Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements.",
+  "html-ppt-zhangzara-capsule": "Capsule \u2014 Modular pill-shaped cards on warm bone with a full pastel-pop palette. Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials.",
+  "html-ppt-zhangzara-cartesian": "Cartesian \u2014 Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried. Anything that should feel quiet, considered, and grown-up: investment theses, white papers, advisory work, longform research, gallery / cultural decks.",
+  "html-ppt-zhangzara-cobalt-grid": "Cobalt Grid \u2014 Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules. Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report.",
+  "html-ppt-zhangzara-coral": "Coral \u2014 Cream and coral on near-black, set in oversized Bebas Neue. Anything that should feel warm-graphic and editorial: fashion, beauty, fitness, F&B, lifestyle brands, agency credentials.",
+  "html-ppt-zhangzara-creative-mode": "Creative Mode \u2014 Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display. Anything that should feel design-led and confident: creative agency pitches, design studio decks, ad shop credentials, brand creative reviews, art-direction reviews.",
+  "html-ppt-zhangzara-daisy-days": "Daisy Days \u2014 Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm. Anything that should feel friendly, soft, and joyful: educational content, kids and family, wellness programs, community workshops, creator portfolios for craft / illustration.",
+  "html-ppt-zhangzara-editorial-tri-tone": "Editorial Tri-Tone \u2014 Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif. Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews.",
+  "html-ppt-zhangzara-grove": "Grove \u2014 Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent. Anything that should feel organic, considered, and grown-up: sustainability and wellness brands, outdoor / nature products, wineries and restaurants, literary or arts decks, advisory deliverables, bilingual EN/CN reports.",
+  "html-ppt-zhangzara-long-table": "Long Table \u2014 Warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, italic Fraunces, and pill-shaped outlined buttons. Anything that should feel like a warm, intimate, modern hospitality / community brand: supper clubs, dinner series, small restaurants, creative-studio events, membership pitches, lifestyle and wine brands.",
+  "html-ppt-zhangzara-mat": "Mat \u2014 Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks.",
+  "html-ppt-zhangzara-monochrome": "Monochrome \u2014 Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all. Anything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN reports.",
+  "html-ppt-zhangzara-neo-grid-bold": "Neo-Grid Bold \u2014 Editorial neo-brutalism with a single neon yellow accent on off-white paper. Anything that should feel confident and editorial-graphic: design-led pitches, brand work, founder talks, conference keynotes.",
+  "html-ppt-zhangzara-peoples-platform": "People's Platform (Block & Bold) \u2014 Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush. Anything that should feel honest, loud, and graphic: cultural commentary, manifestos, civic and community decks, design talks, campaign pitches.",
+  "html-ppt-zhangzara-pin-and-paper": "Pin & Paper \u2014 Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture. Anything that should feel hand-crafted, warm, and literary: qualitative research findings, founder reflections, longform brand stories, workshop debriefs.",
+  "html-ppt-zhangzara-pink-script": "Pink Script \u2014 After Hours \u2014 Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury. Anything that should feel nocturnal, intentional, and a little luxe: fashion brand decks, creator personal brands, after-hours / nightlife / spirits launches, luxury product reveals, editorial features.",
+  "html-ppt-zhangzara-playful": "Playful \u2014 Sun-warm peach background with Syne display: a friendly indie launch deck. Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks.",
+  "html-ppt-zhangzara-raw-grid": "Raw Grid \u2014 Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette. Anything that should feel direct and graphic-confident: founder pitches, accelerator demos, brand decks, indie launches, creator portfolios.",
+  "html-ppt-zhangzara-retro-windows": "Retro Windows \u2014 Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia. Anything that should feel knowingly nostalgic: retro gaming, Y2K-aesthetic brands, creator portfolios with a 90s vibe, tech-history talks, deliberately tongue-in-cheek decks.",
+  "html-ppt-zhangzara-sakura-chroma": "Sakura Chroma \u2014 Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports.",
+  "html-ppt-zhangzara-scatterbrain": "Scatterbrain \u2014 Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack. Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews.",
+  "html-ppt-zhangzara-signal": "Signal \u2014 Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight. Anything that should feel weighty, considered, and credibly institutional: investor decks, board presentations, consulting deliverables, legal / policy briefs, advisory pitches.",
+  "html-ppt-zhangzara-soft-editorial": "Soft Editorial \u2014 Cormorant Garamond serif on warm paper with sage, blush, and lemon accents. Anything that should feel literary, elegant, and unhurried: editorial features, longform brand stories, gallery / museum decks, advisory deliverables, wedding / lifestyle media, founder essays.",
+  "html-ppt-zhangzara-stencil-tablet": "Stencil & Tablet \u2014 Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand. Anything that should feel archival, tactile, and weighty-graphic: museum and cultural-institution decks, art / architecture brands, longform research, heritage and craft brands, manifestos.",
+  "html-ppt-zhangzara-studio": "Studio \u2014 Black canvas with electric-yellow type; high-voltage design studio aesthetic. Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work.",
+  "html-ppt-zhangzara-vellum": "Vellum \u2014 Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic. Anything that should feel scholarly, literary, and quietly intelligent: research synthesis, white papers, academic and policy briefs, advisory deliverables, longform editorial pieces, founder reflections.",
+  hyperframes: "Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.",
+  "ib-pitch-book": "Investment-banking pitch book for strategic alternatives \u2014 trading comps, precedent transactions, valuation football field, DCF sensitivity, strategic-options matrix, process recommendation. Built by adapting `assets/template.html` so IB-specific chrome, disclosure bands, and source labels are preserved. Use for Board / sell-side discussion materials. Not a VC fundraising deck (see html-ppt-pitch-deck). Workflow adapted from Anthropic financial-services Pitch Agent (Apache-2.0).",
+  "image-poster": "Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic \u2014 the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.",
+  invoice: 'A printable invoice page \u2014 sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions "invoice", "bill", "billing statement", or "\u53D1\u7968".',
+  "kami-deck": "Produce a print-grade slide deck in the kami (\u7D19 / \u7EB8) design system \u2014 warm parchment background (or ink-blue for cover / chapter slides), serif at one weight, ink-blue accent \u2264 5% per slide, no italic. Horizontal magazine swipe pagination (\u2190/\u2192 \xB7 wheel \xB7 swipe \xB7 ESC overview). One self-contained HTML file, zero dependencies beyond Google Fonts.",
+  "kami-landing": "Produce a print-grade single-page kami (\u7D19 / \u7EB8) document \u2014 warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN \xB7 zh-CN \xB7 ja). One self-contained HTML file, zero dependencies.",
+  "kanban-board": 'Kanban / task board with columns (To do / In progress / In review / Done), draggable-looking cards, assignee avatars, swimlanes, and a top filter bar. Use when the brief mentions "kanban", "task board", "sprint board", "trello", "\u770B\u677F".',
+  last30days: "Recent community and social trend research over the last 30 days. Use when the brief asks what people are saying now, recent sentiment, community reactions, social proof, launch reaction, trend scan, or last-30-days context.",
+  "live-artifact": "Create refreshable, auditable Open Design artifacts backed by connector or local data. Trigger when the user asks for live dashboards, refreshable reports, synced views, or reusable data-backed artifacts.",
+  "live-dashboard": "Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table \u2014 wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.",
+  "magazine-poster": 'An editorial-style poster \u2014 newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".',
+  "meeting-notes": 'Meeting notes page \u2014 title bar with attendees, agenda checklist, decisions block, action items table with owners + dates, and a "next meeting" footer. Use when the brief mentions "meeting notes", "minutes", "1:1 notes", "all-hands recap", or "\u4F1A\u8BAE\u7EAA\u8981".',
+  "mobile-onboarding": 'A multi-screen mobile onboarding flow rendered as three phone frames side by side \u2014 splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "\u79FB\u52A8\u7AEF\u5F15\u5BFC".',
+  "motion-frames": 'A single-frame motion-design composition with looping CSS animations \u2014 rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.',
+  "open-design-landing": "Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / \xC9tudes editorial collage) \u2014 the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.",
+  "open-design-landing-deck": "Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) \u2014 Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (\u2190/\u2192, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.",
+  "orbit-general": `Open Orbit briefing skill \u2014 selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, \u98DE\u4E66, Calendar, Gmail, Drive, Sentry, Vercel, \u2026) and renders a single adaptive bento-grid dashboard at the top of "\u6211\u7684\u8BBE\u8BA1". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, \u2026) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against the user's live connector data.`,
+  "orbit-github": "Open Orbit briefing skill \u2014 selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live GitHub data.",
+  "orbit-gmail": "Open Orbit briefing skill \u2014 selected by the Orbit pipeline when Gmail is the user's only connected connector, or when the user explicitly scopes their daily digest to Gmail. Pulls the past 24 hours of inbox activity (replies awaited, mentions, cc, auto- categorized bulk) from the user's authenticated Gmail connection and renders the digest as the Orbit Daily Digest email opened inside Gmail's reading view. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Gmail data.",
+  "orbit-linear": "Open Orbit briefing skill \u2014 selected by the Orbit pipeline when Linear is the user's only connected connector, or when the user explicitly scopes their daily digest to Linear. Pulls the past 24 hours of issue movement, status changes, assignments, and cycle progress from the user's authenticated Linear connection and renders the digest in Linear's native Inbox + cycle-progress visual language. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Linear data.",
+  "orbit-notion": "Open Orbit briefing skill \u2014 selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits, comments, mentions, and database row changes from the user's authenticated Notion connection and renders the digest as a native Notion page (callout / toggle / database table primitives). This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Notion data.",
+  "pm-spec": 'Product spec / PRD as a single page \u2014 problem, success metrics, scope, user stories, design notes, rollout plan, open questions. Use when the brief mentions "PRD", "spec", "product spec", "feature brief", or "\u9700\u6C42\u6587\u6863".',
+  "pricing-page": 'A standalone pricing page \u2014 header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.',
+  "replit-deck": `Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) \u2014 each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals \u2014 when the user explicitly wants "Replit Slides style".`,
+  "saas-landing": 'Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".',
+  "simple-deck": "Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material \u2014 when you don't need the magazine aesthetic of `magazine-web-ppt`.",
+  "social-carousel": 'A three-card social-media carousel laid out as 1080\xD71080 squares \u2014 three cinematic, on-brand panels with display headlines that connect across the series ("onwards." \u2192 "to the next one." \u2192 "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "\u4E09\u8FDE\u53D1".',
+  "social-media-dashboard": 'Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.',
+  "social-media-matrix-tracker-template": "\u793E\u5A92\u77E9\u9635\u6570\u636E\u8FFD\u8E2A\u9762\u677F\u6A21\u677F\uFF08Social Media Matrix Tracker\uFF09\u3002 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.",
+  "sprite-animation": 'A pixel / sprite-style animated explainer slide \u2014 full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video \u2014 looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "\u7CBE\u7075\u56FE\u52A8\u753B", "\u50CF\u7D20\u52A8\u753B", or "\u590D\u53E4\u52A8\u753B".',
+  "team-okrs": 'OKR tracker page \u2014 quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this quarter at a glance" sidebar. Use when the brief mentions "OKRs", "key results", "objectives", or "\u76EE\u6807".',
+  "trading-analysis-dashboard-template": "Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.",
+  tweaks: 'Wrap any HTML artifact with a side panel of live, parameterized controls \u2014 accent color, type scale, density, motion, theme \u2014 that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "\u5B9E\u65F6\u8C03\u53C2".',
+  "video-shortform": "Short-form video generation skill \u2014 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.",
+  "waitlist-page": "Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.",
+  "web-prototype": "General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.",
+  "web-prototype-taste-brutalist": "Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).",
+  "web-prototype-taste-soft": "Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4\u20138 of `taste-skill`.",
+  "wireframe-sketch": `A hand-drawn wireframe exploration \u2014 graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "\u8349\u7A3F", or "\u624B\u7ED8\u539F\u578B".`,
+  "x-research": "X/Twitter public sentiment research for recent market, company, product, or community discourse. Use when the brief asks what people are saying on X, Twitter sentiment, CT sentiment, public opinion, expert posts, or social reaction around a stock, sector, company, product, or market event."
+};
+var ADDITIONAL_OPEN_DESIGN_DESIGN_SYSTEM_DESCRIPTIONS = {
+  agentic: "Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.",
+  airbnb: "Travel marketplace. Warm coral accent, photography-driven, rounded UI.",
+  airtable: "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.",
+  ant: "Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.",
+  application: "App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.",
+  arc: '"The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.',
+  artistic: "High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.",
+  "atelier-zero": "A magazine-grade, collage-driven visual system: warm paper canvas, surreal",
+  bento: "Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.",
+  binance: "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.",
+  bmw: "Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.",
+  "bmw-m": "Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.",
+  bold: "Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.",
+  brutalism: "Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.",
+  bugatti: "Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.",
+  cafe: "Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.",
+  cal: "Open-source scheduling. Clean neutral UI, developer-oriented simplicity.",
+  canva: "Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.",
+  cisco: "Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.",
+  claude: "Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.",
+  clay: "Creative agency. Organic shapes, soft gradients, art-directed layout.",
+  claymorphism: "Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.",
+  clean: "Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.",
+  clickhouse: "Fast analytics database. Yellow-accented, technical documentation style.",
+  cohere: "Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.",
+  coinbase: "Crypto exchange. Clean blue identity, trust-focused, institutional feel.",
+  colorful: "Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.",
+  composio: "Tool integration platform. Modern dark with colorful integration icons.",
+  contemporary: "Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.",
+  corporate: "Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.",
+  cosmic: "Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.",
+  creative: "Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.",
+  cursor: "AI-first code editor. Sleek dark interface, gradient accents.",
+  default: "A clean, product-oriented default. Use when the brief doesn't call for a",
+  discord: "Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.",
+  dithered: "Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.",
+  doodle: "Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.",
+  dramatic: "High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.",
+  duolingo: "Language-learning platform. Bright owl green, chunky shadows, gamified joy.",
+  elegant: "Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.",
+  elevenlabs: "AI voice platform. Dark cinematic UI, audio-waveform aesthetics.",
+  energetic: "Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.",
+  enterprise: "Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.",
+  expo: "React Native platform. Dark theme, tight letter-spacing, code-centric.",
+  expressive: "Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.",
+  fantasy: "Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.",
+  ferrari: "Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.",
+  figma: "Collaborative design tool. Vibrant multi-color, playful yet professional.",
+  flat: "Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.",
+  framer: "Website builder. Bold black and blue, motion-first, design-forward.",
+  friendly: "Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.",
+  futuristic: "Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.",
+  github: "Code-forward platform. Functional density, blue-on-white precision, Primer foundations.",
+  glassmorphism: "Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.",
+  gradient: "Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.",
+  hashicorp: "Infrastructure automation. Enterprise-clean, black and white.",
+  hud: "Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.",
+  huggingface: "ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.",
+  ibm: "Enterprise technology. Carbon design system, structured blue palette.",
+  intercom: "Customer messaging. Friendly blue palette, conversational UI patterns.",
+  kami: "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks \u2014 anything that should feel like high-quality print rather than UI. Multilingual by design (EN \xB7 zh-CN \xB7 ja).",
+  kraken: "Crypto trading. Purple-accented dark UI, data-dense dashboards.",
+  lamborghini: "Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.",
+  levels: "Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.",
+  "linear-app": "Project management. Ultra-minimal, precise, purple accent.",
+  lingo: "Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.",
+  loom: "Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.",
+  lovable: "AI full-stack builder. Playful gradients, friendly dev aesthetic.",
+  luxury: "High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.",
+  mastercard: "Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.",
+  material: "Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.",
+  meta: "Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.",
+  minimal: "Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.",
+  minimax: "AI model provider. Bold dark interface with neon accents.",
+  mintlify: "Documentation platform. Clean, green-accented, reading-optimized.",
+  miro: "Visual collaboration. Bright yellow accent, infinite canvas aesthetic.",
+  "mission-control": "Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.",
+  "mistral-ai": "Open-weight LLM provider. French-engineered minimalism, purple-toned.",
+  modern: "Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.",
+  mongodb: "Document database. Green leaf branding, developer documentation focus.",
+  neobrutalism: "Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.",
+  neon: "Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.",
+  neumorphism: "Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.",
+  nike: "Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.",
+  notion: "All-in-one workspace. Warm minimalism, serif headings, soft surfaces.",
+  nvidia: "GPU computing. Green-black energy, technical power aesthetic.",
+  ollama: "Run LLMs locally. Terminal-first, monochrome simplicity.",
+  openai: "Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.",
+  "opencode-ai": "AI coding platform. Developer-centric dark theme.",
+  pacman: "Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.",
+  paper: "Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.",
+  perplexity: "Conversational AI search engine. Deep-dark canvas, sharp typography, single violet accent, dense information hierarchy.",
+  perspective: "Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.",
+  pinterest: "Visual discovery. Red accent, masonry grid, image-first.",
+  playstation: "Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.",
+  posthog: "Product analytics. Playful hedgehog branding, developer-friendly dark UI.",
+  premium: "Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.",
+  professional: "Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.",
+  publication: "Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.",
+  raycast: "Productivity launcher. Sleek dark chrome, vibrant gradient accents.",
+  refined: "Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.",
+  renault: "French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.",
+  replicate: "Run ML models via API. Clean white canvas, code-forward.",
+  resend: "Email API. Minimal dark theme, monospace accents.",
+  retro: "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.",
+  revolut: "Digital banking. Sleek dark interface, gradient cards, fintech precision.",
+  runwayml: "AI video generation. Cinematic dark UI, media-rich layout.",
+  sanity: "Headless CMS. Red accent, content-first editorial layout.",
+  sentry: "Error monitoring. Dark dashboard, data-dense, pink-purple accent.",
+  shadcn: "Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.",
+  shopify: "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.",
+  simple: "Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.",
+  skeumorphism: "Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.",
+  slack: "Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.",
+  sleek: "Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.",
+  spacex: "Space technology. Stark black and white, full-bleed imagery, futuristic.",
+  spacious: "Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.",
+  spotify: "Music streaming. Vibrant green on dark, bold type, album-art-driven.",
+  starbucks: "Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.",
+  storytelling: "Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.",
+  stripe: "Payment infrastructure. Signature purple gradients, weight-300 elegance.",
+  supabase: "Open-source Firebase alternative. Dark emerald theme, code-first.",
+  superhuman: "Fast email client. Premium dark UI, keyboard-first, purple glow.",
+  tesla: "Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.",
+  tetris: "Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.",
+  theverge: "Tech editorial media. Acid-mint and ultraviolet accents, Manuka display, rave-flyer story tiles.",
+  "together-ai": "Open-source AI infrastructure. Technical, blueprint-style design.",
+  "totality-festival": 'A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse \u2014 obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.',
+  uber: "Mobility platform. Bold black and white, tight type, urban energy.",
+  urdu: "Urdu-first digital experiences with native RTL support,Nastaliq typography, and bilingual harmony.",
+  vercel: "Frontend deployment. Black and white precision, Geist font.",
+  vibrant: "Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.",
+  vintage: "1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.",
+  vodafone: "Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands.",
+  voltagent: "AI agent framework. Void-black canvas, emerald accent, terminal-native.",
+  warp: "Modern terminal. Dark IDE-like interface, block-based command UI.",
+  webex: "Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.",
+  webflow: "Visual web builder. Blue-accented, polished marketing site aesthetic.",
+  wechat: "Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.",
+  wired: "Tech magazine. Paper-white broadsheet density, custom serif display, mono kickers, ink-blue links.",
+  wise: "Money transfer. Bright green accent, friendly and clear.",
+  "x-ai": "Elon Musk's AI lab. Stark monochrome, futuristic minimalism.",
+  xiaohongshu: "Lifestyle UGC social platform. Singular brand red, generous radius, content-first.",
+  zapier: "Automation platform. Warm orange, friendly illustration-driven."
+};
+var OPEN_DESIGN_SKILL_ACRONYMS = /* @__PURE__ */ new Set([
+  "ai",
+  "css",
+  "d3",
+  "doc",
+  "docx",
+  "faq",
+  "gif",
+  "gsap",
+  "hig",
+  "html",
+  "md",
+  "pdf",
+  "ppt",
+  "pptx",
+  "ui",
+  "ux",
+  "vfx",
+  "wpds"
+]);
+function titleCaseOpenDesignSlug(slug) {
+  return slug.split("-").map((part) => {
+    if (OPEN_DESIGN_SKILL_ACRONYMS.has(part)) {
+      return part.toUpperCase();
+    }
+    if (/^[0-9]+d$/u.test(part)) {
+      return part.toUpperCase();
+    }
+    return `${part.charAt(0).toUpperCase()}${part.slice(1)}`;
+  }).join(" ");
+}
+function addTarget(targets, target) {
+  if (!targets.includes(target)) {
+    targets.push(target);
+  }
+}
+function inferOpenDesignSkillTargets(slug) {
+  const targets = [];
+  if (/video|remotion|sora|kling|lip|youtube|gif|stitch|hyperframes|orbit|speech|audio|music/u.test(
+    slug
+  )) {
+    addTarget(targets, "intro-video");
+  }
+  if (/ppt|pptx|slides|deck|keynote|presentation/u.test(slug)) {
+    addTarget(targets, "presentation");
+  }
+  if (/image|imagen|photo|illustration|poster|card|screenshot|frame|mockup|art|canvas|sticker|tryon|visual|creative|social|twitter|xiaohongshu/u.test(
+    slug
+  )) {
+    addTarget(targets, "image");
+    addTarget(targets, "poster");
+    addTarget(targets, "website");
+    addTarget(targets, "presentation");
+  }
+  if (/frontend|ui|ux|web|website|shadcn|three|gsap|shader|flutter|swift|app|login|paywall|figma|platform|browser/u.test(
+    slug
+  )) {
+    addTarget(targets, "website");
+    addTarget(targets, "mobile-app-design");
+    addTarget(targets, "dashboard-design");
+  }
+  if (/doc|pdf|docx|report|article|copy|brand|brief|resume|faq|research|notes|markdown|release|guidelines|review/u.test(
+    slug
+  )) {
+    addTarget(targets, "report");
+    addTarget(targets, "docs-design");
+    addTarget(targets, "website");
+    addTarget(targets, "presentation");
+  }
+  if (targets.length === 0) {
+    return ["presentation", "website", "poster", "report", "docs-design"];
+  }
+  return targets;
+}
+function inferOpenDesignSkillOutputKinds(slug) {
+  const outputKinds = [];
+  if (/image|imagen|photo|illustration|poster|card|screenshot|frame|mockup|art|canvas|sticker|tryon|visual/u.test(
+    slug
+  )) {
+    outputKinds.push("image");
+  }
+  if (/video|remotion|sora|kling|lip|youtube|gif|stitch|hyperframes|orbit/u.test(
+    slug
+  )) {
+    outputKinds.push("video");
+  }
+  if (/audio|speech|music/u.test(slug)) {
+    outputKinds.push("audio");
+  }
+  if (/ppt|pptx|slides|deck|keynote|presentation/u.test(slug)) {
+    outputKinds.push("presentation");
+  }
+  return outputKinds.length > 0 ? outputKinds : void 0;
+}
+function createOpenDesignSkillEntry(slug) {
+  const name = titleCaseOpenDesignSlug(slug);
+  const outputKinds = inferOpenDesignSkillOutputKinds(slug);
+  const primaryOutputKind = outputKinds?.[0];
+  return {
+    id: `od:skill:${slug}`,
     kind: "skill",
-    name: "Data Report",
-    description: "Turns source-backed data, rankings, metrics, or lists into a concise analytical report.",
-    source: source("skills/data-report/SKILL.md"),
+    name,
+    description: STYLE_OPEN_DESIGN_SKILL_DESCRIPTIONS[slug],
+    source: source(`skills/${slug}/SKILL.md`),
+    targets: inferOpenDesignSkillTargets(slug),
+    tags: slug.split("-").filter((tag) => {
+      return tag.length > 1;
+    }),
+    triggers: [slug, name.toLowerCase()],
+    ...outputKinds && primaryOutputKind ? {
+      outputKinds,
+      primaryOutputKind
+    } : {},
+    executorHints: ["skill-authored"],
+    status: "experimental",
+    priority: -90
+  };
+}
+function inferOpenDesignTemplateTargets(slug) {
+  const targets = [];
+  if (/mobile|phone|app|onboarding|gamified/u.test(slug)) {
+    addTarget(targets, "mobile-app-design");
+  }
+  if (/dashboard|admin|kanban|tracker|matrix|orbit|analytics/u.test(slug)) {
+    addTarget(targets, "dashboard-design");
+    addTarget(targets, "website");
+  }
+  if (/ppt|deck|slides|presentation|keynote/u.test(slug)) {
+    addTarget(targets, "presentation");
+  }
+  if (/poster|image|sprite|wireframe|carousel|social|xhs|motion|video/u.test(slug)) {
+    addTarget(targets, "image");
+    addTarget(targets, "poster");
+    addTarget(targets, "website");
+  }
+  if (/docs|doc|report|runbook|spec|invoice|email|notes|blog|guide|case/u.test(
+    slug
+  )) {
+    addTarget(targets, "report");
+    addTarget(targets, "docs-design");
+    addTarget(targets, "website");
+  }
+  if (targets.length === 0) {
+    return ["website", "presentation", "report"];
+  }
+  return targets;
+}
+function createOpenDesignTemplateEntry(slug, description) {
+  const name = titleCaseOpenDesignSlug(slug);
+  return {
+    id: `od:template:${slug}`,
+    kind: "template",
+    name,
+    description,
+    source: source(`design-templates/${slug}`),
+    targets: inferOpenDesignTemplateTargets(slug),
+    tags: slug.split("-").filter((tag) => {
+      return tag.length > 1;
+    }),
+    triggers: [slug, name.toLowerCase()],
+    status: "experimental",
+    priority: -90
+  };
+}
+function createOpenDesignDesignSystemEntry(slug, description) {
+  const name = titleCaseOpenDesignSlug(slug);
+  return {
+    id: `od:design-system:${slug}`,
+    kind: "design-system",
+    name,
+    description,
+    source: source(`design-systems/${slug}`),
     targets: [
       "presentation",
       "website",
       "dashboard-design",
+      "mobile-app-design",
+      "poster",
       "report",
       "docs-design"
     ],
-    tags: ["analysis", "data", "report", "ranking", "sources", "table"],
-    triggers: ["report", "top 10", "ranking", "metrics", "analysis"],
-    bestFor: ["source-backed reports", "ranked lists", "data summaries"],
-    status: "curated",
-    priority: 40
-  },
+    tags: slug.split("-").filter((tag) => {
+      return tag.length > 1;
+    }),
+    triggers: [slug, name.toLowerCase()],
+    status: "experimental",
+    priority: -90
+  };
+}
+var OPEN_DESIGN_REGISTRY = [
   {
     id: "od:skill:article-magazine",
     kind: "skill",
@@ -7229,17 +7847,18 @@ var OPEN_DESIGN_REGISTRY = [
     status: "curated",
     priority: 16
   },
+  ...STYLE_OPEN_DESIGN_SKILL_SLUGS.map(createOpenDesignSkillEntry),
   {
     id: "od:template:dashboard",
     kind: "template",
     name: "Dashboard",
-    description: "Dense operational dashboard layout for KPIs, lists, filters, and repeated scanning.",
+    description: "Admin or analytics dashboard in a single HTML file with fixed sidebar, top bar, KPI cards, and one or two charts.",
     source: source("design-templates/dashboard"),
     targets: ["website", "dashboard-design", "report"],
     tags: ["dashboard", "analytics", "kpi", "metrics", "operations", "table"],
     triggers: ["dashboard", "analytics", "monitoring", "metrics", "ops"],
     bestFor: ["metric-heavy pages", "status surfaces", "operational summaries"],
-    compatibleWith: ["od:skill:data-report", "od:design-system:dashboard"],
+    compatibleWith: ["od:design-system:dashboard"],
     status: "curated",
     priority: 36
   },
@@ -7247,13 +7866,13 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:finance-report",
     kind: "template",
     name: "Finance Report",
-    description: "Executive report layout with tables, callouts, trend blocks, and source notes.",
+    description: "Quarterly or monthly financial report with masthead KPIs, revenue and burn charts, P&L summary, highlights, and outlook.",
     source: source("design-templates/finance-report"),
     targets: ["presentation", "website", "report"],
     tags: ["report", "finance", "executive", "table", "analysis", "sources"],
     triggers: ["report", "brief", "analysis", "top 10", "finance"],
     bestFor: ["source-backed reports", "executive summaries", "ranked lists"],
-    compatibleWith: ["od:skill:data-report", "od:design-system:dashboard"],
+    compatibleWith: ["od:design-system:dashboard"],
     status: "curated",
     priority: 34
   },
@@ -7261,7 +7880,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:docs-page",
     kind: "template",
     name: "Docs Page",
-    description: "Documentation-style page layout for structured explanations, navigation, and examples.",
+    description: "Documentation page with inline-start navigation, scrollable article body, and inline-end table of contents.",
     source: source("design-templates/docs-page"),
     targets: ["website", "docs-design", "report"],
     tags: ["docs", "explanation", "guide", "structured", "reference"],
@@ -7275,7 +7894,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:mobile-app",
     kind: "template",
     name: "Mobile App Design",
-    description: "Single-screen mobile UI design rendered in a realistic iPhone device frame.",
+    description: "Mobile app screen rendered inside a pixel-accurate iPhone 15 Pro frame using reusable screen archetypes.",
     source: source("design-templates/mobile-app"),
     targets: ["mobile-app-design"],
     tags: ["mobile", "app", "ios", "design", "prototype", "phone"],
@@ -7296,16 +7915,13 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:html-ppt-graphify-dark-graph",
     kind: "template",
     name: "Graphify Dark Graph",
-    description: "Dark graph-heavy HTML presentation template for data stories and technical briefings.",
+    description: "Dark knowledge-graph deck with midnight gradients, force-graph cover visuals, command-line highlights, and glass-morphism cards.",
     source: source("design-templates/html-ppt-graphify-dark-graph"),
     targets: ["presentation", "report"],
     tags: ["presentation", "dark", "graph", "data", "technical", "metrics"],
     triggers: ["deck", "presentation", "graph", "dark", "data story"],
     bestFor: ["data presentations", "technical executive briefings"],
-    compatibleWith: [
-      "od:skill:data-report",
-      "od:design-system:trading-terminal"
-    ],
+    compatibleWith: ["od:design-system:trading-terminal"],
     status: "curated",
     priority: 32
   },
@@ -7313,7 +7929,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:html-ppt-zhangzara-retro-zine",
     kind: "template",
     name: "Zhangzara Retro Zine",
-    description: "Expressive retro editorial HTML presentation template with zine-like composition.",
+    description: "Retro editorial zine presentation template with expressive composition, tactile paper energy, and bold magazine-like rhythm.",
     source: source("design-templates/html-ppt-zhangzara-retro-zine"),
     targets: ["presentation", "poster", "report"],
     tags: ["presentation", "retro", "zine", "editorial", "expressive"],
@@ -7334,13 +7950,13 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:weekly-update",
     kind: "template",
     name: "Weekly Update",
-    description: "Compact update deck/page structure for highlights, risks, next steps, and metrics.",
+    description: "Single-file horizontal-swipe weekly team update deck for shipped work, in-flight work, blockers, metrics, and asks.",
     source: source("design-templates/weekly-update"),
     targets: ["presentation", "report", "docs-design"],
     tags: ["update", "status", "briefing", "report", "metrics"],
     triggers: ["weekly", "status", "update", "briefing"],
     bestFor: ["team updates", "status reports", "progress summaries"],
-    compatibleWith: ["od:skill:data-report", "od:design-system:dashboard"],
+    compatibleWith: ["od:design-system:dashboard"],
     status: "curated",
     priority: 24
   },
@@ -7348,7 +7964,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:template:web-prototype-taste-editorial",
     kind: "template",
     name: "Taste Editorial Web Prototype",
-    description: "Editorial website prototype direction with image-led sections and strong copy hierarchy.",
+    description: "Editorial-minimalist web prototype with warm monochrome canvas, serif display type, hairline borders, pastel chips, and ambient micro-motion.",
     source: source("design-templates/web-prototype-taste-editorial"),
     targets: ["website", "poster"],
     tags: ["website", "editorial", "brand", "visual", "prototype"],
@@ -7358,11 +7974,16 @@ var OPEN_DESIGN_REGISTRY = [
     status: "curated",
     priority: 30
   },
+  ...Object.entries(ADDITIONAL_OPEN_DESIGN_TEMPLATE_DESCRIPTIONS).map(
+    ([slug, description]) => {
+      return createOpenDesignTemplateEntry(slug, description);
+    }
+  ),
   {
     id: "od:design-system:dashboard",
     kind: "design-system",
     name: "Dashboard",
-    description: "Quiet, dense interface system for dashboards, tables, filters, and repeat workflows.",
+    description: "Dark cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.",
     source: source("design-systems/dashboard"),
     targets: ["website", "dashboard-design", "report"],
     tags: ["dashboard", "neutral", "dense", "table", "operations", "charts"],
@@ -7375,7 +7996,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:design-system:trading-terminal",
     kind: "design-system",
     name: "Trading Terminal",
-    description: "Dark dense market-terminal aesthetic for charts, feeds, tables, and high information density.",
+    description: "Bloomberg-style financial trading terminal: dark-only, data-dense, with cyan and coral buy/sell signals readable at a glance.",
     source: source("design-systems/trading-terminal"),
     targets: ["presentation", "website", "dashboard-design", "report"],
     tags: ["dark", "terminal", "finance", "data", "charts", "dense"],
@@ -7388,7 +8009,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:design-system:warm-editorial",
     kind: "design-system",
     name: "Warm Editorial",
-    description: "Warm editorial design system for readable narrative pages, zines, and reports.",
+    description: "Serif-led magazine aesthetic with terracotta accents on warm off-white paper for readable narrative pages, zines, and reports.",
     source: source("design-systems/warm-editorial"),
     targets: ["presentation", "website", "poster", "report", "docs-design"],
     tags: ["warm", "editorial", "magazine", "narrative", "readable"],
@@ -7401,7 +8022,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:design-system:editorial",
     kind: "design-system",
     name: "Editorial",
-    description: "Clean editorial design system with strong typography, media framing, and section rhythm.",
+    description: "Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.",
     source: source("design-systems/editorial"),
     targets: ["presentation", "website", "poster", "report", "docs-design"],
     tags: ["editorial", "typography", "media", "brand", "article"],
@@ -7414,7 +8035,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:design-system:mono",
     kind: "design-system",
     name: "Mono",
-    description: "Minimal monospace-oriented system for documentation, technical pages, and precise reports.",
+    description: "Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.",
     source: source("design-systems/mono"),
     targets: ["website", "docs-design", "report"],
     tags: ["mono", "docs", "technical", "minimal", "structured"],
@@ -7427,7 +8048,7 @@ var OPEN_DESIGN_REGISTRY = [
     id: "od:design-system:apple",
     kind: "design-system",
     name: "Apple",
-    description: "Apple-inspired interface system for polished mobile and product UI design.",
+    description: "Consumer electronics design system with premium white space, SF Pro-style typography, and cinematic imagery.",
     source: source("design-systems/apple"),
     targets: ["mobile-app-design", "website"],
     tags: ["apple", "mobile", "ios", "clean", "product"],
@@ -7436,11 +8057,17 @@ var OPEN_DESIGN_REGISTRY = [
     status: "curated",
     priority: 34
   },
+  ...Object.entries(ADDITIONAL_OPEN_DESIGN_DESIGN_SYSTEM_DESCRIPTIONS).map(
+    ([slug, description]) => {
+      return createOpenDesignDesignSystemEntry(slug, description);
+    }
+  ),
   {
     id: "vm0:image-style:notion-illustration",
     kind: "image-style",
     name: "Notion Illustration",
     description: "Zero-native illustration style for hand-drawn product spot illustrations with simple ink contours and soft backgrounds.",
+    desc: 'Notion-editorial-style hand-drawn spot illustration. Black brush-pen ink on white, tapered confident strokes, solid-black curly hair, solid-black pants/shoes, 3/4 face turned toward viewer with closed-eye smile and soft nose hint, open breathing body outlines, and 1-3 supporting scene props + ambient marks that frame the moment. Trigger when user says /notion-illustration, asks for a "Notion-style illustration", "Notion spot illustration", or a new piece in this hand-drawn brush-pen Notion editorial style.',
     source: sourceRef(
       VM0_SKILLS_REPO,
       VM0_SKILLS_REF,
@@ -7473,6 +8100,7 @@ var OPEN_DESIGN_REGISTRY = [
     kind: "image-style",
     name: "vm0 Illustration",
     description: "vm0 in-app spot illustration style with bold hand-drawn ink line art, white-filled interiors, and a soft rounded color backdrop.",
+    desc: "Generate vm0-style vm0 in-app spot illustrations: bold hand-drawn ink line art with white-filled interiors, a soft rounded color backdrop, transparent output, and simple iconic metaphors for product states.",
     source: sourceRef(
       VM0_SKILLS_REPO,
       VM0_SKILLS_REF,
@@ -7509,6 +8137,16 @@ var OPEN_DESIGN_REGISTRY = [
     priority: 19
   }
 ];
+function listImageStyles() {
+  return OPEN_DESIGN_REGISTRY.filter((entry) => {
+    return entry.kind === "image-style";
+  });
+}
+function findImageStyle(id) {
+  return listImageStyles().find((entry) => {
+    return entry.id === id;
+  });
+}
 function toOpenDesignTarget(value) {
   if (value === "dashboard") {
     return "dashboard-design";
@@ -7552,12 +8190,11 @@ function scoreEntry(entry, target, prompt) {
   const normalizedPrompt = normalizeText(prompt);
   const promptTokens = new Set(tokenize(prompt));
   const targetScore = entry.targets.includes(target) ? 100 : 0;
-  const curationScore = entry.status === "curated" ? 20 : entry.status === "experimental" ? -20 : -1e3;
-  return targetScore + curationScore + (entry.priority ?? 0) + phraseScore(entry.triggers, normalizedPrompt, 40) + phraseScore(entry.bestFor, normalizedPrompt, 15) + tokenScore(entry.tags, promptTokens, 10) + tokenScore(entry.description.split(" "), promptTokens, 2);
+  return targetScore + (entry.priority ?? 0) + phraseScore(entry.triggers, normalizedPrompt, 40) + phraseScore(entry.bestFor, normalizedPrompt, 15) + tokenScore(entry.tags, promptTokens, 10) + tokenScore(entry.description.split(" "), promptTokens, 2);
 }
 function selectByKind(kind, target, prompt, limit) {
   return OPEN_DESIGN_REGISTRY.filter((entry) => {
-    return entry.kind === kind && entry.status !== "hidden";
+    return entry.kind === kind;
   }).map((entry) => {
     return { entry, score: scoreEntry(entry, target, prompt) };
   }).filter(({ score }) => {
@@ -7639,16 +8276,22 @@ function selectOpenDesignCandidates(options) {
 // src/commands/zero/shared/image-style-authoring.ts
 var outputDir = "./opendesign/images";
 var artifactRules = [
-  "Select the image style that best matches the prompt before generation.",
   "Resolve the selected style source before generating the image.",
   "Use the style skill's referenced assets and generation path when it provides one.",
   "Produce a single final image file and keep any temporary metadata under the output directory."
 ];
 function createStyledImageAuthoringPacket(options) {
-  const candidateSlice = selectOpenDesignCandidates({
+  const baseSlice = selectOpenDesignCandidates({
     target: "image",
     prompt: [options.prompt, ...options.details, ...artifactRules].join("\n")
   });
+  const candidateSlice = {
+    ...baseSlice,
+    candidates: {
+      ...baseSlice.candidates,
+      imageStyles: [options.style]
+    }
+  };
   const selectionSchema = {
     imageStyle: "string",
     skills: "string[]",
@@ -7671,18 +8314,20 @@ function createStyledImageAuthoringPacket(options) {
     outputDir
   };
   const instructions = [
-    "# Zero built-in generate image --styled",
+    `# Zero built-in generate image --style ${options.style.id}`,
     "",
     "This is a federated generation resource-selection packet for the current agent.",
-    "Zero is not generating this image on the server yet. You select resources, resolve them, and generate the styled image.",
+    "Zero is not generating this image on the server yet. The image style has already been selected by the caller \u2014 resolve it and generate the styled image.",
     "",
     "## User Prompt",
     options.prompt,
     "",
-    "## Stage 1: Resource Selection",
-    "- Choose an image style from the bundled federated registry slice below.",
+    "## Selected Image Style",
+    `- \`${options.style.id}\` \u2014 ${options.style.name}`,
+    "",
+    "## Stage 1: Supporting Resource Selection",
+    "- The image style is locked. Optionally pick supporting skills/templates from the candidate slice below.",
     "- Choose only IDs present in this packet; do not invent registry IDs.",
-    "- Prefer image-style resources with matching triggers, but the user prompt is the highest-priority signal.",
     "- Treat the selection JSON as internal working state, then continue to generation.",
     "",
     "## Selection Output Schema",
@@ -7748,6 +8393,43 @@ function createStyledImageAuthoringPacket(options) {
 }
 
 // src/commands/zero/shared/image-generate.ts
+function formatStyleListing(styles) {
+  if (styles.length === 0) {
+    return "  (no image styles registered)";
+  }
+  return styles.map((style) => {
+    const desc = style.desc ?? style.description;
+    return `  ${style.id}
+    ${desc}`;
+  }).join("\n\n");
+}
+function requireStyleError(usageCommand) {
+  const styles = listImageStyles();
+  const message = [
+    "--style <id> or --skip-style is required",
+    "",
+    "Available styles:",
+    formatStyleListing(styles),
+    "",
+    `Examples:`,
+    `  ${usageCommand} --style ${styles[0]?.id ?? "<style-id>"} --prompt "..."`,
+    `  ${usageCommand} --skip-style --prompt "..."`
+  ].join("\n");
+  return new Error(message);
+}
+function unknownStyleError(id, usageCommand) {
+  const styles = listImageStyles();
+  const message = [
+    `Unknown image style: ${id}`,
+    "",
+    "Available styles:",
+    formatStyleListing(styles),
+    "",
+    `Example:`,
+    `  ${usageCommand} --style ${styles[0]?.id ?? "<style-id>"} --prompt "..."`
+  ].join("\n");
+  return new Error(message);
+}
 function readPrompt(options, usageCommand) {
   if (options.prompt?.trim()) {
     return options.prompt.trim();
@@ -7837,17 +8519,21 @@ function createImageGenerateCommand(config) {
     "--image-prompt-strength <0-1>",
     "Reference strength override for Flux Redux"
   ).option(
-    "--styled",
-    "Print a resource-selection packet for styled image generation"
-  ).option("--json", "Print metadata as JSON").addHelpText(
-    "after",
-    `
+    "--style <id>",
+    "Image style id from the registry (see Image Styles below)"
+  ).option(
+    "--skip-style",
+    "Opt out of styled image generation for this invocation"
+  ).option("--json", "Print metadata as JSON").addHelpText("after", () => {
+    const styles = listImageStyles();
+    return `
 Examples:
 ${config.examples}
 
 Output:
-  Prints the generated /f/ image file URL and metadata. With --styled, prints
-  an Open Design resource-selection packet for the current agent.
+  Prints the generated /f/ image file URL and metadata. With --style <id>,
+  prints an Open Design resource-selection packet for the current agent
+  with the selected style locked in.
 
 Notes:
   - Authenticates via ZERO_TOKEN (requires file:write capability)
@@ -7864,6 +8550,8 @@ Models:
 
 Options:
   - Prompt: required, up to 32,000 characters; stdin is supported.
+  - Style: required. Pass --style <id> to generate in a registered style
+    or --skip-style to bypass styled generation entirely.
   - Size: gpt-image-2 accepts auto or WIDTHxHEIGHT. Popular sizes include
     1024x1024,
     1536x1024, 1024x1536, 2048x2048, 2048x1152, 3840x2160,
@@ -7883,14 +8571,26 @@ Options:
     Flux Redux accepts --image-prompt-strength to override the provider
     default; GPT edit models accept --input-fidelity and supported models
     accept --mask-image-url.
-  - Styled mode: pass --styled to select an image style resource first. In this
-    mode the agent resolves the selected style source and generates the image.`
-  ).action(
+
+Image Styles:
+${formatStyleListing(styles)}`;
+  }).action(
     withErrorHandler(async (options, command) => {
+      if (options.style && options.skipStyle) {
+        throw new Error("--style and --skip-style cannot be combined");
+      }
+      if (!options.style && !options.skipStyle) {
+        throw requireStyleError(config.usageCommand);
+      }
       const prompt = readPrompt(options, config.usageCommand);
-      if (options.styled) {
+      if (options.style) {
+        const style = findImageStyle(options.style);
+        if (!style) {
+          throw unknownStyleError(options.style, config.usageCommand);
+        }
         const packet = createStyledImageAuthoringPacket({
           prompt,
+          style,
           details: [
             `Model preference if direct image generation is used: ${options.model}`,
             `Requested size: ${options.size}`,
@@ -7966,12 +8666,12 @@ Options:
 var imageCommand = createImageGenerateCommand({
   name: "image",
   usageCommand: "zero built-in generate image",
-  examples: `  Generate image:        zero built-in generate image --prompt "A watercolor fox"
-  Pipe prompt:           cat prompt.txt | zero built-in generate image
-  Styled image:          zero built-in generate image --styled --prompt "A product manager mapping a launch plan"
-  GPT Image model:       zero built-in generate image --model gpt-image-1.5 --prompt "A poster" --size 1024x1536 --quality high
-  Flux model:            zero built-in generate image --model flux-pro-1.1 --prompt "A product hero shot" --seed 42
-  Image-to-image:        zero built-in generate image --model flux-pro-1.1 --image-url https://example.com/mockup.png --prompt "Turn this mockup into a polished product shot"`
+  examples: `  Styled image:          zero built-in generate image --style vm0:image-style:notion-illustration --prompt "A product manager mapping a launch plan"
+  Skip style:            zero built-in generate image --skip-style --prompt "A watercolor fox"
+  Pipe prompt:           cat prompt.txt | zero built-in generate image --skip-style
+  GPT Image model:       zero built-in generate image --skip-style --model gpt-image-1.5 --prompt "A poster" --size 1024x1536 --quality high
+  Flux model:            zero built-in generate image --skip-style --model flux-pro-1.1 --prompt "A product hero shot" --seed 42
+  Image-to-image:        zero built-in generate image --skip-style --model flux-pro-1.1 --image-url https://example.com/mockup.png --prompt "Turn this mockup into a polished product shot"`
 });
 
 // src/commands/zero/built-in/generate/open-design-artifacts.ts
@@ -10083,7 +10783,7 @@ function registerZeroCommands(prog, commands) {
 var program = new Command();
 program.name("zero").description(
   "Zero CLI \u2014 interact with the zero platform from inside the sandbox"
-).version("9.165.3").addHelpText("after", () => {
+).version("9.167.0").addHelpText("after", () => {
   return buildZeroHelpText();
 });
 if (process.argv[1]?.endsWith("zero.js") || process.argv[1]?.endsWith("zero.ts") || process.argv[1]?.endsWith("zero")) {