@event4u/agent-config 14.15.0 → 14.17.0

package/dist/agent-src/skills/accessibility-auditor/SKILL.md

@@ -99,6 +99,24 @@ Decoration is the only case where removal is the answer, which is why
 per block: *if the motion never plays, is the content still there and
 still understandable?* Record the answer, not the query.
 
+**WCAG 2.2 additions — the six criteria 2.1 did not have.** An AA claim is
+cumulative: AA conformance means every level-**A** criterion *and* every
+level-AA one, so the two level-A rows below sit inside the claim, not beneath
+it. Each is audited on its own; a surface that skips one is not AA under 2.2.
+
+| SC | Level | Testable condition | Failure |
+|---|---|---|---|
+| 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 |
+| 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 |
+| 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 |
+| 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" |
+| 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 |
+| 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 |
+
+Outside an AA claim, and stated here rather than left silent: **2.4.12 Focus Not
+Obscured (Enhanced)** and **2.4.13 Focus Appearance** are level **AAA**. Audit
+them on request; their absence is not an AA failure.
+
 ### 3. Run the keyboard pass
 
 `Tab` from page start: every interactive element receives focus,
@@ -191,8 +209,8 @@ values.
 
 WCAG 2.2 AA compliance is non-negotiable detail — each success criterion
 has a specific testable condition, failure mode, and remediation path.
-The skill carries the full WCAG criterion matrix with concrete test
-procedures (not just "check contrast"), keyboard-navigation patterns
+The skill carries the WCAG 2.2 additions with concrete test
+procedures per criterion (not just "check contrast"), keyboard-navigation patterns
 (roving tabindex, trap management, escape-key handling), ARIA role/
 property/state tables, and screen-reader-specific edge cases per
 assistive technology. Condensing to "check contrast and add aria-labels"

package/dist/agent-src/skills/aws-infrastructure/SKILL.md

@@ -127,6 +127,47 @@ are typically managed via **Terraform + Terragrunt** in a separate infrastructur
 
 See the `terraform` and `terragrunt` skills for general IaC conventions.
 
+### Least privilege and permissive defaults
+
+The conventions above describe how this project deploys. This section is the
+floor underneath them, and it holds whether or not a given resource is managed
+here or in the infrastructure repo.
+
+- **Least-privilege IAM, always.** A task role, an OIDC role, or an execution
+  role enumerates its actions and its resource ARNs. `Action: *` and
+  `Resource: *` are not shorthand for "we will scope it later" - one
+  compromised task credential then reaches every service and object in the
+  account. A wildcard needs a named, reviewed exception written beside it.
+- **Least-privilege networking.** A security group opens a port to the
+  narrowest source that works: another security group id, a prefix list, a
+  known CIDR. An internet-wide source belongs to a public listener and nothing
+  else.
+- **Permissive defaults are decisions.** A bucket with no public-access block,
+  a database with `publicly_accessible` left true, a volume or snapshot with no
+  encryption block - each of these works either way, which is why it survives
+  review. Treat an absent security block as a finding, not as a silence.
+- **Credentials come from Secrets Manager, never from a vars file.** A literal
+  password, token, or key in a `.vars.yaml` or a task-definition template is
+  the same defect as one in `.tf`, and the state and template files are as
+  readable as the code.
+
+Do not restate the mitigation here. The abuse case, the required controls, and
+the negative test for each of the four live in the `infrastructure` surface
+class of [`threat-modeling`](../threat-modeling/SKILL.md)'s corpus, which is
+their single authority. Ask that skill's grounded-corpus step for the
+`infrastructure` surface class - it carries the invocation - describing the
+change, e.g. *iam role with a wildcard action*.
+
+Those rows carry a `Decided by:` clause naming the check that actually decides
+each one. For the IAM, networking, storage, and encryption rows it reads NO
+CHECK IN THIS REPOSITORY; only the credential-in-a-file row names a real gate.
+Nothing here parses IAM policy documents or cloud config, so the discipline
+above is the enforcement, and saying otherwise would claim coverage this
+package does not have.
+
+See also the `terraform` skill's *Permissive defaults and missing security
+blocks* section for the backstop greps over a `.tf` tree.
+
 ## Output format
 
 1. Modified infrastructure config/template files

package/dist/agent-src/skills/conventional-commits-writing/SKILL.md

@@ -1,7 +1,7 @@
 ---
 model_tier: medium
 name: conventional-commits-writing
-description: "When writing commit messages or squash-merge titles — `feat:`, `fix:`, `chore:`, scopes, breaking changes — even when the user just says 'commit this' without naming Conventional Commits."
+description: "When writing a commit message, branch name or squash title — measure the repo's own convention first, Conventional Commits as fallback — even on a bare 'commit this'."
 domain: process
 scope:
   write: []
@@ -22,6 +22,8 @@ packs:
 
 Use this skill when:
 
+- Committing in a repository whose conventions you have not established this
+  session — run `## Procedure: Establish the house convention` first
 - Generating a commit message from staged changes
 - Generating a squash merge title from a PR
 - Deciding the correct Conventional Commit type for a change
@@ -34,6 +36,217 @@ Do NOT use when:
 - The message is already correct and does not need review
 - Following the Git workflow (use `git-workflow` skill)
 
+## Procedure: Establish the house convention (run FIRST, before any message)
+
+Conventional Commits is this suite's **fallback**, not a universal truth. A
+repository that has demonstrably converged on another grammar gets that grammar;
+imposing the shipped default there produces commits that read as foreign in
+`git log` and in review. The precedence, highest first:
+
+| Tier | Source | Binding? |
+|---|---|---|
+| **1 — configured** | `commitlint.config.*` · `.gitmessage` · a `commit-msg` hook (husky / lefthook / `.git/hooks`) · `CONTRIBUTING.md` § Commits · a CI job that validates subjects · release automation that PARSES subjects (semantic-release, changesets, git-cliff, conventional-changelog) | yes — Class A, no approval needed |
+| **2 — measured + approved** | the consensus pass below, after the user says yes | yes, for this repository |
+| **3 — measured, unapproved** | the same pass before the user answers | **no — advisory**; report the mismatch, write Conventional |
+| **4 — default** | Conventional Commits | yes |
+
+Release automation is the trap that makes tier 1 outrank tier 2 even when the
+history disagrees: a repo whose `git log` is 85 % `[JIRA-123] Fix thing` but
+whose manifest (`package.json`, `composer.json`, `pyproject.toml`, `Cargo.toml`)
+runs `semantic-release` or its ecosystem equivalent is a repo **migrating toward**
+Conventional Commits, and the measurement is reading its past, not its intent.
+Check for the parser before you trust the prevalence.
+
+### 1. Look for tier 1 before measuring anything
+
+```bash
+ls commitlint.config.* .commitlintrc* .gitmessage .czrc 2>/dev/null
+git config --get commit.template
+ls .husky/commit-msg .git/hooks/commit-msg 2>/dev/null
+grep -rniE 'semantic-release|git-cliff|conventional-changelog|release-please|commitlint' \
+  package.json composer.json pyproject.toml Cargo.toml .github/workflows/ .gitlab-ci.yml \
+  2>/dev/null | head
+```
+
+**Every one of these produces candidates, not verdicts — open the file before
+you act on the hit.** A `commit.template` proves a template exists, not that it
+constrains the subject: a `.gitmessage` carrying only a body checklist ends
+nothing. `CONTRIBUTING.md` is prose and cannot be grepped for a convention —
+`grep -i commit` matches "please commit early and often" — so read its commits
+section if it has one and take the grammar from the sentences, not from the
+match. Only a **confirmed** source ends the procedure, and when it does, say
+which file answered.
+
+`changesets` is deliberately not in the parser list: it reads `.changeset/*.md`
+files and never parses a commit subject, so its presence says nothing about the
+convention. The four that do parse subjects — semantic-release, git-cliff,
+conventional-changelog, release-please — count only when the hit is a real
+dependency or a wired job, not a mention in a comment.
+
+The tier table above calls a confirmed hit Class A. That is exact for a machine
+-readable config and loose for `CONTRIBUTING.md`, which carries no digest and is
+read by a human judgement — treat a prose source as tier 1 in **precedence** and
+as a quoted sentence in the report, so the next reader can check it.
+
+### 2. Sample the history — native source per dimension
+
+Only **commit subjects** are reliably measurable from a clone. Branch names,
+PR titles and commit granularity have different native sources, and `unknown`
+is a valid, honest result for each:
+
+| Dimension | Native source | Measurable from a clone? |
+|---|---|---|
+| Subject grammar | `git log` | yes |
+| Branch naming | forge refs / `git branch -r` | partially — merged branches are often deleted |
+| PR title shape | forge API (`gh pr list`) | only with forge access |
+| Granularity (atomic vs batched) | per-commit diff stat | **no** where the repo squash-merges — the evidence was destroyed at merge |
+
+Resolve the trunk explicitly. `origin/HEAD` is set by `git clone` and is absent
+in a `git init` + `git remote add` checkout, in many CI checkouts and in
+worktrees, where the sample command would die rather than return nothing:
+
+```bash
+TRUNK=$(git symbolic-ref -q --short refs/remotes/origin/HEAD)
+[ -n "$TRUNK" ] || TRUNK=$(git rev-parse -q --verify origin/main >/dev/null && echo origin/main)
+[ -n "$TRUNK" ] || TRUNK=$(git rev-parse -q --verify origin/master >/dev/null && echo origin/master)
+[ -n "$TRUNK" ] || TRUNK=HEAD          # no remote at all: this checkout is the trunk
+git log "$TRUNK" --no-merges -n 200 --since='24 months ago' \
+  --pretty=format:'%H%x09%aN%x09%aE%x09%s'
+```
+
+**`--first-parent` is deliberately absent.** On a merge-commit workflow the
+trunk's first-parent chain is merge commits, which `--no-merges` then drops —
+the two together leave only what was committed straight to the trunk, which on
+a PR-based repo is nearly nothing. The convention lives in the feature commits,
+so walk the whole reachable history and exclude merges alone.
+
+The terminal `HEAD` matters as much as the first line: a chain that ends with an
+unset `TRUNK` hands `git log` an empty argument, which walks `HEAD` anyway —
+silently doing the right thing on a local repo while hiding that the resolution
+failed on one where it should not have.
+
+`%H` leads the format because two of the exclusions below need the commit, not
+just its subject. Drop, from the sample:
+
+- **bot authors** — `[bot]`, `dependabot`, `renovate`, `github-actions`,
+  `semantic-release`, `release-please`;
+- **automation subjects** — `^Revert `, `^Merge `, `chore(release)`,
+  `^Bump `, a bare `v?\d+\.\d+\.\d+`;
+- **bulk imports** — resolve with the hash the format carries:
+  `git show --stat --oneline <sha> | tail -1` and drop anything over 500 files.
+  Check this only for the handful of subjects that read like an import; running
+  it per commit costs 200 subprocesses to remove two rows.
+
+### 3. Classify each surviving subject
+
+Match in order, first hit wins. These are POSIX extended regular expressions,
+given outside a table because a markdown cell would need the alternation pipes
+escaped and `\|` in ERE is a literal pipe, not an alternation:
+
+```
+conventional      ^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([^)]+\))?!?: 
+ticket-prefix     ^\[[A-Z][A-Z0-9]+-[0-9]+\][: ]|^[A-Z][A-Z0-9]+-[0-9]+[: ]
+gitmoji           ^:[a-z0-9_+-]+:[[:space:]]|^[^[:ascii:][:space:]]
+imperative-plain  ^[A-Z][a-z]+[[:space:]].*[^.]$
+other             everything else
+```
+
+`imperative-plain` is deliberately mechanical — capitalised first word, no
+trailing period — and does **not** test for the imperative mood. Mood needs a
+verb lexicon this procedure does not ship, and `Update` versus `Updated` is
+exactly the pair a lexicon-free test cannot separate. That is a stated limit of
+the classifier, not a gap to fill by guessing: a repo whose only distinction
+from Conventional is mood will read as `imperative-plain` either way, and the
+mood question belongs in the ask at step 6.
+
+`classifier_version` in step 7 names the revision of THIS section — the five
+patterns above plus the exclusions in step 2. It is a provenance stamp so a
+later measurement can be compared against a like one; it does not claim an
+executable classifier ships anywhere in the tree.
+
+Record the runner-up family too — a near-tie is itself the finding.
+
+### 4. Aggregate, capped per author, per half
+
+Raw commit counts let one prolific author or an unfiltered bot define the house
+style; one-vote-per-author lets a drive-by contributor with two commits veto it.
+Cap instead: split the sample into a newer and an older half by position first,
+then let **each author contribute at most 20 commits to each half**. Capping the
+sample as a whole would let one author's newest 20 fill their entire quota and
+empty the older half, which is precisely where step 5's coherence check has to
+look.
+
+Compute the dominant family's share over the **capped** total, and report that
+total — a percentage quoted against the raw eligible count describes a statistic
+nobody computed.
+
+With fewer than three authors the cap is **off**: there is no dominance to guard
+against, and a cap of 20 would put the single-maintainer bar's own `n ≥ 30`
+out of reach of its denominator.
+
+### 5. The evidence bar
+
+A measured convention is eligible to be proposed only when **all** hold:
+
+- **n ≥ 30** eligible commits after exclusions;
+- **≥ 80 %** capped-weighted share for the dominant family, over **≥ 3 human
+  authors** — or, with **one or two** authors, an uncapped **≥ 90 %** share over
+  n ≥ 30. Two authors take the stricter branch rather than falling between the
+  two: a two-person repo is a small-team repo, and leaving it unreachable by
+  both branches would make the measurement permanently advisory there;
+- **temporal coherence** — the same family is dominant in the newer half of
+  the sample *and* in the older half. If the halves disagree materially the
+  repository is **migrating**: abstain, name the change point, and use the
+  newer half's family only if it independently clears the bar.
+
+> The 80 % figure is the stricter of two council positions (2026-09-04,
+> anthropic + openai, 2/2 quorum: 70 % vs 80 % + a two-thirds-of-authors
+> clause). The per-author cap is why the separate author-share clause was not
+> also adopted — it already answers the dominance concern the clause existed
+> for. These are policy heuristics, not statistically derived thresholds.
+> **Revisit-if:** a labelled corpus of repositories shows a false-positive or
+> false-negative rate that a different bar would fix.
+
+### 6. Ask — never adopt silently
+
+Below the bar, or on a migrating repo: use Conventional Commits and say so
+**once**, in one line, when a commit is actually requested. Do not ask.
+
+At or above the bar, ask once, as numbered options (per `user-interaction`):
+name the family, the share **and the capped total it was computed over**, the
+author count, and — if a tier-1 parser exists — the tooling that would stop
+parsing.
+
+### 7. Persist the answer where the next session finds it
+
+Write the measurement as a Class-B convention card under
+`agents/memory/curated/conventions/quarantine/commit-subject.md`; the user's
+approval is what moves it to `approved/`. Carry `observed_n`,
+`dominant_share`, `author_count`, `sample_window`, `classifier_version`, and
+`confirm_against` — aggregates only, never per-author identities. Re-measure
+and re-review when the share falls below **70 %**, when a tier-1 source
+appears, or when the newer half's family changes.
+
+## What a measurement may never lower
+
+Prevalence answers *what happened*, never *what the agent is permitted to do* —
+so a house convention can change how a commit reads, and can never change what
+the agent is allowed to commit. Three override policies:
+
+| Policy | Applies to | Examples |
+|---|---|---|
+| `never` | authorization · security · integrity · destructive history · agent provenance | [`commit-policy`](../../rules/commit-policy.md) · [`secret-vcs-guard`](../../rules/secret-vcs-guard.md) · [`git-history-discipline`](../../rules/git-history-discipline.md) · [`non-destructive-by-default`](../../rules/non-destructive-by-default.md) · [`no-attribution-footers`](../../rules/no-attribution-footers.md) |
+| `explicit-only` | governance preferences a maintainer may lift deliberately, that history may not | [`no-decorative-emojis-in-git-surfaces`](../../rules/no-decorative-emojis-in-git-surfaces.md) |
+| `approved-observation` | representation — subject grammar, ticket prefixes, type vocabulary, capitalisation, mood, subject length, body wrapping | this procedure |
+
+So a repository whose history is 70 % emoji subjects does **not** license emoji
+subjects: that rule is `explicit-only`, and the lift is the maintainer's word,
+not the log's. A repository whose history is 60 % attribution trailers licenses
+nothing at all. The council split here (one member argued subject-line emoji is
+a defect and absolute, the other that it is governance taste) resolves to
+`explicit-only` because both positions agree on the operative half — **history
+may not lift it**.
+
 ## Procedure: Generate commit message
 
 ### 1. Identify the actual intent
@@ -110,9 +323,12 @@ Or add `BREAKING CHANGE:` in the commit body/footer.
 
 ## Output format
 
-1. Recommended commit message(s)
-2. Brief rationale for type choice
-3. Split suggestion if the change should be multiple commits
+1. The convention in force and the tier that established it — `configured
+   (commitlint.config.js)`, `approved (ticket-prefix, 84% of 137)`, or
+   `default (Conventional Commits)`
+2. Recommended commit message(s)
+3. Brief rationale for type choice
+4. Split suggestion if the change should be multiple commits
 
 ## Gotcha
 
@@ -120,6 +336,10 @@ Or add `BREAKING CHANGE:` in the commit body/footer.
 - File type alone does not determine commit type (e.g. a `.md` change can be `feat` if it's a new feature doc)
 - Squash merge titles should describe the net effect, not every internal detail
 - `refactor` means NO behavior change — if behavior changes, use `feat` or `fix`
+- A high dominant share over a long window can hide a format change six months
+  ago — the temporal-coherence check, not the share, is what catches it
+- Squash-merging destroys commit-granularity evidence; report granularity as
+  `unknown` there rather than inferring it from the trunk
 
 ## Frugality Standards
 
@@ -146,6 +366,11 @@ to every commit message you author.
 
 ## Do NOT
 
+- Do NOT impose Conventional Commits on a repository that has a configured or
+  approved convention of its own
+- Do NOT adopt a measured convention without asking — below tier 2 it is
+  advisory, and silence is not approval
+- Do NOT let prevalence lift a `never` or `explicit-only` floor
 - Do NOT use vague messages: `update stuff`, `fix bug`, `changes`
 - Do NOT use `refactor` for bug fixes
 - Do NOT use `chore` for meaningful behavior changes
@@ -157,3 +382,8 @@ to every commit message you author.
 - Rule: `commit-conventions` — base format, types, scope, examples
 - Guideline: `docs/guidelines/php/git.md` — type selection rules, anti-patterns, decision checklist
 - Command: `/commit` — uses this skill for message generation
+- Command: `/fix commit-messages` — retro-fits past subjects to the convention
+  this procedure establishes
+- Context: `contexts/execution/project-intelligence.md` — the Class-B
+  consensus-pass, quarantine→approved gate and deviation-staleness mechanism
+  this procedure instantiates for commit subjects

package/dist/agent-src/skills/design-intelligence/data/ux-guidelines.csv

@@ -1,100 +1,100 @@
-No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
-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
-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
-52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
-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
-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
-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
-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
-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
-58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
-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
-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
-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
-87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
-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
+No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
+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
+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
+52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
+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
+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
+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
+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
+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
+58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
+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
+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
+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
+87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
 99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High

package/dist/agent-src/skills/fe-design/SKILL.md

@@ -246,10 +246,13 @@ provenance belongs to `road-to-frontend-fidelity-calibration` Phases 0 and 2.
 
 ## Anti-slop discipline
 
-Before proposing a direction, scan the Visual (V1–V7) and Layout (L1–L8)
-sections of [`design-antipatterns`](../../../docs/guidelines/design-antipatterns.md).
+Before proposing a direction, scan the Visual (V1–V8) and Layout (L1–L10)
+sections of [`design-antipatterns`](../../../docs/guidelines/design-antipatterns.md),
+plus Motion (M1–M8) for the interaction layer.
 On a match, choose differently or invoke the entry's own override condition in
-the brief — every entry has one, and they are register-scoped. The Q* floors are
+the brief — every entry has one. Two of them, T7 and T8, are additionally
+*register-scoped*: the brand and product registers admit different answers, and
+neither admits an undeclared pick. The Q* floors are
 in [`references/craft-floor.md`](references/craft-floor.md) instead of here, so
 they arrive at the write rather than at skill load.