feat(human-flow): AST-based scanner v2 + Friction Index rubric

Upgrade the human-flow skill (Gemini-assisted, Claude-reviewed):
- scan.mjs rewritten to AST-based (@babel/parser/traverse) with 4
  detectors: unlabeled-icon-button, tiny-target, missing-feedback-props,
  click-without-keyboard; regex fallback on parse failure.
- Objective Friction Index (Motor 3.0 / Cognitive 2.5 / Keyboard 2.5 /
  Feedback 2.0); 0-10 Human Workflow Score.
- New heuristics: State-Flow Audit, Precision Rail / Fumble Zones,
  Restraint-o-Meter (1-5) for the fancy pass.
- `fix` command DISABLED for now (advisory only): the AST generator
  reprints whole files and produces noisy diffs; agents apply surgical
  fixes from the report. To be revisited with a string-splice editor.
- Add @babel/* deps + package-lock.json.
- Memory: agy review/review-files is NOT actually read-only (wrote files
  + ran npm despite documented plan-mode) — diff after every agy review.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-05 17:11:53 -07:00
parent bf491354e3
commit d4741e447f
9 changed files with 571 additions and 198 deletions

View File

@@ -34,9 +34,24 @@ Before suggesting any fancy element, answer these questions honestly:
- Dense internal tools / operator consoles: Favor *restraint and precision*. Think "expensive mechanical instrument" — satisfying, confident, never showy. Over-the-top sparkle or bouncy motion will feel wrong and unprofessional here.
- Onboarding, public-facing, marketing, or higher-emotion flows: More permission for expressive, delightful "useful decoration" that makes the experience feel alive and premium while still serving clear user goals.
## The Restraint-o-Meter
Calibrate your "Fancy" recommendations using this scale:
| Level | Profile | Examples |
| :--- | :--- | :--- |
| **1** | **Clinical** | Zero motion. Immediate cuts. High density. (Log viewers, raw data dumps). |
| **2** | **Functional** | Subtle hover states only. (Internal monitoring tools). |
| **3** | **Professional** | Standard easings (150-200ms). Skeleton shimmers. (Admin Dashboards, GuruRMM). |
| **4** | **Polished** | View Transitions. Subtle card lifts. Optimistic UI. (User-facing settings, consumer tools). |
| **5** | **Expressive** | Full shared-element morphs. Physics-based springs. (Onboarding, Marketing). |
**Guidance**: If you are in an operator console (Level 2-3), avoid any motion that takes > 200ms or that changes element positions significantly.
---
## Categories of Elegant Delight
## Technical Signals for Fancy Opportunities
### 1. Transitions & Easing (The Foundation)

View File

@@ -193,7 +193,30 @@ Prioritize findings that affect the most frequent user workflows in the product
---
## Related Anti-Patterns from Parent Skills
## 7. State-Flow Audit (Dynamic Friction)
**Anti-patterns**:
- Elements that jump or shift layout when data loads (layout thrash).
- Lack of optimistic UI for frequent, low-risk actions (waiting for server for every checkbox toggle).
- "Dead zones" during state transitions where the UI is locked but doesn't look it.
**Better human workflow**:
- Use skeleton screens with consistent dimensions.
- Apply optimistic updates with clear rollback on error.
- Ensure the "next logical target" is available or signaled as "loading".
---
## 8. The Precision Rail & Fumble Zones
**Anti-patterns**:
- Important interactive controls placed in the leftmost 40px or rightmost 40px of a screen with zero padding.
- Dense clusters of varied actions in the "Fumble Zone" (corners).
**Better human workflow**:
- Provide at least 16px of "safe padding" on edges.
- Group similar actions; keep high-risk actions away from frequent navigation rails.
This skill deliberately overlaps with and specializes rules from `impeccable` (no identical card grids, no hero metrics, strong focus on cognitive load and emotional journey) and `frontend-design` (click targets 44px, hover states, focus states, disabled states).

View File

@@ -7,12 +7,14 @@ Use this structure for all `scan`, `audit`, and `report` outputs.
## Human-Flow Report: <Target / Component / Page>
**Date**: YYYY-MM-DD
**Scanner**: human-flow v1 (mouse + keyboard intuition focus)
**Scope**: <files/components scanned>
**Overall Human Workflow Score**: X/10
- Mouse Ergonomics: X/10
- Keyboard Parity & Efficiency: X/10
- Workflow Discoverability & Friction: X/10
**Scanner**: human-flow v2 (AST-Powered)
**Overall Human Workflow Score**: X/10
### Friction Index Rubric
- **Motor (3.0)**: Target size, precision, travel distance.
- **Cognitive (2.5)**: Discoverability, affordance, consistency.
- **Keyboard (2.5)**: Accessibility, focus flow, parity.
- **Feedback (2.0)**: Visual response, state transitions.
**Summary**
(2-4 sentences: the biggest sources of unintuitive behavior for a human operator using mouse and keyboard, and the net effect on daily workflow.)