sheleg-design-skill 1.56.0 → 1.57.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/CHANGELOG.md +65 -0
- package/package.json +3 -1
- package/plugins/sheleg-design/.claude-plugin/plugin.json +2 -2
- package/plugins/sheleg-design/skills/sheleg-design/AI_PRODUCT_PATTERNS.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/DESIGN_SYNC_BRIDGE.md +10 -0
- package/plugins/sheleg-design/skills/sheleg-design/FIGMA_BRIDGE.md +7 -0
- package/plugins/sheleg-design/skills/sheleg-design/MOBILE_SURFACES.md +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_DOCTRINE.md +14 -0
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_PRODUCTION.md +10 -0
- package/plugins/sheleg-design/skills/sheleg-design/SHELEG_DESIGN.md +19 -0
- package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +18 -9
- package/plugins/sheleg-design/skills/sheleg-design/SURFACE_COMPOSITION.md +9 -3
- package/plugins/sheleg-design/skills/sheleg-design/styles/STYLE_PACK_TEMPLATE.md +18 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/almanac.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/atrium.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/awning.md +12 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/babylove.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/blueprint.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/briefing-room.md +12 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/bulletin.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/chorus.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/cyclorama.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/datasheet.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/daylight.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/deskmate.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/editorial-luxury.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/field-notes.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/instrument-console.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/ledger.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/manpage.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/maquette.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/nameplate.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/notation.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/onionskin.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/ora.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/orchard.md +13 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/outrank.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/paperclip.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/patchbay.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/pigeonhole.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/prism.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/proscenium.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/rimlight.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/roster.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/router.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/scoreboard.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/showroom.md +17 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/surveyor.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tenor.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/test-drive.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/vitrine.md +16 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/workbench.md +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,71 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [1.57.0] - 2026-08-30
|
|
10
|
+
|
|
11
|
+
### The siblings are declared, the maps are derived, the descriptions stop scarring
|
|
12
|
+
|
|
13
|
+
Five closures from the family audit of 2026-08-29 (SHD-05, SHD-01, SHD-03, SHD-09,
|
|
14
|
+
SHD-11), one release.
|
|
15
|
+
|
|
16
|
+
**The three sibling skills are declared, and every one has a written absent-branch
|
|
17
|
+
(SHD-05, the audit's HIGH).** `SKILL.md` handed charts to a `dataviz` skill that
|
|
18
|
+
exists on no consumer machine this skill ships to, and asserted `shadcn` /
|
|
19
|
+
`migrate-radix-to-base` "are installed" — a promise this repository has no way to
|
|
20
|
+
keep. Three changes, none of them a removal:
|
|
21
|
+
|
|
22
|
+
- A `compatibility` front-matter line names all three as optional siblings with
|
|
23
|
+
in-text fallbacks — the Agent Skills field for environment expectations, spent on
|
|
24
|
+
the one expectation this skill actually has.
|
|
25
|
+
- The chart handoff is now conditional in both homes: where a `dataviz` skill is
|
|
26
|
+
installed it consumes the pack as its parameter set, and **where none is
|
|
27
|
+
installed, the role table in `SURFACE_COMPOSITION.md` IS the chart contract**,
|
|
28
|
+
applied by hand — which is what that table always was, stated instead of implied.
|
|
29
|
+
- The component-layer section says what absence costs: nothing. `npx shadcn@latest
|
|
30
|
+
add` does the adding without the skill, and the token mapping binds either way.
|
|
31
|
+
|
|
32
|
+
**Every long reference now carries a derived `## Contents` list (SHD-01).** The
|
|
33
|
+
authoring rule — a reference over 100 lines carries a map, because that is what a
|
|
34
|
+
partial read sees — held in 2 of 46 qualifying files. Hand-adding 44 lists creates
|
|
35
|
+
44 lists that rot, so the list is **derived**: `scripts/gen_contents.py` writes the
|
|
36
|
+
entries from the file's own `## ` headings (fenced code blocked out), `--write`
|
|
37
|
+
regenerates bundle + mirror + template source together, and
|
|
38
|
+
`validate_contents_lists()` refuses a file whose list is missing *or drifted* —
|
|
39
|
+
including the one pre-existing list whose entries had already wandered from the
|
|
40
|
+
headings they mapped (`MOBILE_SURFACES.md`). A new pack without a Contents list now
|
|
41
|
+
fails the gate with the remedy in the message.
|
|
42
|
+
|
|
43
|
+
**Both host-facing manifest descriptions are generated, never hand-appended
|
|
44
|
+
(SHD-03).** `plugin.json` and the plugin entry in `marketplace.json` had converged
|
|
45
|
+
to what per-release appending always produces: `patchbay` and `nameplate` glossed
|
|
46
|
+
twice, `deskmate` never glossed, and `chorus` carrying `deskmate`'s orphaned
|
|
47
|
+
parenthesis. Both descriptions are now derived from `STYLE_PACK_INDEX.md`'s
|
|
48
|
+
catalogue — the register and good-fit columns packs are already chosen by — via
|
|
49
|
+
`scripts/gen_manifest_descriptions.py` (`npm run gen-descriptions`), and
|
|
50
|
+
`validate_manifest_descriptions()` refuses a manifest that differs from the
|
|
51
|
+
derivation. The generator also refuses to run when the catalogue and `styles/`
|
|
52
|
+
disagree, so the index parity gate fires first, not silently.
|
|
53
|
+
|
|
54
|
+
**The deck trigger names the register it owns (SHD-09).** "investor deck" /
|
|
55
|
+
«презентация» was broad enough to catch every presentation request, including the
|
|
56
|
+
`.pptx` files the pptx/pitch-deck neighbours own. Now: *"investor deck as a web
|
|
57
|
+
page" / "веб-презентация"*, with the file-based register explicitly declined in the
|
|
58
|
+
description tail. The T1 carrier word `deck` survives, and the umbrella advertises
|
|
59
|
+
no presentation trigger for this skill, so no routing hook loses a word.
|
|
60
|
+
|
|
61
|
+
**The layout deviation is recorded where a retrofit would look (SHD-11).**
|
|
62
|
+
References at the skill root and tokens two levels deep predate the layout
|
|
63
|
+
guidance, and every deep link, the `.cursor` byte-mirror and `install.sh`'s file
|
|
64
|
+
list depend on them. CONTRIBUTING.md now records the deviation as deliberate so the
|
|
65
|
+
next standards pass reads a decision instead of an accident.
|
|
66
|
+
|
|
67
|
+
Gate: 5060 → 5598 checks (the floor moves with it); both new checks watched
|
|
68
|
+
failing against the real tree first — 46 references and 2 manifests red before the
|
|
69
|
+
regeneration, green after — and each ships a planted defect in the self-test. The
|
|
70
|
+
Contents gate's first live catch was the next release's own file: v1.56.0's
|
|
71
|
+
`MOTION_PRODUCTION.md` landed mid-flight without a list, and the rebase gate
|
|
72
|
+
refused it until `npm run gen-contents` wrote one.
|
|
73
|
+
|
|
9
74
|
## [1.56.0] - 2026-08-30
|
|
10
75
|
|
|
11
76
|
### The render seam — what changes when motion stops being a page
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.57.0",
|
|
4
4
|
"description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, a motion doctrine that decides whether to animate before it decides how, three calibration dials, and thirty-nine locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, outrank, babylove, patchbay, nameplate, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor, paperclip, ledger, router, daylight, notation, almanac, vitrine, proscenium, awning, bulletin, rimlight, onionskin, deskmate, test-drive, surveyor and chorus. Colour, slop and fork-reciprocity gates run as scripts, not opinions. Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"sheleg-design-skill": "bin/cli.js"
|
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
"smoke": "node bin/cli.js --help",
|
|
25
25
|
"palette": "python3 test/validate_palette.py",
|
|
26
26
|
"sync-kits": "python3 scripts/sync-kit-tokens.py",
|
|
27
|
+
"gen-descriptions": "python3 scripts/gen_manifest_descriptions.py --write",
|
|
28
|
+
"gen-contents": "python3 scripts/gen_contents.py --write",
|
|
27
29
|
"sloplint": "python3 test/sloplint.py",
|
|
28
30
|
"selftest": "python3 test/validate.py --self-test && python3 test/validate_palette.py --self-test && python3 test/sloplint.py --self-test"
|
|
29
31
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design",
|
|
3
3
|
"displayName": "SHELEG Design",
|
|
4
|
-
"description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and thirty-nine pluggable visual style packs — instrument-console (
|
|
5
|
-
"version": "1.
|
|
4
|
+
"description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and thirty-nine pluggable visual style packs, each with a ready-made token layer — instrument-console (near-black aerospace console; technical systems and infrastructure), editorial-luxury (cream and espresso; editorial, research, premium B2B), workbench (quiet light/dark UI; dashboards, admin, internal tools), briefing-room (dark 16:9 deck; investor and board presentations), atrium (cream daylight; consumer health and high-trust DTC), babylove (white with orange; SEO SaaS, long time-to-value, disconnected states), patchbay (black with mint-cyan; engines, buses, pipelines, OSS front doors), nameplate (cool slab with coral; press, certification and third-party trust), rimlight (white with blue light; studios, services and case studies), onionskin (white working sheet; developer and AI infrastructure), deskmate (warm beige with a dusk bleed; AI coworkers and chat-native agents), test-drive (warm paper with one coral; self-serve SaaS proven by the live product), surveyor (peach paper with teal and pink; visibility, monitoring and benchmark tools), chorus (warm paper under a crosshair grid, with a cut-corner bubble; AI-search visibility, brand monitoring and community marketing), outrank (white with violet; one brand across marketing and product), orchard (warm oat slabs; friendly biotech and wellness), field-notes (ruled green paper; auditable open-source developer tools), showroom (white gallery; product-led companies selling the app), blueprint (white technical stock; vector, storage and query infrastructure), prism (iridescent hard edge; command-first OSS infrastructure), maquette (near-black table; enterprise data infrastructure), cyclorama (looping pastel field; applied-AI consultancies), scoreboard (warm paper; growth, ads and accumulating metrics), datasheet (off-white specification; fraud, identity and device intelligence), manpage (cream manual; APIs, SDKs, CLIs and MCP servers), pigeonhole (filed white field; inbox, ticket and CRM triage), roster (faint square grid; platforms sold through who uses them), ora (warm coal; machine verdicts, audits and protocol traces), tenor (warm management paper; agent operations and autonomous back office), ledger (cream ruled console; analysts, BI and warehouse agents), paperclip (monochrome coal; orchestrators, schedulers and job runners), awning (white commerce forecourt; storefront, payroll and billing platforms), router (pale console with hairlines; dashboard, billing and inventory surfaces), daylight (bright portal with one shadow; client onboarding and service portals), notation (restrained technical hairlines; OSS, docs and developer workspaces), almanac (oatmeal editorial paper; manifestos and category-defining pages), vitrine (serif trust display; evaluated B2B, security and compliance), proscenium (white demo sequence; product tours and launch pages), bulletin (cheerful outlined bands; broad SMB and agency platforms). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, the packs' token CSS, and the /sheleg-design command.",
|
|
5
|
+
"version": "1.57.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "ssheleg",
|
|
8
8
|
"url": "https://x.com/sshlg93"
|
|
@@ -14,6 +14,19 @@ and states, not a palette. Every token named here is workbench's.
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
+
## Contents
|
|
18
|
+
|
|
19
|
+
- 1. The five states of a model call
|
|
20
|
+
- 2. Streaming beats spinners
|
|
21
|
+
- 3. Latency has two numbers
|
|
22
|
+
- 4. Provenance and uncertainty
|
|
23
|
+
- 5. Agent actions: the confirm is the design
|
|
24
|
+
- 6. Empty states carry the capability
|
|
25
|
+
- 7. Chat is a shape, not the shape
|
|
26
|
+
- 8. Cost, quota and scope
|
|
27
|
+
- 9. Bans
|
|
28
|
+
- Evidence
|
|
29
|
+
|
|
17
30
|
## 1. The five states of a model call
|
|
18
31
|
|
|
19
32
|
Design all five before building any. Most AI UI ships state 2 and 3 only, then
|
|
@@ -15,6 +15,16 @@ agent that does not have it — the pack stands on its own and nothing below app
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- 1. What crosses, and in what shape
|
|
21
|
+
- 2. Style packs — the pack is the source of truth
|
|
22
|
+
- 3. Figma — one border at a time
|
|
23
|
+
- 4. Reference sweeps (Lazyweb, Mobbin, Refero) — layout crosses, identity does not
|
|
24
|
+
- 5. Live-site extraction — the pack first, the sync second
|
|
25
|
+
- 6. What cannot cross
|
|
26
|
+
- 7. Round-trip discipline
|
|
27
|
+
|
|
18
28
|
## 1. What crosses, and in what shape
|
|
19
29
|
|
|
20
30
|
A kit ships **three layers**, and they are a stack rather than a menu:
|
|
@@ -15,6 +15,13 @@ stands on its own and nothing below applies.
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- 1. Code → Figma (publish the pack as variables)
|
|
21
|
+
- 2. Figma → code (implement a design without importing slop)
|
|
22
|
+
- 3. What cannot cross
|
|
23
|
+
- 4. Round-trip discipline
|
|
24
|
+
|
|
18
25
|
## 1. Code → Figma (publish the pack as variables)
|
|
19
26
|
|
|
20
27
|
Use when a project has the pack in code and needs the design file to match — or
|
|
@@ -9,7 +9,7 @@ pack's `## Responsive` section covers that, and this file does not repeat it.
|
|
|
9
9
|
|
|
10
10
|
- What a pack decides here, and what it does not
|
|
11
11
|
- The six rules every pack already carries — and one no pack answers
|
|
12
|
-
- Reference sweeps
|
|
12
|
+
- Reference sweeps — structure crosses, identity does not
|
|
13
13
|
|
|
14
14
|
## What a pack decides here, and what it does not
|
|
15
15
|
|
|
@@ -8,6 +8,20 @@ Every number here is a decision someone else already paid for. Use them.
|
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
+
## Contents
|
|
12
|
+
|
|
13
|
+
- 1. Should this animate at all?
|
|
14
|
+
- 2. Easing
|
|
15
|
+
- 3. Duration
|
|
16
|
+
- 4. Springs
|
|
17
|
+
- 5. Forbidden forms
|
|
18
|
+
- 6. Scroll motion
|
|
19
|
+
- 7. Motion that came from a design tool
|
|
20
|
+
- 8. Anti-drift
|
|
21
|
+
- 9. Reduced motion
|
|
22
|
+
- 10. Pre-flight
|
|
23
|
+
- How the calibration dials bind
|
|
24
|
+
|
|
11
25
|
## 1. Should this animate at all?
|
|
12
26
|
|
|
13
27
|
The first question is not "what animation" — it is "how often will a person see
|
|
@@ -9,6 +9,16 @@ plays.
|
|
|
9
9
|
That is a different medium with different physics, and treating it as "the same
|
|
10
10
|
animation, exported" is the mistake this document exists to prevent.
|
|
11
11
|
|
|
12
|
+
## Contents
|
|
13
|
+
|
|
14
|
+
- The boundary
|
|
15
|
+
- Before the tool: what a rendered asset costs
|
|
16
|
+
- The two tools, measured
|
|
17
|
+
- The recommendation, and the three conditions that reverse it
|
|
18
|
+
- The token seam
|
|
19
|
+
- Reduced motion, on the other side of the render
|
|
20
|
+
- Pre-flight for a rendered asset
|
|
21
|
+
|
|
12
22
|
## The boundary
|
|
13
23
|
|
|
14
24
|
| The motion is… | It belongs to | Read |
|
|
@@ -26,6 +26,25 @@ build new sites on the same principles and understand *why* each piece works.
|
|
|
26
26
|
|
|
27
27
|
---
|
|
28
28
|
|
|
29
|
+
## Contents
|
|
30
|
+
|
|
31
|
+
- 0. The one-paragraph thesis
|
|
32
|
+
- 1. Architecture at a glance
|
|
33
|
+
- 2. Layer 1 — The scroll store (the single clock)
|
|
34
|
+
- 3. Layer 2 — Smooth scroll (one position per frame)
|
|
35
|
+
- 4. Layer 3 — The particle field (the scene-formation engine)
|
|
36
|
+
- 5. Layer 4 — The 2D fallback (SignalMesh)
|
|
37
|
+
- 6. Layer 5 — The projection bridge (fusing DOM and WebGL)
|
|
38
|
+
- 7. Layer 6 — DOM choreography
|
|
39
|
+
- 8. Layer 7 — Reveal primitives (act-themed entrances)
|
|
40
|
+
- 9. Layer 8 — Scrubbed instruments (GSAP recipe)
|
|
41
|
+
- 10. Cross-cutting rules
|
|
42
|
+
- 11. Recipe — build a new SHELEG site from scratch
|
|
43
|
+
- 12. Why it works (the deeper principles)
|
|
44
|
+
- 13. File map (one file per idea)
|
|
45
|
+
- Quick reference — each rule, and the failure it prevents
|
|
46
|
+
- Three looks that are defaults, not decisions
|
|
47
|
+
|
|
29
48
|
## 0. The one-paragraph thesis
|
|
30
49
|
|
|
31
50
|
A landing page feels "alive" not because it has many animations, but because a
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: sheleg-design
|
|
3
|
-
description: Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers
|
|
3
|
+
description: Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers: "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens, style pack" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette, colors" / "палитра, цвета", "typography, font" / "типографика, шрифт", "how it looks, make it prettier" / "выглядит, красиво, красивее", "visual reference" / "визуальные референсы", "investor deck as a web page" / "веб-презентация". Not for structure, copy, backend behavior, or .pptx decks.
|
|
4
4
|
license: MIT
|
|
5
|
+
compatibility: Optional siblings — dataviz, shadcn, migrate-radix-to-base; each has an in-text fallback when absent.
|
|
5
6
|
metadata:
|
|
6
|
-
version: 1.
|
|
7
|
+
version: 1.57.0
|
|
7
8
|
---
|
|
8
9
|
|
|
9
10
|
# SHELEG Design
|
|
@@ -156,10 +157,14 @@ as a definition of done, in that order:
|
|
|
156
157
|
- **Scene depth — six layers** ([`SURFACE_COMPOSITION.md`](./SURFACE_COMPOSITION.md)),
|
|
157
158
|
before writing CSS for a cinematic page. A scene has planes; everything on one
|
|
158
159
|
plane is the failure no amount of easing repairs.
|
|
159
|
-
- **Charts —
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
- **Charts — the role contract in the same file, plus the `dataviz` handoff
|
|
161
|
+
where that skill exists**, before drawing a chart in any pack. Token names are
|
|
162
|
+
not uniform across the thirty-nine packs — only `--bg` and `--ink` resolve in
|
|
163
|
+
every one — and an undefined custom property does not error, it silently falls
|
|
164
|
+
back. Guessing one is the quietest way to ship a wrong chart. A `dataviz`
|
|
165
|
+
skill is an optional neighbour this skill does not ship: where none is
|
|
166
|
+
installed, the role table in `SURFACE_COMPOSITION.md` IS the chart contract,
|
|
167
|
+
applied by hand.
|
|
163
168
|
- **Mobile surfaces** ([`MOBILE_SURFACES.md`](./MOBILE_SURFACES.md)), when the
|
|
164
169
|
brief is a native app screen or a mobile-web view — not a desktop page whose
|
|
165
170
|
only mobile concern is collapse. Five mobile rules the packs each state alone,
|
|
@@ -232,9 +237,13 @@ there, the work is bespoke scroll and WebGL, and reaching for a component kit is
|
|
|
232
237
|
how a hero ends up looking like a settings screen.
|
|
233
238
|
|
|
234
239
|
**Who does the work.** This section decides *whether* and *against which tokens*.
|
|
235
|
-
|
|
236
|
-
`migrate-radix-to-base` handles the Radix→Base move; both are
|
|
237
|
-
|
|
240
|
+
Where the `shadcn` skill is installed it does the adding, searching and
|
|
241
|
+
composing, and `migrate-radix-to-base` handles the Radix→Base move; both are
|
|
242
|
+
**optional neighbours** this skill declares in its `compatibility` line and does
|
|
243
|
+
not ship, and they trigger on their own words where present. Where they are
|
|
244
|
+
absent nothing is blocked: the kit's own CLI (`npx shadcn@latest add
|
|
245
|
+
<component>`) does the adding, and the token mapping above binds either way. Do
|
|
246
|
+
not restate their component docs here.
|
|
238
247
|
|
|
239
248
|
## Optional — Figma (design ↔ code)
|
|
240
249
|
|
|
@@ -53,9 +53,15 @@ A pack that bans grain and blur leaves the slot empty rather than filling it —
|
|
|
53
53
|
|
|
54
54
|
## Charts and data — hand the pack to `dataviz`
|
|
55
55
|
|
|
56
|
-
Do not
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
Do not let a chart library pick its own colours. Where a `dataviz` skill is
|
|
57
|
+
installed, it owns chart form, colour roles and the runnable palette validation,
|
|
58
|
+
and a pack is the *parameter set* it consumes — hand it the values mapped below.
|
|
59
|
+
That skill is an **optional neighbour**: this skill declares it in its
|
|
60
|
+
`compatibility` front-matter and does not ship it, so its absence is an ordinary
|
|
61
|
+
state, not a broken install. **Where no dataviz skill is installed, the role
|
|
62
|
+
table below is the contract** — resolve each role from the chosen pack's token
|
|
63
|
+
layer by hand, and the status map and the two rules at the end of this section
|
|
64
|
+
bind exactly the same, with nobody to hand them to.
|
|
59
65
|
|
|
60
66
|
**Read the chosen pack's own token names before you write a single `var()`.**
|
|
61
67
|
This table is by *role*, not by token, because the names are not uniform across
|
|
@@ -36,6 +36,24 @@ were chosen because their answers are **derived from the token layer**, so the
|
|
|
36
36
|
gate re-derives both and refuses a declaration that has drifted from the thing
|
|
37
37
|
it describes. Add a third only when it can be answered the same way.
|
|
38
38
|
|
|
39
|
+
## Contents
|
|
40
|
+
|
|
41
|
+
- Before you fill anything — six rules that decide whether this pack is real
|
|
42
|
+
- Register
|
|
43
|
+
- Palette
|
|
44
|
+
- Type
|
|
45
|
+
- Texture & surface
|
|
46
|
+
- Components
|
|
47
|
+
- Hero
|
|
48
|
+
- Responsive
|
|
49
|
+
- Motion tokens
|
|
50
|
+
- Signature motifs
|
|
51
|
+
- Signature element
|
|
52
|
+
- Motion flavor (optional — cinematic packs only)
|
|
53
|
+
- Micro-interactions
|
|
54
|
+
- Bans
|
|
55
|
+
- Gotchas
|
|
56
|
+
|
|
39
57
|
## Before you fill anything — six rules that decide whether this pack is real
|
|
40
58
|
|
|
41
59
|
Until 1.11.0 these were spread across three places a reader of the installed
|
|
@@ -16,6 +16,22 @@ Contract: widened — all thirteen headings.
|
|
|
16
16
|
Themes: light + dark — a full theme twin.
|
|
17
17
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
18
18
|
|
|
19
|
+
## Contents
|
|
20
|
+
|
|
21
|
+
- Register
|
|
22
|
+
- Palette
|
|
23
|
+
- Type
|
|
24
|
+
- Texture & surface
|
|
25
|
+
- Components
|
|
26
|
+
- Hero
|
|
27
|
+
- Responsive
|
|
28
|
+
- Motion tokens
|
|
29
|
+
- Signature motifs
|
|
30
|
+
- Signature element
|
|
31
|
+
- Micro-interactions
|
|
32
|
+
- Bans
|
|
33
|
+
- Gotchas
|
|
34
|
+
|
|
19
35
|
## Register
|
|
20
36
|
|
|
21
37
|
Choose Almanac for **pages that assert a category**: a company saying *this is
|
|
@@ -20,6 +20,23 @@ already measured. Read on 2026-08-20 from `/_astro/utilities.*.css` and
|
|
|
20
20
|
Themes: light only — no second block of any kind ships here.
|
|
21
21
|
Rank: unordered — 3 status role(s) and no severity ramp; a rank scale is yours.
|
|
22
22
|
|
|
23
|
+
## Contents
|
|
24
|
+
|
|
25
|
+
- Register
|
|
26
|
+
- Palette
|
|
27
|
+
- Type
|
|
28
|
+
- Texture & surface
|
|
29
|
+
- Components
|
|
30
|
+
- Hero
|
|
31
|
+
- Responsive
|
|
32
|
+
- Motion tokens
|
|
33
|
+
- Signature motifs
|
|
34
|
+
- Signature element
|
|
35
|
+
- Motion flavor (cinematic packs only)
|
|
36
|
+
- Micro-interactions
|
|
37
|
+
- Bans
|
|
38
|
+
- Gotchas
|
|
39
|
+
|
|
23
40
|
## Register
|
|
24
41
|
|
|
25
42
|
Choose this pack for **consumer health and premium care**: longevity and
|
|
@@ -26,6 +26,18 @@ the pack forgot. Everything the pack does state is binding.
|
|
|
26
26
|
Themes: light only — no second block of any kind ships here.
|
|
27
27
|
Rank: unordered — 3 status role(s) and no severity ramp; a rank scale is yours.
|
|
28
28
|
|
|
29
|
+
## Contents
|
|
30
|
+
|
|
31
|
+
- Register
|
|
32
|
+
- Palette
|
|
33
|
+
- Type
|
|
34
|
+
- Texture & surface
|
|
35
|
+
- Motion tokens
|
|
36
|
+
- Signature motifs
|
|
37
|
+
- Micro-interactions
|
|
38
|
+
- Bans
|
|
39
|
+
- Gotchas
|
|
40
|
+
|
|
29
41
|
## Register
|
|
30
42
|
|
|
31
43
|
Choose this pack for a **commerce or platform front door** — the surface that
|
|
@@ -20,6 +20,23 @@ priced, and the price is legible in both directions: `outrank` gets a semantic
|
|
|
20
20
|
vocabulary and inherits somebody else's upgrade path; this gets a system a person
|
|
21
21
|
holds in their head and no answer at all for a second theme.
|
|
22
22
|
|
|
23
|
+
## Contents
|
|
24
|
+
|
|
25
|
+
- Register
|
|
26
|
+
- Palette
|
|
27
|
+
- Type
|
|
28
|
+
- Texture & surface
|
|
29
|
+
- Components
|
|
30
|
+
- Hero
|
|
31
|
+
- Responsive
|
|
32
|
+
- Motion tokens
|
|
33
|
+
- Signature motifs
|
|
34
|
+
- Signature element
|
|
35
|
+
- Motion flavor
|
|
36
|
+
- Micro-interactions
|
|
37
|
+
- Bans
|
|
38
|
+
- Gotchas
|
|
39
|
+
|
|
23
40
|
## Register
|
|
24
41
|
|
|
25
42
|
Plain, warm, unhurried. The product is patient with itself — it ships a *What to
|
|
@@ -16,6 +16,23 @@ Contract: widened — all thirteen headings.
|
|
|
16
16
|
Themes: light only — no second block of any kind ships here.
|
|
17
17
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
18
18
|
|
|
19
|
+
## Contents
|
|
20
|
+
|
|
21
|
+
- Register
|
|
22
|
+
- Palette
|
|
23
|
+
- Type
|
|
24
|
+
- Texture & surface
|
|
25
|
+
- Components
|
|
26
|
+
- Hero
|
|
27
|
+
- Responsive
|
|
28
|
+
- Motion tokens
|
|
29
|
+
- Signature motifs
|
|
30
|
+
- Signature element
|
|
31
|
+
- Motion flavor (cinematic packs only)
|
|
32
|
+
- Micro-interactions
|
|
33
|
+
- Bans
|
|
34
|
+
- Gotchas
|
|
35
|
+
|
|
19
36
|
## Register
|
|
20
37
|
|
|
21
38
|
Choose this pack for **infrastructure sold on precision**: vector databases,
|
|
@@ -21,6 +21,18 @@ citation attached — which is the one thing this pack layer exists to prevent.
|
|
|
21
21
|
Themes: light only — no second block of any kind ships here.
|
|
22
22
|
Rank: unordered — 1 status role(s) and no severity ramp; a rank scale is yours.
|
|
23
23
|
|
|
24
|
+
## Contents
|
|
25
|
+
|
|
26
|
+
- Register
|
|
27
|
+
- Palette
|
|
28
|
+
- Type
|
|
29
|
+
- Texture & surface
|
|
30
|
+
- Motion tokens
|
|
31
|
+
- Signature motifs
|
|
32
|
+
- Micro-interactions
|
|
33
|
+
- Bans
|
|
34
|
+
- Gotchas
|
|
35
|
+
|
|
24
36
|
## Register
|
|
25
37
|
|
|
26
38
|
Choose this pack for **presentations rendered as a product**: investor and
|
|
@@ -19,6 +19,22 @@ Contract: widened — all thirteen headings.
|
|
|
19
19
|
Themes: light only — the second block (`[data-surface="ink"]`) is a SURFACE variant, not a theme twin.
|
|
20
20
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
21
21
|
|
|
22
|
+
## Contents
|
|
23
|
+
|
|
24
|
+
- Register
|
|
25
|
+
- Palette
|
|
26
|
+
- Type
|
|
27
|
+
- Texture & surface
|
|
28
|
+
- Components
|
|
29
|
+
- Hero
|
|
30
|
+
- Responsive
|
|
31
|
+
- Motion tokens
|
|
32
|
+
- Signature motifs
|
|
33
|
+
- Signature element
|
|
34
|
+
- Micro-interactions
|
|
35
|
+
- Bans
|
|
36
|
+
- Gotchas
|
|
37
|
+
|
|
22
38
|
## Register
|
|
23
39
|
|
|
24
40
|
Choose Bulletin for **front doors whose argument is breadth** — a tool that does
|
|
@@ -29,6 +29,22 @@ Contract: widened — all thirteen headings.
|
|
|
29
29
|
Themes: light only — the dark slab is a SURFACE variant (`.chorus-slab`), not a theme twin; the page never inverts.
|
|
30
30
|
Rank: unordered — 3 status role(s) and no severity ramp; a rank scale is yours.
|
|
31
31
|
|
|
32
|
+
## Contents
|
|
33
|
+
|
|
34
|
+
- Register
|
|
35
|
+
- Palette
|
|
36
|
+
- Type
|
|
37
|
+
- Texture & surface
|
|
38
|
+
- Components
|
|
39
|
+
- Hero
|
|
40
|
+
- Responsive
|
|
41
|
+
- Motion tokens
|
|
42
|
+
- Signature motifs
|
|
43
|
+
- Signature element
|
|
44
|
+
- Micro-interactions
|
|
45
|
+
- Bans
|
|
46
|
+
- Gotchas
|
|
47
|
+
|
|
32
48
|
## Register
|
|
33
49
|
|
|
34
50
|
Choose Chorus for **products whose proof is other people's conversations** —
|
|
@@ -18,6 +18,23 @@ Contract: widened — all thirteen headings.
|
|
|
18
18
|
Themes: light only — no second block of any kind ships here.
|
|
19
19
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
20
20
|
|
|
21
|
+
## Contents
|
|
22
|
+
|
|
23
|
+
- Register
|
|
24
|
+
- Palette
|
|
25
|
+
- Type
|
|
26
|
+
- Texture & surface
|
|
27
|
+
- Components
|
|
28
|
+
- Hero
|
|
29
|
+
- Responsive
|
|
30
|
+
- Motion tokens
|
|
31
|
+
- Signature motifs
|
|
32
|
+
- Signature element
|
|
33
|
+
- Motion flavor (cinematic packs only)
|
|
34
|
+
- Micro-interactions
|
|
35
|
+
- Bans
|
|
36
|
+
- Gotchas
|
|
37
|
+
|
|
21
38
|
## Register
|
|
22
39
|
|
|
23
40
|
Choose this pack for **a company selling transformation to an executive buyer**:
|
|
@@ -21,6 +21,23 @@ Contract: widened — all thirteen headings.
|
|
|
21
21
|
Themes: light only — the second block (`[data-state="alarm"]`) is a SURFACE variant, not a theme twin.
|
|
22
22
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
23
23
|
|
|
24
|
+
## Contents
|
|
25
|
+
|
|
26
|
+
- Register
|
|
27
|
+
- Palette
|
|
28
|
+
- Type
|
|
29
|
+
- Texture & surface
|
|
30
|
+
- Components
|
|
31
|
+
- Hero
|
|
32
|
+
- Responsive
|
|
33
|
+
- Motion tokens
|
|
34
|
+
- Signature motifs
|
|
35
|
+
- Signature element
|
|
36
|
+
- Motion flavor
|
|
37
|
+
- Micro-interactions
|
|
38
|
+
- Bans
|
|
39
|
+
- Gotchas
|
|
40
|
+
|
|
24
41
|
## Register
|
|
25
42
|
|
|
26
43
|
Choose this pack for **B2B SaaS whose product is a verdict about the visitor, the
|
|
@@ -15,6 +15,22 @@ Contract: widened — all thirteen headings.
|
|
|
15
15
|
Themes: light + dark — a full theme twin.
|
|
16
16
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
17
17
|
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- Register
|
|
21
|
+
- Palette
|
|
22
|
+
- Type
|
|
23
|
+
- Texture & surface
|
|
24
|
+
- Components
|
|
25
|
+
- Hero
|
|
26
|
+
- Responsive
|
|
27
|
+
- Motion tokens
|
|
28
|
+
- Signature motifs
|
|
29
|
+
- Signature element
|
|
30
|
+
- Micro-interactions
|
|
31
|
+
- Bans
|
|
32
|
+
- Gotchas
|
|
33
|
+
|
|
18
34
|
## Register
|
|
19
35
|
|
|
20
36
|
Choose Daylight for **client-facing portals and the pages that sell them**:
|
|
@@ -30,6 +30,22 @@ Contract: widened — all thirteen headings.
|
|
|
30
30
|
Themes: light only — the second block (`[data-surface="dusk"]`) is a SURFACE variant, not a theme twin.
|
|
31
31
|
Rank: unordered — 4 status role(s) and no severity ramp; a rank scale is yours.
|
|
32
32
|
|
|
33
|
+
## Contents
|
|
34
|
+
|
|
35
|
+
- Register
|
|
36
|
+
- Palette
|
|
37
|
+
- Type
|
|
38
|
+
- Texture & surface
|
|
39
|
+
- Components
|
|
40
|
+
- Hero
|
|
41
|
+
- Responsive
|
|
42
|
+
- Motion tokens
|
|
43
|
+
- Signature motifs
|
|
44
|
+
- Signature element
|
|
45
|
+
- Micro-interactions
|
|
46
|
+
- Bans
|
|
47
|
+
- Gotchas
|
|
48
|
+
|
|
33
49
|
## Register
|
|
34
50
|
|
|
35
51
|
Choose Deskmate for **products sold as a colleague rather than a tool** — AI employees
|