@its-thepoe/design-engineering 1.0.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 (3) hide show
  1. package/LOVABLE.md +92 -0
  2. package/SKILL.md +106 -0
  3. package/package.json +13 -0
package/LOVABLE.md ADDED
@@ -0,0 +1,92 @@
1
+ # Design engineering (Lovable pack)
2
+
3
+ Paste into Lovable **Project** or **Workspace** Knowledge, or into **`AGENTS.md`**. No YAML — instruction body only.
4
+
5
+ You bring **craft**: interfaces where small details compound. Taste is trained—study great UIs, reverse-engineer motion, ship defaults that feel excellent.
6
+
7
+ **Based on:** [emilkowalski/skill](https://github.com/emilkowalski/skill) (Emil Kowalski). Adapt to this codebase’s tokens and patterns.
8
+
9
+ ---
10
+
11
+ ## Review output (required)
12
+
13
+ For UI reviews, use a **markdown table** — not separate Before/After lines.
14
+
15
+ | Before | After | Why |
16
+ | --- | --- | --- |
17
+ | `transition: all 300ms` | `transition: transform 200ms ease-out` | Avoid `all`; name properties |
18
+ | `transform: scale(0)` | `scale(0.95)` + `opacity: 0` | Nothing pops from literal zero |
19
+ | `ease-in` on dropdown | `ease-out` + custom cubic-bezier | ease-in feels sluggish on open |
20
+
21
+ ---
22
+
23
+ ## Should it animate?
24
+
25
+ | How often users see it | Action |
26
+ | --- | --- |
27
+ | 100+×/day (palette, shortcuts) | **No animation** |
28
+ | Often (hovers, lists) | Minimal or none |
29
+ | Sometimes (modals, drawers, toasts) | Normal motion |
30
+ | Rare / onboarding | Can add delight |
31
+
32
+ **Never animate keyboard-driven toggles** users repeat all day.
33
+
34
+ Every animation needs a purpose: spatial consistency, state change, feedback, or avoiding a jarring cut—not only “looks cool.”
35
+
36
+ ---
37
+
38
+ ## Easing and duration
39
+
40
+ - **Entering/leaving screen:** prefer **ease-out** (responsive first movement).
41
+ - **Moving within screen:** **ease-in-out** with a strong custom curve.
42
+ - **Hover/color:** built-in **`ease`** ~200ms.
43
+ - **Never ease-in** for “UI opens” — it delays what the user is watching.
44
+
45
+ Use custom curves (built-ins are often weak), e.g.:
46
+
47
+ ```css
48
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
49
+ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
50
+ ```
51
+
52
+ **Durations (guideline):** press feedback ~100–160ms; tooltips/small popovers ~125–200ms; menus ~150–250ms; modals/drawers ~200–500ms. **Prefer UI motion under ~300ms** unless deliberate (e.g. hold-to-delete).
53
+
54
+ ---
55
+
56
+ ## High-signal implementation rules
57
+
58
+ - **Buttons / pressables:** `:active { transform: scale(0.97) }` + short `transition` (e.g. 160ms ease-out).
59
+ - **Popovers:** `transform-origin` at the **trigger** (Radix/Base UI vars). **Modals** stay center-origin.
60
+ - **Don’t enter from `scale(0)`** — use ~0.9–0.95 + opacity.
61
+ - **Tooltips:** initial show delay OK; **subsequent** tooltips instant (no re-delay / no re-animation).
62
+ - **Interruptible UI:** prefer **CSS transitions** over keyframes when state flips fast (toasts, lists).
63
+ - **Performance:** animate **`transform`** and **`opacity`** when possible; avoid animating layout (`width`, `height`, `margin`, `top`).
64
+ - **Framer Motion:** for GPU-friendly motion under load, prefer `transform: "translateX(...)"` over shorthand `x`/`y` when it matters.
65
+ - **Springs:** good for drag, gestures, interruptible motion; keep bounce subtle in serious UI.
66
+ - **`prefers-reduced-motion`:** reduce motion, not every transition — keep helpful fades; drop gratuitous movement.
67
+ - **Touch:** gate hover effects: `@media (hover: hover) and (pointer: fine)`.
68
+
69
+ ---
70
+
71
+ ## Quick review checklist
72
+
73
+ | Issue | Fix |
74
+ | --- | --- |
75
+ | `transition: all` | Specific properties + duration + easing |
76
+ | Entry from `scale(0)` | `scale(0.95)` + `opacity` |
77
+ | `ease-in` on reveal | `ease-out` or custom |
78
+ | Popover origin center | Trigger-based origin (not modals) |
79
+ | Motion on heavy keyboard use | Remove |
80
+ | UI tween > 300ms | Shorten unless intentional |
81
+ | Hover without fine pointer | Add media query |
82
+ | Keyframes on rapid fire | Transitions |
83
+ | Heavy FM `x`/`y` jank | `transform` string |
84
+
85
+ ---
86
+
87
+ ## Guidelines
88
+
89
+ 1. Read the actual component/CSS before judging.
90
+ 2. Prefer **concrete diffs** (props, classes, CSS) in the table.
91
+ 3. Match the **product tone** — playful vs enterprise motion differs.
92
+ 4. Offer to **apply changes** if the user wants.
package/SKILL.md ADDED
@@ -0,0 +1,106 @@
1
+ ---
2
+ name: design-engineering
3
+ description: >-
4
+ UI craft: motion, easing, component feel, and polish (Emil Kowalski–style).
5
+ Use when reviewing or building interfaces, animations, buttons, popovers,
6
+ toasts, drawers, Framer Motion/CSS transitions, or when the user asks for
7
+ design engineering, motion, micro-interactions, or “why does this feel off”.
8
+ argument-hint: "[file-or-component]"
9
+ ---
10
+
11
+ # Design engineering
12
+
13
+ You bring **craft**: interfaces where small details compound. Taste is trained—study great UIs, reverse-engineer motion, ship defaults that feel excellent.
14
+
15
+ **Based on:** [emilkowalski/skill](https://github.com/emilkowalski/skill) (Emil Kowalski). Adapt to this codebase’s tokens and patterns.
16
+
17
+ ---
18
+
19
+ ## Review output (required)
20
+
21
+ For UI reviews, use a **markdown table** — not separate Before/After lines.
22
+
23
+ | Before | After | Why |
24
+ | --- | --- | --- |
25
+ | `transition: all 300ms` | `transition: transform 200ms ease-out` | Avoid `all`; name properties |
26
+ | `transform: scale(0)` | `scale(0.95)` + `opacity: 0` | Nothing pops from literal zero |
27
+ | `ease-in` on dropdown | `ease-out` + custom cubic-bezier | ease-in feels sluggish on open |
28
+
29
+ ---
30
+
31
+ ## Should it animate?
32
+
33
+ | How often users see it | Action |
34
+ | --- | --- |
35
+ | 100+×/day (palette, shortcuts) | **No animation** |
36
+ | Often (hovers, lists) | Minimal or none |
37
+ | Sometimes (modals, drawers, toasts) | Normal motion |
38
+ | Rare / onboarding | Can add delight |
39
+
40
+ **Never animate keyboard-driven toggles** users repeat all day.
41
+
42
+ Every animation needs a purpose: spatial consistency, state change, feedback, or avoiding a jarring cut—not only “looks cool.”
43
+
44
+ ---
45
+
46
+ ## Easing and duration
47
+
48
+ - **Entering/leaving screen:** prefer **ease-out** (responsive first movement).
49
+ - **Moving within screen:** **ease-in-out** with a strong custom curve.
50
+ - **Hover/color:** built-in **`ease`** ~200ms.
51
+ - **Never ease-in** for “UI opens” — it delays what the user is watching.
52
+
53
+ Use custom curves (built-ins are often weak), e.g.:
54
+
55
+ ```css
56
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
57
+ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
58
+ ```
59
+
60
+ **Durations (guideline):** press feedback ~100–160ms; tooltips/small popovers ~125–200ms; menus ~150–250ms; modals/drawers ~200–500ms. **Prefer UI motion under ~300ms** unless deliberate (e.g. hold-to-delete).
61
+
62
+ ---
63
+
64
+ ## High-signal implementation rules
65
+
66
+ - **Buttons / pressables:** `:active { transform: scale(0.97) }` + short `transition` (e.g. 160ms ease-out).
67
+ - **Popovers:** `transform-origin` at the **trigger** (Radix/Base UI vars). **Modals** stay center-origin.
68
+ - **Don’t enter from `scale(0)`** — use ~0.9–0.95 + opacity.
69
+ - **Tooltips:** initial show delay OK; **subsequent** tooltips instant (no re-delay / no re-animation).
70
+ - **Interruptible UI:** prefer **CSS transitions** over keyframes when state flips fast (toasts, lists).
71
+ - **Performance:** animate **`transform`** and **`opacity`** when possible; avoid animating layout (`width`, `height`, `margin`, `top`).
72
+ - **Framer Motion:** for GPU-friendly motion under load, prefer `transform: "translateX(...)"` over shorthand `x`/`y` when it matters.
73
+ - **Springs:** good for drag, gestures, interruptible motion; keep bounce subtle in serious UI.
74
+ - **`prefers-reduced-motion`:** reduce motion, not every transition — keep helpful fades; drop gratuitous movement.
75
+ - **Touch:** gate hover effects: `@media (hover: hover) and (pointer: fine)`.
76
+
77
+ ---
78
+
79
+ ## Quick review checklist
80
+
81
+ | Issue | Fix |
82
+ | --- | --- |
83
+ | `transition: all` | Specific properties + duration + easing |
84
+ | Entry from `scale(0)` | `scale(0.95)` + `opacity` |
85
+ | `ease-in` on reveal | `ease-out` or custom |
86
+ | Popover origin center | Trigger-based origin (not modals) |
87
+ | Motion on heavy keyboard use | Remove |
88
+ | UI tween > 300ms | Shorten unless intentional |
89
+ | Hover without fine pointer | Add media query |
90
+ | Keyframes on rapid fire | Transitions |
91
+ | Heavy FM `x`/`y` jank | `transform` string |
92
+
93
+ ---
94
+
95
+ ## Guidelines
96
+
97
+ 1. Read the actual component/CSS before judging.
98
+ 2. Prefer **concrete diffs** (props, classes, CSS) in the table.
99
+ 3. Match the **product tone** — playful vs enterprise motion differs.
100
+ 4. Offer to **apply changes** if the user wants.
101
+
102
+ ---
103
+
104
+ ## Lovable
105
+
106
+ Copy-paste pack: [`LOVABLE.md`](LOVABLE.md).
package/package.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "name": "@its-thepoe/design-engineering",
3
+ "version": "1.0.0",
4
+ "description": "Agent Skill: UI craft — motion, easing, component feel, polish (design engineering).",
5
+ "license": "MIT",
6
+ "keywords": ["agent-skills", "design-engineering", "motion", "ui", "cursor"],
7
+ "files": ["SKILL.md", "LOVABLE.md", "package.json"],
8
+ "exports": {
9
+ ".": "./SKILL.md",
10
+ "./SKILL.md": "./SKILL.md",
11
+ "./LOVABLE.md": "./LOVABLE.md"
12
+ }
13
+ }