@bacnh85/pi-ux 0.4.2 → 0.4.4

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 CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.4.4
4
+
5
+ - Patch version bump for release sync and package documentation update.
6
+
7
+ ## 0.4.3
8
+
9
+ - **Named styles via the design.md library.** `ux-presets` now documents a
10
+ reuse path for named aesthetics (Claymorphism, Brutalism, Bento, Art Deco, …):
11
+ fetch the canonical `DESIGN.md` from the [design.md style library](https://designmd.app/library),
12
+ `npx @google/design.md lint` it, then `ux_audit` — block handoff on fail. No
13
+ style is pre-approved: the stock Claymorphism template ships a button that
14
+ fails `ux_audit` at **Lc −15.67** (lilac `#E6E6FA` on peach `#FDBCB4`),
15
+ corrected to ink-on-peach (Lc 75.72 ✓). Glassmorphism and neumorphism remain
16
+ banned slop tells regardless of library entry.
17
+ - Step 2 of "How to use with ux-design" names the library path alongside
18
+ shadcn/Material/Radix as reuse-before-invent options.
19
+
3
20
  ## 0.4.2
4
21
 
5
22
  - **Review fixes** (7 findings, all pinned with regression tests):
package/README.md CHANGED
@@ -11,7 +11,7 @@ AI-generated UI converges on the same defaults — purple/indigo glow, shadow-he
11
11
  ## Install
12
12
 
13
13
  ```bash
14
- npm install @bacnh85/pi-ux
14
+ pi install npm:@bacnh85/pi-ux
15
15
  ```
16
16
 
17
17
  Pi auto-discovers the extension and skill.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bacnh85/pi-ux",
3
- "version": "0.4.2",
3
+ "version": "0.4.4",
4
4
  "description": "Anti-slop UI/UX design discipline for your Pi agent — anchors a lintable DESIGN.md, runs deterministic slop-audit gates (APCA contrast + tokens + states + slop tells), works with text-only models, ships reference design-system presets.",
5
5
  "keywords": [
6
6
  "pi-package",
@@ -12,6 +12,7 @@
12
12
  "skills"
13
13
  ],
14
14
  "license": "MIT",
15
+ "homepage": "https://github.com/bacnh85/pi-extensions/tree/main/pi-ux",
15
16
  "repository": {
16
17
  "type": "git",
17
18
  "url": "git+https://github.com/bacnh85/pi-extensions.git"
@@ -33,6 +33,26 @@ These already define tokens, 3–5 elevation levels, and full state contracts
33
33
  which is exactly what the anti-slop guardrail demands. **Reusing beats
34
34
  redefining.** YAGNI applies to design systems too.
35
35
 
36
+ ### Named styles (Claymorphism, Brutalism, Bento, Art Deco, …)
37
+
38
+ When the brief calls for a *named aesthetic* (a kids app wants Claymorphism;
39
+ an agency site wants Brutalism), **do not invent one and do not hand-copy a
40
+ template blindly.** Pull the canonical, lintable `DESIGN.md` from the
41
+ **[design.md style library](https://designmd.app/library)** (30+ styles,
42
+ same `DESIGN.md` standard this skill uses) and run it through the gate:
43
+
44
+ 1. Fetch the style's `DESIGN.md` from `designmd.app/library/<style>`.
45
+ 2. `npx @google/design.md lint DESIGN.md` (token-ref + structure validation).
46
+ 3. `ux_audit` on the CSS + the style's common text pairs — **block handoff on fail.**
47
+
48
+ > **No style is pre-approved.** Named-style templates are aesthetic
49
+ > starting points, not vetted systems. The stock **Claymorphism** template
50
+ > ships a button in lilac (`#E6E6FA`) text on peach (`#FDBCB4`) — that pair
51
+ > fails `ux_audit` at **Lc −15.67** (WCAG 1.31:1). Correct it to ink-on-peach
52
+ > (Lc 75.72 ✓) before trusting it. The gate, not the template, makes a style
53
+ > non-slop. Note: glassmorphism and neumorphism are **banned** slop tells
54
+ > here regardless of any library entry.
55
+
36
56
  ## Option B — medium-tuned DESIGN.md starters (lintable, drop-in)
37
57
 
38
58
  When there's nothing to reuse AND no repo-root DESIGN.md, pick the starter
@@ -309,7 +329,7 @@ into the project's `:root`. It satisfies the token + elevation + state gates of
309
329
  ## How to use with ux-design
310
330
 
311
331
  1. Run **Step 0** of ux-design. If the project already has a DESIGN.md / tokens / elevation / states → use them.
312
- 2. If not, pick **Option A** (reuse shadcn/Material/Radix) first the lazy, correct path when the stack matches.
332
+ 2. If not, pick **Option A** reuse an installed system (shadcn/Material/Radix) when the stack matches, OR pull a named style (Claymorphism, Brutalism, …) from the design.md library. Both reuse-before-invent; both still must pass `ux_audit`.
313
333
  3. Otherwise pick **Option B** — infer the medium (Web B1 vs Mobile B2) from the task, use the starter in-context as the implicit system, and keep generating. Only ASK if web-vs-mobile is unclear.
314
334
  4. Only for CSS-only projects that won't adopt DESIGN.md, use **Option C** (`:root` block).
315
335
  5. Generate screens with any text-only model (DeepSeek-v4 / GLM-5.2 / Kimi K3) INSIDE these constraints.