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 b0efd6d4ec
commit bc5048b885
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)