niahere 0.2.61 → 0.2.62

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 (170) hide show
  1. package/defaults/memory-promoter.md +99 -0
  2. package/defaults/self/staging.md +48 -0
  3. package/package.json +1 -1
  4. package/skills/code-review/pr-review.md +14 -1
  5. package/skills/cro/page.md +22 -0
  6. package/skills/frontend-design/SKILL.md +7 -3
  7. package/skills/frontend-design/building.md +17 -2
  8. package/skills/qa/SKILL.md +108 -72
  9. package/skills/userinterface-wiki/AGENTS.md +3749 -0
  10. package/skills/userinterface-wiki/SKILL.md +253 -0
  11. package/skills/userinterface-wiki/metadata.json +26 -0
  12. package/skills/userinterface-wiki/rules/_sections.md +66 -0
  13. package/skills/userinterface-wiki/rules/_template.md +24 -0
  14. package/skills/userinterface-wiki/rules/a11y-reduced-motion-check.md +30 -0
  15. package/skills/userinterface-wiki/rules/a11y-toggle-setting.md +30 -0
  16. package/skills/userinterface-wiki/rules/a11y-visual-equivalent.md +36 -0
  17. package/skills/userinterface-wiki/rules/a11y-volume-control.md +28 -0
  18. package/skills/userinterface-wiki/rules/appropriate-confirmations-only.md +19 -0
  19. package/skills/userinterface-wiki/rules/appropriate-errors-warnings.md +18 -0
  20. package/skills/userinterface-wiki/rules/appropriate-no-decorative.md +21 -0
  21. package/skills/userinterface-wiki/rules/appropriate-no-high-frequency.md +28 -0
  22. package/skills/userinterface-wiki/rules/appropriate-no-punishing.md +27 -0
  23. package/skills/userinterface-wiki/rules/container-callback-ref.md +31 -0
  24. package/skills/userinterface-wiki/rules/container-guard-initial-zero.md +25 -0
  25. package/skills/userinterface-wiki/rules/container-no-excessive-use.md +13 -0
  26. package/skills/userinterface-wiki/rules/container-overflow-hidden.md +25 -0
  27. package/skills/userinterface-wiki/rules/container-transition-delay.md +21 -0
  28. package/skills/userinterface-wiki/rules/container-two-div-pattern.md +35 -0
  29. package/skills/userinterface-wiki/rules/container-use-resize-observer.md +48 -0
  30. package/skills/userinterface-wiki/rules/context-cleanup-nodes.md +25 -0
  31. package/skills/userinterface-wiki/rules/context-resume-suspended.md +28 -0
  32. package/skills/userinterface-wiki/rules/context-reuse-single.md +30 -0
  33. package/skills/userinterface-wiki/rules/design-filter-for-character.md +25 -0
  34. package/skills/userinterface-wiki/rules/design-noise-for-percussion.md +26 -0
  35. package/skills/userinterface-wiki/rules/design-oscillator-for-tonal.md +22 -0
  36. package/skills/userinterface-wiki/rules/duration-max-300ms.md +21 -0
  37. package/skills/userinterface-wiki/rules/duration-press-hover.md +21 -0
  38. package/skills/userinterface-wiki/rules/duration-shorten-before-curve.md +21 -0
  39. package/skills/userinterface-wiki/rules/duration-small-state.md +15 -0
  40. package/skills/userinterface-wiki/rules/easing-entrance-ease-out.md +21 -0
  41. package/skills/userinterface-wiki/rules/easing-exit-ease-in.md +21 -0
  42. package/skills/userinterface-wiki/rules/easing-for-state-change.md +27 -0
  43. package/skills/userinterface-wiki/rules/easing-linear-only-progress.md +21 -0
  44. package/skills/userinterface-wiki/rules/easing-natural-decay.md +22 -0
  45. package/skills/userinterface-wiki/rules/easing-no-linear-motion.md +22 -0
  46. package/skills/userinterface-wiki/rules/easing-transition-ease-in-out.md +15 -0
  47. package/skills/userinterface-wiki/rules/envelope-exponential-decay.md +21 -0
  48. package/skills/userinterface-wiki/rules/envelope-no-zero-target.md +21 -0
  49. package/skills/userinterface-wiki/rules/envelope-set-initial-value.md +22 -0
  50. package/skills/userinterface-wiki/rules/exit-key-required.md +29 -0
  51. package/skills/userinterface-wiki/rules/exit-matches-initial.md +29 -0
  52. package/skills/userinterface-wiki/rules/exit-prop-required.md +33 -0
  53. package/skills/userinterface-wiki/rules/exit-requires-wrapper.md +27 -0
  54. package/skills/userinterface-wiki/rules/impl-default-subtle.md +21 -0
  55. package/skills/userinterface-wiki/rules/impl-preload-audio.md +34 -0
  56. package/skills/userinterface-wiki/rules/impl-reset-current-time.md +26 -0
  57. package/skills/userinterface-wiki/rules/mode-pop-layout-for-lists.md +25 -0
  58. package/skills/userinterface-wiki/rules/mode-sync-layout-conflict.md +29 -0
  59. package/skills/userinterface-wiki/rules/mode-wait-doubles-duration.md +25 -0
  60. package/skills/userinterface-wiki/rules/morphing-aria-hidden.md +21 -0
  61. package/skills/userinterface-wiki/rules/morphing-consistent-viewbox.md +23 -0
  62. package/skills/userinterface-wiki/rules/morphing-group-variants.md +33 -0
  63. package/skills/userinterface-wiki/rules/morphing-jump-non-grouped.md +29 -0
  64. package/skills/userinterface-wiki/rules/morphing-reduced-motion.md +28 -0
  65. package/skills/userinterface-wiki/rules/morphing-spring-rotation.md +23 -0
  66. package/skills/userinterface-wiki/rules/morphing-strokelinecap-round.md +21 -0
  67. package/skills/userinterface-wiki/rules/morphing-three-lines.md +32 -0
  68. package/skills/userinterface-wiki/rules/morphing-use-collapsed.md +33 -0
  69. package/skills/userinterface-wiki/rules/native-backdrop-styling.md +27 -0
  70. package/skills/userinterface-wiki/rules/native-placeholder-styling.md +27 -0
  71. package/skills/userinterface-wiki/rules/native-selection-styling.md +18 -0
  72. package/skills/userinterface-wiki/rules/nested-consistent-timing.md +25 -0
  73. package/skills/userinterface-wiki/rules/nested-propagate-required.md +41 -0
  74. package/skills/userinterface-wiki/rules/none-context-menu-entrance.md +25 -0
  75. package/skills/userinterface-wiki/rules/none-high-frequency.md +29 -0
  76. package/skills/userinterface-wiki/rules/none-keyboard-navigation.md +32 -0
  77. package/skills/userinterface-wiki/rules/param-click-duration.md +21 -0
  78. package/skills/userinterface-wiki/rules/param-filter-frequency-range.md +21 -0
  79. package/skills/userinterface-wiki/rules/param-q-value-range.md +21 -0
  80. package/skills/userinterface-wiki/rules/param-reasonable-gain.md +21 -0
  81. package/skills/userinterface-wiki/rules/physics-active-state.md +23 -0
  82. package/skills/userinterface-wiki/rules/physics-no-excessive-stagger.md +22 -0
  83. package/skills/userinterface-wiki/rules/physics-spring-for-overshoot.md +23 -0
  84. package/skills/userinterface-wiki/rules/physics-subtle-deformation.md +22 -0
  85. package/skills/userinterface-wiki/rules/prefetch-hit-slop.md +27 -0
  86. package/skills/userinterface-wiki/rules/prefetch-keyboard-tab.md +19 -0
  87. package/skills/userinterface-wiki/rules/prefetch-not-everything.md +22 -0
  88. package/skills/userinterface-wiki/rules/prefetch-touch-fallback.md +34 -0
  89. package/skills/userinterface-wiki/rules/prefetch-trajectory-over-hover.md +32 -0
  90. package/skills/userinterface-wiki/rules/prefetch-use-selectively.md +13 -0
  91. package/skills/userinterface-wiki/rules/presence-disable-interactions.md +31 -0
  92. package/skills/userinterface-wiki/rules/presence-hook-in-child.md +31 -0
  93. package/skills/userinterface-wiki/rules/presence-safe-to-remove.md +37 -0
  94. package/skills/userinterface-wiki/rules/pseudo-content-required.md +28 -0
  95. package/skills/userinterface-wiki/rules/pseudo-first-line-styling.md +27 -0
  96. package/skills/userinterface-wiki/rules/pseudo-hit-target-expansion.md +31 -0
  97. package/skills/userinterface-wiki/rules/pseudo-marker-styling.md +28 -0
  98. package/skills/userinterface-wiki/rules/pseudo-over-dom-node.md +32 -0
  99. package/skills/userinterface-wiki/rules/pseudo-position-relative-parent.md +33 -0
  100. package/skills/userinterface-wiki/rules/pseudo-z-index-layering.md +37 -0
  101. package/skills/userinterface-wiki/rules/spring-for-gestures.md +27 -0
  102. package/skills/userinterface-wiki/rules/spring-for-interruptible.md +27 -0
  103. package/skills/userinterface-wiki/rules/spring-params-balanced.md +29 -0
  104. package/skills/userinterface-wiki/rules/spring-preserves-velocity.md +28 -0
  105. package/skills/userinterface-wiki/rules/staging-dim-background.md +22 -0
  106. package/skills/userinterface-wiki/rules/staging-one-focal-point.md +24 -0
  107. package/skills/userinterface-wiki/rules/staging-z-index-hierarchy.md +22 -0
  108. package/skills/userinterface-wiki/rules/timing-consistent.md +24 -0
  109. package/skills/userinterface-wiki/rules/timing-no-entrance-context-menu.md +22 -0
  110. package/skills/userinterface-wiki/rules/timing-under-300ms.md +22 -0
  111. package/skills/userinterface-wiki/rules/transition-name-cleanup.md +28 -0
  112. package/skills/userinterface-wiki/rules/transition-name-required.md +27 -0
  113. package/skills/userinterface-wiki/rules/transition-name-unique.md +24 -0
  114. package/skills/userinterface-wiki/rules/transition-over-js-library.md +32 -0
  115. package/skills/userinterface-wiki/rules/transition-style-pseudo-elements.md +24 -0
  116. package/skills/userinterface-wiki/rules/type-antialiased-on-retina.md +18 -0
  117. package/skills/userinterface-wiki/rules/type-disambiguation-stylistic-set.md +15 -0
  118. package/skills/userinterface-wiki/rules/type-font-display-swap.md +28 -0
  119. package/skills/userinterface-wiki/rules/type-justify-with-hyphens.md +24 -0
  120. package/skills/userinterface-wiki/rules/type-letter-spacing-uppercase.md +28 -0
  121. package/skills/userinterface-wiki/rules/type-no-font-synthesis.md +18 -0
  122. package/skills/userinterface-wiki/rules/type-oldstyle-nums-for-prose.md +21 -0
  123. package/skills/userinterface-wiki/rules/type-opentype-contextual-alternates.md +15 -0
  124. package/skills/userinterface-wiki/rules/type-optical-sizing-auto.md +25 -0
  125. package/skills/userinterface-wiki/rules/type-proper-fractions.md +15 -0
  126. package/skills/userinterface-wiki/rules/type-slashed-zero.md +17 -0
  127. package/skills/userinterface-wiki/rules/type-tabular-nums-for-data.md +21 -0
  128. package/skills/userinterface-wiki/rules/type-text-wrap-balance-headings.md +21 -0
  129. package/skills/userinterface-wiki/rules/type-text-wrap-pretty.md +16 -0
  130. package/skills/userinterface-wiki/rules/type-underline-offset.md +25 -0
  131. package/skills/userinterface-wiki/rules/type-variable-weight-continuous.md +23 -0
  132. package/skills/userinterface-wiki/rules/ux-aesthetic-usability.md +32 -0
  133. package/skills/userinterface-wiki/rules/ux-cognitive-load-reduce.md +49 -0
  134. package/skills/userinterface-wiki/rules/ux-common-region-boundaries.md +50 -0
  135. package/skills/userinterface-wiki/rules/ux-doherty-perceived-speed.md +29 -0
  136. package/skills/userinterface-wiki/rules/ux-doherty-under-400ms.md +30 -0
  137. package/skills/userinterface-wiki/rules/ux-fitts-hit-area.md +32 -0
  138. package/skills/userinterface-wiki/rules/ux-fitts-target-size.md +31 -0
  139. package/skills/userinterface-wiki/rules/ux-goal-gradient-progress.md +33 -0
  140. package/skills/userinterface-wiki/rules/ux-hicks-minimize-choices.md +45 -0
  141. package/skills/userinterface-wiki/rules/ux-jakobs-familiar-patterns.md +37 -0
  142. package/skills/userinterface-wiki/rules/ux-millers-chunking.md +23 -0
  143. package/skills/userinterface-wiki/rules/ux-pareto-prioritize-features.md +36 -0
  144. package/skills/userinterface-wiki/rules/ux-peak-end-finish-strong.md +35 -0
  145. package/skills/userinterface-wiki/rules/ux-postels-accept-messy-input.md +45 -0
  146. package/skills/userinterface-wiki/rules/ux-pragnanz-simplify.md +33 -0
  147. package/skills/userinterface-wiki/rules/ux-progressive-disclosure.md +41 -0
  148. package/skills/userinterface-wiki/rules/ux-proximity-grouping.md +38 -0
  149. package/skills/userinterface-wiki/rules/ux-serial-position.md +31 -0
  150. package/skills/userinterface-wiki/rules/ux-similarity-consistency.md +35 -0
  151. package/skills/userinterface-wiki/rules/ux-teslers-complexity.md +28 -0
  152. package/skills/userinterface-wiki/rules/ux-uniform-connectedness.md +43 -0
  153. package/skills/userinterface-wiki/rules/ux-von-restorff-emphasis.md +29 -0
  154. package/skills/userinterface-wiki/rules/ux-zeigarnik-show-incomplete.md +36 -0
  155. package/skills/userinterface-wiki/rules/visual-animate-shadow-pseudo.md +49 -0
  156. package/skills/userinterface-wiki/rules/visual-border-alpha-colors.md +25 -0
  157. package/skills/userinterface-wiki/rules/visual-button-shadow-anatomy.md +49 -0
  158. package/skills/userinterface-wiki/rules/visual-concentric-radius.md +40 -0
  159. package/skills/userinterface-wiki/rules/visual-consistent-spacing-scale.md +35 -0
  160. package/skills/userinterface-wiki/rules/visual-layered-shadows.md +30 -0
  161. package/skills/userinterface-wiki/rules/visual-no-pure-black-shadow.md +25 -0
  162. package/skills/userinterface-wiki/rules/visual-shadow-direction.md +25 -0
  163. package/skills/userinterface-wiki/rules/visual-shadow-matches-elevation.md +23 -0
  164. package/skills/userinterface-wiki/rules/weight-duration-matches-action.md +29 -0
  165. package/skills/userinterface-wiki/rules/weight-match-action.md +32 -0
  166. package/src/commands/init.ts +1 -0
  167. package/src/commands/validate.ts +12 -10
  168. package/src/core/consolidator.ts +106 -86
  169. package/src/core/daemon.ts +67 -2
  170. package/src/core/runner.ts +13 -43
@@ -0,0 +1,99 @@
1
+ You are the memory promoter. You run nightly at 3am.
2
+
3
+ Your job is to review the memory staging log and decide which candidates
4
+ deserve promotion to durable memory. You are stage 2 of a two-stage memory
5
+ architecture — the consolidator writes candidates to staging.md after each
6
+ chat session; you review them and either promote, reject, or leave for
7
+ another week.
8
+
9
+ ## Step 1 — Read all memory files
10
+
11
+ Read these in full:
12
+
13
+ - `~/.niahere/self/staging.md` — the candidate log you will work on
14
+ - `~/.niahere/self/memory.md` — existing durable facts (avoid duplicates)
15
+ - `~/.niahere/self/rules.md` — existing behavioral rules (avoid duplicates)
16
+
17
+ The staging.md header documents the entry format:
18
+ `- [count×] [type] content :: first_seen → last_seen`
19
+
20
+ ## Step 2 — Reap expired candidates
21
+
22
+ First pass: remove junk that never recurred.
23
+
24
+ Delete any entry where ALL of these are true:
25
+
26
+ - `count == 1`
27
+ - `last_seen` is more than 14 days before today
28
+ - (i.e. it appeared once, no one confirmed it, and the TTL passed)
29
+
30
+ ## Step 3 — Review reinforced candidates
31
+
32
+ For each entry with `count >= 2`, decide ONE of: PROMOTE / REJECT / WAIT.
33
+
34
+ ### PROMOTE — requires ALL of these:
35
+
36
+ - **Durability**: would this still matter in 30+ days?
37
+ - **Day-1 test**: would a fresh copy of nia starting tomorrow benefit from
38
+ knowing this on day 1 of its first session?
39
+ - **Category fit**: type is exactly one of: `persona | project | reference | correction`
40
+ - **Not already durable**: no matching entry in `memory.md` or `rules.md`
41
+ - **Not derivable**: cannot be reconstructed by reading the codebase, git
42
+ log, config files, or live system state
43
+
44
+ ### REJECT — if ANY of these:
45
+
46
+ - Transient state ("currently working on X", "today's task")
47
+ - Single-session noise dressed up as a pattern
48
+ - Status dump, error log, or command output masquerading as a memory
49
+ - Already covered by an existing `memory.md` or `rules.md` entry
50
+ - Derivable from code, config, or git history
51
+ - Type is not one of the four allowed types
52
+
53
+ ### WAIT — only if:
54
+
55
+ - Genuinely uncertain AND entry age < 7 days
56
+ - Give it another week to see if it gets reinforced further
57
+
58
+ Default for uncertain cases older than 7 days: REJECT. Promotion is a
59
+ one-way door into every future session — be conservative.
60
+
61
+ ## Step 4 — Apply decisions
62
+
63
+ For each PROMOTE decision, rewrite the candidate as a concise, dated line
64
+ (≤200 chars) and append to the correct file:
65
+
66
+ - `type == correction` → append to `~/.niahere/self/rules.md` (under a
67
+ "## Promoted YYYY-MM-DD" section you create if missing)
68
+ - `type in (persona, project, reference)` → append to `~/.niahere/self/memory.md`
69
+ (under a "## Promoted YYYY-MM-DD" section you create if missing)
70
+
71
+ Then remove the promoted line from `staging.md`.
72
+
73
+ For each REJECT decision, remove the line from `staging.md`. You do not
74
+ need to record rejections — they are the default and shouldn't clutter the
75
+ log. If you reject a lot of entries from one source, that's a signal the
76
+ consolidator prompt may need tightening — mention it in your summary.
77
+
78
+ For each WAIT decision, leave the line in `staging.md` unchanged.
79
+
80
+ ## Step 5 — Report
81
+
82
+ Print exactly one summary line in this format:
83
+
84
+ `memory-promoter: reaped N / promoted M / rejected K / waiting W`
85
+
86
+ No preamble, no prose. If something looked off (e.g. many rejections from
87
+ one source, a candidate that seemed important but failed the day-1 test),
88
+ add one additional line after the summary — keep it brief.
89
+
90
+ ## Hard rules
91
+
92
+ - Never invent memories. Only promote what is literally in `staging.md`.
93
+ - Never touch `memory.md` or `rules.md` except to APPEND a promoted line.
94
+ Do not reorder, rewrite, or edit existing entries.
95
+ - Never promote an entry with `count < 2`. The reinforcement gate is
96
+ non-negotiable.
97
+ - Do not message the user. This is a silent background job.
98
+ - If `staging.md` is empty or contains only the header, report
99
+ `memory-promoter: staging empty` and exit.
@@ -0,0 +1,48 @@
1
+ # Memory Staging
2
+
3
+ Candidate memories waiting for reinforcement before promotion to `memory.md`.
4
+ Auto-managed by the consolidator (which writes candidates after chat sessions)
5
+ and the nightly `memory-promoter` job (which reviews and promotes).
6
+
7
+ ## How it works
8
+
9
+ - The consolidator appends candidates here after chat sessions — one line per
10
+ candidate, tagged with a type and a count.
11
+ - If a candidate is observed in another session, the consolidator bumps its
12
+ count instead of adding a duplicate.
13
+ - The `memory-promoter` job runs nightly at 3am. It promotes candidates with
14
+ `count >= 2` that pass durability review to `memory.md` (or `rules.md` for
15
+ behavioral corrections), and reaps entries older than 14 days that never
16
+ reached count 2.
17
+
18
+ ## Entry format
19
+
20
+ ```
21
+ - [count×] [type] content :: first_seen → last_seen
22
+ ```
23
+
24
+ - `count` — how many distinct sessions this was observed in
25
+ - `type` — one of: `persona | project | reference | correction`
26
+ - `content` — the candidate memory, one concise line
27
+ - `first_seen` / `last_seen` — ISO dates (YYYY-MM-DD)
28
+
29
+ ## Types
30
+
31
+ | Type | What | Promotes to |
32
+ | ------------ | ------------------------------------------------------------ | ----------- |
33
+ | `persona` | Facts about the owner — role, habits, preferences, schedule | `memory.md` |
34
+ | `project` | Active work decisions, architecture, stakeholders, deadlines | `memory.md` |
35
+ | `reference` | Pointers to external systems (dashboards, repos, channels) | `memory.md` |
36
+ | `correction` | Behavioral preferences the user wants changed | `rules.md` |
37
+
38
+ Anything that doesn't fit these four is not a durable memory — don't stage it.
39
+
40
+ ## Rules
41
+
42
+ - Do not edit by hand — use the consolidator/promoter flow.
43
+ - Entries need `count >= 2` to be eligible for promotion.
44
+ - Entries with `count < 2` expire after 14 days of no reinforcement.
45
+ - The consolidator writes ONLY to this file — never directly to `memory.md`
46
+ or `rules.md`. Only the promoter can write to the durable files.
47
+
48
+ ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "niahere",
3
- "version": "0.2.61",
3
+ "version": "0.2.62",
4
4
  "description": "A personal AI assistant daemon — chat, scheduled jobs, persona system, extensible via skills.",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -12,6 +12,7 @@ Before looking at any code, read these files if they exist:
12
12
  - `CONTRIBUTING.md` — contribution guidelines
13
13
 
14
14
  From these, extract:
15
+
15
16
  - **Language & framework** (TypeScript/Bun, Python/Django, Rust, Go, etc.)
16
17
  - **Code style rules** (naming, imports, formatting)
17
18
  - **Testing expectations** (unit, integration, what framework)
@@ -62,24 +63,28 @@ Run these passes in order. Each pass focuses on one concern — don't mix them.
62
63
  Adapt to the project's language. Apply that language's conventions:
63
64
 
64
65
  **TypeScript/JavaScript:**
66
+
65
67
  - Proper typing (no unnecessary `any`, correct generics, discriminated unions)
66
68
  - Async/await over raw promises, proper error propagation
67
69
  - Immutability preferences, const over let
68
70
  - Node.js/Bun API usage (streams, buffers, path handling)
69
71
 
70
72
  **Python:**
73
+
71
74
  - PEP 8, Pythonic idioms (comprehensions, context managers, generators)
72
75
  - Type hints where the project uses them
73
76
  - Proper exception hierarchy, avoid bare `except:`
74
77
  - f-strings over `.format()` or `%`
75
78
 
76
79
  **Go:**
80
+
77
81
  - Error handling patterns (check errors, don't ignore)
78
82
  - Naming conventions (exported vs unexported, receiver names)
79
83
  - Goroutine safety, channel usage, context propagation
80
84
  - Avoid unnecessary interfaces
81
85
 
82
86
  **Rust:**
87
+
83
88
  - Ownership and borrowing correctness
84
89
  - Error handling (`Result`/`Option`, avoid `.unwrap()` in library code)
85
90
  - Clippy-clean idioms, iterator chains over manual loops
@@ -87,6 +92,8 @@ Adapt to the project's language. Apply that language's conventions:
87
92
 
88
93
  **Other languages:** Apply equivalent idiomatic standards. When unsure, check what the existing codebase does.
89
94
 
95
+ **Frontend/UI diffs:** When the PR touches animations, CSS, components, icons, typography, or anything user-facing, also review against the rules in the [userinterface-wiki](../userinterface-wiki/SKILL.md) skill (e.g. `timing-under-300ms`, `easing-entrance-ease-out`, `ux-fitts-target-size`, `visual-concentric-radius`, `type-tabular-nums-for-data`). Cite specific rule IDs in findings so the author can look them up at `../userinterface-wiki/rules/<rule-id>.md`.
96
+
90
97
  ### Pass 4: Security
91
98
 
92
99
  - Input validation at system boundaries (user input, API payloads, file uploads)
@@ -117,7 +124,7 @@ Adapt to the project's language. Apply that language's conventions:
117
124
  ### Pass 7: Documentation & Naming
118
125
 
119
126
  - Are names self-documenting? (variables, functions, types)
120
- - Complex logic has comments explaining *why*, not *what*
127
+ - Complex logic has comments explaining _why_, not _what_
121
128
  - Public APIs have documentation
122
129
  - Misleading names or outdated comments
123
130
  - Breaking changes documented
@@ -130,24 +137,30 @@ Structure the review as:
130
137
  ## PR Review: <title or summary>
131
138
 
132
139
  ### Summary
140
+
133
141
  <1-2 sentences on what the PR does and overall assessment>
134
142
 
135
143
  ### Critical (must fix)
144
+
136
145
  - **[file:line]** Description of the issue
137
146
  - Why it matters
138
147
  - Suggested fix
139
148
 
140
149
  ### Important (should fix)
150
+
141
151
  - **[file:line]** Description
142
152
 
143
153
  ### Suggestions (nice to have)
154
+
144
155
  - **[file:line]** Description
145
156
 
146
157
  ### Positive
158
+
147
159
  - Call out good patterns, clean abstractions, solid test coverage
148
160
  ```
149
161
 
150
162
  **Severity guide:**
163
+
151
164
  - **Critical:** Bugs, security issues, data loss risks, broken functionality
152
165
  - **Important:** Design issues, missing tests, performance problems, convention violations
153
166
  - **Suggestions:** Style improvements, alternative approaches, minor cleanups
@@ -19,11 +19,13 @@ Analyze the page across these dimensions, in order of impact:
19
19
  ### 1. Value Proposition Clarity (Highest Impact)
20
20
 
21
21
  **Check for:**
22
+
22
23
  - Can a visitor understand what this is and why they should care within 5 seconds?
23
24
  - Is the primary benefit clear, specific, and differentiated?
24
25
  - Is it written in the customer's language (not company jargon)?
25
26
 
26
27
  **Common issues:**
28
+
27
29
  - Feature-focused instead of benefit-focused
28
30
  - Too vague or too clever (sacrificing clarity)
29
31
  - Trying to say everything instead of the most important thing
@@ -31,11 +33,13 @@ Analyze the page across these dimensions, in order of impact:
31
33
  ### 2. Headline Effectiveness
32
34
 
33
35
  **Evaluate:**
36
+
34
37
  - Does it communicate the core value proposition?
35
38
  - Is it specific enough to be meaningful?
36
39
  - Does it match the traffic source's messaging?
37
40
 
38
41
  **Strong headline patterns:**
42
+
39
43
  - Outcome-focused: "Get [desired outcome] without [pain point]"
40
44
  - Specificity: Include numbers, timeframes, or concrete details
41
45
  - Social proof: "Join 10,000+ teams who..."
@@ -43,6 +47,7 @@ Analyze the page across these dimensions, in order of impact:
43
47
  ### 3. CTA Placement, Copy, and Hierarchy
44
48
 
45
49
  **Primary CTA assessment:**
50
+
46
51
  - Is there one clear primary action?
47
52
  - Is it visible without scrolling?
48
53
  - Does the button copy communicate value, not just action?
@@ -50,20 +55,25 @@ Analyze the page across these dimensions, in order of impact:
50
55
  - Strong: "Start Free Trial," "Get My Report," "See Pricing"
51
56
 
52
57
  **CTA hierarchy:**
58
+
53
59
  - Is there a logical primary vs. secondary CTA structure?
54
60
  - Are CTAs repeated at key decision points?
55
61
 
56
62
  ### 4. Visual Hierarchy and Scannability
57
63
 
58
64
  **Check:**
65
+
59
66
  - Can someone scanning get the main message?
60
67
  - Are the most important elements visually prominent?
61
68
  - Is there enough white space?
62
69
  - Do images support or distract from the message?
63
70
 
71
+ **Concrete UI rules for this section:** Load the [userinterface-wiki](../userinterface-wiki/SKILL.md) skill for rule-level guidance — especially `ux-fitts-target-size` (CTA size), `ux-hicks-minimize-choices` (page choice load), `ux-millers-chunking` (scannable groups of 5-9), `ux-von-restorff-emphasis` (making the primary CTA stand out), `ux-serial-position` (hero and footer placement), `ux-aesthetic-usability` (polish drives perceived trust), and `ux-peak-end-finish-strong` (close with clear success state). Cite rule IDs when pointing out specific page problems.
72
+
64
73
  ### 5. Trust Signals and Social Proof
65
74
 
66
75
  **Types to look for:**
76
+
67
77
  - Customer logos (especially recognizable ones)
68
78
  - Testimonials (specific, attributed, with photos)
69
79
  - Case study snippets with real numbers
@@ -75,6 +85,7 @@ Analyze the page across these dimensions, in order of impact:
75
85
  ### 6. Objection Handling
76
86
 
77
87
  **Common objections to address:**
88
+
78
89
  - Price/value concerns
79
90
  - "Will this work for my situation?"
80
91
  - Implementation difficulty
@@ -85,6 +96,7 @@ Analyze the page across these dimensions, in order of impact:
85
96
  ### 7. Friction Points
86
97
 
87
98
  **Look for:**
99
+
88
100
  - Too many form fields
89
101
  - Unclear next steps
90
102
  - Confusing navigation
@@ -99,15 +111,19 @@ Analyze the page across these dimensions, in order of impact:
99
111
  Structure your recommendations as:
100
112
 
101
113
  ### Quick Wins (Implement Now)
114
+
102
115
  Easy changes with likely immediate impact.
103
116
 
104
117
  ### High-Impact Changes (Prioritize)
118
+
105
119
  Bigger changes that require more effort but will significantly improve conversions.
106
120
 
107
121
  ### Test Ideas
122
+
108
123
  Hypotheses worth A/B testing rather than assuming.
109
124
 
110
125
  ### Copy Alternatives
126
+
111
127
  For key elements (headlines, CTAs), provide 2-3 alternatives with rationale.
112
128
 
113
129
  ---
@@ -115,26 +131,31 @@ For key elements (headlines, CTAs), provide 2-3 alternatives with rationale.
115
131
  ## Page-Specific Frameworks
116
132
 
117
133
  ### Homepage CRO
134
+
118
135
  - Clear positioning for cold visitors
119
136
  - Quick path to most common conversion
120
137
  - Handle both "ready to buy" and "still researching"
121
138
 
122
139
  ### Landing Page CRO
140
+
123
141
  - Message match with traffic source
124
142
  - Single CTA (remove navigation if possible)
125
143
  - Complete argument on one page
126
144
 
127
145
  ### Pricing Page CRO
146
+
128
147
  - Clear plan comparison
129
148
  - Recommended plan indication
130
149
  - Address "which plan is right for me?" anxiety
131
150
 
132
151
  ### Feature Page CRO
152
+
133
153
  - Connect feature to benefit
134
154
  - Use cases and examples
135
155
  - Clear path to try/buy
136
156
 
137
157
  ### Blog Post CRO
158
+
138
159
  - Contextual CTAs matching content topic
139
160
  - Inline CTAs at natural stopping points
140
161
 
@@ -143,6 +164,7 @@ For key elements (headlines, CTAs), provide 2-3 alternatives with rationale.
143
164
  ## Experiment Ideas
144
165
 
145
166
  When recommending experiments, consider tests for:
167
+
146
168
  - Hero section (headline, visual, CTA)
147
169
  - Trust signals and social proof placement
148
170
  - Pricing presentation
@@ -10,9 +10,13 @@ This skill covers two areas: building UIs that look crafted (not generated), and
10
10
 
11
11
  ## Routing
12
12
 
13
- | When the task involves... | Load |
14
- |---------------------------|------|
15
- | Building frontend UIs, web pages, dashboards, components, CSS, layouts, responsive design, accessibility | [building.md](building.md) |
13
+ | When the task involves... | Load |
14
+ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
15
+ | Building frontend UIs, web pages, dashboards, components, CSS, layouts, responsive design, accessibility | [building.md](building.md) |
16
16
  | Creating, reading, applying, evolving, or auditing DESIGN.md files; extracting design tokens; translating tokens to framework configs | [design-md.md](design-md.md) |
17
17
 
18
18
  **Both apply?** Load both. When a DESIGN.md exists in the project, its tokens override the general principles in building.md.
19
+
20
+ ## Companion Skill
21
+
22
+ For concrete rule-level UI values (animation timings, easing curves, spring params, Laws of UX target sizes, typography features, shadow/radius math, prefetching patterns), also load the [userinterface-wiki](../userinterface-wiki/SKILL.md) skill. frontend-design sets direction; userinterface-wiki provides the 152 prioritized rules with code examples.
@@ -2,6 +2,10 @@
2
2
 
3
3
  Build interfaces that feel crafted, not generated. This skill prevents "AI slop" — the generic, soulless, template-looking output that AI tools default to.
4
4
 
5
+ ## Companion Reference
6
+
7
+ For concrete, rule-level guidance on animation timing, easing, springs, exit animations, CSS pseudo-elements, audio feedback, morphing icons, container animation, Laws of UX, predictive prefetching, typography, and visual design (shadows, radii, spacing), load the [userinterface-wiki](../userinterface-wiki/SKILL.md) skill. It contains 152 prioritized rules (e.g. `timing-under-300ms`, `ux-fitts-target-size`, `visual-concentric-radius`, `type-tabular-nums-for-data`) with code examples at `../userinterface-wiki/rules/<rule-id>.md`. Use it whenever you need a specific number, easing curve, or pattern — this file sets direction, userinterface-wiki sets values.
8
+
5
9
  ## The Problem: AI Slop
6
10
 
7
11
  AI-generated UIs are instantly recognizable: overly perfect gradients, predictable purple-on-white palettes, card grids with rounded corners, safe Inter/Roboto fonts, and layouts that all look interchangeable. This happens because AI pattern-matches from training data rather than making intentional design choices.
@@ -23,6 +27,7 @@ If you can't answer these, you're about to produce slop.
23
27
  Typography is the single biggest differentiator between generic and intentional design.
24
28
 
25
29
  **Do:**
30
+
26
31
  - Choose a specific typeface that matches the personality. Google Fonts has hundreds — use them.
27
32
  - Use type scale with purpose: large headings (2.5rem+), comfortable body (1rem-1.125rem), small labels
28
33
  - Vary font weights deliberately: light for elegance, bold for impact, medium for body
@@ -31,6 +36,7 @@ Typography is the single biggest differentiator between generic and intentional
31
36
  - Mix a display/heading font with a body font for contrast
32
37
 
33
38
  **Don't:**
39
+
34
40
  - Default to Inter, Roboto, Arial, or system fonts without reason
35
41
  - Use the same font weight everywhere
36
42
  - Skip setting line-height and letter-spacing
@@ -39,6 +45,7 @@ Typography is the single biggest differentiator between generic and intentional
39
45
  ## Color
40
46
 
41
47
  **Do:**
48
+
42
49
  - Pick a clear direction: warm, cool, monochrome, earthy, vibrant
43
50
  - Define CSS variables for your palette: `--color-primary`, `--color-surface`, `--color-text`, `--color-accent`
44
51
  - Use neutrals that aren't pure white or pure black — off-whites (`#f8f7f4`), warm grays (`#2d2a27`), soft darks
@@ -46,6 +53,7 @@ Typography is the single biggest differentiator between generic and intentional
46
53
  - Test contrast ratios for accessibility (WCAG AA minimum: 4.5:1 for text)
47
54
 
48
55
  **Don't:**
56
+
49
57
  - Default to purple-on-white (the most common AI slop palette)
50
58
  - Use pure `#000` on pure `#fff` — it's harsh
51
59
  - Pick colors without defining the full palette upfront
@@ -54,6 +62,7 @@ Typography is the single biggest differentiator between generic and intentional
54
62
  ## Layout & Spacing
55
63
 
56
64
  **Do:**
65
+
57
66
  - Use CSS Grid for page structure, Flexbox for component-level layout
58
67
  - Define a spacing scale with CSS variables: `--space-xs` through `--space-3xl`
59
68
  - Use `rem` units for spacing and font sizes (better cross-device scaling)
@@ -62,6 +71,7 @@ Typography is the single biggest differentiator between generic and intentional
62
71
  - Use `max-width` on content areas (65-75ch for readable text, ~1200px for page containers)
63
72
 
64
73
  **Don't:**
74
+
65
75
  - Use hardcoded pixel values scattered through the code
66
76
  - Make everything a card grid — vary your layout patterns
67
77
  - Forget mobile: test at 375px width minimum
@@ -72,6 +82,7 @@ Typography is the single biggest differentiator between generic and intentional
72
82
  This is what separates crafted from generic.
73
83
 
74
84
  **Do:**
85
+
75
86
  - Use gradients, subtle patterns, or textured backgrounds instead of flat single colors
76
87
  - Add meaningful animations: page-load fades, staggered reveals, hover transitions
77
88
  - Create visual hierarchy with size contrast — make the important things big
@@ -79,6 +90,7 @@ This is what separates crafted from generic.
79
90
  - Consider asymmetric layouts for landing pages — not everything needs to be centered
80
91
 
81
92
  **Don't:**
93
+
82
94
  - Add micro-animations to everything — a few purposeful ones beat many generic ones
83
95
  - Use the same border-radius everywhere
84
96
  - Make every section look the same — vary the visual rhythm
@@ -87,6 +99,7 @@ This is what separates crafted from generic.
87
99
  ## Component Quality
88
100
 
89
101
  **Do:**
102
+
90
103
  - Build with semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<button>`
91
104
  - Handle all states: default, hover, focus, active, disabled, loading, error, empty
92
105
  - Use `focus-visible` for keyboard focus styles
@@ -94,6 +107,7 @@ This is what separates crafted from generic.
94
107
  - Use `prefers-color-scheme` when implementing dark/light modes
95
108
 
96
109
  **Don't:**
110
+
97
111
  - Use `<div>` for everything
98
112
  - Skip empty states and error states — these are where AI-generated UIs always fail
99
113
  - Forget keyboard navigation and screen reader support
@@ -113,8 +127,8 @@ This is what separates crafted from generic.
113
127
  --color-accent: #f59e0b;
114
128
 
115
129
  /* Typography */
116
- --font-heading: 'Instrument Serif', serif;
117
- --font-body: 'DM Sans', sans-serif;
130
+ --font-heading: "Instrument Serif", serif;
131
+ --font-body: "DM Sans", sans-serif;
118
132
 
119
133
  /* Spacing scale */
120
134
  --space-xs: 0.25rem;
@@ -149,6 +163,7 @@ Read the project's CSS/design tokens before writing new styles. Match what exist
149
163
  ## Responsive Checklist
150
164
 
151
165
  Before finishing any UI work:
166
+
152
167
  - [ ] Works at 375px (mobile)
153
168
  - [ ] Works at 768px (tablet)
154
169
  - [ ] Works at 1440px+ (desktop)