sheleg-design-skill 1.43.0 → 1.44.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 +44 -0
- package/kits/editorial-luxury/src/styles.css +26 -0
- package/kits/instrument-console/src/styles.css +33 -0
- package/package.json +1 -1
- package/plugins/sheleg-design/.claude-plugin/plugin.json +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/styles/instrument-console.md +11 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/editorial-luxury.css +26 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/instrument-console.css +33 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,50 @@ All notable changes to this project are documented in this file. The format
|
|
|
4
4
|
follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
|
|
5
5
|
follow [SemVer](https://semver.org/spec/v2.0.0.html).
|
|
6
6
|
|
|
7
|
+
## [1.44.0] - 2026-08-19
|
|
8
|
+
|
|
9
|
+
### Degrade to calm gained an observable
|
|
10
|
+
|
|
11
|
+
The promise had none. `sloplint.py` asserted only that the **string**
|
|
12
|
+
`prefers-reduced-motion` appeared in the doctrine — that the rule was mentioned, not that any
|
|
13
|
+
shipped artifact obeyed it. Measured: **2 of 29 token layers shipped no reduce branch**,
|
|
14
|
+
including the pack that mandates a particle field.
|
|
15
|
+
|
|
16
|
+
`validate_reduced_motion()` asserts two things per layer: a layer declaring `--dur-*` or
|
|
17
|
+
`--ease-*` ships a `prefers-reduced-motion` branch, **and that branch collapses at least one
|
|
18
|
+
time-valued property to ≤1ms**. The second half is the row — doctrine §9 says motion collapses
|
|
19
|
+
"to static or instant, not to slower", so a branch that merely names the query satisfies a grep
|
|
20
|
+
and changes nothing a reader can feel. Durations are matched **by value, not by name**, so
|
|
21
|
+
`paperclip`'s `--t-*` and `instrument-console`'s `--motion-ease` are not read as empty.
|
|
22
|
+
|
|
23
|
+
`editorial-luxury` and `instrument-console` fixed. Where a motif cannot be reached from a custom
|
|
24
|
+
property — a rAF particle field is not stoppable by a duration — the still is now stated for each:
|
|
25
|
+
field to one static frame, spotlight to every section lit, instruments fully drawn. 29 of 29
|
|
26
|
+
layers now carry a branch that bites. B-040 closed.
|
|
27
|
+
|
|
28
|
+
### A count hyphenated onto its noun was invisible to the gate that counts it
|
|
29
|
+
|
|
30
|
+
`docs/DOCMAP.md` said "a fourteen-kit build matrix" against **29** kits, and the counted-claims
|
|
31
|
+
guard ran green over that string for weeks: `COUNTED` never matched a number spelled as a word and
|
|
32
|
+
joined to its noun by a hyphen. A contributor had already routed around the hole rather than
|
|
33
|
+
report it.
|
|
34
|
+
|
|
35
|
+
The separator is now `[ -]`, **captured and back-referenced**, so a compound is read in one
|
|
36
|
+
alphabet or the other and a half-and-half form is not silently accepted; the plural is required
|
|
37
|
+
for the spaced form only, because a hyphenated count is a singular modifier by grammar.
|
|
38
|
+
Blast radius measured old-pattern-against-new on one tree: the policed set 34 → 36 spans with
|
|
39
|
+
**zero false positives**, the whole tree 333 → 384.
|
|
40
|
+
|
|
41
|
+
The coordination claim is **derived** rather than reworded — DOCMAP now points at the generated
|
|
42
|
+
`AGENT_SYNC.md`, and a new check holds the derivation from both ends so the page, the config and
|
|
43
|
+
the document cannot disagree.
|
|
44
|
+
|
|
45
|
+
### Plants
|
|
46
|
+
|
|
47
|
+
Self-test 16 → 19, each asserting its **message** rather than merely the red — every token layer
|
|
48
|
+
is copied into its kit byte for byte, so any edit trips the kit-drift check and a plant would
|
|
49
|
+
otherwise report "caught" with the intended check never having run.
|
|
50
|
+
|
|
7
51
|
## [1.43.0] - 2026-08-17
|
|
8
52
|
|
|
9
53
|
**The twenty-ninth pack, and the first one whose signature is a defect its reference
|
|
@@ -76,6 +76,32 @@
|
|
|
76
76
|
--bg: var(--paper); /* role alias -> --paper, this pack's field */
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
/* Degrade to calm — MOTION_DOCTRINE.md §9: "Shipping an animation without a
|
|
80
|
+
reduced-motion path is a bug, not a polish item." All eight durations this
|
|
81
|
+
layer declares are spent — the two product-register values by the kit's
|
|
82
|
+
hovers, the brand and the SHELEG set by the page's entrances — so all eight
|
|
83
|
+
collapse to 0s rather than to anything a reader could still perceive as
|
|
84
|
+
motion. The kit's .el-btn, .el-card and .el-dossier read --dur-fast and
|
|
85
|
+
--dur-base, so a hover lands on its final state instead of rising into it.
|
|
86
|
+
|
|
87
|
+
The two curves stay as declared: a curve spent over 0s is inert, and neither
|
|
88
|
+
overshoots (both stay inside 0..1 on the value axis), so there is no bounce
|
|
89
|
+
left to tame. What a custom property cannot express is an infinite animation
|
|
90
|
+
— this pack declares none, and one added later needs its own stop in the
|
|
91
|
+
component layer, not a smaller number here. */
|
|
92
|
+
@media (prefers-reduced-motion: reduce) {
|
|
93
|
+
:root {
|
|
94
|
+
--dur-hover: 0s;
|
|
95
|
+
--dur-state: 0s;
|
|
96
|
+
--dur-brand: 0s;
|
|
97
|
+
--dur-fast: 0s;
|
|
98
|
+
--dur-base: 0s;
|
|
99
|
+
--dur-slow: 0s;
|
|
100
|
+
--dur-epic: 0s;
|
|
101
|
+
--stagger: 0s;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
79
105
|
/* ── components ── */
|
|
80
106
|
|
|
81
107
|
/* Everything below consumes var(--…) only. The token block above is the whole
|
|
@@ -47,6 +47,39 @@
|
|
|
47
47
|
--bg: var(--base); /* role alias -> --base, this pack's field */
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
/* Degrade to calm — MOTION_DOCTRINE.md §9. The doctrine's hardest line lands on
|
|
51
|
+
this pack, because this is the pack that mandates a WebGL particle field, a
|
|
52
|
+
scan/dim attention spotlight and scrubbed SVG instruments, and §9 says WebGL
|
|
53
|
+
and canvas scenes degrade to their CSS or SVG still. One of those three can
|
|
54
|
+
be reached from here and two cannot, and saying which at the declaration is
|
|
55
|
+
the point:
|
|
56
|
+
|
|
57
|
+
- The four durations and the stagger collapse. Every transition and every
|
|
58
|
+
reveal that spends them lands on its final state without travelling —
|
|
59
|
+
that includes the kit's only transition, .ic-btn's colour swap.
|
|
60
|
+
- The particle field is a rAF loop, and no custom property can stop one.
|
|
61
|
+
The scene branches on the reduced-motion hook and renders a single static
|
|
62
|
+
frame (SHELEG_DESIGN.md:364); `## Motion flavor` in instrument-console.md
|
|
63
|
+
now states the still for each motif, which is where an implementer of the
|
|
64
|
+
backdrop is actually reading.
|
|
65
|
+
- The scan/dim spotlight and the instrument scrub are driven by the scroll
|
|
66
|
+
clock, not by these tokens: under reduce every section renders lit and
|
|
67
|
+
every instrument renders drawn. The progress rail was already static.
|
|
68
|
+
|
|
69
|
+
`--motion-ease` is left alone: it is an ease-out, not an overshoot, and a
|
|
70
|
+
curve spent over 0s is inert. That is pigeonhole's lesson applied rather than
|
|
71
|
+
relearned — a duration collapses what a duration drives, and the rest is
|
|
72
|
+
stated where the implementer reads it. */
|
|
73
|
+
@media (prefers-reduced-motion: reduce) {
|
|
74
|
+
:root {
|
|
75
|
+
--dur-fast: 0s;
|
|
76
|
+
--dur-base: 0s;
|
|
77
|
+
--dur-slow: 0s;
|
|
78
|
+
--dur-epic: 0s;
|
|
79
|
+
--stagger: 0s;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
50
83
|
/* ── components ── */
|
|
51
84
|
|
|
52
85
|
/* Everything below consumes var(--…) only. Colour never appears as a literal.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.44.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 twenty-nine locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor, paperclip, ledger, router, daylight, notation, almanac, vitrine and proscenium. 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"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "sheleg-design",
|
|
3
3
|
"displayName": "SHELEG Design",
|
|
4
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 twenty-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 (friendly consumer biotech), 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).",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.44.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "ssheleg",
|
|
8
8
|
"url": "https://x.com/sshlg93"
|
|
@@ -3,7 +3,7 @@ name: sheleg-design
|
|
|
3
3
|
description: Use when deciding how something LOOKS or MOVES. Cinematic scroll-driven landing pages and heroes — particle/WebGL backgrounds, scroll-linked animation, parallax — or when one feels busy or its motion drifts. Product UI through its style packs — dashboards, admin panels, internal tools, mobile screens, chat and agent interfaces. Design tokens, light/dark themes, palettes and colours, typography and fonts. Triggers - "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette" / "палитра", "colors" / "цвета", "typography" / "типографика", "font" / "шрифт", "how it looks" / "выглядит", "make it prettier" / "красиво, красивее", "visual reference" / "визуальные референсы".
|
|
4
4
|
license: MIT
|
|
5
5
|
metadata:
|
|
6
|
-
version: 1.
|
|
6
|
+
version: 1.44.0
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# SHELEG Design
|
|
@@ -136,6 +136,17 @@ How this pack rides the SHELEG motion layer:
|
|
|
136
136
|
(control/system acts), Clip (headlines/panels), Pulse (climax).
|
|
137
137
|
- Instruments: hairline-thin scrubbed SVG with mono annotations; progress
|
|
138
138
|
rail and act badge are first-class chrome.
|
|
139
|
+
- Under `prefers-reduced-motion: reduce`, each motif has a still and the
|
|
140
|
+
still is the deliverable, not a fallback: the particle field renders a
|
|
141
|
+
single static frame at its resting formation (a rAF loop cannot be
|
|
142
|
+
stopped by a duration, so the scene branches on the reduced-motion hook);
|
|
143
|
+
the scan/dim spotlight stops travelling and every section renders lit;
|
|
144
|
+
the instruments render fully drawn instead of scrubbing; the rail and the
|
|
145
|
+
act badge were already static. The token layer collapses the four
|
|
146
|
+
durations and the stagger, which covers everything they drive —
|
|
147
|
+
everything above is what a custom property cannot express. This pack
|
|
148
|
+
shipped neither half from its first release until now, which is the
|
|
149
|
+
reason §9 is written as a contract and not as advice.
|
|
139
150
|
|
|
140
151
|
## Micro-interactions
|
|
141
152
|
|
|
@@ -75,3 +75,29 @@
|
|
|
75
75
|
cross-pack document can name them truthfully. Alias, never a new colour. */
|
|
76
76
|
--bg: var(--paper); /* role alias -> --paper, this pack's field */
|
|
77
77
|
}
|
|
78
|
+
|
|
79
|
+
/* Degrade to calm — MOTION_DOCTRINE.md §9: "Shipping an animation without a
|
|
80
|
+
reduced-motion path is a bug, not a polish item." All eight durations this
|
|
81
|
+
layer declares are spent — the two product-register values by the kit's
|
|
82
|
+
hovers, the brand and the SHELEG set by the page's entrances — so all eight
|
|
83
|
+
collapse to 0s rather than to anything a reader could still perceive as
|
|
84
|
+
motion. The kit's .el-btn, .el-card and .el-dossier read --dur-fast and
|
|
85
|
+
--dur-base, so a hover lands on its final state instead of rising into it.
|
|
86
|
+
|
|
87
|
+
The two curves stay as declared: a curve spent over 0s is inert, and neither
|
|
88
|
+
overshoots (both stay inside 0..1 on the value axis), so there is no bounce
|
|
89
|
+
left to tame. What a custom property cannot express is an infinite animation
|
|
90
|
+
— this pack declares none, and one added later needs its own stop in the
|
|
91
|
+
component layer, not a smaller number here. */
|
|
92
|
+
@media (prefers-reduced-motion: reduce) {
|
|
93
|
+
:root {
|
|
94
|
+
--dur-hover: 0s;
|
|
95
|
+
--dur-state: 0s;
|
|
96
|
+
--dur-brand: 0s;
|
|
97
|
+
--dur-fast: 0s;
|
|
98
|
+
--dur-base: 0s;
|
|
99
|
+
--dur-slow: 0s;
|
|
100
|
+
--dur-epic: 0s;
|
|
101
|
+
--stagger: 0s;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -46,3 +46,36 @@
|
|
|
46
46
|
cross-pack document can name them truthfully. Alias, never a new colour. */
|
|
47
47
|
--bg: var(--base); /* role alias -> --base, this pack's field */
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
/* Degrade to calm — MOTION_DOCTRINE.md §9. The doctrine's hardest line lands on
|
|
51
|
+
this pack, because this is the pack that mandates a WebGL particle field, a
|
|
52
|
+
scan/dim attention spotlight and scrubbed SVG instruments, and §9 says WebGL
|
|
53
|
+
and canvas scenes degrade to their CSS or SVG still. One of those three can
|
|
54
|
+
be reached from here and two cannot, and saying which at the declaration is
|
|
55
|
+
the point:
|
|
56
|
+
|
|
57
|
+
- The four durations and the stagger collapse. Every transition and every
|
|
58
|
+
reveal that spends them lands on its final state without travelling —
|
|
59
|
+
that includes the kit's only transition, .ic-btn's colour swap.
|
|
60
|
+
- The particle field is a rAF loop, and no custom property can stop one.
|
|
61
|
+
The scene branches on the reduced-motion hook and renders a single static
|
|
62
|
+
frame (SHELEG_DESIGN.md:364); `## Motion flavor` in instrument-console.md
|
|
63
|
+
now states the still for each motif, which is where an implementer of the
|
|
64
|
+
backdrop is actually reading.
|
|
65
|
+
- The scan/dim spotlight and the instrument scrub are driven by the scroll
|
|
66
|
+
clock, not by these tokens: under reduce every section renders lit and
|
|
67
|
+
every instrument renders drawn. The progress rail was already static.
|
|
68
|
+
|
|
69
|
+
`--motion-ease` is left alone: it is an ease-out, not an overshoot, and a
|
|
70
|
+
curve spent over 0s is inert. That is pigeonhole's lesson applied rather than
|
|
71
|
+
relearned — a duration collapses what a duration drives, and the rest is
|
|
72
|
+
stated where the implementer reads it. */
|
|
73
|
+
@media (prefers-reduced-motion: reduce) {
|
|
74
|
+
:root {
|
|
75
|
+
--dur-fast: 0s;
|
|
76
|
+
--dur-base: 0s;
|
|
77
|
+
--dur-slow: 0s;
|
|
78
|
+
--dur-epic: 0s;
|
|
79
|
+
--stagger: 0s;
|
|
80
|
+
}
|
|
81
|
+
}
|