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:
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user