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