@event4u/agent-config 14.14.1 → 14.16.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 (40) hide show
  1. package/.augment-plugin/marketplace.json +3 -3
  2. package/.augment-plugin/plugin.json +1 -1
  3. package/.claude-plugin/marketplace.json +1 -1
  4. package/CHANGELOG.md +88 -0
  5. package/dist/agent-src/rules/security-sensitive-stop.md +7 -5
  6. package/dist/agent-src/skills/accessibility-auditor/SKILL.md +20 -2
  7. package/dist/agent-src/skills/design-intelligence/data/ux-guidelines.csv +99 -99
  8. package/dist/agent-src/skills/fe-design/SKILL.md +6 -3
  9. package/dist/agent-src/skills/fe-design/references/design-patterns.md +28 -0
  10. package/dist/agent-src/skills/iconography/SKILL.md +37 -6
  11. package/dist/agent-src/skills/react-shadcn-ui/SKILL.md +1 -1
  12. package/dist/agent-src/templates/agents/agent-project-settings.example.yml +1 -1
  13. package/dist/cli-delegate/cmd_conformance.js +655 -34
  14. package/dist/discovery/deprecation-report.md +1 -1
  15. package/dist/discovery/discovery-manifest.json +7 -7
  16. package/dist/discovery/discovery-manifest.json.sha256 +1 -1
  17. package/dist/discovery/discovery-manifest.summary.md +1 -1
  18. package/dist/discovery/dormancy-report.md +1 -1
  19. package/dist/discovery/orphan-report.md +1 -1
  20. package/dist/discovery/packs.json +2 -2
  21. package/dist/discovery/trust-report.md +1 -1
  22. package/dist/discovery/workspaces.json +2 -2
  23. package/dist/hooks/dispatch.js +669 -45
  24. package/dist/mcp/registry-manifest.json +2 -2
  25. package/dist/mcp/server.json +2 -2
  26. package/dist/mcp/server.mjs +661 -35
  27. package/dist/router.json +1 -1
  28. package/docs/guidelines/design-antipatterns.md +10 -2
  29. package/package.json +1 -1
  30. package/src/config/gate-violation-baselines.json +2 -2
  31. package/src/config/rule-enforcement-baseline.json +0 -1
  32. package/src/scripts/_lib/release_highlights.ts +63 -7
  33. package/src/scripts/design_slop_rules.ts +19 -9
  34. package/src/scripts/git_authorization_hook.ts +719 -27
  35. package/src/scripts/hooks/block_unauthorized_git.ts +250 -9
  36. package/src/scripts/hooks/merge_impact.ts +275 -0
  37. package/src/scripts/release.ts +9 -34
  38. package/src/scripts/release_drill.ts +180 -8
  39. package/src/scripts/release_env.ts +31 -0
  40. package/src/scripts/release_publication.ts +158 -1
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "event4u-agent-config",
3
3
  "description": "Governed agent system — skills, rules, commands, and guidelines for AI-assisted development.",
4
- "version": "14.14.1",
4
+ "version": "14.16.0",
5
5
  "owner": {
6
6
  "name": "event4u",
7
7
  "email": "dev@event4u.app"
8
8
  },
9
9
  "metadata": {
10
10
  "description": "A policy-driven execution system that enforces quality, consistency, and developer-like behavior for AI agents.",
11
- "version": "14.14.1"
11
+ "version": "14.16.0"
12
12
  },
13
13
  "plugins": [
14
14
  {
15
15
  "name": "agent-config",
16
16
  "description": "Full governed agent system — rules, skills, commands, guidelines, and runtime tooling.",
17
- "version": "14.14.1",
17
+ "version": "14.16.0",
18
18
  "source": ".",
19
19
  "category": "governance",
20
20
  "tags": [
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "agent-config",
3
3
  "description": "A governed skill framework for AI agents — runtime execution, tooling, observability, feedback, and lifecycle management with policy-driven quality enforcement.",
4
- "version": "14.14.1",
4
+ "version": "14.16.0",
5
5
  "author": {
6
6
  "name": "event4u",
7
7
  "email": "dev@event4u.app"
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "metadata": {
8
8
  "description": "Bootstrap shim for the event4u agent-config suite. This plugin ships ONLY the dispatcher hooks plus one install-pointer skill — ALL content (skills, rules, commands) is installed via `npx -y @event4u/agent-config init`, which writes the file projection AND registers the same hooks in ~/.claude/settings.json. DEPRECATED as a content channel; kept so the marketplace listing stays discoverable and existing installs keep working hooks.",
9
- "version": "14.14.1",
9
+ "version": "14.16.0",
10
10
  "keywords": [
11
11
  "agent-config",
12
12
  "skills",
package/CHANGELOG.md CHANGED
@@ -434,6 +434,94 @@ Entry-shape contract: [`docs/contracts/CHANGELOG-conventions.md`](docs/contracts
434
434
  > that forces a new era split (`# Era: 14.15.x`, etc.) — see
435
435
  > [`docs/contracts/CHANGELOG-conventions.md § Era splits`](docs/contracts/CHANGELOG-conventions.md).
436
436
 
437
+ ## [14.16.0](https://github.com/event4u-app/agent-config/compare/14.15.0...14.16.0) (2026-09-04)
438
+
439
+ ### Release highlights
440
+
441
+ - **Behaviour changes:** pay for the new triggers inside the same file, not out of the ceiling (e6737e0); make security-sensitive-stop reachable by the surfaces its own table names (bb857f1).
442
+ - **Default changes + migration:** stop iconography handing an agent the default icon-consistency forbids (4461e31).
443
+ - **Security and correctness:** stop asserting two things about the environment rather than the code (d3896a3); drop the box-rule dividers from the negation corpus (83158f1); import the merge-impact module by its .js specifier (1522c89); read a rename as a rename, and pin the closed-vocabulary property (6fa2b06); take the pull-request bound from the API contract, and stop swallowing a failed write (1cf8f70); scope a negation to its clause, in both directions (6a08ed2); +4 more.
444
+ - **Honest nulls:** _none_
445
+ - **Known limitations:** _none_
446
+
447
+ ### Features
448
+
449
+ * **catalog:** represent the interaction and texture layer, and bring V1 current ([1172647](https://github.com/event4u-app/agent-config/commit/117264783230fde125bf6aaed2feabe938ffc5ab))
450
+
451
+ ### Bug Fixes
452
+
453
+ * **tests:** stop asserting two things about the environment rather than the code ([d3896a3](https://github.com/event4u-app/agent-config/commit/d3896a37f2e97689c93adeb22db8486e84ff4e41))
454
+ * **docs:** repair every live doc asserting a Python-era path as current ([8ded7ff](https://github.com/event4u-app/agent-config/commit/8ded7ff568366d03c7e1efdf1fb07e18df3cf42a))
455
+ * **evidence:** declare review independence on the 14.15.0 ledger ([42f53f8](https://github.com/event4u-app/agent-config/commit/42f53f8f5af12249d72563ac5c2b54bc4a6b7656))
456
+ * **tests:** drop the box-rule dividers from the negation corpus ([83158f1](https://github.com/event4u-app/agent-config/commit/83158f1246b8a6301749575ba233ee67d8fd6987))
457
+ * **tests:** import the merge-impact module by its .js specifier ([1522c89](https://github.com/event4u-app/agent-config/commit/1522c897ebab000bc3f92eeecc608ba2a6ee89f5))
458
+ * **auth:** read a rename as a rename, and pin the closed-vocabulary property ([6fa2b06](https://github.com/event4u-app/agent-config/commit/6fa2b068a1c5e6df9c15d90fd9fe13fbd96160e3))
459
+ * **auth:** take the pull-request bound from the API contract, and stop swallowing a failed write ([1cf8f70](https://github.com/event4u-app/agent-config/commit/1cf8f70869593281b26a16a00408ce24050db4a7))
460
+ * **auth:** scope a negation to its clause, in both directions ([6a08ed2](https://github.com/event4u-app/agent-config/commit/6a08ed26177bd601b2677428c598ce72f1e256c5))
461
+ * **catalog:** state M6's promotion prerequisites instead of citing a roadmap path ([a04d99e](https://github.com/event4u-app/agent-config/commit/a04d99e4b4bb9b9ee74f283672d4ed0bd98deaa3))
462
+ * **skills:** stop three of the tree's own surfaces handing over what the catalog flags ([0e18887](https://github.com/event4u-app/agent-config/commit/0e1888704ea5837d2f2752c1fde0b37f469bc0ed))
463
+ * **rules:** pay for the new triggers inside the same file, not out of the ceiling ([e6737e0](https://github.com/event4u-app/agent-config/commit/e6737e0a218119902d20fe34d9799587fd2b929b))
464
+ * **skills:** stop iconography handing an agent the default icon-consistency forbids ([4461e31](https://github.com/event4u-app/agent-config/commit/4461e319aa7b42005715a921122d72388e84040f))
465
+ * **skills:** make the accessibility skill carry the WCAG version it claims ([2bd8e50](https://github.com/event4u-app/agent-config/commit/2bd8e5064129d6cc233ebc34a1c7af4ff2390234))
466
+ * **rules:** make security-sensitive-stop reachable by the surfaces its own table names ([bb857f1](https://github.com/event4u-app/agent-config/commit/bb857f113ca0fa9b4c621478412891d94dd1cad7))
467
+ * **release:** reuse an existing release branch without --resume, and carry main at step 1 ([d9ca89d](https://github.com/event4u-app/agent-config/commit/d9ca89d6ae58d642e5fae79fa0ba59482da996d1))
468
+
469
+ ### Documentation
470
+
471
+ * **evidence:** record the run-19 drain summary ([057efa3](https://github.com/event4u-app/agent-config/commit/057efa30557e15a5710389e027774e91b212ec87))
472
+ * **roadmaps:** archive road-to-python-era-doc-references ([69db685](https://github.com/event4u-app/agent-config/commit/69db685abe0079ef2df3c3f81e94d5d8667d1275))
473
+ * **roadmaps:** promote python-era-doc-references to ready ([48fed1c](https://github.com/event4u-app/agent-config/commit/48fed1c5b85d19f871ac609c412c7027b010ce94))
474
+ * **roadmaps:** archive road-to-binding-findings ([ed6fedd](https://github.com/event4u-app/agent-config/commit/ed6fedd47a9ca26d16b0851ff73f1be3a6ccfa58))
475
+ * **roadmaps:** record the binding-findings verdicts and its own prose corrections ([6b00c58](https://github.com/event4u-app/agent-config/commit/6b00c583356b7479fba7abb7c325da9f861366f2))
476
+ * **evidence:** disposition all nine 14.15.0 findings, and park the ordering guarantee ([4d44188](https://github.com/event4u-app/agent-config/commit/4d44188afce223392ffef1339370d2f333c26be8))
477
+ * **roadmaps:** close and archive road-to-tell-currency ([77178e8](https://github.com/event4u-app/agent-config/commit/77178e8935442466b125f60ea8917cde347edcad))
478
+ * **roadmaps:** correct four measured claims on the topology carrier and its stub ([5c1c927](https://github.com/event4u-app/agent-config/commit/5c1c92732e2e035762294ea584dfff7d4607aff1))
479
+ * **roadmaps:** record the tell-currency verdicts and park the two deferrals ([856f5b1](https://github.com/event4u-app/agent-config/commit/856f5b10e08a0a03e6229df96efc1dbe949c5fd2))
480
+ * **fe-design:** put the interaction-layer motion guidance in its declared home ([d9fd8b6](https://github.com/event4u-app/agent-config/commit/d9fd8b63fa47f54d8e62bd44ce99af52549a818c))
481
+ * **evidence:** declare the evidence type on the coverage-truth note ([d4de5ba](https://github.com/event4u-app/agent-config/commit/d4de5ba5a997a0bfda972db03794498913bdeca3))
482
+ * **roadmaps:** close and archive road-to-declared-coverage-truth ([b131995](https://github.com/event4u-app/agent-config/commit/b131995896f3036e01c29f3a4c77b680a6623a61))
483
+ * **evidence:** declare the completion-review skip for the inbox-2026-09-c diff ([2133161](https://github.com/event4u-app/agent-config/commit/21331619b8635785657313cc36c3744d550b368e))
484
+ * **roadmaps:** three roadmaps from the inbox-2026-09-c round ([5d9140a](https://github.com/event4u-app/agent-config/commit/5d9140a54bef3a95a79ce6cd5b41691a287bcf7b))
485
+ * **evidence:** record the inbox-2026-09-c verification and disposition ([27f5b2a](https://github.com/event4u-app/agent-config/commit/27f5b2a510a1fe3319bd6ce119bacdbedc08f597))
486
+
487
+ ### Chores
488
+
489
+ * **sync:** reproject the fe-design motion reference ([dd636df](https://github.com/event4u-app/agent-config/commit/dd636dff8f58dc631fb9ed53a2f72880b3d9b394))
490
+ * **evidence:** re-anchor the routing body-signal verdict after two skill-body edits ([ca0c479](https://github.com/event4u-app/agent-config/commit/ca0c479df99dff54ae5c544e5eea7108c3736e36))
491
+ * **sync:** reproject security-sensitive-stop after the trigger narrowing ([71ca6b0](https://github.com/event4u-app/agent-config/commit/71ca6b01670a189ded73f314fe7d6e1eaaa5a531))
492
+
493
+ Tests: 20974 (+52 since 14.15.0)
494
+
495
+ ## [14.15.0](https://github.com/event4u-app/agent-config/compare/14.14.1...14.15.0) (2026-09-03)
496
+
497
+ ### Release highlights
498
+
499
+ - **Behaviour changes:** stage-2 impact scan, so a refused merge can be answered in four words (5a3b7c5).
500
+ - **Default changes + migration:** _none_
501
+ - **Security and correctness:** make the derived head publishable, so a release stops halting by construction (e6f6744); ask for the curated head before the release commit, not after (e31f07a).
502
+ - **Honest nulls:** _none_
503
+ - **Known limitations:** _none_
504
+
505
+ ### Features
506
+
507
+ * **authz:** stage-2 impact scan, so a refused merge can be answered in four words ([5a3b7c5](https://github.com/event4u-app/agent-config/commit/5a3b7c5064b2e92523781530cbfe6ef09bd26f35))
508
+ * **authz:** classify the 17 destructive operations the guard could not see ([a1327b2](https://github.com/event4u-app/agent-config/commit/a1327b2767751d4ce6e680af1b8f9732faf97b88))
509
+ * **authz:** target-bound merge grants that outlive the clock ([c286570](https://github.com/event4u-app/agent-config/commit/c286570d1e9a421a51571bb27e3a2945a54e8f8c))
510
+
511
+ ### Bug Fixes
512
+
513
+ * **docs:** cite the head label as code, not bold — the ratchet counts bold ([3f78ead](https://github.com/event4u-app/agent-config/commit/3f78ead4fd9023ed189ccd15aac2659397072ca8))
514
+ * **release:** make the derived head publishable, so a release stops halting by construction ([e6f6744](https://github.com/event4u-app/agent-config/commit/e6f67444c0c11873f6231fd007b70b404f9e883a))
515
+ * **ci:** drop code-comment-discipline from the rule-enforcement baseline ([731924a](https://github.com/event4u-app/agent-config/commit/731924ae778191bafefb3bbcfcb92c2acf76b558))
516
+ * **release:** ask for the curated head before the release commit, not after ([e31f07a](https://github.com/event4u-app/agent-config/commit/e31f07ab8bb4b25e048f1b4c78ffa32b27fd59f5))
517
+
518
+ ### Documentation
519
+
520
+ * **adr:** ADR-252 evidence section, and the census it moves ([19e99a4](https://github.com/event4u-app/agent-config/commit/19e99a4febfc6e9f8d092ecafc8c8e23c8f1699e))
521
+ * **adr:** ADR-252 supersedes ADR-251 — specificity replaces recency, for merge only ([ef930e0](https://github.com/event4u-app/agent-config/commit/ef930e01d450a4b78730f545a4f04eab1812eccb))
522
+
523
+ Tests: 20922 (+146 since 14.14.1)
524
+
437
525
  ## [14.14.1](https://github.com/event4u-app/agent-config/compare/14.14.0...14.14.1) (2026-09-03)
438
526
 
439
527
  ### Release highlights
@@ -3,11 +3,8 @@ type: "auto"
3
3
  tier: "2a"
4
4
  alwaysApply: false
5
5
  description: "Security-sensitive paths (auth, billing, tenants, secrets, uploads, webhooks) — threat-model BEFORE editing"
6
- # Trigger set disjoint from secret-vcs-guard by design (2026-08-04): bare
7
- # `secret` / `password` belong to the VCS-write surface (secret-vcs-guard);
8
- # this rule keeps the conversational security surface (editing auth/billing/
9
- # tenant/webhook paths and secrets *infrastructure*, not committing a
10
- # credential).
6
+ # Disjoint from secret-vcs-guard by design (2026-08-04): bare `secret` /
7
+ # `password` are that rule's VCS-write surface, not this rule's.
11
8
  triggers:
12
9
  - keyword: "auth"
13
10
  - keyword: "billing"
@@ -15,6 +12,11 @@ triggers:
15
12
  - keyword: "webhook"
16
13
  - keyword: "oauth"
17
14
  - keyword: "signing key"
15
+ - keyword: "file upload"
16
+ - keyword: "ssrf"
17
+ - keyword: "api resource"
18
+ - keyword: "public endpoint"
19
+ - keyword: "status endpoint"
18
20
  validator_ignore:
19
21
  - type: "substring"
20
22
  pattern: "../../docs/"
@@ -99,6 +99,24 @@ Decoration is the only case where removal is the answer, which is why
99
99
  per block: *if the motion never plays, is the content still there and
100
100
  still understandable?* Record the answer, not the query.
101
101
 
102
+ **WCAG 2.2 additions — the six criteria 2.1 did not have.** An AA claim is
103
+ cumulative: AA conformance means every level-**A** criterion *and* every
104
+ level-AA one, so the two level-A rows below sit inside the claim, not beneath
105
+ it. Each is audited on its own; a surface that skips one is not AA under 2.2.
106
+
107
+ | SC | Level | Testable condition | Failure |
108
+ |---|---|---|---|
109
+ | 2.4.11 Focus Not Obscured (Min.) | AA | `Tab` through every focusable element with sticky headers / footers / cookie bars present — the focused element stays at least partially visible, never fully covered | A sticky bar hides the focused row; the keyboard user cannot see where they are |
110
+ | 2.5.7 Dragging Movements | AA | Every drag interaction (reorder, slider, map pan, kanban) has a single-pointer alternative that is not a drag — buttons, a menu, or arrow keys | Reorder is drag-only, so a user who cannot drag cannot reorder |
111
+ | 2.5.8 Target Size (Min.) | AA | Every pointer target is ≥ 24×24 CSS px, **or** carries ≥ 24 px spacing to its neighbours, **or** is one of the stated exceptions (inline text, user-agent-controlled, essential) | 16 px icon buttons packed edge-to-edge in a toolbar |
112
+ | 3.3.8 Accessible Authentication (Min.) | AA | No login step requires a cognitive function test (remembering, transcribing, puzzle-solving) without an alternative — a password manager can paste, and paste is not blocked | An OTP field that blocks paste, or "type the 3rd character of your memorable word" |
113
+ | 3.2.6 Consistent Help | A | Where a help mechanism (contact link, chat, self-help) repeats across pages, it appears in the same relative order on each | Support link in the header on one page, buried in the footer on the next |
114
+ | 3.3.7 Redundant Entry | A | Information already entered in the same process is auto-populated or selectable, unless re-entry is essential (confirming a password is essential) | A 4-step checkout asking for the same address twice |
115
+
116
+ Outside an AA claim, and stated here rather than left silent: **2.4.12 Focus Not
117
+ Obscured (Enhanced)** and **2.4.13 Focus Appearance** are level **AAA**. Audit
118
+ them on request; their absence is not an AA failure.
119
+
102
120
  ### 3. Run the keyboard pass
103
121
 
104
122
  `Tab` from page start: every interactive element receives focus,
@@ -191,8 +209,8 @@ values.
191
209
 
192
210
  WCAG 2.2 AA compliance is non-negotiable detail — each success criterion
193
211
  has a specific testable condition, failure mode, and remediation path.
194
- The skill carries the full WCAG criterion matrix with concrete test
195
- procedures (not just "check contrast"), keyboard-navigation patterns
212
+ The skill carries the WCAG 2.2 additions with concrete test
213
+ procedures per criterion (not just "check contrast"), keyboard-navigation patterns
196
214
  (roving tabindex, trap management, escape-key handling), ARIA role/
197
215
  property/state tables, and screen-reader-specific edge cases per
198
216
  assistive technology. Condensing to "check contrast and add aria-labels"
@@ -1,100 +1,100 @@
1
- No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
2
- 1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
3
- 2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
4
- 3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
5
- 4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
6
- 5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
7
- 6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
8
- 7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
9
- 8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-all duration-200,duration-1000,Medium
10
- 9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
11
- 10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
12
- 11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
13
- 12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
14
- 13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
15
- 14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
16
- 15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
17
- 16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
18
- 17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
19
- 18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
20
- 19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
21
- 20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
22
- 21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
23
- 22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
24
- 23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
25
- 24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
26
- 25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
27
- 26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
28
- 27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
29
- 28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
30
- 29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
31
- 30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
32
- 31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
33
- 32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
34
- 33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
35
- 34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
36
- 35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
37
- 36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
38
- 37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
39
- 38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
40
- 39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
41
- 40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
42
- 41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
43
- 42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
44
- 43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
45
- 44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
46
- 45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
47
- 46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
48
- 47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
49
- 48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
50
- 49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
51
- 50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
52
- 51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
53
- 52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
54
- 53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
55
- 54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
56
- 55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
57
- 56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
58
- 57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
59
- 58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
60
- 59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
61
- 60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
62
- 61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
63
- 62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
64
- 63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
65
- 64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
66
- 65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
67
- 66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
68
- 67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
69
- 68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
70
- 69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
71
- 70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
72
- 71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
73
- 72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
74
- 73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
75
- 74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
76
- 75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
77
- 76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
78
- 77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
79
- 78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
80
- 79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
81
- 80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
82
- 81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
83
- 82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
84
- 83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
85
- 84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
86
- 85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
87
- 86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
88
- 87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
89
- 88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
90
- 89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
91
- 90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
92
- 91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
93
- 92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
94
- 93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
95
- 94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
96
- 95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
97
- 96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
98
- 97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
99
- 98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
1
+ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
2
+ 1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
3
+ 2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
4
+ 3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
5
+ 4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
6
+ 5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
7
+ 6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
8
+ 7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
9
+ 8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-colors duration-200,transition-all duration-1000,Medium
10
+ 9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
11
+ 10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
12
+ 11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
13
+ 12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
14
+ 13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
15
+ 14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
16
+ 15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
17
+ 16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
18
+ 17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
19
+ 18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
20
+ 19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
21
+ 20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
22
+ 21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
23
+ 22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
24
+ 23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
25
+ 24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
26
+ 25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
27
+ 26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
28
+ 27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
29
+ 28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
30
+ 29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
31
+ 30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
32
+ 31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
33
+ 32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
34
+ 33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
35
+ 34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
36
+ 35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
37
+ 36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
38
+ 37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
39
+ 38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
40
+ 39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
41
+ 40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
42
+ 41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
43
+ 42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
44
+ 43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
45
+ 44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
46
+ 45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
47
+ 46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
48
+ 47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
49
+ 48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
50
+ 49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
51
+ 50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
52
+ 51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
53
+ 52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
54
+ 53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
55
+ 54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
56
+ 55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
57
+ 56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
58
+ 57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
59
+ 58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
60
+ 59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
61
+ 60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
62
+ 61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
63
+ 62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
64
+ 63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
65
+ 64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
66
+ 65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
67
+ 66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
68
+ 67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
69
+ 68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
70
+ 69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
71
+ 70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
72
+ 71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
73
+ 72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
74
+ 73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
75
+ 74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
76
+ 75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
77
+ 76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
78
+ 77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
79
+ 78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
80
+ 79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
81
+ 80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
82
+ 81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
83
+ 82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
84
+ 83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
85
+ 84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
86
+ 85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
87
+ 86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
88
+ 87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
89
+ 88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
90
+ 89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
91
+ 90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
92
+ 91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
93
+ 92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
94
+ 93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
95
+ 94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
96
+ 95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
97
+ 96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
98
+ 97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
99
+ 98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
100
100
  99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
@@ -246,10 +246,13 @@ provenance belongs to `road-to-frontend-fidelity-calibration` Phases 0 and 2.
246
246
 
247
247
  ## Anti-slop discipline
248
248
 
249
- Before proposing a direction, scan the Visual (V1–V7) and Layout (L1–L8)
250
- sections of [`design-antipatterns`](../../../docs/guidelines/design-antipatterns.md).
249
+ Before proposing a direction, scan the Visual (V1–V8) and Layout (L1–L10)
250
+ sections of [`design-antipatterns`](../../../docs/guidelines/design-antipatterns.md),
251
+ plus Motion (M1–M8) for the interaction layer.
251
252
  On a match, choose differently or invoke the entry's own override condition in
252
- the brief — every entry has one, and they are register-scoped. The Q* floors are
253
+ the brief — every entry has one. Two of them, T7 and T8, are additionally
254
+ *register-scoped*: the brand and product registers admit different answers, and
255
+ neither admits an undeclared pick. The Q* floors are
253
256
  in [`references/craft-floor.md`](references/craft-floor.md) instead of here, so
254
257
  they arrive at the write rather than at skill load.
255
258
 
@@ -171,6 +171,34 @@ Before adding any animation to a UI element, run through this decision tree:
171
171
  - **Never animate layout properties** (width, height, top, left, padding). Why: triggers browser layout recalculation on every frame; always solvable with `transform`.
172
172
  - **Always add `@media (prefers-reduced-motion: reduce)`** — gentler animation (reduced distance/opacity), NOT display:none. Why: vestibular disorders make motion UI unusable; reducing is better than removing.
173
173
 
174
+ **4. Is the trigger the reader's position, or the reader's action?**
175
+
176
+ Position-triggered motion is the interaction layer's current tell, and it is
177
+ the one case where the decision tree above returns "no" and gets overridden
178
+ anyway. Two shapes, both catalogued:
179
+
180
+ - **Scroll-reveal on every section** (catalog M6). The reader has already
181
+ scrolled to the content; fading it in delays what they asked for. Animate a
182
+ reveal only where position carries meaning — a stepped narrative whose beats
183
+ must land in order, or a long-form piece using position to signal progress —
184
+ and then say so in the brief. A reveal applied per section is a default.
185
+ - **A pointer-tracking spotlight** (catalog M7). The cursor is the one element
186
+ on the page whose position the reader already knows, so highlighting it
187
+ carries no information. Legitimate only where the spotlight *is* the
188
+ interaction: an inspection tool, a reveal mechanic, a magnifier.
189
+
190
+ **5. Does the hover state spend contrast or add it?**
191
+
192
+ A control that lowers its own opacity on hover (catalog M8) reads as retreating
193
+ from the pointer, and it reduces legibility at the moment the reader is
194
+ committing to the target. Hover is carried by brightness, background, border or
195
+ elevation — never by removing contrast. A fade is correct only when it
196
+ communicates a real state change, such as an item being dismissed.
197
+
198
+ The six interaction states every interactive element must assert are
199
+ [`design-review`](../../design-review/SKILL.md)'s; this entry is the motion half
200
+ of the hover one.
201
+
174
202
  **4. What to animate?**
175
203
  Animate `transform` and `opacity` only. Why: these run on the GPU compositor thread, not the main thread; they never trigger layout or paint.
176
204
  `scale(0)` → `scale(1)` is wrong. Why: nothing in the real world appears from nothing. Use `scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1` instead.
@@ -37,12 +37,30 @@ execution:
37
37
  1. **Identify the icon need** — what does the icon communicate? Name the semantic
38
38
  intent (e.g., "download action", "warning state", "user profile") rather than
39
39
  visual description alone.
40
- 2. **Pick the icon set** per stack and brand context. Default open sets:
41
- **Lucide** (clean, Tailwind-native), **Heroicons** (Tailwind/React first-party),
42
- **Phosphor** (multi-weight, flexible), **Tabler** (comprehensive, stroke-based).
43
- Brand/provider marks use **lobe-icons** (`lobe-icons:openai-color`, etc.).
44
- Stack consumers: `react-shadcn-ui` → Lucide; `blade-ui` → Heroicons or Lucide;
45
- `tailwind-engineer` → any web-font-friendly set.
40
+ 2. **Choose the icon set — three rungs, and record which one answered.** The
41
+ set is *chosen*, never inherited: adopting one because a scaffold shipped it
42
+ is the anti-pattern [`icon-consistency`](../../rules/icon-consistency.md)
43
+ § What this gates names by name. Stop at the first rung that answers.
44
+ 1. **A brand token or brand guide that names an icon set** — authoritative,
45
+ stop here ([`brand-source-of-truth`](../../rules/brand-source-of-truth.md)).
46
+ 2. **The set already in use in this project** — detected at the Inspect step
47
+ of the Iconography floor below. One icon system per project; a second
48
+ visual language is the defect, not a preference.
49
+ 3. **Neither exists → select from the open candidates by the criterion the
50
+ surface actually imposes, and state which criterion decided it.** The
51
+ candidates, unordered: **Heroicons**, **Lucide**, **Phosphor**, **Tabler**.
52
+
53
+ | Criterion the surface imposes | Candidates that satisfy it |
54
+ |---|---|
55
+ | Several stroke weights inside one UI (thin captions, bold empty states) | Phosphor (six weights) |
56
+ | One uniform stroke across a dense admin UI | Lucide, Tabler |
57
+ | First-party match to a component library the project already adopted | Heroicons (Tailwind UI), Lucide (shadcn/ui) |
58
+ | Widest glyph coverage for domain-specific nouns | Tabler, Phosphor |
59
+
60
+ Two criteria pointing at different candidates is a real trade-off — name it
61
+ and pick one; do not split the UI across both. Brand and provider marks are
62
+ a separate axis and use **lobe-icons** (`lobe-icons:openai-color`) whatever
63
+ the UI set is.
46
64
  3. **Resolve to a concrete Iconify name** in `set:name` format, e.g.
47
65
  `lucide:arrow-right`, `heroicons:user-solid`, `ph:warning-bold`,
48
66
  `tabler:download`. Verify the name exists on
@@ -54,6 +72,19 @@ execution:
54
72
  5. **Verify** — check the resolved name on `iconify.design/icon/{set}:{name}`;
55
73
  confirm the icon renders as expected before shipping.
56
74
 
75
+ ## Which set each stack ships with — an observation, not a pick
76
+
77
+ Recorded so rung 2 above can recognise an incumbent. Finding one of these in a
78
+ project is rung-2 evidence. Reaching for it because the stack is *new* skips
79
+ rung 3 and is exactly the scaffold inheritance
80
+ [`icon-consistency`](../../rules/icon-consistency.md) forbids.
81
+
82
+ | Stack / consumer | Ships with |
83
+ |---|---|
84
+ | `react-shadcn-ui` | Lucide |
85
+ | `blade-ui` | Heroicons (Tailwind first-party) |
86
+ | `tailwind-engineer` | none of its own — any web-font-friendly set |
87
+
57
88
  ## Iconography floor (design fidelity)
58
89
 
59
90
  Before resolving any new icon, honour the project's existing icon system — the
@@ -122,7 +122,7 @@ Do NOT use when:
122
122
  components in the same surface.
123
123
  - **Anti-AI-slop catalog + linter.** Pull
124
124
  [`docs/guidelines/design-antipatterns.md`](../../../docs/guidelines/design-antipatterns.md)
125
- before the polish step (Visual V1–V7, Layout L1–L8 are the React-component
125
+ before the polish step (Visual V1–V8, Layout L1–L10 are the React-component
126
126
  slop tells); the objective quality floors (WCAG contrast, focus-visible,
127
127
  reduced-motion) are validated via `accessibility-auditor`'s checklist —
128
128
  cite its verdict rather than eyeballing.
@@ -39,7 +39,7 @@ schema_version: 1
39
39
  # CI guard: a release bump of `package.json` must update this value
40
40
  # in lockstep — see scripts/check_template_pin_drift.ts (road-to-
41
41
  # portable-runtime-and-update-check P3.3).
42
- agent_config_version: "14.14.1"
42
+ agent_config_version: "14.16.0"
43
43
 
44
44
  # --- Project identity ---
45
45
  project: