skills.rest
bmsull560
bmsull560COMMUNITY
Explore all skills by this author →
GitHub

facade-page-connector

Replace static facade page data with dedicated backend hooks.

Updated Apr 8, 2026
Search Tags:#frontend#integration#hooks#workspace#error-handling#mock-data#loading-states
One-click install
npx skills add https://github.com/bmsull560/Fabric_4L --skill facade-page-connector
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: facade-page-connector
Source: https://github.com/bmsull560/Fabric_4L/tree/main/.windsurf/skills/facade-page-connector
Command: npx skills add https://github.com/bmsull560/Fabric_4L --skill facade-page-connector

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Facade pages often render static data or rely on generic workspace endpoints, causing inconsistent behavior and unnecessary API calls. This skill rewires those pages to use dedicated backend hooks, improving data freshness and reliability.

Core Features & Use Cases

  • Rewire frontend pages from static/mock data to real API-connected endpoints.
  • Replace useWorkspaceTabQuery patterns with dedicated hooks and map new data shapes to existing UI.
  • Add loading, error, and empty states and identify/remove dead code such as orphan/stage pages.

Quick Start

Connect facade pages to real backends by wiring static/mock data to their dedicated hooks and verifying loading states.

Frequently Asked Questions about facade-page-connector

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

FAQPage Schema
How do I replace mock data with real backend hooks in frontend pages?▼

To replace mock data with real backend hooks, wire facade pages to dedicated API endpoints, map new data shapes to existing UI, and add loading, error, and empty states while removing dead code.

What is the best way to migrate useWorkspaceTabQuery patterns to dedicated hooks?▼

Migrating useWorkspaceTabQuery patterns involves replacing generic workspace endpoints with dedicated account-scoped hooks, extracting accountId, and wiring mutations from layer hooks to support production-grade workflows.

How do I add loading and error states when connecting static pages to live APIs?▼

Adding loading and error states when connecting static pages to live APIs requires mapping static data sources to dedicated hooks and implementing UI states for loading, error, and empty data returns.

Can I wire account-scoped mutations from layer hooks to support production workflows?▼

Yes, you can wire account-scoped mutations from layer hooks by extracting accountId and connecting dedicated hooks to ensure proper data fetching and mutation handling for production-grade workflows.

Why do facade pages make unnecessary API calls and how do I fix it?▼

Facade pages make unnecessary API calls because they rely on generic workspace endpoints. Fix this by rewiring pages to use dedicated backend hooks, improving data freshness and reliability.

When should I remove dead code like orphan pages during frontend integration?▼

Remove dead code like orphan or stage pages during frontend integration when rewiring static data sources to dedicated hooks, ensuring only production-grade, live data fetching workflows remain.

Related Skills

Explore More Software Engineering Skills→
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
ValyntValynt

react-live-data-wiring

Replace hardcoded mock data in React/TypeScript views with Supabase or REST API hooks.

Official
Advanced
7a336e6e7a336e6e
1

integrating-api

Implement a type-safe API client with TanStack Query and Axios/Fetch.

Community
Intermediate
umbracoumbraco
26

umbraco-msw-testing

Mock Umbraco backoffice extension API requests with MSW v2.

Official
Intermediate