sheleg-design-skill 1.24.0 → 1.25.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 +26 -0
- package/kits/editorial-luxury/src/styles.css +19 -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/editorial-luxury.md +24 -6
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/editorial-luxury.css +19 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.25.0 — 2026-08-13
|
|
4
|
+
|
|
5
|
+
**`editorial-luxury` gets the status set it told surfaces to ask for.**
|
|
6
|
+
|
|
7
|
+
The pack shipped one semantic colour, `--red`, and instructed any surface needing
|
|
8
|
+
a full set to close the gap *in the pack, deliberately, not at the keyboard*. The
|
|
9
|
+
instruction was right and nobody followed it: a production admin console built on
|
|
10
|
+
this pack had invented amber-as-warning and cyan-as-info on top of an amber that
|
|
11
|
+
was also its entire chrome — so the hue meaning "a provider is backing up" was
|
|
12
|
+
the hue of every button on the page. Seven of that surface's colour pairs sat
|
|
13
|
+
below AA and three under 1.1:1.
|
|
14
|
+
|
|
15
|
+
`--status-{ok,warn,info,danger}` and their `-weak` tints close it. Three of the
|
|
16
|
+
four are values the pack already owned: `--status-ok` is `--accent-deep`,
|
|
17
|
+
`--status-danger` is `--red`. Only `warn` and `info` are new, each the existing
|
|
18
|
+
amber and cyan family deepened until it clears the AA floor for normal text on
|
|
19
|
+
**all three** cream grounds — `--paper`, `--paper-2` and `--paper-3` — because
|
|
20
|
+
two grounds would have been the same enumerated-list hole one level down. Status
|
|
21
|
+
is still never carried by colour alone: the tint carries the colour, the word
|
|
22
|
+
carries the meaning in `--ink`.
|
|
23
|
+
|
|
24
|
+
Also: `--dur-hover` and `--dur-state`. The pack said the product register stays
|
|
25
|
+
in the fast range and never named the values, so every product surface built on
|
|
26
|
+
it typed `0.15s` literals — there was nothing to reference.
|
|
27
|
+
|
|
28
|
+
|
|
3
29
|
All notable changes to this project are documented in this file. The format
|
|
4
30
|
follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
|
|
5
31
|
follow [SemVer](https://semver.org/spec/v2.0.0.html).
|
|
@@ -19,6 +19,25 @@
|
|
|
19
19
|
--accent-on-dark: #9fd9bc;
|
|
20
20
|
--terra: #b5623f;
|
|
21
21
|
--red: #a83a2b;
|
|
22
|
+
|
|
23
|
+
/* Status set — added 2026-08-13. Three of the four are values this pack
|
|
24
|
+
already owned; only warn and info are new, each its own family deepened
|
|
25
|
+
until it clears the AA floor for normal text on every cream ground this
|
|
26
|
+
pack renders on, not only the two obvious ones. The three ratios beside
|
|
27
|
+
each value are those grounds, lightest first. The status word renders in
|
|
28
|
+
--ink on the -weak tint, so status is never carried by colour alone. */
|
|
29
|
+
--status-ok: #2f5e47; /* 6.93 / 6.25 / 5.72 — = --accent-deep */
|
|
30
|
+
--status-warn: #7d5416; /* 6.19 / 5.58 / 5.11 */
|
|
31
|
+
--status-info: #2f5c7d; /* 6.61 / 5.96 / 5.46 */
|
|
32
|
+
--status-danger: #a83a2b; /* 5.90 / 5.32 / 4.87 — = --red */
|
|
33
|
+
--status-ok-weak: rgba(47,94,71,0.12);
|
|
34
|
+
--status-warn-weak: rgba(125,84,22,0.12);
|
|
35
|
+
--status-info-weak: rgba(47,92,125,0.12);
|
|
36
|
+
--status-danger-weak: rgba(168,58,43,0.12);
|
|
37
|
+
|
|
38
|
+
/* Product register durations — the range the pack described in prose. */
|
|
39
|
+
--dur-hover: 0.12s;
|
|
40
|
+
--dur-state: 0.18s;
|
|
22
41
|
--hair: rgba(36, 28, 20, 0.13);
|
|
23
42
|
--hair-strong: rgba(36, 28, 20, 0.22);
|
|
24
43
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.25.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 seventeen 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 and roster. 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 seventeen 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). 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.",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.25.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 building or upgrading a cinematic scroll-driven landing page, marketing site or hero (particle/WebGL background, scroll-linked animation, parallax, scrubbed sections) — when such a page feels busy or janky or its motion layers drift out of sync — or when styling product UI with its style packs - dashboards, admin panels, internal/dev tools, mobile app screens, design tokens, light/dark themes - or when carrying a visual system across the Figma border (publishing tokens as variables, implementing a design without importing raw values). Triggers - "cinematic landing" / "кинематографичный лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables / figma to code" / "переменные фигмы, фигма в код", "chat/agent UI" / "интерфейс чата или агента", "streaming output" / "стриминг ответа", "mobile screen" / "мобильный экран".
|
|
4
4
|
license: MIT
|
|
5
5
|
metadata:
|
|
6
|
-
version: 1.
|
|
6
|
+
version: 1.25.0
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# SHELEG Design
|
|
@@ -45,6 +45,11 @@ Ready-made token layer: [`tokens/editorial-luxury.css`](./tokens/editorial-luxur
|
|
|
45
45
|
| `--accent-on-dark` | `#9fd9bc` | the accent brightened for espresso sections |
|
|
46
46
|
| `--terra` | `#b5623f` | rare editorial highlight only |
|
|
47
47
|
| `--red` | `#a83a2b` | negatives ONLY (comparison "without") |
|
|
48
|
+
| `--status-ok` | `#2f5e47` | healthy / active / done — **= `--accent-deep`**, not a new hue |
|
|
49
|
+
| `--status-warn` | `#7d5416` | a human is needed, and nothing else |
|
|
50
|
+
| `--status-info` | `#2f5c7d` | running / working |
|
|
51
|
+
| `--status-danger` | `#a83a2b` | failed — **= `--red`**, unchanged |
|
|
52
|
+
| each `-weak` | `rgba(…, 0.12)` of its own hue | chip and banner fill; the status **word** on top is `--ink` |
|
|
48
53
|
| `--hair` / `-strong` | `rgba(36,28,20,0.13)` / `rgba(36,28,20,0.22)` | hairline rules |
|
|
49
54
|
|
|
50
55
|
Contrast: body on cream must clear 4.5:1 — `--ink` / `--ink-soft`, never
|
|
@@ -74,7 +79,10 @@ sage accent switches to `--accent-on-dark`.
|
|
|
74
79
|
0.3, 1)`; the pack wins, per SHELEG_DESIGN §10.
|
|
75
80
|
- Spring `cubic-bezier(0.32, 0.72, 0, 1)` — press/magnetic feedback only.
|
|
76
81
|
- Base duration `0.7s` for brand-register reveals; product register stays in
|
|
77
|
-
the SHELEG fast/base range (≤0.32s)
|
|
82
|
+
the SHELEG fast/base range (≤0.32s), and that range now ships as values rather
|
|
83
|
+
than as a sentence: `--dur-hover` `0.12s` for a paint-only hover, `--dur-state`
|
|
84
|
+
`0.18s` for a state change. Prose-only, every product surface built on this
|
|
85
|
+
pack typed `0.15s` literals — there was nothing to reference.
|
|
78
86
|
|
|
79
87
|
## Signature motifs
|
|
80
88
|
|
|
@@ -114,11 +122,21 @@ How this pack rides the SHELEG motion layer (brand register only):
|
|
|
114
122
|
|
|
115
123
|
## Bans
|
|
116
124
|
|
|
117
|
-
- **
|
|
118
|
-
semantic colour, `--red`,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
125
|
+
- **The status set is four colours and no more, and three of them already
|
|
126
|
+
existed.** This pack shipped one semantic colour, `--red`, and told any surface
|
|
127
|
+
needing a full set to close the gap *in the pack, deliberately, not at the
|
|
128
|
+
keyboard*. It was closed on 2026-08-13, and what closed it is the evidence for
|
|
129
|
+
why the instruction was worth writing: an admin console had invented
|
|
130
|
+
amber-as-warning and cyan-as-info on top of an amber that was also its entire
|
|
131
|
+
chrome — so the hue meaning "a provider is backing up" was the hue of every
|
|
132
|
+
button on the page, and seven of its pairs sat below AA with three under
|
|
133
|
+
1.1:1. `--status-ok` is `--accent-deep` unchanged, `--status-danger` is `--red`
|
|
134
|
+
unchanged, and only `--status-warn` and `--status-info` are new values, each
|
|
135
|
+
the existing amber and cyan family deepened until it clears **4.5:1 on all
|
|
136
|
+
three grounds this pack renders on** — `--paper`, `--paper-2` and `--paper-3`.
|
|
137
|
+
Two grounds would have been the same enumerated-list hole one level down.
|
|
138
|
+
Status is still **never by colour alone**: the tint carries the colour, the
|
|
139
|
+
word carries the meaning in `--ink` (11.8:1 on every tint).
|
|
122
140
|
*(Corrected 2026-08-10: this bullet was copy-pasted into six of the twelve and
|
|
123
141
|
claimed a measurement across "several pairs" that one colour cannot form.)*
|
|
124
142
|
- No gradient text, no side-stripe accent borders, no glassmorphism, no
|
|
@@ -19,6 +19,25 @@
|
|
|
19
19
|
--accent-on-dark: #9fd9bc;
|
|
20
20
|
--terra: #b5623f;
|
|
21
21
|
--red: #a83a2b;
|
|
22
|
+
|
|
23
|
+
/* Status set — added 2026-08-13. Three of the four are values this pack
|
|
24
|
+
already owned; only warn and info are new, each its own family deepened
|
|
25
|
+
until it clears the AA floor for normal text on every cream ground this
|
|
26
|
+
pack renders on, not only the two obvious ones. The three ratios beside
|
|
27
|
+
each value are those grounds, lightest first. The status word renders in
|
|
28
|
+
--ink on the -weak tint, so status is never carried by colour alone. */
|
|
29
|
+
--status-ok: #2f5e47; /* 6.93 / 6.25 / 5.72 — = --accent-deep */
|
|
30
|
+
--status-warn: #7d5416; /* 6.19 / 5.58 / 5.11 */
|
|
31
|
+
--status-info: #2f5c7d; /* 6.61 / 5.96 / 5.46 */
|
|
32
|
+
--status-danger: #a83a2b; /* 5.90 / 5.32 / 4.87 — = --red */
|
|
33
|
+
--status-ok-weak: rgba(47,94,71,0.12);
|
|
34
|
+
--status-warn-weak: rgba(125,84,22,0.12);
|
|
35
|
+
--status-info-weak: rgba(47,92,125,0.12);
|
|
36
|
+
--status-danger-weak: rgba(168,58,43,0.12);
|
|
37
|
+
|
|
38
|
+
/* Product register durations — the range the pack described in prose. */
|
|
39
|
+
--dur-hover: 0.12s;
|
|
40
|
+
--dur-state: 0.18s;
|
|
22
41
|
--hair: rgba(36, 28, 20, 0.13);
|
|
23
42
|
--hair-strong: rgba(36, 28, 20, 0.22);
|
|
24
43
|
|