e3-routine-wizard-perf

Implements routine wizard performance, step editing, and accessibility for the EOS skincare app.

Updated May 1, 2026
One-click install
npx skills add https://github.com/RomeroSilvia/Eos --skill e3-routine-wizard-perf-romerosilvia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e3-routine-wizard-perf
Source: https://github.com/RomeroSilvia/Eos/tree/main/agents/skills/e3-routine-wizard-perf
Command: npx skills add https://github.com/RomeroSilvia/Eos --skill e3-routine-wizard-perf-romerosilvia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides development of the EOS E3 Module 1 scope: keeping the routine wizard fast (perceived step transitions under 100ms p95), enabling routine step editing, and enforcing permissions, audit, and accessibility rules without breaking other modules. ## Core Features & Use Cases - Optimistic Wizard Navigation: Keeps Step2 and Step3 transitions non-blocking by updating reducer state, persisting in the background, and navigating immediately. - Routine Step Editing: Supports create, update, and delete of routine steps via POST/PATCH/DELETE /api/routines/:id/steps with backend ownership validation. - Performance Guard: Uses useRoutineWizardProfiler marks and the npm run perf:routine-wizard script to prevent regressions against the RNF-01 target. - Use Case: When adding a new step to an existing skincare routine, the skill ensures the UI navigates instantly, the backend validates that clients cannot edit specialist-assigned routines, and the mutation is recorded as a best-effort audit log. ## Quick Start Ask the assistant to implement or review a routine wizard change in the EOS app following the e3-routine-wizard-perf scope and performance contract.

Frequently Asked Questions about e3-routine-wizard-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep React Native wizard transitions under 100ms?

Use optimistic navigation: validate input locally, update reducer state, start persistence in the background, and call router.push immediately. Measure transitions with the useRoutineWizardProfiler marks and verify with the npm run perf:routine-wizard guard.

How do I add step editing to an existing routine in Express?

Expose POST, PATCH, and DELETE endpoints under /api/routines/:id/steps and validate routine ownership and step membership in the backend service. Never trust frontend route params alone for authorization.

Can clients edit routines assigned by a specialist?

No. The E2 rule forbids clients from editing the structure of specialist-assigned routines, and this must be enforced in the backend service layer. Frontend checks alone are not sufficient.

Should audit logging block routine step mutations?

No. Audit via recordAuditLog is best-effort: step mutations call it with entity 'routine' and changeType 'routine_step', but an audit failure must not block or roll back the routine mutation.

What accessibility attributes does a React Native wizard need?

Interactive elements need accessibilityLabel, buttons need accessibilityRole button, goal/type choices need radio role with selected state, and step toggles need checkbox semantics. Disabled controls must expose disabled state and decorative icons stay outside the accessible tree.