@bongos/core 1.19.478 → 1.19.480
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/.bongos-core.json +100 -35
- package/.claude/skills/design/SKILL.md +9 -3
- package/clients/bongos-client/README.md +1 -1
- package/clients/bongos-client/bongos-client.global.js +4 -0
- package/clients/bongos-client/index.cjs +4 -0
- package/clients/bongos-client/index.d.ts +4 -0
- package/clients/bongos-client/index.mjs +4 -0
- package/docs/adr/0230-a-look-skill-is-a-composition-grammar-the-palette-is-the-pack.md +36 -0
- package/docs/adr/0231-the-style-session-an-owner-authors-a-look-inside-the-contract.md +32 -0
- package/docs/adr/README.md +2 -0
- package/docs/api/openapi.json +80 -1
- package/docs/api-reference.md +5 -3
- package/docs/copy-inventory.md +6 -6
- package/docs/copy-registry.json +6 -6
- package/docs/file-map.md +1 -1
- package/docs/module-api-changelog.md +4 -0
- package/modules/dev-box/app/src/vendor/bongos-client.cjs +4 -0
- package/modules/economy/credits.js +78 -0
- package/modules/economy/module.json +1 -1
- package/modules/economy/reward.js +4 -0
- package/modules/economy/routes/credits.js +151 -0
- package/modules/hall-ui/public/md-reader.js +24 -1
- package/modules/ui-design/module.json +1 -1
- package/modules/ui-design/skills/README.md +14 -2
- package/modules/ui-design/skills/gpt-taste/SKILL.md +110 -0
- package/modules/ui-design/skills/industrial-brutalist-ui/SKILL.md +110 -0
- package/modules/ui-design/skills/minimalist-ui/SKILL.md +103 -0
- package/modules/ui-design/skills/stitch-design-taste/SKILL.md +91 -0
- package/modules/ui-design/skills/style/SKILL.md +112 -0
- package/modules/ui-design/styles/README.md +3 -0
- package/modules/ui-design/styles/blueprint/DESIGN.md +152 -0
- package/modules/ui-design/styles/blueprint/mock.html +308 -0
- package/modules/ui-design/styles/blueprint/mock.states.json +11 -0
- package/modules/ui-design/styles/blueprint/pack.json +33 -0
- package/package-lock.json +2 -2
- package/package.json +1 -1
- package/src/module-api.js +1 -1
- package/tests/credit_ledger_read.mjs +347 -0
- package/tests/hall_reading_world.mjs +80 -0
- package/tests/own_scope_guard.mjs +24 -2
- package/tests/ui_design_skills.mjs +102 -11
|
@@ -27,7 +27,7 @@ The eleven taste skills are single-file prose; the floor's one critical is a fal
|
|
|
27
27
|
|
|
28
28
|
## The in-house rebuilds (2026-09-01)
|
|
29
29
|
|
|
30
|
-
A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` segment, so the ratchets count it; no `PROVENANCE.md` or `LICENSE`, because an in-house skill claims no upstream; the same PLATFORM PREAMBLE first after the frontmatter, byte-identical; then a **`## Rebuilt from`** section naming the origin the *spec* was derived from (documentation only), the scan verdict, the spec task, the statement that no upstream bytes were consulted or copied, and what changed in translation ([ADR 0220](../../../docs/adr/<redacted>.md)). Declared in `module.json` like any other; `claude-materialize.js` step 1b lands it through its own-dir branch, which no sidecar gate touches. `tests/ui_design_skills.mjs` pins all of it. A rebuild whose method is a family of sub-commands ships as **one** skill dir with a `reference/<sub-command>.md` playbook beside the `SKILL.md`, exactly one loaded per request; the preamble is pinned once, in the `SKILL.md`, and governs every playbook ([ADR 0221](../../../docs/adr/<redacted>.md)).
|
|
30
|
+
A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` segment, so the ratchets count it; no `PROVENANCE.md` or `LICENSE`, because an in-house skill claims no upstream; the same PLATFORM PREAMBLE first after the frontmatter, byte-identical; then a **`## Rebuilt from`** section naming the origin the *spec* was derived from (documentation only), the scan verdict, the spec task, the statement that no upstream bytes were consulted or copied, and what changed in translation ([ADR 0220](../../../docs/adr/<redacted>.md)). Declared in `module.json` like any other; `claude-materialize.js` step 1b lands it through its own-dir branch, which no sidecar gate touches. `tests/ui_design_skills.mjs` pins all of it. A rebuild whose method is a family of sub-commands ships as **one** skill dir with a `reference/<sub-command>.md` playbook beside the `SKILL.md`, exactly one loaded per request; the preamble is pinned once, in the `SKILL.md`, and governs every playbook ([ADR 0221](../../../docs/adr/<redacted>.md)). A rebuild whose upstream shipped a **look** carries a composition grammar and no colours of its own — the palette is the instance's pack and the texture is a named entry in [`../styles/`](../styles/README.md) ([ADR 0230](../../../docs/adr/<redacted>.md)).
|
|
31
31
|
|
|
32
32
|
| Skill | Rebuilt from (spec) | Task | What it is |
|
|
33
33
|
|---|---|---|---|
|
|
@@ -35,13 +35,25 @@ A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` seg
|
|
|
35
35
|
| `design-taste-frontend-v1` | `Leonxlnx/taste-skill` `taste-skill-v1` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the earlier generation, kept distinct: a fixed baseline triple adapted in conversation, stack conventions for a served surface, the layout bans, full interaction cycles, the pattern vocabulary, the tile-grid archetypes |
|
|
36
36
|
| `high-end-visual-design` | `Leonxlnx/taste-skill` `soft-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the agency-build polish pass: one texture archetype (the style library's looks) and one layout archetype per project, the nested container anatomy where the world allows a container, the pill with its nested arrow disc, rhythm, choreography and scroll entry inside the Kill Switch |
|
|
37
37
|
| `redesign-existing-projects` | `Leonxlnx/taste-skill` `redesign-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the in-place upgrade: scan the stack, diagnose against the seven-group audit with the instance's world as the answer key, fix in impact-per-risk order, one group per commit; keeps the stack, never migrates frameworks |
|
|
38
|
+
| `minimalist-ui` | `Leonxlnx/taste-skill` `minimalist-skill` | [task 1003327](https://cloudbongos.com/builders#/task/1003327) | the quiet editorial look as a grammar and no colours: macro whitespace first, a capped measure, one display job and one body job, exactly one hairline weight in the sheet, washed accents measured against their own ink, flat tile cards, box-less accordions, keycaps, one depth treatment per band; declines dense surfaces |
|
|
39
|
+
| `industrial-brutalist-ui` | `Leonxlnx/taste-skill` `brutalist-skill` | [task 1003327](https://cloudbongos.com/builders#/task/1003327) | the technical-document look: one archetype per project (Swiss print or dark terminal, never mixed) with the other mode still complete, clamped uppercase display against fixed mono metadata, terracotta as the one hazard accent and sea as one terminal green, the hairline as a grid gap, zero rounding, static degradation |
|
|
40
|
+
| `gpt-taste` | `Leonxlnx/taste-skill` `gpt-tasteskill` | [task 1003327](https://cloudbongos.com/builders#/task/1003327) | the anti-default pass: a plan block before any markup with a selection derived from the route and bumped against siblings, the four-stage structure, the ultra-wide hero at two or three lines, a dense grid with zero empty cells, scroll-driven motion in CSS; pack-agnostic |
|
|
41
|
+
| `stitch-design-taste` | `Leonxlnx/taste-skill` `stitch-skill` | [task 1003327](https://cloudbongos.com/builders#/task/1003327) | the design contract document for an external screen-generating tool: four dials, eight fixed sections, descriptive language paired with exact values, the thirteen transcribed from the pack and diffed, motion as an intent brief inside the Kill Switch |
|
|
38
42
|
| `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | [task 1003326](https://cloudbongos.com/builders#/task/1003326) | the design-craft method as one skill with sub-commands, one playbook loaded per request from `impeccable/reference/`: shape, critique, audit, polish, harden, onboard, animate, colorize, typeset, layout, adapt, distill, clarify, optimize, document, extract, bolder, quieter; the craft floor and the bounded finish live in its `SKILL.md`; the three persisted homes are the instance's own files; no hooks, no bypass agent, no telemetry, no live server (the playwright plugin and the kit are the loops) |
|
|
39
43
|
| `image-to-code` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the analyse-then-implement loop with the owner's references and the world as the source of truth; the only image it may cause is the hero plate; a structured per-image analysis, the extraction spec, a faithful translation, drift named as the failure mode, a clarity checklist the kit measures |
|
|
40
44
|
| `imagegen-frontend-web` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the plate-making skill: text-free hero plates, hero objects, backdrops and orbs for the slots a composition already has, a composition anchor per plate, one family per surface, the pack as the palette lock, the instance's art pipeline key, the pair-and-sidecar output contract; never a section image, a comp or a screen |
|
|
41
45
|
| `imagegen-frontend-mobile` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | portrait plates for the 390 and 320 compositions, clear of the regions a phone reserves, the first view held to one focal point, a scrim under text over a plate; a screen is the states file rendered by the kit; no phone mockups, no flows of screens; native declines |
|
|
42
46
|
| `brandkit` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the identity system with the strategy inferred first and the logo standard kept: the mark drawn as SVG, the colour system as the pack, the type specimen as the faces, the applications as the kit's renders, the image direction as a hero-object family, the board as a contact sheet; never a generated logo, board or mockup |
|
|
43
47
|
|
|
44
|
-
What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. The image family (task 1003328, [ADR 0222](../../../docs/adr/<redacted>.md)) carries the one rewrite the upstream never had: images are for text-free hero plates and hero objects only, so a screen is the surface itself, the mark is drawn, the board is a contact sheet, and what ships is the pair (a black-ground JPEG for dark, an alpha WebP cutout for light) with a provenance sidecar beside every file, through the instance's art pipeline key.
|
|
48
|
+
What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. The image family (task 1003328, [ADR 0222](../../../docs/adr/<redacted>.md)) carries the one rewrite the upstream never had: images are for text-free hero plates and hero objects only, so a screen is the surface itself, the mark is drawn, the board is a contact sheet, and what ships is the pair (a black-ground JPEG for dark, an alpha WebP cutout for light) with a provenance sidecar beside every file, through the instance's art pipeline key. The four looks (task 1003327, [ADR 0230](../../../docs/adr/<redacted>.md)) carry the other rewrite: a look skill ships structure, rhythm, type roles, component anatomy, motion and bans and **no colours**, so a substrate becomes an archetype that still ships both modes, a prompt-seeded roll becomes a deterministic selection derived from the route, a design document transcribes the world instead of authoring one, and the upstream's seeded placeholder photography is dropped rather than softened. The whole scoped set of thirteen is now rebuilt in-house; nothing from either origin is still waiting on a spec.
|
|
49
|
+
|
|
50
|
+
## First-party originals (2026-09-02)
|
|
51
|
+
|
|
52
|
+
A skill the platform wrote from nothing declares the **other** origin. It lives at `<name>/` like a rebuild, opens with the same PLATFORM PREAMBLE, and carries a **`## First party`** section instead: the task that authored it, the plain statement that it has no upstream, [ADR 0231](../../../docs/adr/<redacted>.md), and **why it exists** — since it has no spec to point at, that sentence is the only provenance a reader gets. `tests/ui_design_skills.mjs` asserts a skill carries **exactly one** of the two sections and branches its pins on which; everything else (the preamble, the frontmatter, no sidecar, no licence text, the style library named, no image mandate, the switch, the kit as the pre-flight) applies to both kinds unchanged. Fabricating a `## Rebuilt from` for an original was rejected: the section exists so a reader can trace provenance, and a fabricated one destroys exactly that.
|
|
53
|
+
|
|
54
|
+
| Skill | Origin | Task | What it is |
|
|
55
|
+
|---|---|---|---|
|
|
56
|
+
| `style` | first party (no upstream) | [task 1003475](https://cloudbongos.com/builders#/task/1003475) | the `/style` session: four bounded steps in which an owner authors their own look as a branding pack. SEARCH renders the nearest two library entries before asking two or three questions about feel; CREATE drafts the three files inside the contract, never a fork of a sheet and never a sixteenth token; PROVE retunes the thirteen against `contrast.js`, the styles suite, `check-mock.js` and the renders with a failure-to-fix table so the retune is arithmetic; ADOPT hands the owner the one-step switch, never writes `config/branding.json`, and files the catalogue rows. Its first output is [`../styles/blueprint`](../styles/README.md), the library's first cool look |
|
|
45
57
|
|
|
46
58
|
**In the core checkout itself**, where these skills are written, Claude Code reads only `.claude/skills/` at the repo root and the materialiser's self-copy guard leaves it empty of module skills. `node scripts/gds/claude-materialize.js --module-skills-only` lands every enabled module's skills there as untracked, self-ignored copies (a generated `.claude/skills/.module-skills.json` manifest and a `.gitignore` beside them; `--clean` removes them; the file map skips them by the manifest) so a builder can invoke them here too ([task 1003330](https://cloudbongos.com/builders#/task/1003330), [ADR 0224](../../../docs/adr/<redacted>.md)). Edit the module's `skills/<name>/`, never the copy, and re-run to refresh.
|
|
47
59
|
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gpt-taste
|
|
3
|
+
description: Anti-default enforcement for a persuasive scrolling surface when the last attempt came out looking like every other one. A written plan block before any markup whose selection is derived deterministically from the route (a hero architecture, three component architectures, two CSS motion paradigms, checked against what sibling surfaces already used), the four-stage attention-interest-desire-action structure, an ultra-wide hero container that holds the headline to two or three lines, a dense tile grid with zero empty cells, real scroll-driven motion inside the Kill Switch, and a measured contrast sweep. Triggers on "it looks generic", "award-tier", "stop making the same page", "anti-default". Rebuilt in-house from the taste-skill rebuild spec (task 1003327, ADR 0198).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
|
|
7
|
+
> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
|
|
8
|
+
>
|
|
9
|
+
> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
|
|
10
|
+
> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
|
|
11
|
+
> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
|
|
12
|
+
> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
|
|
13
|
+
> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
|
|
14
|
+
> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
|
|
15
|
+
> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
|
|
16
|
+
>
|
|
17
|
+
> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
|
|
18
|
+
<!-- END PLATFORM PREAMBLE -->
|
|
19
|
+
|
|
20
|
+
## Rebuilt from
|
|
21
|
+
|
|
22
|
+
This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `gpt-tasteskill` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325) — the `[gpt-taste]` requirement group — and this file is its port under [task 1003327](https://cloudbongos.com/builders#/task/1003327); it implements those requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); what a *look* skill is allowed to be is [ADR 0230](../../../../docs/adr/<redacted>.md).
|
|
23
|
+
|
|
24
|
+
What changed in translation, on purpose: the upstream asked the agent to **simulate a random number generator** seeded from the prompt and let the roll pick the design. A roll nobody can reproduce is not a decision, and the same roll on a sibling surface is a coincidence rather than a system — so the selection here is **deterministic and written down**: derived from the surface's own route, recorded in the plan block, and checked against what its siblings already used. Its "type stack" selection is gone; the pack carries two stacks and this skill does not add a face. Its ambient graded backgrounds are `color-mix()` radials of the fifteen, never a new colour. Its **filtered seeded placeholder photography is dropped entirely** — the only rasters this skill may ask for are text-free hero plates under the owner's rule, and a surface with no plate ships without one. Its scroll-motion paradigms survive only as CSS scroll-driven animation inside the Kill Switch: pinned titles, scrubbed reveals and stacking cards are available that way; pointer-tracked physics and shared-element transitions are named *not available* rather than faked in script.
|
|
25
|
+
|
|
26
|
+
## Where this look lives
|
|
27
|
+
|
|
28
|
+
This skill is **not a texture**. It is an anti-default enforcement layer that runs over whatever look is on: the palette is the instance's pack, and a variant comes from the style library at `modules/ui-design/styles/` — it composes the same way on `chrome-world`, `expedition` or `grove`, and the plan block below names which one is in force. Where it disagrees with the instance's `DESIGN.md`, the instance wins.
|
|
29
|
+
|
|
30
|
+
## Fires on
|
|
31
|
+
|
|
32
|
+
A persuasive, scrolling surface — a landing page, a launch page, a product marketing page — **and specifically when the previous attempt came out looking like every other one**: a centred hero, three equal cards, a two-column feature row, a footer. It does not fire on an application surface; density and repetition are virtues in a dashboard, and this skill's whole method is to break repetition.
|
|
33
|
+
|
|
34
|
+
## Step 1 — the plan block, before any UI code
|
|
35
|
+
|
|
36
|
+
Write this block first, in the task's notes and as a comment at the head of the sheet. No markup until it exists.
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
SURFACE /pricing (the seed: the route)
|
|
40
|
+
PACK expedition (the look in force)
|
|
41
|
+
HERO off-axis split (of the five below; siblings used: full-bleed type, stage)
|
|
42
|
+
COMPONENTS marquee band / inline-image headline / horizontal accordion
|
|
43
|
+
MOTION pinned title + scrubbed reveal (two paradigms, both CSS)
|
|
44
|
+
HERO MATH container 1180px, clamp(44px, 5.6vw, 88px), headline 47 chars -> 2 lines
|
|
45
|
+
GRID PROOF 9 items, dense auto-flow, spans 2/1/1/3/1/2/1/2/1 -> 0 empty cells
|
|
46
|
+
CONTRAST CTA accent-on over --accent = 8.1:1 · label ink-faint on bg-card = 4.9:1
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
**The selection is deterministic, not random.** Take the surface's route, sum its character codes, and index the lists below. Then check the sibling surfaces of this instance: if the route's index lands on a hero architecture a sibling already uses, take the next one. Record both the index and the bump. The same route re-derives the same page a year later; two different routes cannot collide silently.
|
|
50
|
+
|
|
51
|
+
**Hero architectures** (pick one): full-bleed type · off-axis split · the stage (one object centred, type wrapped around it) · the ledger (type in a left rail, content scrolling beside it) · the masthead (a text-free hero plate behind the words, with a scrim under the text).
|
|
52
|
+
|
|
53
|
+
**Component architectures** (pick three, never the same three as a sibling): the marquee band · the inline-image headline · the horizontal accordion · the stacking card sequence · the offset testimonial rail · the numbered chapter list · the comparison lattice.
|
|
54
|
+
|
|
55
|
+
**Motion paradigms** (pick two, both CSS): pinned section title beside a scrolling gallery · scrubbed word-by-word reveal · scale-in and fade-out on exit · stacking cards · hover physics on a clickable card.
|
|
56
|
+
|
|
57
|
+
## Step 2 — the four-stage structure
|
|
58
|
+
|
|
59
|
+
Always opening with a navigation bar that is **not** a centred logo with links either side.
|
|
60
|
+
|
|
61
|
+
1. **Attention** — the hero, built to the architecture chosen above.
|
|
62
|
+
2. **Interest** — the tile grid (below).
|
|
63
|
+
3. **Desire** — the scroll sequence, carrying both motion paradigms.
|
|
64
|
+
4. **Action** — the closer: one CTA, restated, with the single strongest reason beside it.
|
|
65
|
+
|
|
66
|
+
Sections read as chapters: the vertical padding between them is at or above twice the world's band clamp, and each one is either the widest thing on the page or the narrowest. Two adjacent bands never share a width.
|
|
67
|
+
|
|
68
|
+
## The hero rule
|
|
69
|
+
|
|
70
|
+
The headline container is **ultra-wide** so the headline flows in **two to three lines**. Four or more lines is a failure with exactly two fixes: widen the container, or reduce the clamped font size. **Never rewrite the copy to fit the layout** — the sentence is the product's, the container is yours. Do the arithmetic in the plan block, then confirm it in the render.
|
|
71
|
+
|
|
72
|
+
Banned in the hero: a floating stamp badge over the headline, a row of pill tags beneath it, and raw statistics inside it. Statistics belong to the interest stage where they have room to be believed.
|
|
73
|
+
|
|
74
|
+
## The tile grid
|
|
75
|
+
|
|
76
|
+
- `grid-auto-flow: dense` with interlocking spans and **mathematically zero empty cells** — prove the count in the plan block.
|
|
77
|
+
- Three to five intentional cards, not eight thin ones. A card that exists because the grid had a hole is deleted, and the spans are redistributed.
|
|
78
|
+
- Never three equal cards in a row. Never a grid whose every cell is the same size.
|
|
79
|
+
|
|
80
|
+
## Motion, inside the Kill Switch
|
|
81
|
+
|
|
82
|
+
Everything below is CSS, on the world's curves, and dead under `@media (prefers-reduced-motion: reduce)` with the rest frame a complete composition.
|
|
83
|
+
|
|
84
|
+
- **Real scroll-driven motion** via `animation-timeline: view()` and `scroll()` behind `@supports`: the pinned section title, the image that scales in and fades on exit, the word-by-word scrubbed reveal (one span per word, stepped `animation-range`), the stacking card sequence (`position: sticky` plus a view timeline).
|
|
85
|
+
- **Hover physics** on a clickable card: a small lift and a hairline change on `transform` and border colour only, on the state curve.
|
|
86
|
+
- **Not available here**, and named as such rather than approximated: spring physics, magnetic or pointer-tracked hover, shared-element transitions, and any continuous value read from a scroll listener. If the composition depends on one of them, the composition changes.
|
|
87
|
+
- Nothing moves in JavaScript. At most one `IntersectionObserver` adding a single class, and only where a view timeline is unsupported.
|
|
88
|
+
|
|
89
|
+
## The bans
|
|
90
|
+
|
|
91
|
+
Defaults an instance's `DESIGN.md` may only tighten:
|
|
92
|
+
|
|
93
|
+
- **Enumerated meta labels above sections** (`01 — FEATURES`). The chapter is legible from its own content.
|
|
94
|
+
- **Emoji**, anywhere: markup, copy, alt text, comments, commit message.
|
|
95
|
+
- **Low-contrast button text.** Every CTA is measured with `node modules/ui-design/kit/contrast.js` and pasted into the plan block; a CTA that fails is not a style choice.
|
|
96
|
+
- **Flat colour on a full band** where the world has an ambient tier: use a `color-mix()` radial of the fifteen instead, at low strength, behind the content layer.
|
|
97
|
+
- **Horizontal overflow, page-wide.** A guard on the page container, and the 320 shot is the proof.
|
|
98
|
+
|
|
99
|
+
## Pre-flight, measured by the kit
|
|
100
|
+
|
|
101
|
+
Render the real surface — `node modules/ui-design/kit/render.js --page <path> --style <pack>` — and audit the shots against the plan block. The anti-pattern detector (`node modules/ui-design/kit/tells.js`, or `check-mock.js` which runs it) catches the mechanical half of this list; the rest you read.
|
|
102
|
+
|
|
103
|
+
- [ ] The plan block exists, its selection is derived from the route, and the sibling bump is recorded.
|
|
104
|
+
- [ ] Headline at two or three lines at 1440, and still at 390.
|
|
105
|
+
- [ ] Grid proof holds in the render: zero empty cells, no three-equal row.
|
|
106
|
+
- [ ] Two adjacent bands never share a width; section padding at or above twice the band clamp.
|
|
107
|
+
- [ ] Both motion paradigms are CSS; the reduced-motion shots are the rest frame and it is complete.
|
|
108
|
+
- [ ] Every CTA pair measured and pasted; no emoji anywhere in the diff.
|
|
109
|
+
- [ ] Zero horizontal overflow at 1440, 390 and 320.
|
|
110
|
+
- [ ] Where a **hero plate** is used it is text-free, a background token with its provenance sidecar, and it is the only raster on the page.
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: industrial-brutalist-ui
|
|
3
|
+
description: Raw mechanical interfaces that read like a technical document, inside the instance's world. One archetype per project (Swiss industrial print or dark tactical terminal, never mixed), massive uppercase clamped display against fixed tracked-out mono metadata, the pack's terracotta as the single hazard accent and its sea as one terminal green, strict grid anchoring with the hairline as a one-pixel grid gap, zero corner rounding, bracket and crosshair framing glyphs, and static halftone, scanline and noise degradation inside the Kill Switch. Triggers on "brutalist", "industrial", "terminal", "make it raw", "like a technical document". Rebuilt in-house from the taste-skill rebuild spec (task 1003327, ADR 0198).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
|
|
7
|
+
> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
|
|
8
|
+
>
|
|
9
|
+
> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
|
|
10
|
+
> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
|
|
11
|
+
> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
|
|
12
|
+
> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
|
|
13
|
+
> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
|
|
14
|
+
> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
|
|
15
|
+
> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
|
|
16
|
+
>
|
|
17
|
+
> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
|
|
18
|
+
<!-- END PLATFORM PREAMBLE -->
|
|
19
|
+
|
|
20
|
+
## Rebuilt from
|
|
21
|
+
|
|
22
|
+
This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `brutalist-skill` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325) — the `[industrial-brutalist-ui]` requirement group — and this file is its port under [task 1003327](https://cloudbongos.com/builders#/task/1003327); it implements those requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); what a *look* skill is allowed to be is [ADR 0230](../../../../docs/adr/<redacted>.md).
|
|
23
|
+
|
|
24
|
+
What changed in translation, on purpose: the upstream's central rule was **one substrate per project** — off-white document paper *or* near-black terminal, never both. A platform surface here ships **both modes on every page** (the preamble's dark twins), so the substrate choice becomes an **archetype** that decides which mode the surface is *composed for* while the other mode is still complete and still measured. Its hazard red and optional terminal green are not new colours: red is the pack's `terracotta`, green is the pack's `sea`, and neither may appear a third time. Its "zero corner rounding" is legal because a radius is a **derived tier**, not one of the fifteen — a brutalist sheet sets its own radii to 0 and says so in the header comment; where the instance's `DESIGN.md` names a radius as a signature, the instance wins. Its degradation effects (halftone, dithering, scanlines, noise) survive as CSS built from the one legal literal, pure black or white with alpha, and every one of them is static: a scanline that crawls is an animation, and it dies under the Kill Switch with everything else. Its "high-contrast serif after heavy degradation" is dropped unless the pack already carries a serif; this skill does not add a face.
|
|
25
|
+
|
|
26
|
+
## Where this look lives
|
|
27
|
+
|
|
28
|
+
The **grammar** below is this skill's. The **palette** is not: it comes from the instance's pack, and a variant comes from the style library at `modules/ui-design/styles/`. The two archetypes map onto the library like this — the **terminal** archetype is at home on `chrome-world` (a black void, one warm accent, mono metadata), and the **print** archetype is at home on `expedition` (warm paper, halftone, heavy uppercase display). `grove` is too soft for either and this skill says so rather than trying. Render under one with `--style <name>` before committing.
|
|
29
|
+
|
|
30
|
+
## Fires on
|
|
31
|
+
|
|
32
|
+
Data-heavy dashboards, telemetry and status surfaces, engineering portfolios, technical editorial — anything meant to read like a document produced by a machine rather than a brochure. It does **not** fire on a sign-up flow, a marketing landing page or an onboarding surface: the grammar reads as hostile where the user's job is to be persuaded or reassured.
|
|
33
|
+
|
|
34
|
+
## Commit to one archetype, and write it down
|
|
35
|
+
|
|
36
|
+
Pick **one** before anything is drawn, name it in the sheet's header comment and in the ship notes. The two are never mixed inside one interface.
|
|
37
|
+
|
|
38
|
+
| Archetype | Composed for | The substrate | The metadata voice |
|
|
39
|
+
|---|---|---|---|
|
|
40
|
+
| **Swiss industrial print** | light | the pack's `bg` as document paper, `bg-frame` as the plate | mono, `ink-soft`, tracked out |
|
|
41
|
+
| **Dark tactical terminal** | dark | the sheet's black tier, `bg-card` as the compartment | mono, the pack's `sea` at label size |
|
|
42
|
+
|
|
43
|
+
The mode the archetype is *not* composed for still ships, still clears AA, and still gets its own shots. It is the same composition in the other tier, not a second design: the print archetype in dark is the same grid on the black tier with the rules inverted; the terminal archetype in light is the same grid on paper.
|
|
44
|
+
|
|
45
|
+
## Typography
|
|
46
|
+
|
|
47
|
+
- **Macro: massive uppercase display.** The pack's `display` stack at its heaviest available weight, uppercase, negative tracking (about -0.03em), leading compressed to 0.9, and `clamp()`ed. Clamped sizing is **reserved for macro type**; nothing else on the page fluid-scales.
|
|
48
|
+
- **Micro: fixed mono, tracked out.** Every piece of metadata, every nav item, every unit identifier, coordinate, timestamp and count is mono at a fixed small size (12 to 13px), uppercase, `letter-spacing: .12em`. It never scales with the viewport; a technical readout that grows on a wide screen stops reading as a readout.
|
|
49
|
+
- **Nothing in between is decorative.** Body copy is the pack's `body` stack at the world's scale. There is no third voice.
|
|
50
|
+
- **A serif appears only if the pack has one.** This skill adds no face and loads no font; the two stacks the pack carries are the whole type system.
|
|
51
|
+
|
|
52
|
+
## Colour
|
|
53
|
+
|
|
54
|
+
- **One substrate, per the archetype.** Everything else is drawn on it.
|
|
55
|
+
- **One hazard accent: the pack's `terracotta`.** It marks what is dangerous, live or out of tolerance. It is never a decoration and never a second heading colour.
|
|
56
|
+
- **One optional terminal green: the pack's `sea`, on exactly one element** across the surface (a live indicator, a cursor, an in-range readout). A second use is a bug.
|
|
57
|
+
- **The pack's `accent` stays where the world put it** — on what is pressable — and does not join the hazard vocabulary.
|
|
58
|
+
- **Prohibited by default**: gradients as a surface, soft shadows, translucency as a material. Where the instance's world is built on glass (the chrome world is), this skill uses the world's glass token for the fixed layers the world already puts it on and adds none of its own; the world wins.
|
|
59
|
+
|
|
60
|
+
## Layout
|
|
61
|
+
|
|
62
|
+
- **Strict grid anchoring.** One grid for the whole surface, declared once; every compartment starts and ends on a line. Nothing is positioned by eye.
|
|
63
|
+
- **Visible compartments.** A region is bounded by a rule on all four sides or by a full-bleed rule above and below it. The rule is `rule`, 1px, at full strength — this look does not use the soft tier.
|
|
64
|
+
- **The hairline is a grid gap.** A one-pixel `gap` on a grid over a parent painted in `rule` produces a true hairline lattice that never doubles at a junction and never rounds. Prefer it to per-cell borders.
|
|
65
|
+
- **Oscillation.** A dense cluster of readouts sits directly against a band of vast negative space. Even rhythm is the failure mode; if every band has the same weight, the look has not landed.
|
|
66
|
+
- **Zero corner rounding.** Every radius on this surface is `0`, set once in the sheet's own derived tier with a comment naming this skill. A world whose signature shape is a pill keeps it and the sheet says which one it kept.
|
|
67
|
+
- **Full-width rules** between chapters, edge to edge, not inset to the container.
|
|
68
|
+
|
|
69
|
+
## The component vocabulary
|
|
70
|
+
|
|
71
|
+
Standard web chrome is replaced, not restyled:
|
|
72
|
+
|
|
73
|
+
- **Bracket and slash framing** on labels and actions: `[ DEPLOY ]`, `// SECTION 04`, `< BACK`. The glyphs are text, in the mono voice, never an icon font.
|
|
74
|
+
- **Registration and trademark marks used structurally** — a `®` or `™` at the corner of a compartment as a registration tick, at label size in `ink-faint`.
|
|
75
|
+
- **Crosshairs at grid intersections**: a 9px cross drawn with two pseudo-element rules in `rule`, on a pointer-inert layer, at the corners the grid actually has.
|
|
76
|
+
- **Barcode rules**: a `repeating-linear-gradient` of `ink` at varying stops as a band separator, at low alpha, never as a background for text.
|
|
77
|
+
- **Warning stripes**: a 45-degree `repeating-linear-gradient` of the `terracotta` and the substrate, reserved for a genuinely hazardous state and used on a bar no taller than 6px.
|
|
78
|
+
|
|
79
|
+
Every one of these is drawn from tokens and CSS. None of them is an image, and none of them carries meaning a screen reader cannot reach — a bracket is decoration around a real label, never the label itself.
|
|
80
|
+
|
|
81
|
+
## Simulated analog degradation
|
|
82
|
+
|
|
83
|
+
Three treatments, at most two per surface, all static:
|
|
84
|
+
|
|
85
|
+
- **Halftone or one-bit dithering** over a plate: a `repeating-radial-gradient` mask at low alpha over a background token, or a `background-blend-mode` against a dot pattern. The plate underneath is one of the instance's own **text-free hero plates** with its provenance sidecar; this skill never asks for a new one.
|
|
86
|
+
- **Scanlines**: a `repeating-linear-gradient` of transparent and pure black at 4 to 6 percent alpha, 3px period, on a fixed `pointer-events: none` pseudo-element. Static. A scanline that moves is an animation and dies under the switch anyway.
|
|
87
|
+
- **One global noise layer**: a single fixed, pointer-inert pseudo-element at very low alpha. One per page, never per component.
|
|
88
|
+
|
|
89
|
+
All three are built from the one legal literal (pure black or white with alpha). None of them reduces the contrast of text measured underneath it — check with `node modules/ui-design/kit/contrast.js` after the layer is on, not before.
|
|
90
|
+
|
|
91
|
+
## Engineering directives
|
|
92
|
+
|
|
93
|
+
- **Semantic technical elements** for readouts: `<data value>`, `<time datetime>`, `<meter>`, `<output>`, `<abbr title>`. A telemetry number that is only a `<span>` is a defect.
|
|
94
|
+
- **Clamped sizing only on macro type**, as above.
|
|
95
|
+
- **`z-index` on a named systemic scale** declared on `body`; the degradation layers are the top of it, the content never competes.
|
|
96
|
+
- **No layout property animates**; `transform` and `opacity` only.
|
|
97
|
+
- Motion is minimal by nature here, and what exists lives inside the **Kill Switch** — `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, with the rest frame complete.
|
|
98
|
+
|
|
99
|
+
## Pre-flight, measured by the kit
|
|
100
|
+
|
|
101
|
+
Render the real surface — `node modules/ui-design/kit/render.js --page <path>`, and `--style chrome-world` or `--style expedition` for the archetype you committed to — and read the shots.
|
|
102
|
+
|
|
103
|
+
- [ ] The archetype is named in the sheet header and the ship notes, and the interface carries exactly one.
|
|
104
|
+
- [ ] The mode the archetype was **not** composed for is complete and clears AA in its own shots.
|
|
105
|
+
- [ ] The hazard accent appears only on hazard; the terminal green appears exactly once.
|
|
106
|
+
- [ ] Every radius on the surface is 0, or the one the world kept is named.
|
|
107
|
+
- [ ] The lattice is a grid gap, not per-cell borders; no doubled or rounded junctions at 1440, 390 or 320.
|
|
108
|
+
- [ ] At most two degradation treatments, all static, all pointer-inert, and text under them still measures AA.
|
|
109
|
+
- [ ] Mono metadata does not scale with the viewport at any of the three widths.
|
|
110
|
+
- [ ] Reduced-motion pass identical to the rest frame; `check-mock.js` clean, tells waived in the file with a reason where kept.
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: minimalist-ui
|
|
3
|
+
description: Quiet editorial product interfaces built out of type and white space, inside the instance's world. Macro whitespace first, a capped measure, one display job and one body job, exactly one hairline weight for every border in the sheet, washed accents measured against their own ink, flat tile cards with no shadow, box-less accordions, keycap shortcuts, one depth treatment per band, entry motion inside the Kill Switch. Triggers on "make it minimal", "clean and editorial", "quiet", "document-like", "this feels busy". Declines dense surfaces like dashboards and ledgers. Rebuilt in-house from the taste-skill rebuild spec (task 1003327, ADR 0198); the palette is the pack and the nearest library look is expedition.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
|
|
7
|
+
> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
|
|
8
|
+
>
|
|
9
|
+
> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
|
|
10
|
+
> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
|
|
11
|
+
> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
|
|
12
|
+
> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
|
|
13
|
+
> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
|
|
14
|
+
> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
|
|
15
|
+
> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
|
|
16
|
+
>
|
|
17
|
+
> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
|
|
18
|
+
<!-- END PLATFORM PREAMBLE -->
|
|
19
|
+
|
|
20
|
+
## Rebuilt from
|
|
21
|
+
|
|
22
|
+
This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `minimalist-skill` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325) — the `[minimalist-ui]` requirement group — and this file is its port under [task 1003327](https://cloudbongos.com/builders#/task/1003327); it implements those requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); what a *look* skill is allowed to be is [ADR 0230](../../../../docs/adr/<redacted>.md).
|
|
23
|
+
|
|
24
|
+
What changed in translation, on purpose: the upstream shipped a **palette** (white or warm bone canvas, near-white cards, washed-out pastel accents each with its own darker text tone). Here that palette is a **look in the library** — `modules/ui-design/styles/expedition` is the warm-paper entry this skill was tuned against — and the canvas is whatever `bg` / `bg-card` the instance's pack carries. The upstream's editorial serif for hero headings becomes the pack's `display` stack; a face this skill wants and the pack does not have is a pack change, not a page's `@font-face`. Its pastels become `color-mix()` of the pack's `accent`, `sea` and `terracotta` against `bg-card`, each paired with the contract's own ink for that field, so a badge is measured rather than guessed. Its imagery clause is gone: **seeded placeholder photography does not exist here**, and the only rasters this skill may ask for are text-free hero plates under the owner's rule. Its ban on pill shapes for primary buttons is a default an instance's `DESIGN.md` overrules — Cloud Bongos's own door pill is that world's signature and wins. Its entry motion survives only inside the Kill Switch.
|
|
25
|
+
|
|
26
|
+
## Where this look lives
|
|
27
|
+
|
|
28
|
+
The **grammar** below is this skill's. The **palette** is not: it comes from the instance's pack, and a variant comes from the style library at `modules/ui-design/styles/`. The nearest library entry to this look is `expedition` (warm paper, hairline frames, one lamp yellow as a fill); `grove` reads the same grammar cooler; `chrome-world` is where the grammar has to fight the void and usually loses. Render under one with `--style <name>` before you commit to it. Adopting one is the owner's `config/branding.json`; a page never picks its own.
|
|
29
|
+
|
|
30
|
+
## Fires on
|
|
31
|
+
|
|
32
|
+
Clean, document-like product interfaces built out of type and white space: a reading surface, a settings sheet, a changelog, a pricing page, a documentation shell, an editorial marketing page whose argument is the words. It does **not** fire on a surface whose job is density (a dashboard, a data table, a ledger) — the quiet grammar makes a dense surface harder to read, not calmer. Say so and route to `impeccable layout` or `design-taste-frontend-v1` instead.
|
|
33
|
+
|
|
34
|
+
## Execution order
|
|
35
|
+
|
|
36
|
+
Do these in order; each one constrains the next, and doing them out of order produces a busy page with generous padding rather than a quiet one.
|
|
37
|
+
|
|
38
|
+
1. **Macro whitespace first.** Set the band rhythm before any component exists: the world's band clamp between chapters, and inside a chapter one step of `spacing`. A section that needs a divider to be legible has too little air, not too few rules.
|
|
39
|
+
2. **Constrain the measure.** Body text sits at 60 to 70 characters. The container is the world's `spacing.container`; a reading column inside it is narrower still, and it is centred only if the page has no rail.
|
|
40
|
+
3. **The type scale and the tokens.** Every size from the world's scale, every colour a `var()` or a `color-mix()` of the fifteen. This is where the look is decided; nothing below adds a colour.
|
|
41
|
+
4. **The hairline rule on every border.** See below. Do this as one pass over the whole sheet, not per component.
|
|
42
|
+
5. **Depth, then entry motion.** Both last, both optional, both removable without the page changing meaning.
|
|
43
|
+
|
|
44
|
+
## Typography
|
|
45
|
+
|
|
46
|
+
- **One display job, one body job.** The pack carries two stacks; a minimalist surface uses `display` for the h1 and h2 only and `body` for everything else. Where the pack's two stacks are the same family (the chrome world's are), the contrast is **weight and tracking**, not family: display at 300 with tight tracking, body at 400 at the world's default tracking.
|
|
47
|
+
- **Tight display, generous body.** Display headings take negative tracking (about -0.02em) and a line height near 1.05; body takes 1.6 to 1.7. The contrast between the two is the whole look.
|
|
48
|
+
- **Mono for metadata and code**, from the pack's `links` (the chrome world loads JetBrains Mono). Numerals in a table or a stat are tabular; a number that changes in place never reflows its neighbours.
|
|
49
|
+
- **Off-black body ink**, which is what `ink` already is; the softer tiers (`ink-soft`, `ink-faint`) carry captions and labels. Pure black as body ink is a different look.
|
|
50
|
+
- **No orphan.** A headline's last word never sits alone on its own line; fix it by widening the container or reducing the clamped size, never by rewriting the sentence for the layout's convenience.
|
|
51
|
+
|
|
52
|
+
## Colour and the hairline rule
|
|
53
|
+
|
|
54
|
+
- **The canvas is the pack's `bg`; a card is `bg-card`;** a recessed well is `bg-deep`. Three grounds, no more, and the step between them is small enough that the page reads as one sheet of paper.
|
|
55
|
+
- **Every border is a hairline**: 1px, `rule-soft` at rest, `rule` where it separates two live regions. There is no second border weight anywhere on the surface. A border that needs to be heavier is a background change.
|
|
56
|
+
- **Accents are washed, and each carries its own ink.** A badge, a tag or a quiet highlight is `color-mix(in srgb, var(--accent) 22%, var(--bg-card))` with `accent-ink` on it; the same shape in the `sea` or the `terracotta` field uses that field's ink. Measure the pair with `node modules/ui-design/kit/contrast.js` — a washed pastel is exactly where AA gets lost.
|
|
57
|
+
- **One solid call to action**, the accent as the fill with `accent-on` as the ink, and **no shadow on it**. The rest of the page's buttons are hairline-bordered and transparent.
|
|
58
|
+
- **Banned by default** (an instance's `DESIGN.md` may overrule any of these): gradients as a surface treatment, neon, a heavy or untinted drop shadow, 3D glass, a hero band painted in the accent, and a fully rounded pill on a large container. Where the instance's world has a signature that breaks one of these, the world wins and the sheet says so in a comment.
|
|
59
|
+
|
|
60
|
+
## Components
|
|
61
|
+
|
|
62
|
+
- **Tile cards**: a hairline border, the world's small radius (never the panel radius), padding at `spacing.md` or more, and no shadow. Cards sit in a flat grid with a real gutter; nothing lifts at rest.
|
|
63
|
+
- **Badges**: uppercase, the world's label size, tracked out, the washed field with its own ink, a small radius. Never a full pill, never the accent at full strength.
|
|
64
|
+
- **Accordions**: no box. Two rows are separated by one hairline and nothing else; the open row is marked by its own weight, not by a container appearing around it.
|
|
65
|
+
- **Keycaps**: mono, the world's smallest size, a hairline border, a 3px radius, `bg-deep` as the fill. A shortcut is written as keys, not as prose.
|
|
66
|
+
- **Tables**: hairlines between rows, none between columns; the header row is `ink-soft` at label size, tracked out, uppercase.
|
|
67
|
+
|
|
68
|
+
## Copy
|
|
69
|
+
|
|
70
|
+
Realistic and specific, always. Banned: emoji, placeholder person and company names, lorem, invented round numbers, and the marketing verbs that mean nothing (`unleash`, `supercharge`, `revolutionize`, `elevate`). If the real content is not known yet, write the shortest true sentence and mark the gap in a comment — a page full of plausible fiction is harder to fix than a page with a hole in it.
|
|
71
|
+
|
|
72
|
+
## Quiet depth
|
|
73
|
+
|
|
74
|
+
A band must not read as a flat empty strip. Give it one of these, and only one:
|
|
75
|
+
|
|
76
|
+
- a faint radial of the pack's own warm token, `radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%)`, sitting behind the content;
|
|
77
|
+
- a minimal line pattern from a `repeating-linear-gradient` of `rule-soft` at low alpha, on a pointer-inert pseudo-element;
|
|
78
|
+
- a **text-free hero plate** from the instance's world, as a background token on `body` with a provenance sidecar beside it, never an `<img>` and never on more than one band per page.
|
|
79
|
+
|
|
80
|
+
That is the whole list. Depth is a background job; it never touches the content layer, and it is invisible in a screenshot taken at 320.
|
|
81
|
+
|
|
82
|
+
## Motion, inside the Kill Switch
|
|
83
|
+
|
|
84
|
+
Felt, not noticed. All CSS, on the world's curves, nothing authored in JavaScript.
|
|
85
|
+
|
|
86
|
+
- **Entry**: a fade with a 12 to 16px rise on the entrance curve, about 500ms. Prefer `animation-timeline: view()` behind `@supports`; where that is unsupported, one `IntersectionObserver` may add a single class and the motion stays in CSS. The rest frame is the finished page, so a browser with no script shows a complete composition.
|
|
87
|
+
- **Cascade**: across a list or a grid, `animation-delay` stepped from an `--i` in the markup, capped at about 6 steps so the last card is never noticeably late.
|
|
88
|
+
- **Hover**: an ultra-subtle lift on a card, `translateY(-2px)` and a hairline that goes from `rule-soft` to `rule`. No shadow appears on hover that was not there at rest.
|
|
89
|
+
- **Press**: `scale(.98)` on `transform` only.
|
|
90
|
+
- **`@media (prefers-reduced-motion: reduce)` at the foot of the token layer kills all of it**, and the page is complete without it.
|
|
91
|
+
|
|
92
|
+
## Pre-flight, measured by the kit
|
|
93
|
+
|
|
94
|
+
Render the real surface — `node modules/ui-design/kit/render.js --page <path>` (add `--style expedition` to see it under the library's warm paper) — and read the shots, not the source.
|
|
95
|
+
|
|
96
|
+
- [ ] One display job, one body job; the contrast is weight and tracking where the pack has one family.
|
|
97
|
+
- [ ] Measure between 60 and 70 characters on the reading column at 1440.
|
|
98
|
+
- [ ] **One** border weight in the whole sheet, and it is a hairline.
|
|
99
|
+
- [ ] Every washed accent pair measured with `contrast.js`, AA in both modes.
|
|
100
|
+
- [ ] Exactly one depth treatment per band, none on the content layer.
|
|
101
|
+
- [ ] Every band that looked empty at 1440 still reads at 390 and 320.
|
|
102
|
+
- [ ] Reduced-motion pass identical to the rest frame.
|
|
103
|
+
- [ ] `node modules/ui-design/kit/check-mock.js` clean, including the craft tells; a tell you mean to keep is waived in the file with its reason.
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: stitch-design-taste
|
|
3
|
+
description: Writes a design contract document for an external screen-generating tool such as Google Stitch, in the platform's own frontmatter shape. Four dials (creativity, density, variance, motion intent) with named bands and stated defaults, then eight fixed sections (atmosphere, colour roles, typography, components, layout, responsive rules, motion intent, banned patterns) written as descriptive language paired with exact values. The thirteen colours are transcribed from the instance's pack and diffed, never invented; motion is an intent brief inside the Kill Switch; the screens that come back are a reference, not a source of truth. Triggers on "write a design brief for Stitch", "a design contract document", "a prompt-to-screen tool". Rebuilt in-house from the taste-skill rebuild spec (task 1003327, ADR 0198).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
|
|
7
|
+
> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
|
|
8
|
+
>
|
|
9
|
+
> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
|
|
10
|
+
> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
|
|
11
|
+
> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
|
|
12
|
+
> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
|
|
13
|
+
> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
|
|
14
|
+
> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
|
|
15
|
+
> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
|
|
16
|
+
>
|
|
17
|
+
> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
|
|
18
|
+
<!-- END PLATFORM PREAMBLE -->
|
|
19
|
+
|
|
20
|
+
## Rebuilt from
|
|
21
|
+
|
|
22
|
+
This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `stitch-skill` entry and its `DESIGN.md`), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325) — the `[stitch-design-taste]` requirement group — and this file is its port under [task 1003327](https://cloudbongos.com/builders#/task/1003327); it implements those requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); what a *look* skill is allowed to be is [ADR 0230](../../../../docs/adr/<redacted>.md).
|
|
23
|
+
|
|
24
|
+
What changed in translation, on purpose: the upstream **authored a palette** for the downstream tool — a descriptive name, a hex and a role per token, invented to taste. Here the colour contract is **transcribed, not invented**: it is the instance's thirteen with their real hex values and the roles the instance's `DESIGN.md` already gives them, so the external tool and the built surface cannot diverge. The document it writes uses the platform's own frontmatter shape — the one every look in `modules/ui-design/styles/` carries — rather than a shape of its own, so a document produced here can be read back as a style. Its universal bans (no pure black, no serif in a dashboard, the default UI sans banned) become **defaults the instance's `DESIGN.md` overrules**: Cloud Bongos's own world is a black void, and a document that told the tool otherwise would describe a different product. Its "signature move" of small contextual images set inline between headline words survives as a **hero object** under the owner's rule: a text-free cutout with its provenance sidecar, never a photograph of a screen. Its motion section stays what it always was, an intent brief for whoever writes the code afterwards, and every parameter in it is written to live inside the Kill Switch.
|
|
25
|
+
|
|
26
|
+
## Where this look lives
|
|
27
|
+
|
|
28
|
+
This skill writes a **document**, not code. The palette it transcribes is the instance's pack; the recipes it transcribes are the instance's `DESIGN.md`; a variant is a look from the style library at `modules/ui-design/styles/`, named by its directory so the reader can render it (`chrome-world`, `expedition` and `grove` today). It never invents a fifteen-token world and it never edits the instance's.
|
|
29
|
+
|
|
30
|
+
## Fires on
|
|
31
|
+
|
|
32
|
+
The deliverable is a **design contract document for an external screen-generating tool** — Google Stitch, a comparable prompt-to-screen product, or any collaborator who will produce screens from prose rather than from a repository. It does not fire when the deliverable is code (that is `design-taste-frontend` or `impeccable shape`), and it does not fire when the deliverable is a new look for the library (that is the `/style` session).
|
|
33
|
+
|
|
34
|
+
## Step 1 — the dials
|
|
35
|
+
|
|
36
|
+
Open the document with four dials, each with named bands and a stated default, set from the owner's description of the vibe and written as one line each.
|
|
37
|
+
|
|
38
|
+
| Dial | Bands | Default | What it moves |
|
|
39
|
+
|---|---|---|---|
|
|
40
|
+
| **Creativity** | conventional · considered · expressive | considered | how far a screen may depart from the archetype the surface implies |
|
|
41
|
+
| **Density** | airy · balanced · dense | balanced | information per screen; `dense` switches numerals to mono and tightens the scale |
|
|
42
|
+
| **Variance** | uniform · varied · asymmetric | varied | how much two sibling screens may differ in structure |
|
|
43
|
+
| **Motion intent** | still · restrained · alive | restrained | what the downstream coder is asked to build, all of it inside the Kill Switch |
|
|
44
|
+
|
|
45
|
+
State the default and the chosen value. A dial the owner did not speak to keeps its default and says so.
|
|
46
|
+
|
|
47
|
+
## Step 2 — the document, in this order
|
|
48
|
+
|
|
49
|
+
The section order is fixed. The reader is a tool that interprets **visual description**, so every rule is written as descriptive natural language **paired with an exact value** — "a warm salmon, the pack's `accent` hex verbatim, used only on what is pressable or live", never `bg-accent-500`. Utility class names mean nothing to it.
|
|
50
|
+
|
|
51
|
+
1. **Atmosphere** — three or four sentences on what the surface feels like and what it is not. This is the only prose section; everything below is rules with values.
|
|
52
|
+
2. **Colour roles** — the instance's thirteen, transcribed: descriptive name, hex, functional role, one row each. One palette for the whole output. One accent. Where the instance's world uses a colour the upstream would have banned (a pure black ground, a saturated accent), transcribe it and note that it is the instance's decision, not a default.
|
|
53
|
+
3. **Typography** — the pack's two stacks by name with their real fallbacks, the scale as values, tracking and measure specified per role, and which roles use mono numerals (always, above `density: dense`).
|
|
54
|
+
4. **Components** — the vocabulary the instance already has, described: tactile press feedback with no outer glow; cards only where elevation carries hierarchy; label-above-input forms with the error below the field; skeleton loaders shaped like the content, never a spinner; composed empty states with an action in them; errors inline rather than in a toast.
|
|
55
|
+
5. **Layout** — grid over flexbox arithmetic; no overlapping content layers; no three-equal-card feature row; a max-width container with its value; dynamic viewport height (`100dvh`) for any full-height section.
|
|
56
|
+
6. **Responsive rules**, a hard requirement, not advice — single-column collapse below the tablet breakpoint; zero horizontal overflow; headline sizes clamped with a stated body-size floor; 44px minimum touch targets (the platform floor is 24px of clearance on both sides of every control, and this is the tighter of the two); and the named test viewports, 1440, 390 and 320.
|
|
57
|
+
7. **Motion intent** — written for the coding agent, because the generating tool emits static screens: the curve and duration per interaction, perpetual micro-loops only where the world has one, staggered mounts with their step, `transform` and `opacity` only, and the statement that every rule here sits inside `@media (prefers-reduced-motion: reduce)` at the foot of the token layer with a complete rest frame.
|
|
58
|
+
8. **Banned patterns** — the closing list, below.
|
|
59
|
+
|
|
60
|
+
## The hero contract
|
|
61
|
+
|
|
62
|
+
- **One primary call to action.** A second competing action on the same screen is a defect.
|
|
63
|
+
- **Small contextual images set inline between headline words** are this contract's signature move, and under the owner's rule they are **hero objects**: text-free cutouts with a provenance sidecar, sized to the cap height, never a photograph of an interface.
|
|
64
|
+
- **No overlapping layers** in the hero, no scroll-cue filler text, and above `variance: varied` the structure is asymmetric.
|
|
65
|
+
- Full-page **hero plates** are text-free by definition; the document says so explicitly so the downstream tool does not letter one.
|
|
66
|
+
|
|
67
|
+
## Banned patterns (the closing list)
|
|
68
|
+
|
|
69
|
+
Emoji · the default UI sans as a display face where the pack has a real one · pure black as a *ground the instance did not choose* · neon glows · custom cursors · placeholder person and company names · fake round numbers · cliché marketing verbs · unstyled component-library defaults · arbitrary `z-index` values · circular spinners · a three-equal-card feature row · gradient text · a screenshot of an interface built out of divs.
|
|
70
|
+
|
|
71
|
+
Each line is a default. The document states plainly that the instance's `DESIGN.md` is the authority and that where it disagrees with this list, it wins — otherwise the external tool is being told a different product exists.
|
|
72
|
+
|
|
73
|
+
## Step 3 — prove it before it is sent
|
|
74
|
+
|
|
75
|
+
A document that cannot be built is a wish list.
|
|
76
|
+
|
|
77
|
+
- **Transcription check**: the thirteen hexes in the document equal the instance's pack, value for value. Diff them; do not retype them.
|
|
78
|
+
- **Contrast**: `node modules/ui-design/kit/contrast.js` over the pack, and every pair the document names as a component's colour must be in the clean list.
|
|
79
|
+
- **Reference render**: render the nearest existing surface — `node modules/ui-design/kit/render.js --page <path>` (add `--style <name>` for a look from the library) — and attach the 1440, 390 and 320 shots to the document. The tool composes better against a real specimen than against prose alone, and a rule the specimen contradicts is a rule that was wrong.
|
|
80
|
+
- **Round trip**: when the screens come back, they are a reference, not a source of truth. `image-to-code` reads them, the instance's world overrides them, and what ships goes through the kit like anything else.
|
|
81
|
+
|
|
82
|
+
## Pre-flight
|
|
83
|
+
|
|
84
|
+
- [ ] Four dials, each with its bands, its default and its chosen value.
|
|
85
|
+
- [ ] The eight sections, in order, every rule paired with an exact value.
|
|
86
|
+
- [ ] The thirteen transcribed from the pack and diffed, not retyped.
|
|
87
|
+
- [ ] Every colour pair the document names cleared by `contrast.js`.
|
|
88
|
+
- [ ] The responsive section names 1440, 390 and 320 and states the overflow rule.
|
|
89
|
+
- [ ] The motion section states the Kill Switch and a complete rest frame.
|
|
90
|
+
- [ ] The banned list closes with the instance-wins clause.
|
|
91
|
+
- [ ] The reference shots are attached, and the document names the look they were rendered under.
|