Skills
.Work. You
Rest

react-live-data-wiring

Official

Wire React UIs to live data with polished UX.

Software Engineering#typescript#frontend#react#hooks#supabase#live-data#loading-states
AuthorValynt
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Audit a React/TypeScript frontend to identify hardcoded mock data and wire views to live data sources such as Supabase or REST APIs, ensuring proper loading/empty states, skeletons, and a polished shell.

Core Features & Use Cases

  • Audit views for mock data patterns and replace them with data hooks that fetch live data
  • Wire components to Supabase or REST endpoints with robust loading, empty, and error states
  • Apply consumer-grade shell polish (transitions, scrollbars, font rendering, topbar/sidebar refinements) for production readiness

Quick Start

Run the audit script on your src directory and wire a sample view to live data using the provided hooks.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-live-data-wiring
Download link: https://github.com/Valynt/ValueOS/archive/main.zip#react-live-data-wiring

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.