oh-my-opencode 4.12.0 → 4.13.0

package/packages/omo-codex/plugin/skills/frontend/references/design/mintlify.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Mintlify
 
+> Category: Productivity & SaaS
+> Documentation platform. Clean, green-accented, reading-optimized.
+
 ## 1. Visual Theme & Atmosphere
 
 Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#ffffff`) background, near-black (`#0d0d0d`) text, and a signature green brand accent (`#18E299`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers "we care about your developer experience" in every pixel.

package/packages/omo-codex/plugin/skills/frontend/references/design/miro.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Miro
 
+> Category: Design & Creative
+> Visual collaboration. Bright yellow accent, infinite canvas aesthetic.
+
 ## 1. Visual Theme & Atmosphere
 
 Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.

package/packages/omo-codex/plugin/skills/frontend/references/design/mistral.ai.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Mistral AI
 
+> Category: AI & LLM
+> Open-weight LLM provider. French-engineered minimalism, purple-toned.
+
 ## 1. Visual Theme & Atmosphere
 
 Mistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire.

package/packages/omo-codex/plugin/skills/frontend/references/design/mongodb.md

@@ -1,5 +1,8 @@
 # Design System Inspired by MongoDB
 
+> Category: Backend & Data
+> Document database. Green leaf branding, developer documentation focus.
+
 ## 1. Visual Theme & Atmosphere
 
 MongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent — bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.

package/packages/omo-codex/plugin/skills/frontend/references/design/nike.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Nike
 
+> Category: E-Commerce & Retail
+> Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.
+
 ## 1. Visual Theme & Atmosphere
 
 Nike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.

package/packages/omo-codex/plugin/skills/frontend/references/design/notion.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Notion
 
+> Category: Productivity & SaaS
+> All-in-one workspace. Warm minimalism, serif headings, soft surfaces.
+
 ## 1. Visual Theme & Atmosphere
 
 Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.

package/packages/omo-codex/plugin/skills/frontend/references/design/nvidia.md

@@ -1,5 +1,8 @@
 # Design System Inspired by NVIDIA
 
+> Category: Media & Consumer
+> GPU computing. Green-black energy, technical power aesthetic.
+
 ## 1. Visual Theme & Atmosphere
 
 NVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (`#000000`) and white (`#ffffff`) foundation, punctuated by NVIDIA's signature green (`#76b900`) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals "NVIDIA" to anyone in technology.

package/packages/omo-codex/plugin/skills/frontend/references/design/ollama.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Ollama
 
+> Category: AI & LLM
+> Run LLMs locally. Terminal-first, monochrome simplicity.
+
 ## 1. Visual Theme & Atmosphere
 
 Ollama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.

package/packages/omo-codex/plugin/skills/frontend/references/design/opencode.ai.md

@@ -1,5 +1,8 @@
 # Design System Inspired by OpenCode
 
+> Category: AI & LLM
+> AI coding platform. Developer-centric dark theme.
+
 ## 1. Visual Theme & Atmosphere
 
 OpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (`#201d1d`) with warm off-white text (`#fdfcfc`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in `#201d1d` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.

package/packages/omo-codex/plugin/skills/frontend/references/design/pinterest.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Pinterest
 
+> Category: Media & Consumer
+> Visual discovery. Red accent, masonry grid, image-first.
+
 ## 1. Visual Theme & Atmosphere
 
 Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.

package/packages/omo-codex/plugin/skills/frontend/references/design/playstation.md

@@ -1,5 +1,8 @@
 # Design System Inspired by PlayStation
 
+> Category: Media & Consumer
+> Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.
+
 ## 1. Visual Theme & Atmosphere
 
 PlayStation.com carries itself like the marketing wing of a premium consumer-electronics brand that happens to sell entertainment. The page is organized as a **vertical channel of alternating surfaces**: a near-black masthead and hero, a sequence of paper-white editorial panels in the middle, and a deep cobalt-blue footer that anchors the entire experience. Between those surface modes the site leans hard on photography and 3D product renders — the PS5 console, game cover art, DualSense controllers — letting the hardware do the emotional work while the chrome stays restrained.

package/packages/omo-codex/plugin/skills/frontend/references/design/posthog.md

@@ -1,5 +1,8 @@
 # Design System Inspired by PostHog
 
+> Category: Backend & Data
+> Product analytics. Playful hedgehog branding, developer-friendly dark UI.
+
 ## 1. Visual Theme & Atmosphere
 
 PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (`#fdfdf8`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.

package/packages/omo-codex/plugin/skills/frontend/references/design/raycast.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Raycast
 
+> Category: Developer Tools
+> Productivity launcher. Sleek dark chrome, vibrant gradient accents.
+
 ## 1. Visual Theme & Atmosphere
 
 Raycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.

package/packages/omo-codex/plugin/skills/frontend/references/design/renault.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Renault
 
+> Category: Automotive
+> French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.
+
 ## 1. Visual Theme & Atmosphere
 
 Renault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy — a departure from the monochromatic austerity of German or Italian luxury brands. The page opens with a full-screen hero that washes the viewport in a sweeping aurora gradient — ribbons of magenta, violet, and teal bleeding across the frame behind a dramatically lit vehicle. This chromatic expressiveness is the site's signature: while the interface structure is disciplined (NouvelR typography, black-and-white CTA framework, zero-radius buttons), the content is alive with color — gradient washes on hero slides, saturated vehicle photography, and splashes of Renault Yellow (`#EFDF00`) on accent CTAs. The effect is a showroom that feels energized rather than hushed.

package/packages/omo-codex/plugin/skills/frontend/references/design/replicate.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Replicate
 
+> Category: AI & LLM
+> Run ML models via API. Clean white canvas, code-forward.
+
 ## 1. Visual Theme & Atmosphere
 
 Replicate's interface is a developer playground crackling with creative energy — a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section explodes with a vibrant orange-red-magenta gradient that immediately signals "this is where AI models come alive," while the body of the page grounds itself in a clean white canvas where code snippets and model galleries take center stage.

package/packages/omo-codex/plugin/skills/frontend/references/design/resend.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Resend
 
+> Category: Productivity & SaaS
+> Email API. Minimal dark theme, monospace accents.
+
 ## 1. Visual Theme & Atmosphere
 
 Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.

package/packages/omo-codex/plugin/skills/frontend/references/design/revolut.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Revolut
 
+> Category: Fintech & Crypto
+> Digital banking. Sleek dark interface, gradient cards, fintech precision.
+
 ## 1. Visual Theme & Atmosphere
 
 Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.

package/packages/omo-codex/plugin/skills/frontend/references/design/runwayml.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Runway
 
+> Category: AI & LLM
+> AI video generation. Cinematic dark UI, media-rich layout.
+
 ## 1. Visual Theme & Atmosphere
 
 Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.

package/packages/omo-codex/plugin/skills/frontend/references/design/sanity.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Sanity
 
+> Category: Backend & Data
+> Headless CMS. Red accent, content-first editorial layout.
+
 ## 1. Visual Theme & Atmosphere
 
 Sanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a "dark mode toggle" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.

package/packages/omo-codex/plugin/skills/frontend/references/design/sentry.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Sentry
 
+> Category: Backend & Data
+> Error monitoring. Dark dashboard, data-dense, pink-purple accent.
+
 ## 1. Visual Theme & Atmosphere
 
 Sentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (`#1f1633`, `#150f23`) that evoke the late-night debugging sessions Sentry was built for. Against this inky canvas, a carefully curated set of purples, pinks, and a distinctive lime-green accent (`#c2ef4e`) create a visual system that feels simultaneously technical and vibrant.

package/packages/omo-codex/plugin/skills/frontend/references/design/shopify.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Shopify
 
+> Category: E-Commerce & Retail
+> E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.
+
 ## 1. Visual Theme & Atmosphere
 
 Shopify.com is a dark-first digital theatre — a website that stages its commerce platform like a cinematic premiere. The entire experience unfolds against an abyss of near-black surfaces that carry the faintest whisper of deep forest green (`#02090A`, `#061A1C`, `#102620`), creating a nocturnal atmosphere that feels less like a SaaS marketing page and more like an exclusive product reveal at a tech keynote. This darkness isn't cold or corporate — it's the warm, enveloping dark of a luxury experience, like sitting in the front row of a darkened auditorium.

package/packages/omo-codex/plugin/skills/frontend/references/design/spacex.md

@@ -1,5 +1,8 @@
 # Design System Inspired by SpaceX
 
+> Category: Media & Consumer
+> Space technology. Stark black and white, full-bleed imagery, futuristic.
+
 ## 1. Visual Theme & Atmosphere
 
 SpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (`#000000`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.

package/packages/omo-codex/plugin/skills/frontend/references/design/spotify.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Spotify
 
+> Category: Media & Consumer
+> Music streaming. Vibrant green on dark, bold type, album-art-driven.
+
 ## 1. Visual Theme & Atmosphere
 
 Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.

package/packages/omo-codex/plugin/skills/frontend/references/design/starbucks.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Starbucks
 
+> Category: E-Commerce & Retail
+> Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.
+
 ## 1. Visual Theme & Atmosphere
 
 Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (`#f2f0eb`) and a ceramic off-white (`#edebe9`) — colors that reference actual store materials: the paper napkins, the café walls, the wood finishes — while the signature **Starbucks Green** (`#006241`) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (`#cba258`) appears only around Rewards-status ceremony — not as a general accent.

package/packages/omo-codex/plugin/skills/frontend/references/design/stitch-skill.md

@@ -11,7 +11,7 @@ This skill generates `DESIGN.md` files optimized for Google Stitch screen genera
 The generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through **"Visual Descriptions"** supported by specific color values, typography specs, and component behaviors.
 
 ## Prerequisites
-- Access to Google Stitch via [labs.google.com/stitch](https://labs.google.com/stitch)
+- Access to Google Stitch via [labs.google/stitch](https://labs.google/stitch)
 - Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI
 
 ## The Goal

package/packages/omo-codex/plugin/skills/frontend/references/design/stripe.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Stripe
 
+> Category: Fintech & Crypto
+> Payment infrastructure. Signature purple gradients, weight-300 elegance.
+
 ## 1. Visual Theme & Atmosphere
 
 Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry.

package/packages/omo-codex/plugin/skills/frontend/references/design/supabase.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Supabase
 
+> Category: Backend & Data
+> Open-source Firebase alternative. Dark emerald theme, code-first.
+
 ## 1. Visual Theme & Atmosphere
 
 Supabase's website is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep black backgrounds (`#0f0f0f`, `#171717`) with emerald green accents (`#3ecf8e`, `#00c573`) that reference the brand's open-source, PostgreSQL-green identity. The design system feels like it was born in a terminal window and evolved into a sophisticated marketing surface without losing its developer soul.

package/packages/omo-codex/plugin/skills/frontend/references/design/superhuman.md

@@ -1,5 +1,8 @@
 # Design System Inspired by Superhuman
 
+> Category: Developer Tools
+> Fast email client. Premium dark UI, keyboard-first, purple glow.
+
 ## 1. Visual Theme & Atmosphere
 
 Superhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic purple gradient, a deep twilight wash of `#1b1938` that evokes the moment just before dawn, overlaid with confident white typography. Below this dramatic entrance, the rest of the site is almost entirely white canvas with dark charcoal text, creating a stark but refined reading experience.