mcpField
H
hwc-ux-feedback

hwc-ux-feedback

github.com/lucianghindaDesign & UI42538 installsUpdated today
Repository

About hwc-ux-feedback

A UX skill for Hotwire developers implementing loading, submission, progress, optimistic-update, and transition feedback. It emphasizes Turbo semantics and checks for cache restores and failure cases.

Key features

  1. 01Use built-in Turbo feedback semantics
  2. 02Add optimistic updates with reconciliation
  3. 03Bound transitions to lifecycle events
  4. 04Check slow networks and cache restores

Use cases

  1. 01Show activity during form submissions
  2. 02Add progress feedback to Turbo pages
  3. 03Plan reconcilable optimistic UI updates

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lucianghinda/superpowers-ruby --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.

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
INDEX.md

Details

From the project README

User Experience & Feedback

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

Core Workflow

  1. Identify feedback need: loading, submit activity, progress reporting, optimistic updates, or transitions.
  2. Prefer built-in Turbo semantics first (busy, progress bar hooks, submit/render lifecycle events).
  3. Add optimistic updates only with a clear reconciliation strategy.
  4. Keep transition logic bounded to explicit lifecycle events and cache/preview-safe paths.
  5. 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

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