oh-my-opencode 4.14.1 → 4.15.0
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 +14 -1
- package/dist/skills/frontend/SKILL.md +11 -6
- package/dist/skills/frontend/references/design/README.md +15 -37
- package/dist/skills/frontend/references/design/_INDEX.md +5 -3
- package/dist/skills/frontend/references/design/aside.md +209 -0
- package/dist/skills/frontend/references/design/clone-from-url.md +65 -0
- package/dist/skills/programming/SKILL.md +5 -3
- package/dist/skills/remove-ai-slops/SKILL.md +34 -15
- package/dist/skills/visual-qa/SKILL.md +11 -0
- package/dist/skills/visual-qa/scripts/skill-prompt-contract.test.ts +42 -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 +14 -1
- package/packages/omo-codex/plugin/skills/frontend/SKILL.md +11 -6
- package/packages/omo-codex/plugin/skills/frontend/references/design/README.md +15 -37
- 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/skills/frontend/references/design/clone-from-url.md +65 -0
- package/packages/omo-codex/plugin/skills/programming/SKILL.md +5 -3
- package/packages/omo-codex/plugin/skills/remove-ai-slops/SKILL.md +34 -15
- package/packages/omo-codex/plugin/skills/visual-qa/SKILL.md +11 -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 +14 -1
- package/packages/shared-skills/skills/frontend/SKILL.md +11 -6
- package/packages/shared-skills/skills/frontend/references/design/README.md +15 -37
- package/packages/shared-skills/skills/frontend/references/design/_INDEX.md +5 -3
- package/packages/shared-skills/skills/frontend/references/design/aside.md +209 -0
- package/packages/shared-skills/skills/frontend/references/design/clone-from-url.md +65 -0
- package/packages/shared-skills/skills/programming/SKILL.md +5 -3
- package/packages/shared-skills/skills/remove-ai-slops/SKILL.md +34 -15
- package/packages/shared-skills/skills/visual-qa/SKILL.md +11 -0
- package/packages/shared-skills/skills/visual-qa/scripts/skill-prompt-contract.test.ts +42 -0
|
@@ -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.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Clone From URL — Runtime Design-System Extraction
|
|
2
|
+
|
|
3
|
+
Use this when the user gives a **live site or a URL** to clone: "clone aside.com", "rebuild this page", "make it look exactly like `<url>`". A live URL affords what a screenshot cannot — the browser's **runtime truth**. Extract that truth with the real browser, make it the `DESIGN.md` contract, then build reusable primitives against it. Never eyeball a screenshot into a one-off.
|
|
4
|
+
|
|
5
|
+
## Outcome and stop rule
|
|
6
|
+
|
|
7
|
+
A `DESIGN.md` whose every token, interaction state, and motion value was read from the running page with `getComputedStyle`, plus a component-level clone that an independent reviewer confirms is an extensible design system (live DOM, reused primitives) — not a screenshot-matched or pasted-image fake. Done is defined by `/visual-qa` reference-fidelity mode passing on fresh evidence, not by your own glance.
|
|
8
|
+
|
|
9
|
+
## Phase 1 — Extract the runtime truth (never guess a value)
|
|
10
|
+
|
|
11
|
+
Drive a real browser: Codex `browser:control-in-app-browser` first, otherwise the project's `agent-browser` / playwright / dev-browser tooling. Do NOT parse CSS files — minification, CORS, CSS-in-JS, and Tailwind utilities make source unreliable. `getComputedStyle` returns what the browser ACTUALLY rendered, so it is the only source of truth.
|
|
12
|
+
|
|
13
|
+
Sweep the page and read, for every meaningful element and every repeated pattern:
|
|
14
|
+
|
|
15
|
+
- **Tokens** — color, background, border, font family/size/weight, line-height, letter-spacing, radius, shadow, and spacing (padding/margin/gap). Cluster the repeated values into the token scale.
|
|
16
|
+
- **Interaction states** — capture `default/hover/focus/active` (plus disabled/loading/empty/error where they exist) by DRIVING the state, then re-reading the computed style. A system with only the resting state is incomplete.
|
|
17
|
+
- **Motion** — `transition` (property, duration, timing function, delay), `@keyframes` (walk `document.styleSheets` for `CSSKeyframesRule`), and `transform`. Motion is part of the contract, not decoration.
|
|
18
|
+
- **Assets** — `<img>` and background-image URLs, inline SVG, `@font-face` files, video sources. Download the REAL assets; never substitute stock or placeholders.
|
|
19
|
+
- **Responsive** — re-run the sweep at 375 / 768 / 1280 and record what actually changes per breakpoint.
|
|
20
|
+
|
|
21
|
+
A compact sweep payload to inject through the browser's evaluate action (extend the recorded fields as needed):
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
() => {
|
|
25
|
+
const out = [];
|
|
26
|
+
for (const el of document.querySelectorAll("*")) {
|
|
27
|
+
const s = getComputedStyle(el);
|
|
28
|
+
out.push({
|
|
29
|
+
tag: el.tagName,
|
|
30
|
+
color: s.color, background: s.backgroundColor, border: s.borderColor,
|
|
31
|
+
font: s.fontFamily, size: s.fontSize, weight: s.fontWeight,
|
|
32
|
+
lineHeight: s.lineHeight, letterSpacing: s.letterSpacing,
|
|
33
|
+
radius: s.borderRadius, shadow: s.boxShadow,
|
|
34
|
+
padding: s.padding, margin: s.margin, gap: s.gap,
|
|
35
|
+
transition: s.transition, animation: s.animation, transform: s.transform,
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return out;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Phase 2 — Write the DESIGN.md contract
|
|
43
|
+
|
|
44
|
+
Turn the extraction into `DESIGN.md` per `design-system-architecture.md`: token scales, typography, spacing, the component anatomy with every captured state, the motion rules, and the responsive deltas. Name which source each value came from. If a value is not in `DESIGN.md`, it may not appear in code.
|
|
45
|
+
|
|
46
|
+
## Phase 3 — Clone-code reusable primitives (one at a time)
|
|
47
|
+
|
|
48
|
+
Build primitives against the contract, not the screenshot. One component per cycle: implement, render, compare to the source region, fix, then move on. Use the downloaded assets. Never paste a raster or `background-image` where a live element belongs. Never approximate a token you already extracted.
|
|
49
|
+
|
|
50
|
+
## Phase 4 — Reference-fidelity QA (mandatory, motion included)
|
|
51
|
+
|
|
52
|
+
Verify through `/visual-qa` in reference-fidelity mode against the source captures, for every page and every breakpoint. Interaction states and animations are IN SCOPE: drive hover/focus/click/scroll, then compare the settled states AND the motion itself against the source. You are not done until the dual-oracle gate passes on fresh evidence.
|
|
53
|
+
|
|
54
|
+
## Anti-patterns
|
|
55
|
+
|
|
56
|
+
- Parsing CSS files instead of `getComputedStyle` — the rendered truth is the only source.
|
|
57
|
+
- "CORS blocked" as an excuse — computed styles bypass it.
|
|
58
|
+
- Resting state only — capture hover/focus/active and the rest.
|
|
59
|
+
- Screenshot-matched one-off — build reusable, token-driven primitives.
|
|
60
|
+
- Placeholder or stock assets — download and use the originals.
|
|
61
|
+
- Desktop only — re-extract at each breakpoint.
|
|
62
|
+
|
|
63
|
+
## Provenance
|
|
64
|
+
|
|
65
|
+
This runtime-extraction workflow follows the MIT-licensed **[JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)** clone-website approach: browser automation plus a `getComputedStyle` sweep, state/motion/asset capture, spec files, and visual QA. It is a project-original synthesis, not a copy of that template. Do not treat this file as a license to copy any target site's trademarks, brand assets, logos, or proprietary copy — extract the design *system* (tokens, layout grammar, component anatomy, interaction states, motion) and apply it to the user's own product and content.
|
|
@@ -5,7 +5,7 @@ description: "MUST USE for ANY work on .py .pyi .rs .ts .tsx .mts .cts .go files
|
|
|
5
5
|
|
|
6
6
|
# Programming
|
|
7
7
|
|
|
8
|
-
You are a senior engineer
|
|
8
|
+
You are a lazy senior engineer — lazy meaning efficient, never careless. **The best code is the code never written; the code you do write is type-strict, stack-first, async-correct, and architecturally honest about size.**
|
|
9
9
|
|
|
10
10
|
This skill is an index. The hard per-language rules live under `references/`. Load the language-specific reference **before** writing a single line of code.
|
|
11
11
|
|
|
@@ -33,7 +33,9 @@ This skill is an index. The hard per-language rules live under `references/`. Lo
|
|
|
33
33
|
|
|
34
34
|
## Shared philosophy (all three languages)
|
|
35
35
|
|
|
36
|
-
These are not style preferences. They are the
|
|
36
|
+
These are not style preferences. They are the seven axioms every recipe in `references/` derives from.
|
|
37
|
+
|
|
38
|
+
0. **The best code is the code never written.** Before writing, stop at the first rung that holds: (1) does this need to exist at all? (YAGNI) (2) does this codebase already have it? — reuse the helper or pattern, do not re-implement. (3) does the standard library do it? (4) does a native platform feature cover it? (5) does an installed dependency solve it? (6) can it be one line? (7) only then, write the minimum that works. Climb the ladder *after* you understand the problem and trace the real flow end to end — the smallest diff in the wrong place is a second bug, not laziness. The ladder is a fast decision, not a written essay: pick the rung and move. **Bug fix = root cause, not symptom.** A ticket names a symptom; grep every caller of the function you touch and fix the shared seam once — one guard at the source is a smaller, more correct diff than one guard per caller, and patching only the path the ticket names leaves a sibling caller broken.
|
|
37
39
|
|
|
38
40
|
1. **The type system is your proof system.** Make illegal states unrepresentable. The compiler / type checker is the cheapest test you will ever run. If a bug can be expressed as a type error, it is *required* to be expressed as a type error.
|
|
39
41
|
|
|
@@ -254,7 +256,7 @@ After every code-writing session, answer these out loud (in your reply) before d
|
|
|
254
256
|
3. **Variant discrimination?** Did I use `if`/`elif`/`else` (or `switch` without `assertNever`, or `match` without `assert_never`) anywhere to discriminate on a tagged type or enum? If yes, rewrite as exhaustive match.
|
|
255
257
|
4. **Escape hatches?** Any `Any`, `# type: ignore`, `unwrap`, `expect` outside `main`/tests, `as` numeric cast, `!`, `@ts-ignore`, `@ts-expect-error`, `#[allow]` on a real warning? If yes, fix the type or document why with a comment.
|
|
256
258
|
5. **Defensive layer?** Any null check, try/except, or `isinstance` guarding a value the type system already proves? If yes, delete.
|
|
257
|
-
6. **Helpers for one-off?** Any function, class, or trait introduced for a single caller that will never get a second caller? If yes, inline.
|
|
259
|
+
6. **Helpers for one-off?** Any function, class, or trait introduced for a single caller that will never get a second caller? If yes, inline — axiom 0 should have caught it pre-write; this is the backstop.
|
|
258
260
|
7. **Tests?** Is the behavior I just introduced locked by a test that would fail if I revert this commit?
|
|
259
261
|
8. **Parameter bloat?** Any function I wrote or modified that takes more than 3 parameters — or smuggles them through a dict/kwargs/`...args`/throwaway options object? If yes, group related params into a typed value object. See [Smell 2](references/code-smells.md#smell-2--function-with-more-than-3-parameters).
|
|
260
262
|
9. **Redundant verification?** Did I perform a destructive action (delete, remove, clear) and then immediately re-query to "confirm" it worked? Did I call a setter then a getter to "verify"? If yes, delete the verification — the operation's contract IS the proof. See [Smell 3](references/code-smells.md#smell-3--redundant-verification-after-a-destructive-action).
|
|
@@ -52,6 +52,7 @@ The agent looks for these nine categories. The first three are stylistic, the ne
|
|
|
52
52
|
2. **Over-defensive code** — null checks for guaranteed values, try/except around code that cannot raise, isinstance checks for statically typed params, default values for required params, backward-compat shims, redundant validation duplicated at multiple layers, **broad exception catching** (`except Exception`/`except BaseException` in Python, empty `catch {}` or `catch (e) { console.error(e) }` without narrowing in TypeScript/JavaScript).
|
|
53
53
|
- KEEP: validation at system boundaries (user input, external APIs), I/O error handling, nullable DB fields. Top-level boundary catch-all (CLI `main()`, HTTP handler) with explicit logging + re-raise is acceptable.
|
|
54
54
|
- REFACTOR: `except Exception` → catch the specific exception you expect. Empty `catch {}` → add `instanceof` narrowing or re-throw. `catch (e) { log(e) }` → narrow with `instanceof`, handle known cases, re-throw unknown.
|
|
55
|
+
- PROOF REQUIRED: before deleting any validation or error handling at a trust boundary, Phase 2 must include an **adversarial** regression (malformed or hostile input) that fails if the guard is removed. No adversarial test → the guard stays. Redundant defense to remove is a duplicate of a check that already runs *inside* the boundary; a guard with no proof of redundancy is load-bearing.
|
|
55
56
|
|
|
56
57
|
3. **Excessive complexity** — deep nesting (>3 levels), nested ternaries, complex boolean expressions (combine 4+ predicates), long parameter lists (>5 args without a struct/dataclass/object), god functions (>50 lines doing many things), overly clever one-liners that sacrifice readability, `if/elif/else` chains for type/enum/literal discrimination (must be `match/case` + `assert_never`), `object` used as a type annotation (must be `Protocol`, `TypeVar`, or explicit union).
|
|
57
58
|
- KEEP: established complexity patterns in this codebase, performance-critical hot paths that intentionally use a complex idiom. `if/else` for boolean conditions and range checks (not variant discrimination).
|
|
@@ -148,22 +149,37 @@ For each in-scope source file:
|
|
|
148
149
|
|
|
149
150
|
If you cannot establish a green baseline (e.g., test runner is broken), STOP and report. Do not proceed with cleanup on unverified ground.
|
|
150
151
|
|
|
151
|
-
### Phase 3: Cleanup plan
|
|
152
|
+
### Phase 3: Cleanup plan — existence first, then smells
|
|
152
153
|
|
|
153
|
-
|
|
154
|
+
The largest, safest deletion is code that should not have existed. **Before categorizing smells, run the deletion ladder on each changed unit:**
|
|
155
|
+
|
|
156
|
+
- **Delete entirely** — the behavior is not needed (YAGNI, speculative, dead on arrival).
|
|
157
|
+
- **Reuse** — an existing helper or pattern in this repo already does it; replace the reimplementation with a call to it.
|
|
158
|
+
- **Platform / stdlib / native / dependency** — the language stdlib, the runtime, or an already-installed dependency already does it (a hand-rolled date picker → `<input type="date">`, a custom query parser → `URLSearchParams`, a bespoke debounce → the util already imported).
|
|
159
|
+
- **Simplify in place** — it must exist; make it smaller.
|
|
160
|
+
|
|
161
|
+
Only code that lands on **Simplify in place** proceeds to the smell categories. This turns the pass from "find smells to trim" into "first decide whether the code should exist, then trim what survives." One function replaced by a platform call is a bigger, safer win than any in-place cleanup — and it needs no per-line smell analysis.
|
|
162
|
+
|
|
163
|
+
For a diff that **fixes a bug**, grep the callers of every shared function it touches. Prefer one root-cause fix at the shared seam over repeated guards at each caller — a per-caller patch that leaves a sibling caller broken is a partial fix, not a cleanup.
|
|
164
|
+
|
|
165
|
+
Then produce an explicit plan **before** spawning the removal agents:
|
|
154
166
|
|
|
155
167
|
```
|
|
156
168
|
File: src/foo.py
|
|
169
|
+
Ladder: 2 units simplify-in-place; 1 unit delete (native <input> replaces custom picker)
|
|
157
170
|
Categories: dead code, excessive complexity, performance
|
|
158
171
|
Order: dead code → complexity → performance
|
|
159
172
|
Risk: medium (touches caching layer)
|
|
160
173
|
|
|
161
174
|
File: src/bar.py
|
|
175
|
+
Ladder: all simplify-in-place
|
|
162
176
|
Categories: obvious comments, over-defensive
|
|
163
177
|
Order: comments → defensive
|
|
164
178
|
Risk: low
|
|
165
179
|
```
|
|
166
180
|
|
|
181
|
+
**Intentional shortcuts:** if the plan deliberately keeps a bounded simplification (a naive scan fine under N rows, a global lock, an O(n²) path), mark it in-code with a `debt:` comment naming the ceiling and the upgrade trigger (in omo, prefix with `// @allow` so the comment-checker treats it as intentional), and list it under "Remaining Risks / Deferred" in the report. That section is the debt ledger — a simplification with a known ceiling and no marker is indistinguishable from a bug.
|
|
182
|
+
|
|
167
183
|
Order rule (safest → riskiest): comments → dead code → defensive → duplication → complexity → abstraction/boundary → performance → tests → oversized-modules. This minimizes blast radius of any one change.
|
|
168
184
|
|
|
169
185
|
### Phase 4: Parallel slop removal via `deep` agents in batches of 5
|
|
@@ -192,13 +208,9 @@ task(
|
|
|
192
208
|
prompt="""
|
|
193
209
|
Remove AI slops from: {file_path}
|
|
194
210
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
- Boundary violations: wrong-layer imports, leaky responsibilities, hidden coupling
|
|
199
|
-
- Dead code: unused imports, unreachable branches, stale flags, debug leftovers
|
|
200
|
-
- Duplication: copy-paste branches, redundant helpers
|
|
201
|
-
- Performance equivalences: O(n²)→O(n) via set lookup, hoist computation out of loops, eager→lazy collections, batch redundant calls, cache repeated len()/length
|
|
211
|
+
First run the deletion ladder from Phase 3 on this file (delete entirely / reuse existing repo code / platform-stdlib-native / simplify in place); only code that must exist proceeds to smell removal.
|
|
212
|
+
|
|
213
|
+
Then evaluate EVERY category defined in this skill's "Categories (what counts as slop)" section, applying that section's KEEP and REFACTOR rules verbatim — the Categories section you have loaded is canonical, do not work from a restated subset.
|
|
202
214
|
|
|
203
215
|
Apply changes in this order (safest → riskiest): comments → dead code → defensive → duplication → complexity → abstraction/boundary → performance → oversized-modules.
|
|
204
216
|
|
|
@@ -273,18 +285,19 @@ Behavior Lock:
|
|
|
273
285
|
- Baseline status: GREEN
|
|
274
286
|
|
|
275
287
|
Cleanup Plan:
|
|
276
|
-
- path/to/file1.ts: [dead code → complexity → performance]
|
|
277
|
-
- path/to/file2.py: [comments → defensive]
|
|
288
|
+
- path/to/file1.ts: [ladder: 1 delete (native) + simplify-in-place] → [dead code → complexity → performance]
|
|
289
|
+
- path/to/file2.py: [ladder: all simplify-in-place] → [comments → defensive]
|
|
278
290
|
|
|
279
|
-
Per-File Results:
|
|
291
|
+
Per-File Results (each cut shows what replaces it):
|
|
280
292
|
path/to/file1.ts
|
|
281
|
-
-
|
|
293
|
+
- Ladder/delete: custom DatePicker (48 lines) → <input type="date"> (native), flatpickr import removed
|
|
294
|
+
- Dead code: 3 removed (lines X-Y, A-B, C) → nothing (unreachable)
|
|
282
295
|
- Excessive complexity: 1 simplified (nested ternary at L42 → if/else)
|
|
283
296
|
- Performance: 1 (line N: list scan → set lookup, O(n²)→O(n), behavior identical)
|
|
284
297
|
- Skipped (preserved): 2 (defensive null check at boundary; commented WHY at L88)
|
|
285
298
|
|
|
286
299
|
path/to/file2.py
|
|
287
|
-
- Obvious comments: 5 removed
|
|
300
|
+
- Obvious comments: 5 removed → nothing
|
|
288
301
|
- Over-defensive: 1 simplified (redundant isinstance on typed param)
|
|
289
302
|
|
|
290
303
|
Quality Gates:
|
|
@@ -302,8 +315,14 @@ Critical Review:
|
|
|
302
315
|
Issues Found & Fixed:
|
|
303
316
|
- [None] OR [Issue description → Fix applied]
|
|
304
317
|
|
|
305
|
-
|
|
318
|
+
Net Impact:
|
|
319
|
+
- LOC: -74 (removed 91, added 17)
|
|
320
|
+
- Dependencies: -1 (flatpickr removed; native <input type="date"> used)
|
|
321
|
+
- Files deleted: 1 (src/date-picker-wrapper.ts — platform-native replacement)
|
|
322
|
+
|
|
323
|
+
Remaining Risks / Deferred (this section is the debt ledger):
|
|
306
324
|
- [None] OR [e.g., "boundary violation in module X flagged but not refactored — needs human judgment"]
|
|
325
|
+
- `debt:` markers kept this pass: [None] OR [file:line — ceiling → upgrade trigger]
|
|
307
326
|
|
|
308
327
|
Final Status: CLEAN | ISSUES FIXED | REQUIRES ATTENTION
|
|
309
328
|
```
|
|
@@ -111,6 +111,16 @@ Key fields: `maxWidth`, `overflowLines[]`, `borderMisaligned`, `wideCharColumns[
|
|
|
111
111
|
|
|
112
112
|
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.
|
|
113
113
|
|
|
114
|
+
### Motion and interaction capture
|
|
115
|
+
|
|
116
|
+
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:
|
|
117
|
+
|
|
118
|
+
- **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).
|
|
119
|
+
- **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.
|
|
120
|
+
- **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.
|
|
121
|
+
|
|
122
|
+
**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.
|
|
123
|
+
|
|
114
124
|
## Step 3 - Dispatch two read-only QA subagents in parallel
|
|
115
125
|
|
|
116
126
|
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.
|
|
@@ -157,6 +167,7 @@ CHECK EACH:
|
|
|
157
167
|
5. Responsive and resize behavior across viewport sizes (web) or terminal resize (TUI).
|
|
158
168
|
6. Do the user-intended FEATURES actually work: interactions, states, navigation (web); input handling, resize, scroll (TUI)? Trace the code paths.
|
|
159
169
|
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.
|
|
170
|
+
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.
|
|
160
171
|
|
|
161
172
|
OUTPUT:
|
|
162
173
|
VERDICT: PASS | REVISE | FAIL
|
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
findSpawnAgentCallsWithoutForkContextFalse,
|
|
9
9
|
root,
|
|
10
10
|
} from "./aggregate-plugin-fixture.mjs";
|
|
11
|
+
import { listSkillFiles } from "./sync-skills-test-support.mjs";
|
|
11
12
|
|
|
12
13
|
test("#given synced skills with Codex compatibility guidance #when spawn_agent is documented #then invalid role parameters are absent", async () => {
|
|
13
14
|
const skillsDir = join(root, "skills");
|
|
@@ -65,3 +66,25 @@ test("#given long-running orchestration prompts #when waiting on child agents #t
|
|
|
65
66
|
|
|
66
67
|
assert.deepEqual(missingLivenessGuidance, []);
|
|
67
68
|
});
|
|
69
|
+
|
|
70
|
+
test("#given packaged Codex prompt surfaces #when inspected #then removed sparkshell guidance is absent", async () => {
|
|
71
|
+
const promptRoots = [
|
|
72
|
+
join(root, "skills"),
|
|
73
|
+
join(root, "components", "rules", "bundled-rules"),
|
|
74
|
+
join(root, "components", "ultrawork", "agents"),
|
|
75
|
+
join(root, "components", "ulw-loop", "skills"),
|
|
76
|
+
];
|
|
77
|
+
const promptFilePattern = /\.(?:json|md|toml|ya?ml)$/i;
|
|
78
|
+
const removedSparkshellPattern = /\b(?:sparkshell|spark[-_\s]+shell)\b/i;
|
|
79
|
+
const matches = [];
|
|
80
|
+
|
|
81
|
+
for (const promptRoot of promptRoots) {
|
|
82
|
+
for (const relativePath of await listSkillFiles(promptRoot)) {
|
|
83
|
+
if (!promptFilePattern.test(relativePath)) continue;
|
|
84
|
+
const content = await readFile(join(promptRoot, relativePath), "utf8");
|
|
85
|
+
if (removedSparkshellPattern.test(content)) matches.push(`${promptRoot}/${relativePath}`);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
assert.deepEqual(matches, []);
|
|
90
|
+
});
|