oh-my-opencode 4.14.1 → 4.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli/index.js +88 -35
- package/dist/cli-node/index.js +88 -35
- package/dist/index.js +13 -13
- package/dist/skills/frontend/ATTRIBUTION.md +7 -1
- package/dist/skills/frontend/SKILL.md +4 -3
- package/dist/skills/frontend/references/design/README.md +4 -3
- package/dist/skills/frontend/references/design/_INDEX.md +5 -3
- package/dist/skills/frontend/references/design/aside.md +209 -0
- package/package.json +13 -13
- package/packages/omo-codex/plugin/.codex-plugin/plugin.json +1 -1
- package/packages/omo-codex/plugin/components/bootstrap/package.json +1 -1
- package/packages/omo-codex/plugin/components/codegraph/package.json +1 -1
- package/packages/omo-codex/plugin/components/comment-checker/package.json +1 -1
- package/packages/omo-codex/plugin/components/git-bash/package.json +1 -1
- package/packages/omo-codex/plugin/components/lazycodex-executor-verify/package.json +1 -1
- package/packages/omo-codex/plugin/components/lsp/package.json +1 -1
- package/packages/omo-codex/plugin/components/rules/package.json +1 -1
- package/packages/omo-codex/plugin/components/start-work-continuation/package.json +1 -1
- package/packages/omo-codex/plugin/components/teammode/package.json +1 -1
- package/packages/omo-codex/plugin/components/telemetry/package.json +1 -1
- package/packages/omo-codex/plugin/components/ultrawork/package.json +1 -1
- package/packages/omo-codex/plugin/components/ulw-loop/package.json +1 -1
- package/packages/omo-codex/plugin/package-lock.json +13 -13
- package/packages/omo-codex/plugin/package.json +1 -1
- package/packages/omo-codex/plugin/skills/frontend/ATTRIBUTION.md +7 -1
- package/packages/omo-codex/plugin/skills/frontend/SKILL.md +4 -3
- package/packages/omo-codex/plugin/skills/frontend/references/design/README.md +4 -3
- package/packages/omo-codex/plugin/skills/frontend/references/design/_INDEX.md +5 -3
- package/packages/omo-codex/plugin/skills/frontend/references/design/aside.md +209 -0
- package/packages/omo-codex/plugin/test/aggregate-skills.test.mjs +23 -0
- package/packages/omo-codex/scripts/install-dist/install-local.mjs +67 -14
- package/packages/shared-skills/skills/frontend/ATTRIBUTION.md +7 -1
- package/packages/shared-skills/skills/frontend/SKILL.md +4 -3
- package/packages/shared-skills/skills/frontend/references/design/README.md +4 -3
- package/packages/shared-skills/skills/frontend/references/design/_INDEX.md +5 -3
- package/packages/shared-skills/skills/frontend/references/design/aside.md +209 -0
|
@@ -33,7 +33,7 @@ When `references/designpowers/README.md` is loaded for implementation, redesign,
|
|
|
33
33
|
|
|
34
34
|
## Ruleset 1 — design (`references/design/`)
|
|
35
35
|
|
|
36
|
-
The reference library has one architecture file, 12 taste skills (Layer A — *how to execute*), and
|
|
36
|
+
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.
|
|
37
37
|
|
|
38
38
|
### Layer 0 — architecture
|
|
39
39
|
|
|
@@ -58,7 +58,7 @@ The reference library has one architecture file, 12 taste skills (Layer A — *h
|
|
|
58
58
|
|
|
59
59
|
### Layer B — brand design systems (orthogonal to Layer A; stack freely)
|
|
60
60
|
|
|
61
|
-
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.
|
|
61
|
+
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.
|
|
62
62
|
|
|
63
63
|
### React dev tooling
|
|
64
64
|
|
|
@@ -102,6 +102,7 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
|
|
|
102
102
|
| Request | Load |
|
|
103
103
|
|---|---|
|
|
104
104
|
| "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` |
|
|
105
|
+
| "Aside-style AI browser / browser agent page" | `design/README.md` + `design/aside.md` + `design/taste-skill.md` + `perfection/README.md` |
|
|
105
106
|
| "Linear-style landing page" | `design/README.md` + `design/linear.app.md` + `design/taste-skill.md` + `perfection/README.md` |
|
|
106
107
|
| "Premium SaaS hero like Stripe" | `design/README.md` + `design/stripe.md` + `design/soft-skill.md` + `perfection/README.md` |
|
|
107
108
|
| "Improve this existing dashboard" | `design/README.md` + `design/redesign-skill.md` + `perfection/README.md` |
|
|
@@ -125,7 +126,7 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
|
|
|
125
126
|
|
|
126
127
|
| Situation | Load |
|
|
127
128
|
|---|---|
|
|
128
|
-
| Brand/style not among the
|
|
129
|
+
| 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) |
|
|
129
130
|
| Driving a browser for the Design QA phase | `agent-browser` skill |
|
|
130
131
|
| Pure TypeScript/logic work with zero visual surface | `programming` skill alone — this skill adds nothing there |
|
|
131
132
|
|
|
@@ -16,9 +16,9 @@ Two things ship flat most often, and both read as "clean but generic": the **her
|
|
|
16
16
|
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**:
|
|
17
17
|
|
|
18
18
|
- **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-`.
|
|
19
|
-
- **Layer B — design systems (
|
|
19
|
+
- **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`, ...).
|
|
20
20
|
|
|
21
|
-
A combined directory of all
|
|
21
|
+
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.
|
|
22
22
|
|
|
23
23
|
## Open Design Library
|
|
24
24
|
|
|
@@ -94,7 +94,7 @@ Run through this in order and stop at the first match. Do not skip — earlier r
|
|
|
94
94
|
|
|
95
95
|
### Step 1 — Did the user name a specific brand or site?
|
|
96
96
|
|
|
97
|
-
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.
|
|
97
|
+
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.
|
|
98
98
|
|
|
99
99
|
**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).
|
|
100
100
|
|
|
@@ -201,6 +201,7 @@ Once references are loaded, before writing any UI code:
|
|
|
201
201
|
| User asks for... | Load these |
|
|
202
202
|
|---|---|
|
|
203
203
|
| "Build me a landing page" (no other info) | `_INDEX.md` shortlist → exactly one Layer B reference + `taste-skill.md` |
|
|
204
|
+
| "Build me an Aside-style AI browser / agent page" | `aside.md` + `taste-skill.md` |
|
|
204
205
|
| "Build me a Linear-style landing page" | `linear.app.md` + `taste-skill.md` |
|
|
205
206
|
| "Make it Notion-like and minimal" | `notion.md` + `minimalist-skill.md` |
|
|
206
207
|
| "Premium SaaS hero, like Stripe" | `stripe.md` + `soft-skill.md` |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All reference files live flat in this directory. Three layers:
|
|
4
4
|
- **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.
|
|
5
5
|
- **Layer A — taste skills** (12 files): how to execute. Discipline, motion, spacing, anti-slop, output completeness.
|
|
6
|
-
- **Layer B — design systems** (
|
|
6
|
+
- **Layer B — design systems** (70 files): what it should look like. Brand-specific color/type/component tokens.
|
|
7
7
|
|
|
8
8
|
**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`.
|
|
9
9
|
|
|
@@ -52,9 +52,9 @@ From [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill).
|
|
|
52
52
|
|
|
53
53
|
---
|
|
54
54
|
|
|
55
|
-
## Layer B — Design Systems (
|
|
55
|
+
## Layer B — Design Systems (70)
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
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.
|
|
58
58
|
|
|
59
59
|
### How to use
|
|
60
60
|
|
|
@@ -83,6 +83,7 @@ Each file ships with: visual theme, hex color palette + semantic roles, full typ
|
|
|
83
83
|
|
|
84
84
|
| File | Aesthetic |
|
|
85
85
|
|---|---|
|
|
86
|
+
| `aside.md` | AI browser agent. Bright product-app marketing, custom display type, soft squircle controls, browser-product framing. |
|
|
86
87
|
| `cursor.md` | AI-first code editor. Sleek dark interface, gradient accents. |
|
|
87
88
|
| `expo.md` | React Native platform. Dark theme, tight letter-spacing, code-centric. |
|
|
88
89
|
| `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
|
|
|
183
184
|
- **"Brutal / Swiss / industrial"** → `nike.md`, `bugatti.md`, `vodafone.md`
|
|
184
185
|
- **"Dark cinematic"** → `runwayml.md`, `elevenlabs.md`, `superhuman.md`, `shopify.md`
|
|
185
186
|
- **"Terminal / developer-native"** → `vercel.md`, `warp.md`, `voltagent.md`, `ollama.md`
|
|
187
|
+
- **"AI browser / agentic browser / product-app launch"** → `aside.md`, `raycast.md`, `superhuman.md`
|
|
186
188
|
- **"Warm / approachable / soft"** → `airbnb.md`, `notion.md`, `intercom.md`, `mastercard.md`
|
|
187
189
|
- **"Data-dense / dashboard"** → `sentry.md`, `kraken.md`, `posthog.md`, `clickhouse.md`
|
|
188
190
|
- **"Bold / sporty / monochrome punch"** → `nike.md`, `uber.md`, `tesla.md`, `binance.md`
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
# Design System Inspired by Aside
|
|
2
|
+
|
|
3
|
+
> Category: Developer Tools & IDEs
|
|
4
|
+
> AI browser agent. Bright product-app marketing, custom display type, soft squircle controls, agent-browser product framing.
|
|
5
|
+
|
|
6
|
+
## Provenance
|
|
7
|
+
|
|
8
|
+
This reference is derived from a live capture of `https://aside.com/` on 2026-06-30, plus a reconnaissance pass following `JCodesMore/ai-website-cloner-template` at commit `8dd9cb47dde0d49fec06ee1d69bedd04840f3c95`.
|
|
9
|
+
|
|
10
|
+
Reviewer-run evidence artifacts for the source capture were written under `.omo/evidence/20260630-aside-frontend-reference/`:
|
|
11
|
+
|
|
12
|
+
- `aside-live-extraction.json`
|
|
13
|
+
- `aside-home.png`
|
|
14
|
+
- `cloner-output-summary.md`
|
|
15
|
+
- `cloner-desktop-1440.png`
|
|
16
|
+
- `cloner-tablet-768.png`
|
|
17
|
+
- `cloner-mobile-390.png`
|
|
18
|
+
|
|
19
|
+
Those `.omo/evidence` files are local review artifacts, not shipped package assets. Downstream agents should recapture the live site when fidelity to the current Aside page matters. This file carries the stable, reviewer-visible digest from that capture.
|
|
20
|
+
|
|
21
|
+
### Reviewer-Visible Capture Digest
|
|
22
|
+
|
|
23
|
+
- **Source page:** `https://aside.com/`
|
|
24
|
+
- **Source metadata:** title indicated a browser built to do real work; description framed it as a browser that completes complex work across sites, accounts, and history.
|
|
25
|
+
- **Template source:** `JCodesMore/ai-website-cloner-template` at commit `8dd9cb47dde0d49fec06ee1d69bedd04840f3c95`; the template was used as a local reconnaissance workflow, not copied into this repo.
|
|
26
|
+
- **Screenshots captured:** live page at 1440px wide; reconstructed reconnaissance screenshots at 1440px, 768px, and 390px widths.
|
|
27
|
+
- **Page topology:** compact nav, centered hero, sky/cloud hero wash, large browser-product frame, explanatory intro band, capability sections, benchmark tabs, password/security sections, blue closing CTA band, dense footer.
|
|
28
|
+
- **Extracted type signals:** `displayFont` for hero and section display; Geist for body/UI; Geist Mono available for technical specimens.
|
|
29
|
+
- **Extracted scale signals:** H1 around 48px / 52px with slight negative tracking; body 16px / 24px; UI labels around 14px / 20px.
|
|
30
|
+
- **Extracted surface signals:** white page canvas, ink text around `#090b0c`, soft gray controls around `#f5f5f5`, black-opacity dividers, pill trust badge, rounded/squircle CTA buttons, product-frame shadows.
|
|
31
|
+
- **Responsive observations:** desktop preserves full nav and large browser frame; tablet narrows the product frame; mobile crops/stacks the frame while keeping the hero and CTA visible.
|
|
32
|
+
|
|
33
|
+
Do not treat this file as a license to copy Aside's logo, product screenshots, copy, or proprietary assets. Use it as a token and layout reference for original AI-browser, agent-workflow, and product-app surfaces.
|
|
34
|
+
|
|
35
|
+
## 1. Visual Theme & Atmosphere
|
|
36
|
+
|
|
37
|
+
Aside's current site reads as a bright, high-confidence product application rather than a dark developer landing page. The canvas is mostly white with hairline black dividers, dense product UI, large custom display headlines, and pale sky-blue atmospheric bands in the hero and final CTA. It feels closer to a native app launch page than a SaaS template: crisp, controlled, and built around the promise that the browser itself can do real work.
|
|
38
|
+
|
|
39
|
+
The signature move is the contrast between calm white space, a gentle cloud-like blue wash, and dense browser-product framing. The page opens with a centered hero, a small Y Combinator trust pill, and a large browser/app visual. Below that, sections use full-width bands, thin separators, and app-like capability cards instead of decorative feature-card grids. The tone is practical and confident: precise controls, product screenshots, benchmark pills, password/memory/security stories, and compact navigation.
|
|
40
|
+
|
|
41
|
+
Rounded elements should feel like soft squircles, not generic `rounded-2xl` blobs. Live capture shows very large pill radii for trust badges and hero CTAs, medium squircle radii around compact action buttons, and square rhythm for structural section boundaries. Depth is created by product frames, soft shadows, white/black opacity borders, and layered screenshot surfaces, not by colorful background decoration.
|
|
42
|
+
|
|
43
|
+
## 2. Color Palette & Roles
|
|
44
|
+
|
|
45
|
+
### Core Canvas
|
|
46
|
+
|
|
47
|
+
- **White** (`#ffffff`): primary page background. Use for the main canvas and broad content bands.
|
|
48
|
+
- **Ink Black** (`lab(2.93655 -0.435196 -0.608262)`, approximate `#090b0c`): primary text. Use this instead of pure black when possible.
|
|
49
|
+
- **Soft Gray Surface** (`lab(96.52 -0.0000298023 0.0000119209)`, approximate `#f5f5f5`): rounded control and panel surface.
|
|
50
|
+
- **Hairline Divider** (`rgba(0,0,0,0.06)`): section borders and subtle containment.
|
|
51
|
+
- **Muted Text** (`#737373` to `#a1a1a1` range): captions, footer links, secondary product explanations.
|
|
52
|
+
|
|
53
|
+
### Action Surfaces
|
|
54
|
+
|
|
55
|
+
- **Primary Button Surface**: light gray or ink-inverted depending on context. Use compact contrast instead of saturated brand color.
|
|
56
|
+
- **Primary Button Text**: ink black on light controls; white on dark controls.
|
|
57
|
+
- **Hover Surface**: slightly darker neutral fill with 150ms color/background/border transition.
|
|
58
|
+
- **Focus Ring**: neutral gray ring. Keep it visible against white and soft gray.
|
|
59
|
+
|
|
60
|
+
### Accent Use
|
|
61
|
+
|
|
62
|
+
Aside's live capture does not rely on one dominant neon accent. Accents come from product imagery, benchmark pills, subtle icon color, and carefully placed dark controls. If a project needs a brand color, keep it secondary to the black/white/gray product-app system and apply it only to small signals.
|
|
63
|
+
|
|
64
|
+
The current page does use pale cyan/sky-blue atmosphere in large image-backed bands. Treat that as an optional Aside signature for AI-browser launches: soft, airy, and product-framing, not a generic blue gradient background.
|
|
65
|
+
|
|
66
|
+
## 3. Typography Rules
|
|
67
|
+
|
|
68
|
+
### Font Family
|
|
69
|
+
|
|
70
|
+
- **Display**: Aside custom display font exposed in capture as `displayFont`, fallback display sans.
|
|
71
|
+
- **Body / UI**: Geist, fallback sans.
|
|
72
|
+
- **Mono**: Geist Mono for code, benchmark labels, and technical specimens.
|
|
73
|
+
|
|
74
|
+
### Hierarchy
|
|
75
|
+
|
|
76
|
+
| Role | Font | Size | Weight | Line Height | Letter Spacing | Use |
|
|
77
|
+
|---|---|---:|---:|---:|---:|---|
|
|
78
|
+
| Hero Display | displayFont | 48px | 400 | 52px | -0.48px | Primary H1 |
|
|
79
|
+
| Section Display | displayFont | 36px-48px | 400-500 | 1.08-1.15 | tight | Major section claims |
|
|
80
|
+
| Card Title | displayFont or Geist | 24px-30px | 500 | 1.2 | normal/tight | Product capability cards |
|
|
81
|
+
| Body | Geist | 16px | 400 | 24px | normal | General explanation |
|
|
82
|
+
| UI Label | Geist | 14px | 500 | 20px | normal | Nav, buttons, menu labels |
|
|
83
|
+
| Pill/Caption | Geist | 12px-14px | 500-550 | 1.3 | slight | Badges, metadata, benchmarks |
|
|
84
|
+
|
|
85
|
+
### Principles
|
|
86
|
+
|
|
87
|
+
- Use the display font for the claim, not for every word on the page.
|
|
88
|
+
- Keep body copy plain, readable, and product-focused.
|
|
89
|
+
- Favor medium weights over bold weights; the brand voice is confident but not shouty.
|
|
90
|
+
- Avoid negative letter-spacing outside display text. The router's global rule against viewport-scaled font sizing still applies.
|
|
91
|
+
|
|
92
|
+
## 4. Component Stylings
|
|
93
|
+
|
|
94
|
+
### Navigation
|
|
95
|
+
|
|
96
|
+
- Top navigation is compact and product-app-like.
|
|
97
|
+
- Logo at left, grouped menu buttons/links in the center, download CTA at right.
|
|
98
|
+
- Nav labels use Geist 14px/500 with short 150ms color/background transitions.
|
|
99
|
+
- Dropdown triggers can be text buttons with no visible border until hover.
|
|
100
|
+
- Mobile should collapse to icon/hamburger controls with the same neutral/squircle treatment.
|
|
101
|
+
|
|
102
|
+
### Hero Trust Pill
|
|
103
|
+
|
|
104
|
+
- Pill radius: full pill, visually continuous.
|
|
105
|
+
- Border/fill: very subtle neutral contrast against white.
|
|
106
|
+
- Text: 12px-14px Geist, medium weight.
|
|
107
|
+
- Content: use as a trust or provenance signal, not a decorative chip pile.
|
|
108
|
+
|
|
109
|
+
### Primary CTA
|
|
110
|
+
|
|
111
|
+
- Shape: pill for hero CTA, medium squircle for standard nav/action buttons.
|
|
112
|
+
- Height: 36px compact nav, 44px hero/mobile.
|
|
113
|
+
- Padding: generous horizontal padding for hero; compact in nav.
|
|
114
|
+
- Motion: 150ms background/color/border transition; pressed state can scale to 0.97.
|
|
115
|
+
- Icon: use SVG icon from the app's icon library; do not use emoji.
|
|
116
|
+
|
|
117
|
+
### Product Browser Frame
|
|
118
|
+
|
|
119
|
+
This is the key Aside-inspired primitive.
|
|
120
|
+
|
|
121
|
+
- Large product/browser mockup below or near the hero claim.
|
|
122
|
+
- Use a real screenshot, generated bitmap, or carefully built UI surface. Do not substitute flat rectangles.
|
|
123
|
+
- Contain with soft border, rounded/squircle corners, and restrained shadow.
|
|
124
|
+
- Internal chrome should show real browser/app affordances: sidebar, tabs, compact controls, content panels.
|
|
125
|
+
- The frame can overflow and crop at mobile widths, but the focal content must remain legible.
|
|
126
|
+
|
|
127
|
+
### Capability Sections
|
|
128
|
+
|
|
129
|
+
- Full-width horizontal bands separated by `border-b border-black/6` style dividers.
|
|
130
|
+
- Section structure: one major claim, one explanatory block, one app-like visual or metric module.
|
|
131
|
+
- Avoid three generic feature cards unless the product genuinely has three peer capabilities.
|
|
132
|
+
- Link rows and "Learn more" controls stay quiet and text-forward.
|
|
133
|
+
|
|
134
|
+
### Benchmark Pills / Tabs
|
|
135
|
+
|
|
136
|
+
- Medium squircle radius around compact tabs.
|
|
137
|
+
- Neutral backgrounds with dark text.
|
|
138
|
+
- Hover/active states should be visible through fill, border, or text contrast.
|
|
139
|
+
- Useful for agent benchmarks, model comparisons, task modes, and product states.
|
|
140
|
+
|
|
141
|
+
## 5. Layout Principles
|
|
142
|
+
|
|
143
|
+
### Structure
|
|
144
|
+
|
|
145
|
+
- Full page uses stacked bands rather than isolated floating cards.
|
|
146
|
+
- Hero centers the brand claim and then gives the product visual real space.
|
|
147
|
+
- Sections often span full width with internal max-width constraints.
|
|
148
|
+
- Footer is link-dense and calm, with grouped columns.
|
|
149
|
+
|
|
150
|
+
### Spacing
|
|
151
|
+
|
|
152
|
+
- Outer page padding: 8px mobile, 16px desktop.
|
|
153
|
+
- Hero vertical rhythm: generous, but not editorially sparse; the product visual arrives quickly.
|
|
154
|
+
- Section padding: 56px-96px depending on density.
|
|
155
|
+
- Dense UI inside product frames can use 8px-16px rhythm.
|
|
156
|
+
|
|
157
|
+
### Responsive Behavior
|
|
158
|
+
|
|
159
|
+
- Desktop: full nav, large browser/product visual, multi-column footer.
|
|
160
|
+
- Tablet: preserve product framing but reduce visual width and section padding.
|
|
161
|
+
- Mobile: collapse nav, make hero text more compact, crop or stack the product frame deliberately.
|
|
162
|
+
- Avoid horizontal overflow; if a browser mockup is wider than the viewport, scale or crop from a stable container.
|
|
163
|
+
|
|
164
|
+
## 6. Depth, Motion & Interaction
|
|
165
|
+
|
|
166
|
+
### Depth
|
|
167
|
+
|
|
168
|
+
- Use hairline borders and product-frame shadows as the primary elevation language.
|
|
169
|
+
- Prefer subtle neutral shadow over colored glows.
|
|
170
|
+
- Layer product screenshots or UI panels to create depth.
|
|
171
|
+
- Keep broad backgrounds flat white unless a product visual, hero, or closing CTA needs the current Aside-like pale sky-blue atmospheric wash.
|
|
172
|
+
|
|
173
|
+
### Motion
|
|
174
|
+
|
|
175
|
+
- Use short transitions for controls: color, background-color, border-color, opacity, transform.
|
|
176
|
+
- Keep motion in the 150ms-200ms range with standard cubic-bezier easing.
|
|
177
|
+
- Product demos may use scroll or time-based state changes, but document the interaction model in `DESIGN.md` before building.
|
|
178
|
+
- Animate transform/opacity/filter only.
|
|
179
|
+
|
|
180
|
+
### Interaction States
|
|
181
|
+
|
|
182
|
+
Every primitive must define default, hover, active, focus-visible, disabled, loading, empty, and error states before implementation. Aside-like surfaces are quiet, so missing states are obvious.
|
|
183
|
+
|
|
184
|
+
## 7. Do's and Don'ts
|
|
185
|
+
|
|
186
|
+
### Do
|
|
187
|
+
|
|
188
|
+
- Do use a bright canvas with crisp ink typography for the current Aside-inspired look.
|
|
189
|
+
- Do use a custom display face or distinctive display substitute for hero and section claims.
|
|
190
|
+
- Do preserve the product-browser frame as the memorable focal object.
|
|
191
|
+
- Do use soft squircle or pill corners intentionally by component role.
|
|
192
|
+
- Do build dense, useful product UI inside the hero visual.
|
|
193
|
+
- Do use thin black-opacity dividers to make sections feel engineered.
|
|
194
|
+
- Do keep CTA colors neutral and high contrast.
|
|
195
|
+
- Do cite live screenshots or extracted design tokens when claiming Aside fidelity.
|
|
196
|
+
|
|
197
|
+
### Don't
|
|
198
|
+
|
|
199
|
+
- Don't resurrect the older dark-only Aside reference without checking the live site.
|
|
200
|
+
- Don't copy Aside's logo, text, screenshots, or proprietary product assets.
|
|
201
|
+
- Don't replace the product-browser focal object with flat geometric decoration.
|
|
202
|
+
- Don't make the page a purple-blue gradient SaaS layout.
|
|
203
|
+
- Don't use saturated sky blue as a giant primary CTA color; if using Aside's current atmosphere, keep it pale, cloud-like, and subordinate to the product frame.
|
|
204
|
+
- Don't over-round every component equally; distinguish pills, squircles, and structural edges.
|
|
205
|
+
- Don't hide visual QA behind tests. Aside-like work needs screenshots at mobile, tablet, and desktop widths.
|
|
206
|
+
|
|
207
|
+
## Agent Prompt
|
|
208
|
+
|
|
209
|
+
When building an Aside-inspired surface, first create or update `DESIGN.md` with: bright white product-app atmosphere, display/body/mono font roles, ink/neutral token ramp, squircle/pill component rules, a product-browser focal primitive, dense capability bands, and responsive crop/scale behavior for the product frame. Use original content and assets. Verify with screenshots at 375px, 768px, and 1280px or wider, and compare against the live-reference evidence before declaring visual fidelity.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oh-my-opencode",
|
|
3
|
-
"version": "4.14.
|
|
3
|
+
"version": "4.14.2",
|
|
4
4
|
"description": "The Best AI Agent Harness - Batteries-Included OpenCode Plugin with Multi-Model Orchestration, Parallel Background Agents, and Crafted LSP/AST Tools",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -191,18 +191,18 @@
|
|
|
191
191
|
"typescript": "^6.0.3"
|
|
192
192
|
},
|
|
193
193
|
"optionalDependencies": {
|
|
194
|
-
"oh-my-opencode-darwin-arm64": "4.14.
|
|
195
|
-
"oh-my-opencode-darwin-x64": "4.14.
|
|
196
|
-
"oh-my-opencode-darwin-x64-baseline": "4.14.
|
|
197
|
-
"oh-my-opencode-linux-arm64": "4.14.
|
|
198
|
-
"oh-my-opencode-linux-arm64-musl": "4.14.
|
|
199
|
-
"oh-my-opencode-linux-x64": "4.14.
|
|
200
|
-
"oh-my-opencode-linux-x64-baseline": "4.14.
|
|
201
|
-
"oh-my-opencode-linux-x64-musl": "4.14.
|
|
202
|
-
"oh-my-opencode-linux-x64-musl-baseline": "4.14.
|
|
203
|
-
"oh-my-opencode-windows-arm64": "4.14.
|
|
204
|
-
"oh-my-opencode-windows-x64": "4.14.
|
|
205
|
-
"oh-my-opencode-windows-x64-baseline": "4.14.
|
|
194
|
+
"oh-my-opencode-darwin-arm64": "4.14.2",
|
|
195
|
+
"oh-my-opencode-darwin-x64": "4.14.2",
|
|
196
|
+
"oh-my-opencode-darwin-x64-baseline": "4.14.2",
|
|
197
|
+
"oh-my-opencode-linux-arm64": "4.14.2",
|
|
198
|
+
"oh-my-opencode-linux-arm64-musl": "4.14.2",
|
|
199
|
+
"oh-my-opencode-linux-x64": "4.14.2",
|
|
200
|
+
"oh-my-opencode-linux-x64-baseline": "4.14.2",
|
|
201
|
+
"oh-my-opencode-linux-x64-musl": "4.14.2",
|
|
202
|
+
"oh-my-opencode-linux-x64-musl-baseline": "4.14.2",
|
|
203
|
+
"oh-my-opencode-windows-arm64": "4.14.2",
|
|
204
|
+
"oh-my-opencode-windows-x64": "4.14.2",
|
|
205
|
+
"oh-my-opencode-windows-x64-baseline": "4.14.2"
|
|
206
206
|
},
|
|
207
207
|
"overrides": {
|
|
208
208
|
"hono": "^4.12.18",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@code-yeongyu/codex-ultrawork",
|
|
3
|
-
"version": "4.14.
|
|
3
|
+
"version": "4.14.2",
|
|
4
4
|
"description": "Codex plugin that injects the ultrawork orchestration directive and ships LazyCodex planning, review, QA, and gate agent roles.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "npm@11.12.1",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@code-yeongyu/codex-ulw-loop",
|
|
3
|
-
"version": "4.14.
|
|
3
|
+
"version": "4.14.2",
|
|
4
4
|
"description": "Codex plugin: durable repo-native multi-goal orchestration with embedded success criteria and observable evidence audit.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "npm@11.12.1",
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sisyphuslabs/omo-codex-plugin",
|
|
3
|
-
"version": "4.14.
|
|
3
|
+
"version": "4.14.2",
|
|
4
4
|
"lockfileVersion": 3,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
8
|
"name": "@sisyphuslabs/omo-codex-plugin",
|
|
9
|
-
"version": "4.14.
|
|
9
|
+
"version": "4.14.2",
|
|
10
10
|
"workspaces": [
|
|
11
11
|
"components/codegraph",
|
|
12
12
|
"components/comment-checker",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
},
|
|
94
94
|
"components/codegraph": {
|
|
95
95
|
"name": "@sisyphuslabs/codex-codegraph",
|
|
96
|
-
"version": "4.14.
|
|
96
|
+
"version": "4.14.2",
|
|
97
97
|
"bin": {
|
|
98
98
|
"omo-codegraph": "dist/cli.js"
|
|
99
99
|
},
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
},
|
|
113
113
|
"components/comment-checker": {
|
|
114
114
|
"name": "@code-yeongyu/codex-comment-checker",
|
|
115
|
-
"version": "4.14.
|
|
115
|
+
"version": "4.14.2",
|
|
116
116
|
"license": "MIT",
|
|
117
117
|
"bin": {
|
|
118
118
|
"omo-comment-checker": "dist/cli.js"
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
},
|
|
134
134
|
"components/git-bash": {
|
|
135
135
|
"name": "@sisyphuslabs/codex-git-bash-hook",
|
|
136
|
-
"version": "4.14.
|
|
136
|
+
"version": "4.14.2",
|
|
137
137
|
"bin": {
|
|
138
138
|
"omo-git-bash-hook": "dist/cli.js"
|
|
139
139
|
},
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
},
|
|
149
149
|
"components/lazycodex-executor-verify": {
|
|
150
150
|
"name": "@code-yeongyu/codex-lazycodex-executor-verify",
|
|
151
|
-
"version": "4.14.
|
|
151
|
+
"version": "4.14.2",
|
|
152
152
|
"license": "MIT",
|
|
153
153
|
"bin": {
|
|
154
154
|
"lazycodex-executor-verify": "dist/cli.js"
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
},
|
|
166
166
|
"components/lsp": {
|
|
167
167
|
"name": "@code-yeongyu/codex-lsp",
|
|
168
|
-
"version": "4.14.
|
|
168
|
+
"version": "4.14.2",
|
|
169
169
|
"license": "MIT",
|
|
170
170
|
"dependencies": {
|
|
171
171
|
"@code-yeongyu/lsp-daemon": "file:../../../../lsp-daemon"
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
},
|
|
186
186
|
"components/rules": {
|
|
187
187
|
"name": "@code-yeongyu/codex-rules",
|
|
188
|
-
"version": "4.14.
|
|
188
|
+
"version": "4.14.2",
|
|
189
189
|
"license": "MIT",
|
|
190
190
|
"dependencies": {
|
|
191
191
|
"picomatch": "^4.0.3"
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
},
|
|
208
208
|
"components/start-work-continuation": {
|
|
209
209
|
"name": "@code-yeongyu/codex-start-work-continuation",
|
|
210
|
-
"version": "4.14.
|
|
210
|
+
"version": "4.14.2",
|
|
211
211
|
"license": "MIT",
|
|
212
212
|
"bin": {
|
|
213
213
|
"omo-start-work-continuation": "dist/cli.js"
|
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
},
|
|
225
225
|
"components/teammode": {
|
|
226
226
|
"name": "@sisyphuslabs/codex-teammode",
|
|
227
|
-
"version": "4.14.
|
|
227
|
+
"version": "4.14.2",
|
|
228
228
|
"devDependencies": {
|
|
229
229
|
"@types/node": "^25.9.3",
|
|
230
230
|
"bun-types": "^1.3.1",
|
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
},
|
|
238
238
|
"components/telemetry": {
|
|
239
239
|
"name": "@code-yeongyu/codex-telemetry",
|
|
240
|
-
"version": "4.14.
|
|
240
|
+
"version": "4.14.2",
|
|
241
241
|
"license": "MIT",
|
|
242
242
|
"bin": {
|
|
243
243
|
"omo-telemetry": "dist/cli.js"
|
|
@@ -255,7 +255,7 @@
|
|
|
255
255
|
},
|
|
256
256
|
"components/ultrawork": {
|
|
257
257
|
"name": "@code-yeongyu/codex-ultrawork",
|
|
258
|
-
"version": "4.14.
|
|
258
|
+
"version": "4.14.2",
|
|
259
259
|
"license": "MIT",
|
|
260
260
|
"bin": {
|
|
261
261
|
"omo-ultrawork": "dist/cli.js"
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
},
|
|
274
274
|
"components/ulw-loop": {
|
|
275
275
|
"name": "@code-yeongyu/codex-ulw-loop",
|
|
276
|
-
"version": "4.14.
|
|
276
|
+
"version": "4.14.2",
|
|
277
277
|
"license": "MIT",
|
|
278
278
|
"bin": {
|
|
279
279
|
"omo-ulw-loop": "dist/cli.js",
|
|
@@ -186,10 +186,16 @@ SOFTWARE.
|
|
|
186
186
|
|
|
187
187
|
## 5. Project-original files
|
|
188
188
|
|
|
189
|
-
`frontend/SKILL.md`, `frontend/references/design/README.md`, `_INDEX.md`,
|
|
189
|
+
`frontend/SKILL.md`, `frontend/references/design/README.md`, `_INDEX.md`, `aside.md`,
|
|
190
190
|
`design-system-architecture.md`, `react-dev-tooling-skill.md`,
|
|
191
191
|
`frontend/references/perfection/README.md`, `react-perf-tooling.md`, and
|
|
192
192
|
`frontend/scripts/perfection/lighthouse-audit.py` are original to this project and require
|
|
193
193
|
no third-party attribution. The perfection docs and script only invoke third-party tools
|
|
194
194
|
(react-scan, react-doctor, react-grab, playwright-lighthouse, lighthouse, chrome-launcher)
|
|
195
195
|
at runtime; no source from those tools is vendored, so their licenses are not carried here.
|
|
196
|
+
|
|
197
|
+
`frontend/references/design/aside.md` is a project-original synthesis from live browser
|
|
198
|
+
capture evidence and a local reconnaissance run following the MIT-licensed
|
|
199
|
+
`JCodesMore/ai-website-cloner-template` workflow; it is not copied from Aside or from the
|
|
200
|
+
template. Aside names, trademarks, product text, and visual assets remain the property of
|
|
201
|
+
their respective owners and are referenced only for descriptive design-analysis purposes.
|