oh-my-opencode 4.14.1 → 4.15.0

package/dist/skills/visual-qa/SKILL.md

@@ -89,6 +89,16 @@ Key fields: `maxWidth`, `overflowLines[]`, `borderMisaligned`, `wideCharColumns[
 
 This JSON (diff ratio, similarity score, hotspots or overflow lines, border alignment, wide-char columns, alpha) is REFERENCE evidence to aim the reviewers. It is not the verdict by itself.
 
+### Motion and interaction capture
+
+Static screenshots miss what moves. For every interactive element and every animated region, do NOT settle for a single resting frame — capture the motion as evidence:
+
+- **Interaction states:** drive the real browser to each state before capturing. Hover the element, focus it, click/press it, and for scroll-driven surfaces scroll to trigger the effect. Capture three frames per transition: **rest** (before), **mid-transition** (~100ms in, to prove the animation exists and is smooth), and **settled** (after it completes).
+- **Entrance and scroll motion:** capture scroll-triggered reveals and any load animation as a short frame sequence (start, mid, end), not one frame. A reveal that never fires, janks, or lands in the wrong place is a defect only the sequence exposes.
+- **Reference clones:** when the reference site has its own motion, capture the reference's motion the same way and compare it to the actual — timing, easing feel, and end state.
+
+**Animation is never an excuse to skip or pass a region.** A high `diffRatio` caused by an in-flight animation is **never a valid excuse** to dismiss a defect or wave a region through. Compare **settled state to settled state** for pixel fidelity, and separately verify the motion against the **reference's own motion** (or, with no reference, against the stated intent). "The pixels differ because it animates" is a reason to capture the settled frame and the motion properly — not a reason to pass.
+
 ## Step 3 - Dispatch two read-only QA subagents in parallel
 
 This independent review is REQUIRED before any "done" claim. Do not self-review inside the main agent and call the UI verified - a self-graded pass is the failure mode this step exists to stop. Dispatch it yourself, every time, without waiting to be told. Give each reviewer the captures for every enumerated page from Step 2, not a sample, and tell it the page count so it can confirm none were skipped.
@@ -135,6 +145,7 @@ CHECK EACH:
 5. Responsive and resize behavior across viewport sizes (web) or terminal resize (TUI).
 6. Do the user-intended FEATURES actually work: interactions, states, navigation (web); input handling, resize, scroll (TUI)? Trace the code paths.
 7. Reference packet coverage: every reference page, state, viewport, and annotated requirement is implemented or explicitly marked out of scope by the user. Missing copy, missing overview content, swapped hierarchy, or unimplemented reference states are BLOCKING.
+8. Slop animation: flag motion that signals nothing. A hover-without-action (a hover that produces no state change or affordance), motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop and a REVISE finding. Motion must map to a real interaction, state, or affordance; the hero may carry one signature moment, nothing else earns decoration.
 
 OUTPUT:
 VERDICT: PASS | REVISE | FAIL

package/dist/skills/visual-qa/scripts/skill-prompt-contract.test.ts

@@ -252,3 +252,45 @@ describe("visual-qa skill exhaustive-coverage and review-gate contract", () => {
 		}
 	})
 })
+
+describe("visual-qa motion capture and slop-animation contract", () => {
+	test("#given an animated or interactive surface #when capturing #then rest, mid-transition and settled frames are driven and captured", () => {
+		for (const fixture of fixtures()) {
+			const motion = sectionBetween(fixture.text, "### Motion and interaction capture", "## Step 3")
+			const lower = motion.toLowerCase()
+
+			expect(lower, fixture.label).toContain("rest")
+			expect(lower, fixture.label).toContain("mid-transition")
+			expect(lower, fixture.label).toContain("settled")
+			expect(lower, fixture.label).toContain("hover")
+			expect(lower, fixture.label).toContain("focus")
+			expect(lower, fixture.label).toContain("click")
+			expect(lower, fixture.label).toContain("scroll-triggered")
+			expect(lower, fixture.label).toContain("load animation")
+		}
+	})
+
+	test("#given animation-induced pixel diff #when judging fidelity #then it is never an excuse to dismiss a defect", () => {
+		for (const fixture of fixtures()) {
+			const motion = sectionBetween(fixture.text, "### Motion and interaction capture", "## Step 3")
+			const lower = motion.toLowerCase()
+
+			expect(lower, fixture.label).toContain("never a valid excuse")
+			expect(lower, fixture.label).toContain("settled state to settled state")
+			expect(lower, fixture.label).toContain("reference's own motion")
+		}
+	})
+
+	test("#given meaningless motion #when reviewing #then Pass A flags slop animation, especially hover-without-action", () => {
+		for (const fixture of fixtures()) {
+			const passA = sectionBetween(fixture.text, "### Pass A", "### Pass B")
+			const checkBlock = sectionBetween(passA, "CHECK EACH:", "OUTPUT:")
+			const lower = checkBlock.toLowerCase()
+
+			expect(lower, fixture.label).toContain("slop animation")
+			expect(lower, fixture.label).toContain("non-interactive")
+			expect(lower, fixture.label).toContain("no state change")
+			expect(lower, fixture.label).toContain("hover-without-action")
+		}
+	})
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oh-my-opencode",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "description": "The Best AI Agent Harness - Batteries-Included OpenCode Plugin with Multi-Model Orchestration, Parallel Background Agents, and Crafted LSP/AST Tools",
   "main": "./dist/index.js",
   "types": "dist/index.d.ts",
@@ -191,18 +191,18 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "oh-my-opencode-darwin-arm64": "4.14.1",
-    "oh-my-opencode-darwin-x64": "4.14.1",
-    "oh-my-opencode-darwin-x64-baseline": "4.14.1",
-    "oh-my-opencode-linux-arm64": "4.14.1",
-    "oh-my-opencode-linux-arm64-musl": "4.14.1",
-    "oh-my-opencode-linux-x64": "4.14.1",
-    "oh-my-opencode-linux-x64-baseline": "4.14.1",
-    "oh-my-opencode-linux-x64-musl": "4.14.1",
-    "oh-my-opencode-linux-x64-musl-baseline": "4.14.1",
-    "oh-my-opencode-windows-arm64": "4.14.1",
-    "oh-my-opencode-windows-x64": "4.14.1",
-    "oh-my-opencode-windows-x64-baseline": "4.14.1"
+    "oh-my-opencode-darwin-arm64": "4.15.0",
+    "oh-my-opencode-darwin-x64": "4.15.0",
+    "oh-my-opencode-darwin-x64-baseline": "4.15.0",
+    "oh-my-opencode-linux-arm64": "4.15.0",
+    "oh-my-opencode-linux-arm64-musl": "4.15.0",
+    "oh-my-opencode-linux-x64": "4.15.0",
+    "oh-my-opencode-linux-x64-baseline": "4.15.0",
+    "oh-my-opencode-linux-x64-musl": "4.15.0",
+    "oh-my-opencode-linux-x64-musl-baseline": "4.15.0",
+    "oh-my-opencode-windows-arm64": "4.15.0",
+    "oh-my-opencode-windows-x64": "4.15.0",
+    "oh-my-opencode-windows-x64-baseline": "4.15.0"
   },
   "overrides": {
     "hono": "^4.12.18",

package/packages/omo-codex/plugin/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "omo",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "description": "One Codex plugin namespace for Yeongyu's local Codex components.",
   "author": {
     "name": "Yeongyu Kim",

package/packages/omo-codex/plugin/components/bootstrap/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sisyphuslabs/codex-bootstrap",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex SessionStart bootstrap component that provisions LazyCodex runtime dependencies from a detached worker.",
 	"type": "module",
 	"private": true,

package/packages/omo-codex/plugin/components/codegraph/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sisyphuslabs/codex-codegraph",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin MCP wrapper for CodeGraph.",
 	"type": "module",
 	"private": true,

package/packages/omo-codex/plugin/components/comment-checker/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-comment-checker",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin that runs comment-checker after edit-like PostToolUse hooks.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/git-bash/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sisyphuslabs/codex-git-bash-hook",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex hook component that reminds Windows sessions to prefer the OMO git_bash MCP.",
 	"type": "module",
 	"private": true,

package/packages/omo-codex/plugin/components/lazycodex-executor-verify/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-lazycodex-executor-verify",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex SubagentStop evidence verifier for LazyCodex executor completions.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/lsp/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-lsp",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin that exposes Language Server Protocol tools and post-edit diagnostics.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/rules/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-rules",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin that injects project rule files into model context through lifecycle hooks.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/start-work-continuation/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-start-work-continuation",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex Stop hook continuation injector for omo-codex start-work plans.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/teammode/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sisyphuslabs/codex-teammode",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex team-mode hook component that keeps background thread titles descriptive after create_thread.",
 	"type": "module",
 	"private": true,

package/packages/omo-codex/plugin/components/telemetry/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-telemetry",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin component that emits omo-codex anonymous daily-active telemetry on SessionStart.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/ultrawork/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-ultrawork",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin that injects the ultrawork orchestration directive and ships LazyCodex planning, review, QA, and gate agent roles.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/components/ulw-loop/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/codex-ulw-loop",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"description": "Codex plugin: durable repo-native multi-goal orchestration with embedded success criteria and observable evidence audit.",
 	"type": "module",
 	"packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@sisyphuslabs/omo-codex-plugin",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@sisyphuslabs/omo-codex-plugin",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"workspaces": [
 				"components/codegraph",
 				"components/comment-checker",
@@ -93,7 +93,7 @@
 		},
 		"components/codegraph": {
 			"name": "@sisyphuslabs/codex-codegraph",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"bin": {
 				"omo-codegraph": "dist/cli.js"
 			},
@@ -112,7 +112,7 @@
 		},
 		"components/comment-checker": {
 			"name": "@code-yeongyu/codex-comment-checker",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"omo-comment-checker": "dist/cli.js"
@@ -133,7 +133,7 @@
 		},
 		"components/git-bash": {
 			"name": "@sisyphuslabs/codex-git-bash-hook",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"bin": {
 				"omo-git-bash-hook": "dist/cli.js"
 			},
@@ -148,7 +148,7 @@
 		},
 		"components/lazycodex-executor-verify": {
 			"name": "@code-yeongyu/codex-lazycodex-executor-verify",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"lazycodex-executor-verify": "dist/cli.js"
@@ -165,7 +165,7 @@
 		},
 		"components/lsp": {
 			"name": "@code-yeongyu/codex-lsp",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"dependencies": {
 				"@code-yeongyu/lsp-daemon": "file:../../../../lsp-daemon"
@@ -185,7 +185,7 @@
 		},
 		"components/rules": {
 			"name": "@code-yeongyu/codex-rules",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"dependencies": {
 				"picomatch": "^4.0.3"
@@ -207,7 +207,7 @@
 		},
 		"components/start-work-continuation": {
 			"name": "@code-yeongyu/codex-start-work-continuation",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"omo-start-work-continuation": "dist/cli.js"
@@ -224,7 +224,7 @@
 		},
 		"components/teammode": {
 			"name": "@sisyphuslabs/codex-teammode",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"devDependencies": {
 				"@types/node": "^25.9.3",
 				"bun-types": "^1.3.1",
@@ -237,7 +237,7 @@
 		},
 		"components/telemetry": {
 			"name": "@code-yeongyu/codex-telemetry",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"omo-telemetry": "dist/cli.js"
@@ -255,7 +255,7 @@
 		},
 		"components/ultrawork": {
 			"name": "@code-yeongyu/codex-ultrawork",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"omo-ultrawork": "dist/cli.js"
@@ -273,7 +273,7 @@
 		},
 		"components/ulw-loop": {
 			"name": "@code-yeongyu/codex-ulw-loop",
-			"version": "4.14.1",
+			"version": "4.15.0",
 			"license": "MIT",
 			"bin": {
 				"omo-ulw-loop": "dist/cli.js",

package/packages/omo-codex/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sisyphuslabs/omo-codex-plugin",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "description": "Aggregate Codex plugin root for OMO components.",
   "type": "module",
   "packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/skills/frontend/ATTRIBUTION.md

@@ -186,10 +186,23 @@ SOFTWARE.
 
 ## 5. Project-original files
 
-`frontend/SKILL.md`, `frontend/references/design/README.md`, `_INDEX.md`,
+`frontend/SKILL.md`, `frontend/references/design/README.md`, `_INDEX.md`, `aside.md`,
 `design-system-architecture.md`, `react-dev-tooling-skill.md`,
 `frontend/references/perfection/README.md`, `react-perf-tooling.md`, and
 `frontend/scripts/perfection/lighthouse-audit.py` are original to this project and require
 no third-party attribution. The perfection docs and script only invoke third-party tools
 (react-scan, react-doctor, react-grab, playwright-lighthouse, lighthouse, chrome-launcher)
 at runtime; no source from those tools is vendored, so their licenses are not carried here.
+
+`frontend/references/design/aside.md` is a project-original synthesis from live browser
+capture evidence and a local reconnaissance run following the MIT-licensed
+`JCodesMore/ai-website-cloner-template` workflow; it is not copied from Aside or from the
+template. Aside names, trademarks, product text, and visual assets remain the property of
+their respective owners and are referenced only for descriptive design-analysis purposes.
+
+`frontend/references/design/clone-from-url.md` is a project-original runtime-extraction
+workflow guide. Its browser + `getComputedStyle` clone approach follows the same
+MIT-licensed `JCodesMore/ai-website-cloner-template` clone-website workflow that `aside.md`
+cites; no source from that template is copied. It carries no third-party attribution beyond
+that lineage note, and it grants no license to copy any target site's trademarks, brand
+assets, or proprietary copy.

package/packages/omo-codex/plugin/skills/frontend/SKILL.md

@@ -24,8 +24,11 @@ This file is a router, not a rulebook. The rules live in four rulesets under `re
 
 Every implementation must choose one of these branches before UI code changes:
 
-1. **Concrete visual reference:** if the user supplies a screenshot, generated mockup, Stitch/Imagen output, Figma export, overview, or annotated reference packet, treat it as the visual contract. Load `references/design/image-to-code-skill.md` plus the relevant design/perfection files, extract the reference's exact tokens, layout geometry, copy, spacing, states, and responsive intent into `DESIGN.md`, then implement reusable primitives against that contract. Final QA must run `/visual-qa` in reference-fidelity mode: compare the actual UI against the reference packet pixel-by-pixel and verify the code is an extensible design-system implementation, not a screenshot-matched one-off.
-2. **Greenfield or fresh setup:** if the user gave no concrete visual reference, use `references/design/_INDEX.md` to shortlist 2-3 plausible Layer B references, then deeply load exactly one Layer A style skill and one Layer B brand/design-system reference; use `open-design` only when the curated set has no fit. Treat those references as source material, not mood labels: extract tokens, layout grammar, component anatomy, interaction states, motion, and taste decisions into `DESIGN.md`, then recombine them into project-specific primitives. Customize for the user's product and content, but do not freestyle past the selected references; never copy logos, trademarked assets, or brand-specific copy. Define Section 5 primitives with variants, default/hover/active/focus/disabled/loading/empty/error states, accessibility, and motion before code. Build them first in a component showcase or state harness; each primitive and required state must pass mobile/tablet/desktop visual QA before product screens.
+1. **Concrete visual reference:** the user supplied a reference — treat it as the visual contract, then handle it by kind:
+   - **Static visual reference** (screenshot, generated mockup, Stitch/Imagen output, Figma export, overview, or annotated packet): load `references/design/image-to-code-skill.md` plus the relevant design/perfection files, extract the reference's exact tokens, layout geometry, copy, spacing, states, and responsive intent into `DESIGN.md`, then implement reusable primitives against that contract.
+   - **Live site or URL reference** (the user names a site to clone or gives a URL): load `references/design/clone-from-url.md`. Drive a real browser and extract the runtime truth via `getComputedStyle` — tokens, layout geometry, default/hover/focus/active states, transitions and keyframes, and downloaded assets — into `DESIGN.md`, then clone-code reusable primitives against that contract.
+   Final QA for both runs `/visual-qa` in reference-fidelity mode: compare the actual UI against the reference pixel-by-pixel and verify the code is an extensible design-system implementation, not a screenshot-matched one-off.
+2. **Greenfield or fresh setup:** if the user gave no concrete visual reference, use `references/design/_INDEX.md` to shortlist 2-3 plausible Layer B references, then deeply load exactly one Layer A style skill and one Layer B brand/design-system reference; use `open-design` only when the curated set has no fit. Treat those references as source material, not mood labels: extract tokens, layout grammar, component anatomy, interaction states, motion, and taste decisions into `DESIGN.md`, then recombine them into project-specific primitives — never freestyle past the selected references, never copy logos or brand-specific copy. For an expressive brief (glossy, premium, wow, brand-grade), default to generating 2-3 imagen concept drafts, each seeded with the loaded Layer A + Layer B tokens (palette, type, material); pick the strongest and treat the chosen draft as the reference-fidelity contract. Define Section 5 primitives and their default/hover/active/focus/disabled/loading/empty/error states before code, and pass each through mobile/tablet/desktop visual QA before product screens.
 3. **Existing project with `DESIGN.md` or a component system:** read it, follow it, and update it before implementation only when the requested work needs a new token, primitive, state, motion rule, accessibility constraint, accepted debt, or reference-fidelity requirement.
 4. **Existing project with UI but no `DESIGN.md` and no reusable component layer:** STOP and ask the user one focused question: should you preserve the current look with copy-nearby styling, or extract a real `DESIGN.md` plus reusable components before continuing? Do not silently choose.
 
@@ -33,7 +36,7 @@ When `references/designpowers/README.md` is loaded for implementation, redesign,
 
 ## Ruleset 1 — design (`references/design/`)
 
-The reference library has one architecture file, 12 taste skills (Layer A — *how to execute*), and 69 brand design systems (Layer B — *what it should look like*). Most non-trivial tasks load **one Layer A + one Layer B**. `README.md` carries the full routing flow, stacking rules, anti-patterns, and the mandatory browser-based Design QA phase; `_INDEX.md` catalogs all 81 files with mood-to-brand mappings — read it whenever routing is not obvious from the tables below.
+The reference library has one architecture file, 12 taste skills (Layer A — *how to execute*), and 70 brand design systems (Layer B — *what it should look like*). Most non-trivial tasks load **one Layer A + one Layer B**. `README.md` carries the full routing flow, stacking rules, anti-patterns, and the mandatory browser-based Design QA phase; `_INDEX.md` catalogs all 83 files with mood-to-brand mappings — read it whenever routing is not obvious from the tables below.
 
 ### Layer 0 — architecture
 
@@ -58,7 +61,7 @@ The reference library has one architecture file, 12 taste skills (Layer A — *h
 
 ### Layer B — brand design systems (orthogonal to Layer A; stack freely)
 
-When the user names a brand or site — "Linear-style", "like Stripe's landing" — load `references/design/<brand>.md` as the token source of truth (palette, type scale, components, do/don'ts). Coverage includes `apple` `stripe` `linear.app` `notion` `vercel` `claude` `figma` `airbnb` `nike` `tesla` `spotify` `raycast` `revolut` and ~56 more; the full list with mood shortcuts is in `_INDEX.md`. Extract the tokens and apply them to the project's own content — never copy logos or trademarked imagery. If the named brand is missing, fall back to a Layer A mood match or the `open-design` skill.
+When the user names a brand or site — "Linear-style", "like Stripe's landing", "Aside-style browser agent" — load `references/design/<brand>.md` as the token source of truth (palette, type scale, components, do/don'ts). Coverage includes `aside` `apple` `stripe` `linear.app` `notion` `vercel` `claude` `figma` `airbnb` `nike` `tesla` `spotify` `raycast` `revolut` and ~56 more; the full list with mood shortcuts is in `_INDEX.md`. Extract the tokens and apply them to the project's own content — never copy logos or trademarked imagery. If the named brand is missing, fall back to a Layer A mood match or the `open-design` skill.
 
 ### React dev tooling
 
@@ -102,6 +105,7 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
 | Request | Load |
 |---|---|
 | "Build a landing page" (no direction given) | `design/README.md` + `design/_INDEX.md` shortlist → exactly one Layer B reference + `design/taste-skill.md` + `perfection/README.md` |
+| "Aside-style AI browser / browser agent page" | `design/README.md` + `design/aside.md` + `design/taste-skill.md` + `perfection/README.md` |
 | "Linear-style landing page" | `design/README.md` + `design/linear.app.md` + `design/taste-skill.md` + `perfection/README.md` |
 | "Premium SaaS hero like Stripe" | `design/README.md` + `design/stripe.md` + `design/soft-skill.md` + `perfection/README.md` |
 | "Improve this existing dashboard" | `design/README.md` + `design/redesign-skill.md` + `perfection/README.md` |
@@ -119,13 +123,14 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
 - **Never weaken UX OR flatten the surface to buy points.** No dropping animations, hiding content, simplifying interactions, or replacing rendered/lit material with flat fills and flat geometric primitives for a Lighthouse score or a deadline. Hit 100 AND keep the surface dimensional — both, or neither.
 - **No emojis as icons.** SVG icon sets only (Lucide, Heroicons, Radix, Phosphor).
 - **GPU-composited animation only** — `transform`, `opacity`, `filter`; never animate layout properties.
-- **Verify in a real browser before declaring done.** Screenshots at 375 / 768 / 1280px; hover, focus, loading, empty, and error states all exercised.
+- **Slop animation is forbidden — motion serves meaning.** Every animation or hover must map to a real interaction, state change, or affordance. A hover that changes nothing, motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop — do not add it.
+- **Done is the `/visual-qa` dual-oracle gate, not your own glance.** A frontend design task is verified through `/visual-qa` (real browser at 375 / 768 / 1280px, every page, with interaction states and motion driven and inspected) until the dual-oracle completion gate passes on fresh evidence.
 
 ## When to load something else instead
 
 | Situation | Load |
 |---|---|
-| Brand/style not among the 69 in `references/design/`, or the user says "Open Design" | `open-design` skill — the local nexu-io/open-design library (137+ design skills, 150+ design systems) |
+| Brand/style not among the 70 in `references/design/`, or the user says "Open Design" | `open-design` skill — the local nexu-io/open-design library (137+ design skills, 150+ design systems) |
 | Driving a browser for the Design QA phase | `agent-browser` skill |
 | Pure TypeScript/logic work with zero visual surface | `programming` skill alone — this skill adds nothing there |
 

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

@@ -16,9 +16,9 @@ Two things ship flat most often, and both read as "clean but generic": the **her
 The library lives flat in this directory (`references/design/`, max depth 1) and has two conceptual layers, and **most non-trivial tasks load one from each layer**:
 
 - **Layer A — taste skills (12 files):** how to execute. Discipline, motion physics, spacing rules, anti-slop guardrails, output completeness. Filenames end in `-skill.md` or start with `imagegen-`.
-- **Layer B — design systems (69 files):** what it should look like. Concrete color/type/component tokens for one specific brand aesthetic. Filenames are brand names (`claude.md`, `notion.md`, `stripe.md`, …).
+- **Layer B — design systems (70 files):** what it should look like. Concrete color/type/component tokens for one specific brand aesthetic. Filenames are brand names (`aside.md`, `claude.md`, `notion.md`, `stripe.md`, ...).
 
-A combined directory of all 81 reference files is at `_INDEX.md`. **Read that index before loading anything** unless the routing is obvious — it has the full mood-mapping and stacking rules in one place.
+A combined directory of all 83 reference files is at `_INDEX.md`. **Read that index before loading anything** unless the routing is obvious — it has the full mood-mapping and stacking rules in one place.
 
 ## Open Design Library
 
@@ -94,7 +94,7 @@ Run through this in order and stop at the first match. Do not skip — earlier r
 
 ### Step 1 — Did the user name a specific brand or site?
 
-Phrasings: "make it look like Linear", "Stripe-style buttons", "Notion-feel sidebar", "like {brand}'s landing page", or pasting a screenshot of a known brand site.
+Phrasings: "make it look like Linear", "Stripe-style buttons", "Notion-feel sidebar", "Aside-style browser agent", "like {brand}'s landing page", or pasting a screenshot of a known brand site.
 
 **Action:** Open `_INDEX.md`, find the brand under "Layer B — Design Systems", then load `<brand>.md`. Use it as the project's design system source of truth (color hex values, type scale, component specs, do/don'ts).
 
@@ -131,12 +131,14 @@ Do NOT use this for greenfield work — the audit phase is wasted effort there.
 
 ### Step 4 — Is this an image-first workflow?
 
-Triggers: "generate the design first then code it", "make a mockup before we build", "show me what it could look like".
+Triggers: "generate the design first then code it", "make a mockup before we build", "show me what it could look like" — AND, by default, any expressive greenfield brief (glossy / premium / wow / brand-grade) with no user-supplied reference.
 
 **Action:** Load both:
 - `image-to-code-skill.md` (the workflow: generate → analyze → implement)
 - `imagegen-frontend-web.md` for web, or `imagegen-frontend-mobile.md` for mobile screens
 
+For an expressive greenfield brief, default to generating **2-3 imagen concept drafts**, each prompt **seeded with the loaded Layer A + Layer B tokens** (palette, type, signature material) so the drafts inherit the reference's taste instead of generic priors. Pick the strongest, then treat the chosen draft as the reference-fidelity contract for `/visual-qa`.
+
 If the user wants only the imagery (no code), load only the imagegen file.
 
 ### Step 5 — Image-only requests (no code)
@@ -201,6 +203,7 @@ Once references are loaded, before writing any UI code:
 | User asks for... | Load these |
 |---|---|
 | "Build me a landing page" (no other info) | `_INDEX.md` shortlist → exactly one Layer B reference + `taste-skill.md` |
+| "Build me an Aside-style AI browser / agent page" | `aside.md` + `taste-skill.md` |
 | "Build me a Linear-style landing page" | `linear.app.md` + `taste-skill.md` |
 | "Make it Notion-like and minimal" | `notion.md` + `minimalist-skill.md` |
 | "Premium SaaS hero, like Stripe" | `stripe.md` + `soft-skill.md` |
@@ -214,39 +217,14 @@ Once references are loaded, before writing any UI code:
 
 ## Phase Final — Design QA (MANDATORY, runs after implementation)
 
-After implementation is complete, **before declaring the task done**, run a real browser-based Design QA.
-
-### Why
-
-Code that "looks correct" in an editor is not verified. Colors render differently, spacing collapses, fonts fail to load, responsive breakpoints break, states are missing. The only way to know is to SEE it in a real browser.
-
-### How
-
-1. **Launch the app** in a real browser (use `agent-browser` skill or the project's dev server + screenshot tool).
-2. **Take screenshots** at key breakpoints: mobile (375px), tablet (768px), desktop (1280px).
-3. **Walk the design system checklist** visually:
-   - [ ] Colors match `DESIGN.md` palette — no off-brand colors visible
-   - [ ] Typography hierarchy is clear — headings, body, captions are visually distinct
-   - [ ] Spacing rhythm feels consistent — no cramped or floating elements
-   - [ ] Interactive states work — hover every button, focus every input, toggle every switch
-   - [ ] Empty, loading, and error states exist and look intentional
-   - [ ] Dark mode (if declared in `DESIGN.md`) works completely
-   - [ ] No layout overflow, no horizontal scroll on mobile
-   - [ ] Motion/animation feels smooth — no jank, no missing transitions
-   - [ ] (Expressive brief) Surfaces AND the hero focal object read as real, dimensional material — not flat fills or flat geometric primitives. Use the brand's material: glass = tint+backdrop saturate+rim+sheen+glow; bright/playful = gradient fills+soft depth shadows+a lit focal object. The hero focal object is a generated bitmap, or carries real light/shadow/gradient/depth.
-   - [ ] (Expressive brief) Brand color is a perceptual ramp (multiple stops / OKLCH), not one tint reused at different opacities
-   - [ ] (Expressive brief) Every interactive element has a visible hover AND active/pressed micro-interaction, and the hero carries one signature moment
-4. **Two kinds of failure count equally — fix both, then re-check.** Defects: clipping, wrong font, missing state, jank. Flatness: a surface that reads generic next to the loaded reference. When the render is bug-free but flat, you are NOT done — RAISE the design: deepen the material layering, give the color real depth and a ramp, add the signature interaction. Patching only bugs while the surface stays at the floor is the single most common way this skill ships clean-but-generic work. Do not report "done" with visual bugs OR a floor-level surface.
-5. **If you cannot launch a browser** (e.g. no dev server, CI-only environment), state this explicitly and list what you would check. Never silently skip QA.
-
-### QA Report
-
-After passing QA, write a short summary:
-- Breakpoints tested
-- States verified (hover, focus, disabled, loading, error, empty)
-- Design system compliance: all tokens traced back to `DESIGN.md`
-- Issues found and fixed during QA
-- Screenshot evidence (attach or describe)
+Before declaring the task done, verify the rendered UI. **The verification authority is `/visual-qa`, not a hand-rolled checklist here.** Run `/visual-qa`: it captures every page and breakpoint (375 / 768 / 1280px) on fresh evidence, drives and inspects interaction states (hover/focus/active) and motion (transitions, scroll-triggered, load), runs the dual-oracle pass, and loops until an independent reviewer passes. For a concrete reference or clone, run it in reference-fidelity mode.
+
+This skill adds only the design-taste judgments `/visual-qa` cannot make for you:
+
+1. **Two kinds of failure count equally — fix both, then re-check.** Defects: clipping, wrong font, missing state, jank. Flatness: a surface that reads generic next to the loaded reference. When the render is bug-free but flat, you are NOT done — RAISE the design: deepen the material layering, give the color a real perceptual ramp (multiple stops / OKLCH, not one tint at varied opacity), render the hero focal object as real dimensional material (a generated bitmap, or real light/shadow/gradient/depth — never flat geometric primitives), and add the one signature moment. Patching only bugs while the surface stays at the floor is the single most common way this skill ships clean-but-generic work.
+2. **Motion serves meaning; slop animation is forbidden.** Every interactive element must communicate its affordance and state changes — but a hover that changes nothing, motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop. Do not add it, and treat any you find as a defect. The hero may carry one signature moment; the rest of the surface earns motion only where it signals interaction or state.
+
+Report "done" only when `/visual-qa` has passed on fresh evidence AND neither a visual bug nor a floor-level or slop-laden surface remains.
 
 
 ## Final notes

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

@@ -3,7 +3,7 @@
 All reference files live flat in this directory. Three layers:
 - **Layer 0 — design system architecture** (1 file): the mandatory gate. Defines `DESIGN.md` structure, creation workflow, validation rules. Always loaded by Phase 0 when no design system exists.
 - **Layer A — taste skills** (12 files): how to execute. Discipline, motion, spacing, anti-slop, output completeness.
-- **Layer B — design systems** (69 files): what it should look like. Brand-specific color/type/component tokens.
+- **Layer B — design systems** (70 files): what it should look like. Brand-specific color/type/component tokens.
 
 **Phase 0 runs first** (check/create `DESIGN.md`), then most non-trivial tasks load **one Layer A + one Layer B** together. See the routing flow in the sibling `README.md`.
 
@@ -52,9 +52,9 @@ From [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill).
 
 ---
 
-## Layer B — Design Systems (71)
+## Layer B — Design Systems (70)
 
-From [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), based on [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/). Each file captures one website's complete visual language: color palette, typography, components, layout principles, depth, do/don't, responsive behavior, and an agent prompt guide.
+Most Layer B files are materialized from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), based on [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/). Project-original entries such as `aside.md` are listed here only when `ATTRIBUTION.md` and `frontend-refs-manifest.mjs` mark them as original. Each file captures one website's complete visual language: color palette, typography, components, layout principles, depth, do/don't, responsive behavior, and an agent prompt guide.
 
 ### How to use
 
@@ -83,6 +83,7 @@ Each file ships with: visual theme, hex color palette + semantic roles, full typ
 
 | File | Aesthetic |
 |---|---|
+| `aside.md` | AI browser agent. Bright product-app marketing, custom display type, soft squircle controls, browser-product framing. |
 | `cursor.md` | AI-first code editor. Sleek dark interface, gradient accents. |
 | `expo.md` | React Native platform. Dark theme, tight letter-spacing, code-centric. |
 | `lovable.md` | AI full-stack builder. Playful gradients, friendly dev aesthetic. |
@@ -183,6 +184,7 @@ Each file ships with: visual theme, hex color palette + semantic roles, full typ
 - **"Brutal / Swiss / industrial"** → `nike.md`, `bugatti.md`, `vodafone.md`
 - **"Dark cinematic"** → `runwayml.md`, `elevenlabs.md`, `superhuman.md`, `shopify.md`
 - **"Terminal / developer-native"** → `vercel.md`, `warp.md`, `voltagent.md`, `ollama.md`
+- **"AI browser / agentic browser / product-app launch"** → `aside.md`, `raycast.md`, `superhuman.md`
 - **"Warm / approachable / soft"** → `airbnb.md`, `notion.md`, `intercom.md`, `mastercard.md`
 - **"Data-dense / dashboard"** → `sentry.md`, `kraken.md`, `posthog.md`, `clickhouse.md`
 - **"Bold / sporty / monochrome punch"** → `nike.md`, `uber.md`, `tesla.md`, `binance.md`