sheleg-design-skill 1.61.1 → 1.61.3
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 +59 -0
- package/cursor/rules/sheleg-design.mdc +14 -7
- package/kits/deskmate/src/Empty.md +1 -1
- package/package.json +1 -1
- package/plugins/sheleg-design/.claude-plugin/plugin.json +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/CREATIVE_DIRECTOR.md +6 -3
- package/plugins/sheleg-design/skills/sheleg-design/KNOWLEDGE_PROVENANCE.md +183 -10
- package/plugins/sheleg-design/skills/sheleg-design/MOBILE_SURFACES.md +24 -3
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_DOCTRINE.md +61 -6
- package/plugins/sheleg-design/skills/sheleg-design/MOTION_PRODUCTION.md +6 -0
- package/plugins/sheleg-design/skills/sheleg-design/SHELEG_DESIGN.md +6 -10
- package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +6 -6
- package/plugins/sheleg-design/skills/sheleg-design/VISUAL_REVIEW.md +55 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,62 @@
|
|
|
1
|
+
## 1.61.3 — every borrowed rule names its source, and the motion tools agree with the doctrine
|
|
2
|
+
|
|
3
|
+
`MOTION_DOCTRINE.md` §1–4 is Emil Kowalski's animation doctrine almost word for word
|
|
4
|
+
(the frequency table with its Raycast example, the easing tree, the three curves with
|
|
5
|
+
their comments, the duration rows, both spring notations), and `KNOWLEDGE_PROVENANCE.md`
|
|
6
|
+
had no row for `emilkowalski/skills`. The same was true of the three calibration dials
|
|
7
|
+
(`Leonxlnx/taste-skill`) and the "three default looks" paragraph (`anthropics/skills`
|
|
8
|
+
`frontend-design`), while row 6 pointed at `julianoczkowski/designer-skills`, whose file
|
|
9
|
+
carries none of those looks. The file's own rule is "a source path, a SHA and a
|
|
10
|
+
permalink, or it is not adopted"; it was not being kept.
|
|
11
|
+
|
|
12
|
+
- **Provenance, 6 → 16 rows.** Rows 1–5 re-pinned to `pbakaus/impeccable@12b25ae` (only
|
|
13
|
+
`SKILL.md` changed bytes); row 6 kept and re-verified, with a note on what it did and
|
|
14
|
+
did not inform; rows 7–9 for the impeccable type, layout and finish-review files
|
|
15
|
+
`CREATIVE_DIRECTOR.md` already cited (now linked at the same commit); rows 10–14 for
|
|
16
|
+
`emilkowalski/skills@e8a175d`; row 15 for `taste-skill@e3c9203`; row 16 for
|
|
17
|
+
`anthropics/skills@2235be7`, the version installed when the looks section was
|
|
18
|
+
written. Three rows are `adapted`, so the MIT notices (Emil Kowalski, Leonxlnx) and an
|
|
19
|
+
Apache-2.0 notice now travel in the file, and each adapted passage names its source
|
|
20
|
+
where it sits, the condensed Cursor rule included.
|
|
21
|
+
- **Emil's skills are tools inside the lanes, not a second entry point.**
|
|
22
|
+
`MOTION_DOCTRINE.md` §11 names `review-animations`, `improve-animations`,
|
|
23
|
+
`find-animation-opportunities`, `animate`, `animate-expo` and `apple-design`, and says
|
|
24
|
+
that `emil-design-eng` loads by itself; `MOBILE_SURFACES.md` names `mobile-native` and
|
|
25
|
+
`animate-expo`; `VISUAL_REVIEW.md` names `break-ui` for worst-case data before a
|
|
26
|
+
populated capture; `MOTION_PRODUCTION.md` says none of them reads a render timeline.
|
|
27
|
+
- **Eleven rules reconciled, one value each** (table in `KNOWLEDGE_PROVENANCE.md`). The
|
|
28
|
+
doctrine changes four: no `ease-in` exit exception; the default spring is
|
|
29
|
+
`duration 0.4, bounce 0` with bounce only after a flick; `transition: all` and
|
|
30
|
+
entrances from `scale(0)` are banned; under reduced motion an opacity or colour change
|
|
31
|
+
that carries state may stay. It keeps its modal and drawer ceiling (200–300 ms;
|
|
32
|
+
500 ms only for a mobile sheet) against the tool's 200–500 ms, which contradicts the
|
|
33
|
+
tool's own under-300 rule, and the Cursor rule's stale `200–500ms` line is corrected
|
|
34
|
+
to match. `MOBILE_SURFACES.md` rule 1 now gives a hero `100svh` and an app shell
|
|
35
|
+
`100dvh`; the 28 packs that write `100dvh` are B-139.
|
|
36
|
+
- **D7 text defects.** A bold lead sentence in `SKILL.md` said twice in a row, and the
|
|
37
|
+
"Three looks" section of `SHELEG_DESIGN.md` pasted twice with two Contents lines, the
|
|
38
|
+
second copy linking to itself. One copy of each is kept.
|
|
39
|
+
- **The class, not only the instances.** `scripts/gen_contents.py` refuses a repeated
|
|
40
|
+
`## ` heading (a derived list derives the duplicate too, so drift never saw it), with a
|
|
41
|
+
validator plant; `test/sloplint.py` refuses the same sentence twice in a row, watched
|
|
42
|
+
failing on the pre-fix `SKILL.md`, and requires the `transition: all`, `scale(0)` and
|
|
43
|
+
"never a second entry point" text; `test/audit_regressions/xd-01.01.py` adds four
|
|
44
|
+
checks (permalink agrees with its row, adapted rows carry a notice, the reconciliation
|
|
45
|
+
is recorded, the looks name their source), three watched failing on the pre-fix files.
|
|
46
|
+
|
|
47
|
+
The `SKILL.md` body is 4746/4750 tokens after the edit (house auditor at `5ca5c36`).
|
|
48
|
+
Whether models follow the reconciled values was not measured.
|
|
49
|
+
|
|
50
|
+
## 1.61.2 — rendered copy is part of visual review
|
|
51
|
+
|
|
52
|
+
Visual review now inspects headings, hero fragments, captions and labels against
|
|
53
|
+
the project's copy policy, preserving meaningful punctuation and ordinary prose.
|
|
54
|
+
The review records visible text and source-role coverage; a successful linter
|
|
55
|
+
that never checked headings cannot stand in for this review. Copywriting keeps
|
|
56
|
+
ownership of its rules and parser. The existing load trigger and director route
|
|
57
|
+
to one review home, covered by mutation-tested contract probes. These are
|
|
58
|
+
instruction-integrity checks, not measured improvements in model behavior.
|
|
59
|
+
|
|
1
60
|
## 1.61.1 — the WebGL boundary names who owns the engine
|
|
2
61
|
|
|
3
62
|
The skill owns particle and WebGL backgrounds tied to scroll, and until now said nothing
|
|
@@ -163,24 +163,31 @@ Frequency decides before taste gets a vote. (Full doctrine:
|
|
|
163
163
|
consistency, state indication, feedback, explanation, or preventing a jarring
|
|
164
164
|
cut. "It looked cool" is not an answer; if you cannot write the sentence,
|
|
165
165
|
delete the animation.
|
|
166
|
-
- **`ease-in` is banned in UI
|
|
167
|
-
watching hardest. Entering or leaving → `ease-out`; moving or morphing on
|
|
166
|
+
- **`ease-in` is banned in UI**, exits included. It starts slow, in the exact moment
|
|
167
|
+
the user is watching hardest. Entering or leaving → `ease-out`; moving or morphing on
|
|
168
168
|
screen → `ease-in-out`; hover or colour change → `ease`; constant motion →
|
|
169
169
|
`linear`. Curves: `--ease-out: cubic-bezier(.23,1,.32,1)`,
|
|
170
170
|
`--ease-in-out: cubic-bezier(.77,0,.175,1)`,
|
|
171
171
|
`--ease-drawer: cubic-bezier(.32,.72,0,1)`.
|
|
172
172
|
- **UI motion stays at or under 300 ms.** Button press 100–160ms · tooltip 125–200ms ·
|
|
173
|
-
dropdown 150–250ms · modal/drawer 200–
|
|
174
|
-
deliberately longer.
|
|
173
|
+
dropdown 150–250ms · modal/drawer 200–300ms; only a full-height mobile sheet may run
|
|
174
|
+
to 500ms. Marketing and scrollytelling are deliberately longer.
|
|
175
|
+
- Springs: `{ type: "spring", duration: 0.4, bounce: 0 }` by default; bounce 0.1–0.3
|
|
176
|
+
only after a flick or a drag release.
|
|
175
177
|
- Never animate a property that triggers layout (`width`, `height`, `top`,
|
|
176
178
|
`left`, `padding`, `margin`, `gap`, `font-size`). Never a bare scroll
|
|
177
179
|
listener, never `requestAnimationFrame` writing component state, never
|
|
178
180
|
`backdrop-filter` or grain on a scrolling container, never a left-behind
|
|
179
|
-
`will-change`, never two marquees
|
|
181
|
+
`will-change`, never two marquees, never `transition: all` (name the properties),
|
|
182
|
+
never an entrance from `scale(0)` (start at `scale(0.95)` with `opacity: 0`).
|
|
180
183
|
- **Reduced motion is a contract, not a feature.** Anything beyond a colour
|
|
181
184
|
change honours `prefers-reduced-motion: reduce`; loops, parallax and springs
|
|
182
|
-
collapse to static or instant, never to "slower"
|
|
183
|
-
without that branch is a bug, not a
|
|
185
|
+
collapse to static or instant, never to "slower"; an opacity or colour change that
|
|
186
|
+
carries state may stay. Shipping an animation without that branch is a bug, not a
|
|
187
|
+
polish item.
|
|
188
|
+
- This section is adapted from `emilkowalski/skills` (MIT License, Copyright (c) 2026
|
|
189
|
+
Emil Kowalski); the full notice ships in the skill's `KNOWLEDGE_PROVENANCE.md` and
|
|
190
|
+
at https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/LICENSE.
|
|
184
191
|
|
|
185
192
|
## Five principles, in order
|
|
186
193
|
|
|
@@ -11,7 +11,7 @@ one control that changes the condition.
|
|
|
11
11
|
|
|
12
12
|
```tsx
|
|
13
13
|
<Empty
|
|
14
|
-
title="No integrations match “zzq
|
|
14
|
+
title="No integrations match “zzq”"
|
|
15
15
|
detail="Check the spelling, or clear the filter to see all of them."
|
|
16
16
|
action={<Button variant="secondary" size="sm">Clear filter</Button>}
|
|
17
17
|
/>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.61.
|
|
3
|
+
"version": "1.61.3",
|
|
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 \u2014 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"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"name": "sheleg-design",
|
|
4
4
|
"displayName": "SHELEG Design",
|
|
5
5
|
"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.",
|
|
6
|
-
"version": "1.61.
|
|
6
|
+
"version": "1.61.3",
|
|
7
7
|
"author": {
|
|
8
8
|
"name": "ssheleg",
|
|
9
9
|
"url": "https://x.com/sshlg93"
|
|
@@ -367,6 +367,9 @@ direction, or run every lens for a single local correction.
|
|
|
367
367
|
| **State adaptation** | Walk empty, long-content, error, pending, keyboard and recovery states relevant to the scenario. Separate browser prototype behavior from native platform expectations. | State/viewport identifiers, declared versus walked coverage and explicit simulations. No invented latency or claim that a browser preview proves native behavior. |
|
|
368
368
|
| **Finish** | Revisit the already identified defects and check what the changes introduced. Keep useful details that were already working. Stop when no actionable finding remains or the agreed budget is reached. | Each previous finding is resolved, partial or unresolved, with current captures and any regressions. The number of edits is not a success metric. |
|
|
369
369
|
|
|
370
|
+
At the copy/design seam, use the [rendered-copy review](VISUAL_REVIEW.md#rendered-copy)
|
|
371
|
+
for visible text roles, project policy, counterexamples and coverage receipts.
|
|
372
|
+
|
|
370
373
|
Before visual review, check that each capture belongs to the expected build,
|
|
371
374
|
screen, state, viewport and content. A stale screenshot or one taken before an
|
|
372
375
|
overlay opened cannot prove that overlay correct. If the capture cannot be
|
|
@@ -381,9 +384,9 @@ binary, service, API key, font download or new framework. Reuse local assets and
|
|
|
381
384
|
existing inspection tools; missing inspection remains NOT_RUN.
|
|
382
385
|
|
|
383
386
|
These local procedures were informed by a comparison of Impeccable's
|
|
384
|
-
[type](https://github.com/pbakaus/impeccable/blob/
|
|
385
|
-
[layout](https://github.com/pbakaus/impeccable/blob/
|
|
386
|
-
and [finish-review methods](https://github.com/pbakaus/impeccable/blob/
|
|
387
|
+
[type](https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/typeset.md),
|
|
388
|
+
[layout](https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/layout.md)
|
|
389
|
+
and [finish-review methods](https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/degraded/finish-reviewer.md) (Apache-2.0). They use this family's contracts; no
|
|
387
390
|
upstream runtime, assets, fixed style bans or automatic workflow are included.
|
|
388
391
|
The links record provenance, not instructions to fetch during every run.
|
|
389
392
|
|
|
@@ -13,25 +13,95 @@ verified.
|
|
|
13
13
|
this pack. Platform guidance (iOS, Android) is **paraphrased from the primary
|
|
14
14
|
platform documentation in our own words**, not copied from a third party, until
|
|
15
15
|
that third party's MIT notice has been verified and attached — so the rows below
|
|
16
|
-
are *evidence a method exists and works*, never instruction authority
|
|
17
|
-
|
|
16
|
+
are *evidence a method exists and works*, never instruction authority. Where a
|
|
17
|
+
row is `adapted`, text did come across, and its licence notice travels with it
|
|
18
|
+
in this file.
|
|
19
|
+
|
|
20
|
+
## Contents
|
|
21
|
+
|
|
22
|
+
- Adopted sources
|
|
23
|
+
- Transfer rules (apply the moment a row becomes `adapted`)
|
|
24
|
+
- Reconciliation with the installed motion tools
|
|
25
|
+
- Third-party notices
|
|
26
|
+
- What is NOT in the knowledge package
|
|
18
27
|
|
|
19
28
|
## Adopted sources
|
|
20
29
|
|
|
21
30
|
| # | Source (commit-pinned) | Path | SHA256 of reviewed file | Kind | Verified | Permalink |
|
|
22
31
|
|---|---|---|---|---|---|---|
|
|
23
|
-
| 1 | pbakaus/impeccable @ `
|
|
24
|
-
| 2 | pbakaus/impeccable @ `
|
|
25
|
-
| 3 | pbakaus/impeccable @ `
|
|
26
|
-
| 4 | pbakaus/impeccable @ `
|
|
27
|
-
| 5 | pbakaus/impeccable @ `
|
|
28
|
-
| 6 | julianoczkowski/designer-skills @ `c259656c76d9758d7ead46b0d2f125cbe84f8665` | `frontend-design/SKILL.md` | `6a078fa3e5a5cef2656d621a90c8dff8191bd9d8a3724df1b98760262c88ef60` | derived | 2026-
|
|
32
|
+
| 1 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/SKILL.md` | `104661e9af51d84dd3e2d620b83d4fb319e69fbaa3d4b10db32e02f85283286b` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/SKILL.md |
|
|
33
|
+
| 2 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/ios.md` | `40c87038b5f75147a5952a96237acf312a327bf70c1bcd8e0a5f064625ae9668` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/ios.md |
|
|
34
|
+
| 3 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/android.md` | `058f81f256134841875fd3183e06b37a023de0c877fd2b9eecd97011640791fe` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/android.md |
|
|
35
|
+
| 4 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/adapt.native.md` | `17c583cf8ad41266ea1e787b666b9d91fe13469d3d0f6af57c08e0146f9b17ac` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/adapt.native.md |
|
|
36
|
+
| 5 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/audit.native.md` | `fe91fcf28638f95577af481a50edaf339d6c9a3ad3b9fa477bc81c116b8bc392` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/audit.native.md |
|
|
37
|
+
| 6 | julianoczkowski/designer-skills @ `c259656c76d9758d7ead46b0d2f125cbe84f8665` | `frontend-design/SKILL.md` | `6a078fa3e5a5cef2656d621a90c8dff8191bd9d8a3724df1b98760262c88ef60` | derived | 2026-10-07 | https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/frontend-design/SKILL.md |
|
|
38
|
+
| 7 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/typeset.md` | `da98692848aa2e9ea22c681522a082f2226cb5dbfdb704ac38903be1b4cffafd` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/typeset.md |
|
|
39
|
+
| 8 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/layout.md` | `1d6d2658482b7e2df0c4d27b1b29c5195f0803b402278b96590598f4d3e57aa7` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/layout.md |
|
|
40
|
+
| 9 | pbakaus/impeccable @ `12b25ae25848202ce7a9092442198ada5c4fd984` | `plugin/skills/impeccable/reference/degraded/finish-reviewer.md` | `275dd1b6e63bbd30d2713227c4f79b880a8bc4e01cc48d392068bb86939d3afa` | derived | 2026-10-07 | https://github.com/pbakaus/impeccable/blob/12b25ae25848202ce7a9092442198ada5c4fd984/plugin/skills/impeccable/reference/degraded/finish-reviewer.md |
|
|
41
|
+
| 10 | emilkowalski/skills @ `e8a175de22ae1e49370fc144c1f3bb9aeedf988d` | `skills/emil-design-eng/SKILL.md` | `ffbe68e6007fb42cb8149f089b400a1ca007d59ba23e8948e2be4476f3175939` | adapted | 2026-10-07 | https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/emil-design-eng/SKILL.md |
|
|
42
|
+
| 11 | emilkowalski/skills @ `e8a175de22ae1e49370fc144c1f3bb9aeedf988d` | `skills/review-animations/STANDARDS.md` | `e7d3605034acda54ca13e43aec9e64d65b53de20f75b11b8d694e373012fbe07` | derived | 2026-10-07 | https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/review-animations/STANDARDS.md |
|
|
43
|
+
| 12 | emilkowalski/skills @ `e8a175de22ae1e49370fc144c1f3bb9aeedf988d` | `skills/review-animations/SKILL.md` | `6ff590d29e436766135aa3d137be1fac2a867165c7257fc315b189361f1873af` | derived | 2026-10-07 | https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/review-animations/SKILL.md |
|
|
44
|
+
| 13 | emilkowalski/skills @ `e8a175de22ae1e49370fc144c1f3bb9aeedf988d` | `skills/apple-design/SKILL.md` | `77bb63b7043bb93aca2ff4ab040c249484eef35682bb6ff7163433c31d30adc7` | derived | 2026-10-07 | https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/apple-design/SKILL.md |
|
|
45
|
+
| 14 | emilkowalski/skills @ `e8a175de22ae1e49370fc144c1f3bb9aeedf988d` | `skills/mobile-native/SKILL.md` | `888b7651d66d66dbac4e72b7c554638eb19bd971d686d6cbdf030a5ef3788f55` | derived | 2026-10-07 | https://github.com/emilkowalski/skills/blob/e8a175de22ae1e49370fc144c1f3bb9aeedf988d/skills/mobile-native/SKILL.md |
|
|
46
|
+
| 15 | Leonxlnx/taste-skill @ `e3c92037548e3e49bea8e6b906c99a8549654e71` | `skills/taste-skill/SKILL.md` | `aa194351b246b8b4799099d4ed7b033d29eab6e6e3d58d8d2172978be7b3ec89` | adapted | 2026-10-07 | https://github.com/Leonxlnx/taste-skill/blob/e3c92037548e3e49bea8e6b906c99a8549654e71/skills/taste-skill/SKILL.md |
|
|
47
|
+
| 16 | anthropics/skills @ `2235be7c60b551f5de82ade908fd3816455afcda` | `skills/frontend-design/SKILL.md` | `1608ea77fbb6fc30d13a97d12cfa8ebf31358d40f0dd97beed24829d6b3f45dd` | adapted | 2026-10-07 | https://github.com/anthropics/skills/blob/2235be7c60b551f5de82ade908fd3816455afcda/skills/frontend-design/SKILL.md |
|
|
48
|
+
|
|
49
|
+
Rows 1–6 were first recorded on 2026-09-07 and re-verified on 2026-10-07: rows
|
|
50
|
+
1–5 moved from impeccable `4db7f6b` to `12b25ae` (only `SKILL.md` changed bytes;
|
|
51
|
+
the four platform references hash the same at both commits), and row 6 hashes
|
|
52
|
+
the same as when it was first read. Rows 7–16 were added on 2026-10-07 for
|
|
53
|
+
material that was already in this pack without a receipt.
|
|
54
|
+
|
|
55
|
+
### What each row informed
|
|
56
|
+
|
|
57
|
+
A row without its destination cannot be checked against the text it claims to
|
|
58
|
+
explain, so each one names where it landed.
|
|
59
|
+
|
|
60
|
+
- **Row 1** — reading a surface by what it is for, and treating an existing
|
|
61
|
+
visual system as evidence rather than a lock: the brief's Surface and Job
|
|
62
|
+
lines and the mode table in [`CREATIVE_DIRECTOR.md`](./CREATIVE_DIRECTOR.md)
|
|
63
|
+
Act 1.
|
|
64
|
+
- **Rows 2–5** — context of use beyond one breakpoint and a native branch that
|
|
65
|
+
is captured separately: [`MOBILE_SURFACES.md`](./MOBILE_SURFACES.md) (platform
|
|
66
|
+
target versus prototype renderer, the native state matrix) and the native
|
|
67
|
+
evidence class in [`VISUAL_REVIEW.md`](./VISUAL_REVIEW.md). Impeccable's own
|
|
68
|
+
`NOTICE.md` records that `ios.md` and `android.md` are distilled from
|
|
69
|
+
`ehmo/platform-design-skills` (MIT). Under XD-01 this pack paraphrases the
|
|
70
|
+
primary platform documentation instead, so no text from either reaches it.
|
|
71
|
+
- **Row 6** — named aesthetic directions used only as prompts for the open axes
|
|
72
|
+
in [`VISUAL_EXPLORATION.md`](./VISUAL_EXPLORATION.md). **It is not the source
|
|
73
|
+
of the three default looks** in [`SHELEG_DESIGN.md`](./SHELEG_DESIGN.md): that
|
|
74
|
+
file has no `F4F1EA`, no terracotta and no broadsheet (checked 2026-10-07
|
|
75
|
+
against the row's SHA). The paragraph is credited to row 16.
|
|
76
|
+
- **Rows 7–9** — the type, layout and finish-review comparison cited in
|
|
77
|
+
`CREATIVE_DIRECTOR.md`, which now links the same commit as these rows.
|
|
78
|
+
- **Row 10** — [`MOTION_DOCTRINE.md`](./MOTION_DOCTRINE.md) §1–4: the frequency
|
|
79
|
+
table and the Raycast example, the purpose list, the easing tree, the three
|
|
80
|
+
named curves with their comments, the duration rows (reorganised into the
|
|
81
|
+
`DUR-*` table), the two spring notations and the interruptibility paragraph.
|
|
82
|
+
Close enough to the source to be `adapted`, so its notice is carried below.
|
|
83
|
+
- **Rows 11–14** — the reconciliation below: the `scale(0)` and `transition: all`
|
|
84
|
+
bans (rows 11–12), the critically damped default spring (row 13) and the
|
|
85
|
+
hero-versus-app-shell viewport split (row 14). Restated in this pack's words.
|
|
86
|
+
- **Row 15** — the three calibration dials in [`SKILL.md`](./SKILL.md): names,
|
|
87
|
+
1–10 poles, the "reading them off the brief" rows and the "do not ask the user
|
|
88
|
+
to edit a file" rule; and in `MOTION_DOCTRINE.md` "motion claimed is motion
|
|
89
|
+
shown", one marquee per page, `start: "top top"` for a pin, and continuous
|
|
90
|
+
input kept out of component state. This pack changed the baseline (`7 / 5 / 4`
|
|
91
|
+
against the source's `8 / 6 / 4`), added the product-UI, trust-first and deck
|
|
92
|
+
rows, required observable anchors, and softened the scroll-listener ban to a
|
|
93
|
+
measured-defect rule. Table rows and sentences remain close, so `adapted`.
|
|
94
|
+
- **Row 16** — "Three looks that are defaults, not decisions" in
|
|
95
|
+
`SHELEG_DESIGN.md`, adapted from the "For calibration" paragraph at `2235be7`,
|
|
96
|
+
the version installed when the section was written. At the source's current
|
|
97
|
+
commit (`41bbe19`, checked 2026-10-07) that paragraph lists five traits; the
|
|
98
|
+
two new ones are not adopted here.
|
|
29
99
|
|
|
30
100
|
**Kind.** *derived* — the method was read and re-expressed in this pack's own
|
|
31
101
|
words; no source text was carried over, so no source licence rides on it beyond
|
|
32
102
|
attribution. *adapted* — source text was carried over; a row of that kind
|
|
33
|
-
additionally requires the transfer rules below
|
|
34
|
-
|
|
103
|
+
additionally requires the transfer rules below. Rows 10, 15 and 16 are of that
|
|
104
|
+
kind, and their notices are in [Third-party notices](#third-party-notices).
|
|
35
105
|
|
|
36
106
|
## Transfer rules (apply the moment a row becomes `adapted`)
|
|
37
107
|
|
|
@@ -46,6 +116,109 @@ that kind today.
|
|
|
46
116
|
3. **A source path, a SHA and a permalink, or it is not adopted.** A method with
|
|
47
117
|
no row here has no provenance and does not ship.
|
|
48
118
|
|
|
119
|
+
## Reconciliation with the installed motion tools
|
|
120
|
+
|
|
121
|
+
`emilkowalski/skills` at `e8a175d` is installed beside this skill as a set of
|
|
122
|
+
tools (`MOTION_DOCTRINE.md` §11, `MOBILE_SURFACES.md`, `VISUAL_REVIEW.md`). Its
|
|
123
|
+
doctrine is not copied in further; where its values and this pack's disagreed,
|
|
124
|
+
one value was decided per rule on 2026-10-07, and the doctrine states the reason
|
|
125
|
+
in place. A row reading *agree* was checked and needed no change.
|
|
126
|
+
|
|
127
|
+
| Rule | This pack before | The tool says | Decided | Why |
|
|
128
|
+
|---|---|---|---|---|
|
|
129
|
+
| RC-01 named curves | `0.23,1,0.32,1` · `0.77,0,0.175,1` · `0.32,0.72,0,1` | the same three (rows 10–11) | agree | one source |
|
|
130
|
+
| RC-02 `ease-in` on an exit | kept for an element leaving the screen entirely | never on UI; exits ride `ease-out` (row 11) | no exit exception | the doctrine's own tree already sent exits to `ease-out` |
|
|
131
|
+
| RC-03 modal and drawer | DUR-SPATIAL 200–300 ms; 500 only as DUR-SHEET-MOBILE | 200–500 ms (rows 10–11) | this pack's rows | the source's 500 contradicts its own under-300 rule |
|
|
132
|
+
| RC-04 UI ceiling | at or under 300 ms | under 300; escalate over 300 without a reason (row 12) | agree, 300 passes | both gates fail 301 |
|
|
133
|
+
| RC-05 default spring | `duration 0.5, bounce 0.2` preferred | `duration 0.5, bounce 0.2` (row 10); critically damped by default, bounce after a flick (row 13) | `duration 0.4, bounce 0` by default; `bounce 0.2` after a flick or drag release | a default with bounce contradicted "keep it out of most UI" |
|
|
134
|
+
| RC-06 `transition: all` | not addressed | first escalation trigger (row 12) | banned in §5 | it animates whatever changes next, layout included |
|
|
135
|
+
| RC-07 `scale(0)` | not addressed | never; start from 0.95, band 0.9–0.97 (rows 10–11) | banned in §5; enter from `scale(0.95)` | nothing real appears from a point |
|
|
136
|
+
| RC-08 reduced motion | collapse to static or instant | fewer and gentler, not zero; keep opacity and colour (rows 11, 13) | movement collapses; an opacity or colour change carrying state may stay | both remove movement; neither licenses a slower slide |
|
|
137
|
+
| RC-09 pure-fade entrance | allowed under reduced motion and where a pack prescribes it | escalation trigger (row 12) | allowed in those two cases | the fade is the reduced-motion answer, not an omission |
|
|
138
|
+
| RC-10 full-height viewport | `svh`, with `dvh` behind `@supports` | `100svh` for a hero, `100dvh` for an app shell (row 14) | the tool's split | `dvh` shifts a hero mid-scroll |
|
|
139
|
+
| RC-11 typeface | the pack names it | system font by default (row 13) | the pack's face | identity is the pack's; `MOTION_DOCTRINE.md` §8 names the swap as drift |
|
|
140
|
+
|
|
141
|
+
The installed tool files hash identically to the rows above (checked
|
|
142
|
+
2026-10-07 for `emil-design-eng`, `animate`, `animate-expo`, `review-animations`,
|
|
143
|
+
`improve-animations`, `find-animation-opportunities`, `animation-vocabulary`,
|
|
144
|
+
`apple-design`, `mobile-native` and `break-ui`). A newer tool commit reopens this
|
|
145
|
+
table rather than overriding it.
|
|
146
|
+
|
|
147
|
+
## Third-party notices
|
|
148
|
+
|
|
149
|
+
Rows 10, 15 and 16 carry source text, so the source's notice travels with it.
|
|
150
|
+
Each adapted passage also names its source where it sits: the opening of
|
|
151
|
+
`MOTION_DOCTRINE.md`, the dials in `SKILL.md`, the closing note of the
|
|
152
|
+
default-looks section in `SHELEG_DESIGN.md`, and the motion section of the
|
|
153
|
+
condensed Cursor rule that ships beside this skill.
|
|
154
|
+
|
|
155
|
+
### emilkowalski/skills (row 10)
|
|
156
|
+
|
|
157
|
+
```text
|
|
158
|
+
MIT License
|
|
159
|
+
|
|
160
|
+
Copyright (c) 2026 Emil Kowalski
|
|
161
|
+
|
|
162
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
163
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
164
|
+
in the Software without restriction, including without limitation the rights
|
|
165
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
166
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
167
|
+
furnished to do so, subject to the following conditions:
|
|
168
|
+
|
|
169
|
+
The above copyright notice and this permission notice shall be included in all
|
|
170
|
+
copies or substantial portions of the Software.
|
|
171
|
+
|
|
172
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
173
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
174
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
175
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
176
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
177
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
178
|
+
SOFTWARE.
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Leonxlnx/taste-skill (row 15)
|
|
182
|
+
|
|
183
|
+
```text
|
|
184
|
+
MIT License
|
|
185
|
+
|
|
186
|
+
Copyright (c) 2026 Leonxlnx
|
|
187
|
+
|
|
188
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
189
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
190
|
+
in the Software without restriction, including without limitation the rights
|
|
191
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
192
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
193
|
+
furnished to do so, subject to the following conditions:
|
|
194
|
+
|
|
195
|
+
The above copyright notice and this permission notice shall be included in all
|
|
196
|
+
copies or substantial portions of the Software.
|
|
197
|
+
|
|
198
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
199
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
200
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
201
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
202
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
203
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
204
|
+
SOFTWARE.
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### anthropics/skills — frontend-design (row 16)
|
|
208
|
+
|
|
209
|
+
The "three default looks" section of `SHELEG_DESIGN.md` is adapted from
|
|
210
|
+
`skills/frontend-design/SKILL.md` in `anthropics/skills` at commit
|
|
211
|
+
`2235be7c60b551f5de82ade908fd3816455afcda`, licensed under the Apache License,
|
|
212
|
+
Version 2.0. You may obtain a copy of the License at
|
|
213
|
+
<http://www.apache.org/licenses/LICENSE-2.0> or read the copy shipped beside the
|
|
214
|
+
source at
|
|
215
|
+
<https://github.com/anthropics/skills/blob/2235be7c60b551f5de82ade908fd3816455afcda/skills/frontend-design/LICENSE.txt>.
|
|
216
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
217
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
218
|
+
CONDITIONS OF ANY KIND, either express or implied. The source carries no
|
|
219
|
+
`NOTICE` file. Changes: reworded, restated as a numbered list, and answered with
|
|
220
|
+
this pack's rule that values come from a pack.
|
|
221
|
+
|
|
49
222
|
## What is NOT in the knowledge package
|
|
50
223
|
|
|
51
224
|
The knowledge package is doctrine and method only. It deliberately excludes:
|
|
@@ -9,6 +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
|
+
- Tools inside this lane — mobile-web fixes and React Native motion
|
|
12
13
|
- Platform target and prototype renderer are two decisions, not one
|
|
13
14
|
- The native state matrix — what each surface owes, and how it is verified
|
|
14
15
|
- Reference sweeps — structure crosses, identity does not
|
|
@@ -36,10 +37,15 @@ looking for *mobile* would not think to look, so they are collected here with
|
|
|
36
37
|
their homes named. Rule 6 is the opposite: nothing in this library answers it,
|
|
37
38
|
and pretending otherwise is worse than the gap.
|
|
38
39
|
|
|
39
|
-
1. **`100vh` is banned;
|
|
40
|
-
`100vh` is why a mobile hero jumps when the URL bar hides
|
|
40
|
+
1. **`100vh` is banned; a hero takes `100svh`, an app shell takes `100dvh`.** A
|
|
41
|
+
bare `100vh` is why a mobile hero jumps when the URL bar hides
|
|
41
42
|
(`styles/field-notes.md`, `styles/cyclorama.md`, and the template's
|
|
42
|
-
*Responsive* brief).
|
|
43
|
+
*Responsive* brief). `dvh` resizes as the URL bar collapses, which is right
|
|
44
|
+
for an app shell or bottom-pinned input and is a layout shift mid-scroll on
|
|
45
|
+
a hero; `svh` never moves. An earlier wording put `dvh` behind `@supports` on
|
|
46
|
+
every full-height section, which hands the hero the shift. A viewport unit is
|
|
47
|
+
platform convention, not identity, so where a pack writes `100dvh` for a
|
|
48
|
+
full-height marketing section this rule decides it on mobile.
|
|
43
49
|
2. **Inputs are `16px` minimum — a functional floor, not a type choice.**
|
|
44
50
|
Anything smaller triggers zoom-on-focus on iOS. Keep it even where 14px would
|
|
45
51
|
look better (`styles/field-notes.md`, `styles/cyclorama.md`).
|
|
@@ -81,6 +87,21 @@ colour and type do not care about the runtime — but no pack's `## Components`
|
|
|
81
87
|
was written against a tab bar or a sheet, so the component half is yours on any
|
|
82
88
|
native surface, in every pack, whatever its `Contract:` line says about the web.
|
|
83
89
|
|
|
90
|
+
## Tools inside this lane — mobile-web fixes and React Native motion
|
|
91
|
+
|
|
92
|
+
Two installed skills (from `emilkowalski/skills`) serve this file as tools,
|
|
93
|
+
called from inside the route and never as a second entry point. Absent, the
|
|
94
|
+
rules here stand alone.
|
|
95
|
+
|
|
96
|
+
- **`mobile-native`** — the fix list for a **mobile-web** view: the viewport and
|
|
97
|
+
`theme-color` meta tags, tap highlight, `16px` inputs, hover gated behind
|
|
98
|
+
`(hover: hover) and (pointer: fine)`, safe-area insets, overscroll. Run it
|
|
99
|
+
on a mobile-web view, not on a native screen. Its viewport split is rule 1
|
|
100
|
+
above; on anything identity, the pack wins.
|
|
101
|
+
- **`animate-expo`** — motion on the **React Native / Expo** branch of the
|
|
102
|
+
table below. The frequency table and the reduced-motion contract in
|
|
103
|
+
[`MOTION_DOCTRINE.md`](./MOTION_DOCTRINE.md) bind there as on the web.
|
|
104
|
+
|
|
84
105
|
## Platform target and prototype renderer are two decisions, not one
|
|
85
106
|
|
|
86
107
|
Before choosing components, separate **what the surface ships as** from **what
|
|
@@ -6,6 +6,10 @@ how long it runs, what curve it rides, and which forms are simply wrong.
|
|
|
6
6
|
|
|
7
7
|
Every number here is a decision someone else already paid for. Use them.
|
|
8
8
|
|
|
9
|
+
§1–4 are adapted from `emilkowalski/skills` (`emil-design-eng`, MIT, © 2026 Emil
|
|
10
|
+
Kowalski); the notice, the commit and every value this file decided differently
|
|
11
|
+
are in [`KNOWLEDGE_PROVENANCE.md`](./KNOWLEDGE_PROVENANCE.md).
|
|
12
|
+
|
|
9
13
|
---
|
|
10
14
|
|
|
11
15
|
## Contents
|
|
@@ -20,6 +24,7 @@ Every number here is a decision someone else already paid for. Use them.
|
|
|
20
24
|
- 8. Anti-drift
|
|
21
25
|
- 9. Reduced motion
|
|
22
26
|
- 10. Pre-flight
|
|
27
|
+
- 11. Tools inside this lane
|
|
23
28
|
- How the calibration dials bind
|
|
24
29
|
|
|
25
30
|
## 1. Should this animate at all?
|
|
@@ -80,8 +85,9 @@ Is the element entering or leaving?
|
|
|
80
85
|
It starts slow. The delay lands in the exact moment the user is watching hardest
|
|
81
86
|
— just after the click. A dropdown on `ease-in` at 300 ms *feels* slower than
|
|
82
87
|
the same dropdown on `ease-out` at 300 ms, with identical duration on the clock.
|
|
83
|
-
|
|
84
|
-
`ease-in
|
|
88
|
+
**Exits ride `ease-out` too; there is no exit exception.** An earlier wording kept
|
|
89
|
+
`ease-in` for an element leaving the screen entirely, which contradicted the tree
|
|
90
|
+
above and is blocked by `review-animations`.
|
|
85
91
|
|
|
86
92
|
### The curves
|
|
87
93
|
|
|
@@ -131,6 +137,11 @@ not a value caught between a permissive row and a strict gate; the old
|
|
|
131
137
|
`--dur-reveal: 500ms` answers to DUR-ENTRANCE and `--dur-fast: 150ms` to
|
|
132
138
|
DUR-FEEDBACK — both correct; the same 500 ms on a button FAILs DUR-FEEDBACK.
|
|
133
139
|
|
|
140
|
+
**Where `emil-design-eng` or `review-animations` quotes `200–500ms` for modals and
|
|
141
|
+
drawers, this table wins.** That row contradicts the same source's own under-300
|
|
142
|
+
rule, so the 500 survives here only as DUR-SHEET-MOBILE. The ceilings agree:
|
|
143
|
+
the review tool escalates a UI duration over 300 ms, and 300 itself passes both.
|
|
144
|
+
|
|
134
145
|
Speed is not only comfort — it is perceived performance. A faster spinner makes
|
|
135
146
|
an identical load feel shorter. A tooltip that skips its delay after the first
|
|
136
147
|
one makes the whole toolbar feel quicker. Easing amplifies this: `ease-out` at
|
|
@@ -151,12 +162,17 @@ physical rather than scheduled:
|
|
|
151
162
|
Prefer Apple's parameterisation — it is the one you can reason about:
|
|
152
163
|
|
|
153
164
|
```js
|
|
154
|
-
{ type: "spring", duration: 0.
|
|
155
|
-
{ type: "spring",
|
|
165
|
+
{ type: "spring", duration: 0.4, bounce: 0 } // default: critically damped, no overshoot
|
|
166
|
+
{ type: "spring", duration: 0.4, bounce: 0.2 } // only after a flick or a drag release
|
|
167
|
+
{ type: "spring", mass: 1, stiffness: 100, damping: 10 } // decorative pointer tracking only
|
|
156
168
|
```
|
|
157
169
|
|
|
158
|
-
Keep `bounce` between 0.1 and 0.3, and
|
|
159
|
-
drag-to-dismiss and to play, not to a settings panel.
|
|
170
|
+
Keep `bounce` between 0.1 and 0.3, and only where the gesture carried momentum.
|
|
171
|
+
Bounce belongs to drag-to-dismiss and to play, not to a settings panel. **The
|
|
172
|
+
default carries no bounce:** an earlier version made `duration 0.5, bounce 0.2`
|
|
173
|
+
the preferred spring, which contradicted the sentence above; `apple-design`
|
|
174
|
+
starts UI critically damped and adds bounce only after a flick, and this file now
|
|
175
|
+
says the same.
|
|
160
176
|
|
|
161
177
|
**Interruptibility is the real reason to use one.** A spring keeps its velocity
|
|
162
178
|
when interrupted; CSS keyframes restart from zero. Expand a row, hit Escape
|
|
@@ -217,6 +233,13 @@ These are not stylistic preferences. Each one is a defect with a known failure.
|
|
|
217
233
|
- **`will-change` left behind** — it is a hint for motion about to happen, not a
|
|
218
234
|
decoration. Remove it when the animation ends.
|
|
219
235
|
- **More than one marquee per page.** One can carry content; two read as filler.
|
|
236
|
+
- **`transition: all`.** It animates whatever property changes next, layout
|
|
237
|
+
included, and nobody chose it. Name the properties instead:
|
|
238
|
+
`transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out)`.
|
|
239
|
+
- **Entering from `scale(0)`.** Nothing real appears from a point. Enter from
|
|
240
|
+
`scale(0.95)` with `opacity: 0`; a pack may name another start inside
|
|
241
|
+
0.9–0.97. A popover scales from its trigger (`transform-origin` at the
|
|
242
|
+
anchor); a modal stays centred.
|
|
220
243
|
|
|
221
244
|
---
|
|
222
245
|
|
|
@@ -289,6 +312,12 @@ Not a feature. A contract.
|
|
|
289
312
|
- Anything beyond a colour change honours `prefers-reduced-motion: reduce`.
|
|
290
313
|
- Infinite loops, parallax, scroll hijack, magnetic physics and spring chases
|
|
291
314
|
collapse to static or instant — not to "slower".
|
|
315
|
+
- **What may stay is an opacity or colour change that carries a state change**,
|
|
316
|
+
at DUR-OVERLAY length or shorter. The branch removes movement, not
|
|
317
|
+
comprehension; `review-animations` and `apple-design` say the same, and neither
|
|
318
|
+
licenses a slower slide. A pure fade is therefore a correct entrance under the
|
|
319
|
+
query, and wherever a pack's motion tokens prescribe one, even though the
|
|
320
|
+
review tool escalates a pure-fade entrance elsewhere.
|
|
292
321
|
- In a motion library, gate on the reduced-motion hook and render the resting
|
|
293
322
|
state. In CSS, put motion behind `@media (prefers-reduced-motion: no-preference)`.
|
|
294
323
|
- WebGL and canvas scenes degrade to their CSS or SVG still.
|
|
@@ -350,6 +379,32 @@ Before calling motion done:
|
|
|
350
379
|
|
|
351
380
|
---
|
|
352
381
|
|
|
382
|
+
## 11. Tools inside this lane
|
|
383
|
+
|
|
384
|
+
Where `emilkowalski/skills` is installed (Markdown only: no hooks, no scripts),
|
|
385
|
+
its motion skills are **tools this lane calls, never a second entry point.** The
|
|
386
|
+
route still starts at [`SKILL.md`](./SKILL.md), the pack still sets the values,
|
|
387
|
+
and this file still decides whether a thing moves. Absent, nothing here depends
|
|
388
|
+
on them: the sections above are the whole answer.
|
|
389
|
+
|
|
390
|
+
| Tool | Call it when | What it owes this lane |
|
|
391
|
+
|---|---|---|
|
|
392
|
+
| `review-animations` | reviewing the motion in a diff before it merges; explicit invocation only, it never loads itself | its Block/Approve verdict is read against §3 and the reconciliation in [`KNOWLEDGE_PROVENANCE.md`](./KNOWLEDGE_PROVENANCE.md) |
|
|
393
|
+
| `improve-animations` | auditing a whole codebase's motion; read-only, it writes plans for other agents | each plan item still passes §1 before it is built |
|
|
394
|
+
| `find-animation-opportunities` | asking where something should move and does not; read-only, it proposes values | a proposal on a 100+/day path is rejected by §1, whatever it suggests |
|
|
395
|
+
| `animate` | building one web animation from scratch | durations come from the pack's motion tokens first and §3 second |
|
|
396
|
+
| `animate-expo` | the same in React Native or Expo, the RN branch of [`MOBILE_SURFACES.md`](./MOBILE_SURFACES.md) | the frequency table and §9 bind on a phone exactly as on the web |
|
|
397
|
+
| `apple-design` | springs, gestures, momentum, sheets, translucent materials | the default spring in §4; the pack's face over its system-font default |
|
|
398
|
+
|
|
399
|
+
**`emil-design-eng` loads on its own.** It has no `disable-model-invocation` and a
|
|
400
|
+
broad description, so on a design task it can arrive beside this skill unasked.
|
|
401
|
+
Its numbers are the ones §1–4 adapted; where it and this file disagree, this file
|
|
402
|
+
wins, and the pack wins over both on values. The differences are decided one rule
|
|
403
|
+
at a time in `KNOWLEDGE_PROVENANCE.md`, so the doctrine and the tool never hand
|
|
404
|
+
an agent two answers.
|
|
405
|
+
|
|
406
|
+
---
|
|
407
|
+
|
|
353
408
|
## How the calibration dials bind
|
|
354
409
|
|
|
355
410
|
- **The pack wins on values, the dials win on amount.** A dial never invents a
|
|
@@ -32,6 +32,12 @@ animation, exported" is the mistake this document exists to prevent.
|
|
|
32
32
|
and stays page motion. Reaching for a rendered file there is a downgrade, and the
|
|
33
33
|
next section prices it.
|
|
34
34
|
|
|
35
|
+
**The motion tools stop at the same line.** `animate`, `animate-expo`, `apple-design`,
|
|
36
|
+
`review-animations`, `improve-animations` and `find-animation-opportunities` are
|
|
37
|
+
tools for the page rows of the table above, called from inside this route
|
|
38
|
+
(`MOTION_DOCTRINE.md` §11). None of them reads a render timeline, so on the third
|
|
39
|
+
row their verdict is not evidence; the pre-flight at the end of this document is.
|
|
40
|
+
|
|
35
41
|
## Before the tool: what a rendered asset costs
|
|
36
42
|
|
|
37
43
|
A video in a hero looks like a shortcut and is a trade. Four things are given up, and
|
|
@@ -45,7 +45,6 @@ build new sites on the same principles and understand *why* each piece works.
|
|
|
45
45
|
- 13. File map (one file per idea)
|
|
46
46
|
- Quick reference — each rule, and the failure it prevents
|
|
47
47
|
- Three looks that are defaults, not decisions
|
|
48
|
-
- Three looks that are defaults, not decisions
|
|
49
48
|
|
|
50
49
|
## 0. The one-paragraph thesis
|
|
51
50
|
|
|
@@ -767,12 +766,9 @@ Moved out of `SKILL.md` on 2026-08-16 for the body budget. It sits here because
|
|
|
767
766
|
it is the same argument this file makes throughout: the values come from a pack
|
|
768
767
|
extracted off a live reference, never from taste at the keyboard.
|
|
769
768
|
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
**If a pack's field sits near one of these, that is a measurement; if a page arrives
|
|
777
|
-
at one without a pack, that is the default talking** — say which out loud before
|
|
778
|
-
shipping. The three documents, in full: [`SHELEG_DESIGN.md`](./SHELEG_DESIGN.md).
|
|
769
|
+
*Adapted from the "For calibration" paragraph of `anthropics/skills`
|
|
770
|
+
`frontend-design` (Apache-2.0, commit `2235be7`). Changed here: the three looks
|
|
771
|
+
are restated as a numbered list and answered with this library's rule — values
|
|
772
|
+
come from a pack — rather than the source's advice on spending a free axis. The
|
|
773
|
+
licence notice and the row are in
|
|
774
|
+
[`KNOWLEDGE_PROVENANCE.md`](./KNOWLEDGE_PROVENANCE.md).*
|
|
@@ -4,7 +4,7 @@ description: Use when deciding how something LOOKS or MOVES — cinematic landin
|
|
|
4
4
|
license: MIT
|
|
5
5
|
compatibility: Kit/lane commands need node>=16, npx, network. Optional siblings — dataviz, shadcn, migrate-radix-to-base. Each has an in-text fallback when absent or unreachable.
|
|
6
6
|
metadata:
|
|
7
|
-
version: 1.61.
|
|
7
|
+
version: 1.61.3
|
|
8
8
|
---
|
|
9
9
|
|
|
10
10
|
# SHELEG Design
|
|
@@ -131,7 +131,8 @@ observable anchors — a bare number cannot do that, so **a number without its
|
|
|
131
131
|
anchors is not evidence**.
|
|
132
132
|
|
|
133
133
|
**Three dials carry the same intent as optional shorthand** — preference
|
|
134
|
-
hints, not measurements of quality
|
|
134
|
+
hints, not measurements of quality (from `Leonxlnx/taste-skill`, MIT,
|
|
135
|
+
[notice](./KNOWLEDGE_PROVENANCE.md)):
|
|
135
136
|
|
|
136
137
|
- **`DESIGN_VARIANCE`** 1–10 — 1 is perfect symmetry, 10 is deliberate
|
|
137
138
|
asymmetry and no two sections alike.
|
|
@@ -216,9 +217,9 @@ decision, not a research conclusion:
|
|
|
216
217
|
[`TYPE_CRAFT.md`](./TYPE_CRAFT.md)) — before composing a page or setting a type
|
|
217
218
|
ramp. The portable half: observed, never dialled — an uncalibrated axis is a
|
|
218
219
|
number nobody can check.
|
|
219
|
-
- **Visual review** ([`VISUAL_REVIEW.md`](./VISUAL_REVIEW.md)) — before a
|
|
220
|
-
screenshot
|
|
221
|
-
|
|
220
|
+
- **Visual review** ([`VISUAL_REVIEW.md`](./VISUAL_REVIEW.md)) — before accepting a
|
|
221
|
+
screenshot or rendered copy. Verify the frame, then inspect visible text
|
|
222
|
+
against project policy.
|
|
222
223
|
- **Where the knowledge came from**
|
|
223
224
|
([`KNOWLEDGE_PROVENANCE.md`](./KNOWLEDGE_PROVENANCE.md)) — when a rule is
|
|
224
225
|
challenged or copied.
|
|
@@ -265,7 +266,6 @@ silent fallbacks compares the fallbacks. No CSS-swap promise follows:
|
|
|
265
266
|
components keep consuming the pack's own tokens.
|
|
266
267
|
|
|
267
268
|
**What a comparison records — one component, one content, one viewport at a
|
|
268
|
-
time, through the adapters.** **What a comparison records — one component, one content, one viewport at a
|
|
269
269
|
time, through the adapters.** A difference is attributable to the pack only
|
|
270
270
|
when everything else is pinned: the receipt per candidate names the pack, its
|
|
271
271
|
adapter status, the compared component's geometry (positions and sizes as
|
|
@@ -7,6 +7,15 @@ file is the contract a visual claim clears before it is called a *visual-pass*
|
|
|
7
7
|
— and the line past which "I could not capture it" is stated as **unverified**
|
|
8
8
|
rather than dressed up as a reading.
|
|
9
9
|
|
|
10
|
+
## Contents
|
|
11
|
+
|
|
12
|
+
- The capture record
|
|
13
|
+
- Fitness — what disqualifies a frame
|
|
14
|
+
- Worst-case data before the capture
|
|
15
|
+
- Capture is tool-agnostic
|
|
16
|
+
- Visual evidence is its own class — do not launder others into it
|
|
17
|
+
- Rendered copy — the design/copywriting seam
|
|
18
|
+
|
|
10
19
|
## The capture record
|
|
11
20
|
|
|
12
21
|
Every visual claim carries the record of what was actually captured. A
|
|
@@ -44,6 +53,19 @@ available**, the claim is recorded as **`unverified`**, not as a pass. Static
|
|
|
44
53
|
work continues — the contract never demands a mandatory tool install — it is
|
|
45
54
|
just honest that the visual half was not seen.
|
|
46
55
|
|
|
56
|
+
## Worst-case data before the capture
|
|
57
|
+
|
|
58
|
+
A populated frame of the happy path proves the happy path. Before capturing a
|
|
59
|
+
`populated` state, put the component through its worst data: long names,
|
|
60
|
+
unbreakable emails, one-letter names, missing fields, huge counts, zero items,
|
|
61
|
+
non-Latin text, emoji. Where **`break-ui`** is installed (from
|
|
62
|
+
`emilkowalski/skills`), it is the tool for this inside the sheleg-design route,
|
|
63
|
+
never a second entry point: it renders the component behind a demo-versus-worst
|
|
64
|
+
toggle and reports what broke, what it left for you to decide, and what held.
|
|
65
|
+
Absent, list the worst cases by hand. Either way the capture record's `state`
|
|
66
|
+
names which data the frame shows, and a demo-data frame never answers a claim
|
|
67
|
+
about overflow, truncation or wrapping.
|
|
68
|
+
|
|
47
69
|
## Capture is tool-agnostic
|
|
48
70
|
|
|
49
71
|
The capability that produces the frame is named in `source`, and **any working
|
|
@@ -72,3 +94,36 @@ look like a phone, or a design comp of an app screen, is a mockup — calling it
|
|
|
72
94
|
verified native interface claims a device evidence class it does not hold.
|
|
73
95
|
Native readiness is claimed only from native device evidence, and its absence is
|
|
74
96
|
`unverified`, never inferred from a web capture that resembles the platform.
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
<a id="rendered-copy"></a>
|
|
100
|
+
## Rendered copy — the design/copywriting seam
|
|
101
|
+
|
|
102
|
+
During visual review, read what the user actually sees: hero eyebrows, headings,
|
|
103
|
+
line-break fragments, captions and labels, including text split across inline
|
|
104
|
+
markup. Compare each role with the **project policy** in the brand pack.
|
|
105
|
+
Copy rules belong to **copywriting** (AT-07 covers terminal full stops in titles
|
|
106
|
+
and labels); design catches mismatches between that policy and the rendered
|
|
107
|
+
composition. It does not invent a second punctuation linter. A project can
|
|
108
|
+
extend the default to hero supporting copy, but ordinary prose keeps its normal
|
|
109
|
+
sentence punctuation. Respect a documented intentional exception.
|
|
110
|
+
|
|
111
|
+
Keep a small review record: **selector**, role, **visible text**, **viewport**,
|
|
112
|
+
**revision**, policy reference, finding and disposition. Inspect the supported
|
|
113
|
+
narrow and wide layouts: a full sentence may become a misleading fragment when
|
|
114
|
+
split for visual emphasis. A corrected headline needs both the source/generated-copy
|
|
115
|
+
fix and a new capture. Where templates regenerate the text, fix their source too.
|
|
116
|
+
|
|
117
|
+
| Review probe | Expected review action |
|
|
118
|
+
|---|---|
|
|
119
|
+
| `<h1>Your agents.<br>Your tools.</h1>` under a no-title-period policy | Flag both display fragments, including an inline-styled final word. Check the rendered narrow and wide versions after correcting the source. |
|
|
120
|
+
| A hero paragraph ends in a period | Apply the project's rule for that role. Do not strip ordinary prose because a title rule exists. |
|
|
121
|
+
| `Ready?`, `Dr. Ada`, `v1.2.3`, `https://example.org`, or `Loading…` | Preserve meaningful punctuation in questions, abbreviations, version numbers, URLs and ellipses. Do not use a global replacement. |
|
|
122
|
+
| No runtime capture; the text extractor flattened all headings | Mark the visual claim **unverified**. Repair or report source-role coverage; inspect source provisionally and do not claim a rendered pass. |
|
|
123
|
+
|
|
124
|
+
A linter's **exit 0** proves only the rules and sources it actually checked.
|
|
125
|
+
Record its coverage and whether those sources preserve the roles above; a flat
|
|
126
|
+
copy export, skipped source glob or token/contrast pass does not demonstrate
|
|
127
|
+
that the visible headlines passed copy review. Route textual findings back
|
|
128
|
+
through copywriting, compare the resulting composition, and record unresolved
|
|
129
|
+
items explicitly. This is a review procedure, not evidence that a model followed it.
|