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.
Files changed (52) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/package.json +3 -1
  3. package/plugins/sheleg-design/.claude-plugin/plugin.json +2 -2
  4. package/plugins/sheleg-design/skills/sheleg-design/AI_PRODUCT_PATTERNS.md +13 -0
  5. package/plugins/sheleg-design/skills/sheleg-design/DESIGN_SYNC_BRIDGE.md +10 -0
  6. package/plugins/sheleg-design/skills/sheleg-design/FIGMA_BRIDGE.md +7 -0
  7. package/plugins/sheleg-design/skills/sheleg-design/MOBILE_SURFACES.md +1 -1
  8. package/plugins/sheleg-design/skills/sheleg-design/MOTION_DOCTRINE.md +14 -0
  9. package/plugins/sheleg-design/skills/sheleg-design/MOTION_PRODUCTION.md +10 -0
  10. package/plugins/sheleg-design/skills/sheleg-design/SHELEG_DESIGN.md +19 -0
  11. package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +18 -9
  12. package/plugins/sheleg-design/skills/sheleg-design/SURFACE_COMPOSITION.md +9 -3
  13. package/plugins/sheleg-design/skills/sheleg-design/styles/STYLE_PACK_TEMPLATE.md +18 -0
  14. package/plugins/sheleg-design/skills/sheleg-design/styles/almanac.md +16 -0
  15. package/plugins/sheleg-design/skills/sheleg-design/styles/atrium.md +17 -0
  16. package/plugins/sheleg-design/skills/sheleg-design/styles/awning.md +12 -0
  17. package/plugins/sheleg-design/skills/sheleg-design/styles/babylove.md +17 -0
  18. package/plugins/sheleg-design/skills/sheleg-design/styles/blueprint.md +17 -0
  19. package/plugins/sheleg-design/skills/sheleg-design/styles/briefing-room.md +12 -0
  20. package/plugins/sheleg-design/skills/sheleg-design/styles/bulletin.md +16 -0
  21. package/plugins/sheleg-design/skills/sheleg-design/styles/chorus.md +16 -0
  22. package/plugins/sheleg-design/skills/sheleg-design/styles/cyclorama.md +17 -0
  23. package/plugins/sheleg-design/skills/sheleg-design/styles/datasheet.md +17 -0
  24. package/plugins/sheleg-design/skills/sheleg-design/styles/daylight.md +16 -0
  25. package/plugins/sheleg-design/skills/sheleg-design/styles/deskmate.md +16 -0
  26. package/plugins/sheleg-design/skills/sheleg-design/styles/editorial-luxury.md +13 -0
  27. package/plugins/sheleg-design/skills/sheleg-design/styles/field-notes.md +17 -0
  28. package/plugins/sheleg-design/skills/sheleg-design/styles/instrument-console.md +13 -0
  29. package/plugins/sheleg-design/skills/sheleg-design/styles/ledger.md +16 -0
  30. package/plugins/sheleg-design/skills/sheleg-design/styles/manpage.md +17 -0
  31. package/plugins/sheleg-design/skills/sheleg-design/styles/maquette.md +17 -0
  32. package/plugins/sheleg-design/skills/sheleg-design/styles/nameplate.md +16 -0
  33. package/plugins/sheleg-design/skills/sheleg-design/styles/notation.md +16 -0
  34. package/plugins/sheleg-design/skills/sheleg-design/styles/onionskin.md +16 -0
  35. package/plugins/sheleg-design/skills/sheleg-design/styles/ora.md +16 -0
  36. package/plugins/sheleg-design/skills/sheleg-design/styles/orchard.md +13 -0
  37. package/plugins/sheleg-design/skills/sheleg-design/styles/outrank.md +16 -0
  38. package/plugins/sheleg-design/skills/sheleg-design/styles/paperclip.md +16 -0
  39. package/plugins/sheleg-design/skills/sheleg-design/styles/patchbay.md +17 -0
  40. package/plugins/sheleg-design/skills/sheleg-design/styles/pigeonhole.md +17 -0
  41. package/plugins/sheleg-design/skills/sheleg-design/styles/prism.md +17 -0
  42. package/plugins/sheleg-design/skills/sheleg-design/styles/proscenium.md +16 -0
  43. package/plugins/sheleg-design/skills/sheleg-design/styles/rimlight.md +16 -0
  44. package/plugins/sheleg-design/skills/sheleg-design/styles/roster.md +17 -0
  45. package/plugins/sheleg-design/skills/sheleg-design/styles/router.md +17 -0
  46. package/plugins/sheleg-design/skills/sheleg-design/styles/scoreboard.md +17 -0
  47. package/plugins/sheleg-design/skills/sheleg-design/styles/showroom.md +17 -0
  48. package/plugins/sheleg-design/skills/sheleg-design/styles/surveyor.md +16 -0
  49. package/plugins/sheleg-design/skills/sheleg-design/styles/tenor.md +16 -0
  50. package/plugins/sheleg-design/skills/sheleg-design/styles/test-drive.md +16 -0
  51. package/plugins/sheleg-design/skills/sheleg-design/styles/vitrine.md +16 -0
  52. 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.56.0",
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 (dark console), editorial-luxury (warm editorial), workbench (light/dark product UI for dashboards and tools), briefing-room (dark 16:9 deck), atrium (warm consumer health), orchard, outrank, babylove (friendly consumer biotech), patchbay (a dark live schematic: one mint-cyan, 8% hairlines and no shadow, and an architecture diagram whose cords carry SMIL particles), field-notes (warm paper for dev tools sold on auditability), cyclorama (a pastel field on a 32s cycle), showroom (the product as the exhibit), blueprint (a drawing sheet, zero radius), prism (one iridescent wash over mono body), maquette (cream axonometric models on a dark table), scoreboard (warm paper, pixel numerals, a dark ledger of results), datasheet (an off-white spec sheet whose live instrument goes dark when it detects the reader is hiding), manpage (a developer landing page set in the reader's own system monospace on cream paper, with coral label chips that are real headings and a dark code frame as the argument), pigeonhole (a white sorting wall whose nine pastel categories are a filing scheme rather than a mood, each a two-layer chip whose label word is mandatory), roster (a white field in a faint grid of squares whose argument is other people's marks — client logotypes in pill-labelled industry columns, an engine's wordmark inside the headline — where the proof is a name rather than a number), ora (a warm coal field with cream ink and no third hue — the accent is the inverted field — a serif carrying every human sentence over a monospace carrying every machine fact, a terminal surface cut below the page, and a six-step verdict ramp, for products whose output is a machine's verdict about the reader), tenor (warm paper with zero radius and zero shadow, one hairline weight, an orange that exists only on hover and on focus, a sans tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and product proof delivered as silent looping video, for products arguing that a new kind of thing must be managed like an existing organisation), paperclip (neutral coal with no functional colour at all — every control monochrome and elevation made of hairlines, with the whole chromatic budget spent on a curtain of gradient capsules and twelve gradient section badges that cannot be clicked — for products that ask a person to run something that runs itself: agent teams, autonomous back-office, schedulers and budget-governed compute), ledger (warm cream paper ruled by a hairline at 12% ink and no shadow on any card, radius 15 nested concentrically, an ink primary button and a terracotta accent that never fills a control — it labels, as a 10px monospace uppercase kicker — with a seal on every card stating how its number is known, for the console of a product that answers questions about data: AI analysts, BI surfaces, query workspaces), router (a near-white field with a trace of blue and white cards standing on it, hairline seams instead of shadows anywhere, body at 14px and weight 450, and a status triplet in which the colour you paint with is not the colour you write with, for product consoles and the landing pages that have to look like them), daylight (a cool near-white portal field with generous radii and one very large soft shadow spent on a single object per screen, for client portals), notation (a near-white page drawn entirely in hairlines with a light serif over a monospace, no bold anywhere and an ink primary, for developer products sold on restraint), almanac (oatmeal paper with 2px seams and no 1px anywhere, a display set below a line-height of one, and mono tags notched through drawn boxes, for pages that assert a category), vitrine (a white hairline field with a serif display, an ink primary and one framed record carrying the evidence, for the front door of a product sold on trust). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, style packs with ready-made token CSS, and the /sheleg-design command, and awning (a white forecourt where the accent is black and no hue reaches the chrome at all, a pill whose radius is a declared component token, one variable grotesque at 420/550 with no 700, and a single three-layer shadow, for commerce and platform front doors), and proscenium (a white field carrying two cool acts and one deep indigo act at the middle, an electric violet filling a control that stays nearly square at 4px against cards at 16, one family at nine weights, and a framed product panel the fold cuts off, for product-led marketing front doors whose argument is a demonstration), and bulletin (warm cream paper cut by flat pastel bands, every card and control a 1px ink outline standing on a hard zero-blur ink offset it travels into when pressed, a display face at 800 inside controls and 700 in the headline, and no tracking at any size, for front doors whose argument is breadth), and nameplate (a cool near-white slab under a page that is square on 87% of its elements, where the one round shape is reserved for a white 1px-bordered pill carrying somebody else's publication name as type, one family with the body at weight 500, and two uppercase registers tracked 0.06em and 0.175em, for pages whose argument is that named third parties will vouch for you: press placement, trust marks, certification and review aggregation), and rimlight (a white field with a cool grey act separator and one near-black act, a grotesque for every sentence and a monospace for every piece of chrome, square on 84% of its elements and tracked negative at every size, whose only elevation is a sixteen-layer coloured light rig — six layers lit and ten held at alpha 0, thrown from below-left — for a studio's own front door and the pages that sell what it makes), and onionskin (a white technical sheet at 96.5% zero radius — the squarest page in the library — where two bases do all the work and everything quiet is one of them at an alpha: text dims through the ink, structure dims through a navy that is never a word, over a dot grid with dashed hairlines and three faces at an 11px working size, for developer and AI infrastructure whose front page is a working document), deskmate, test-drive, surveyor, and chorus (warm off-white paper under a faint construction grid with a crosshair at every intersection, where the set piece is somebody else's question in a cut-corner bubble — 24px on three corners and 0 on the top right — over near-black slabs cut into the sheet, one coral that fills but never writes, and a periwinkle that only exists inside a gradient, for AI-search visibility, brand monitoring and community marketing whose proof is other people's conversations) (a warm beige working day lit from one source above the top edge, where a single four-stop ramp — peach, lilac, violet, deep navy — washes the field, fills a panel and fills one word of a heading, everything a hand touches is a pill at 56px and everything else a 32px slab, elevation is a field step with two shadows on a 10,211px page, and the set piece is a framed transcript whose quoted chat client keeps its own face, ink and status colours under a --quoted-* namespace, for products sold as a colleague rather than a tool: AI employees and chat-native agents).",
5
- "version": "1.56.0",
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 (Lazyweb, Mobbin) — structure crosses, identity does not
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 include "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" / "презентация". Not for structure, copy or backend behavior.
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.56.0
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 — hand the pack to `dataviz`** (same file), before drawing a chart in
160
- any pack. Token names are not uniform across the thirty-nine packs only `--bg`
161
- and `--ink` resolve in every oneand an undefined custom property does not error,
162
- it silently falls back. Guessing one is the quietest way to ship a wrong chart.
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 packsonly `--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
- The `shadcn` skill does the adding, searching and composing, and
236
- `migrate-radix-to-base` handles the Radix→Base move; both are installed and
237
- trigger on their own words. Do not restate their component docs here.
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 restyle charts from the pack by hand, and do not let a chart library pick
57
- its own colours. The `dataviz` skill already owns chart form, colour roles and
58
- the runnable palette validation; a pack is the *parameter set* it consumes.
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