hwc-ux-feedback

Name: hwc-ux-feedback
Author: thehotwireclub

github.com/thehotwireclubDesign & UI152223 installsUpdated 3w ago

About hwc-ux-feedback

A skill for implementing feedback and perceived-performance patterns in Hotwire. It helps developers handle loading, progress, optimistic updates, and transitions using Turbo lifecycle behavior and explicit safeguards.

Key features

01Identify feedback requirements
02Use Turbo lifecycle semantics
03Reconcile optimistic updates
04Bound transitions to lifecycle events
05Verify slow-network and restore behavior

Use cases

01Showing form submission activity
02Adding frame loading indicators
03Implementing optimistic interface updates
04Handling page transitions safely

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-ux-feedback

After installing, type/hwc-ux-feedbackin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/

openai.yaml

references/

2023-04-25-turbo-drive-render-interception.md

2023-06-06-turbo-drive-form-activity-indicators.md

2023-07-18-turbo-drive-progress-bar.md

2024-03-26-optimistic-ui-with-turbo-8-morphs.md

2024-08-13-turbo-drive-ulid.md

2024-11-19-turbo-drive-swiper-view-transitions.md

2026-01-20-turbo-frames-loading-spinner.md

2026-03-10-turbo-frames-form-loading-states.md

2026-04-28-turbo-frames-error-boundaries.md

2026-05-12-turbo-drive-shared-element-view-transitions.md

2026-05-26-stimulus-optimistic-toast-auto-save.md

INDEX.md

Details

From the project README

User Experience & Feedback

Implement cross-cutting feedback and perceived-performance patterns in Hotwire.

Core Workflow

Identify feedback need: loading, submit activity, progress reporting, optimistic updates, or transitions.
Prefer built-in Turbo semantics first (busy, progress bar hooks, submit/render lifecycle events).
Add optimistic updates only with a clear reconciliation strategy.
Keep transition logic bounded to explicit lifecycle events and cache/preview-safe paths.
Verify UX behavior on slow network, back/forward cache restores, and submission failures.

Guardrails

Do not use fixed timeouts as a proxy for network or render completion.
Gate animations/transitions for previews and cache restores.
Keep submit locking/unlocking symmetric between start and end events.
Separate UX feedback logic from domain-specific form/media/navigation implementations.

Load References Selectively

Open only the file needed for the current request.

Turbo progress bar reuse: references/2023-07-18-turbo-drive-progress-bar.md
Form activity indicators: references/2023-06-06-turbo-drive-form-activity-indicators.md
Render interception and page transitions: references/2023-04-25-turbo-drive-render-interception.md
Swiper-like transition behavior: references/2024-11-19-turbo-drive-swiper-view-transitions.md
Frame busy spinner patterns: references/2026-01-20-turbo-frames-loading-spinner.md
Optimistic UI with Turbo morph reconciliation: references/2024-03-26-optimistic-ui-with-turbo-8-morphs.md
ULID-based optimistic identity strategy: references/2024-08-13-turbo-drive-ulid.md
Form submission loading states: references/2026-03-10-turbo-frames-form-loading-states.md
Frame error boundaries and retry: references/2026-04-28-turbo-frames-error-boundaries.md
Shared element view transitions: references/2026-05-12-turbo-drive-shared-element-view-transitions.md
Optimistic toast notifications for auto-save: references/2026-05-26-stimulus-optimistic-toast-auto-save.md

Use references/INDEX.md for the full catalog.

Escalate to Neighbor Skills

Form validation and submit correctness concerns: use hwc-forms-validation
Navigation/history/cache flow concerns: use hwc-navigation-content
Real-time push updates and stream actions: use hwc-realtime-streaming
Media-specific playback/upload concerns: use hwc-media-content
General Stimulus API/controller fundamentals: use hwc-stimulus-fundamentals

Comments

Markdown supported