skills.rest
digirati-co-uk
digirati-co-ukOFFICIAL
Explore all skills by this author →
GitHub

frontend-site

Documents SPRING-compatible web and JPA entities for REST APIs.

57|15|Updated Nov 28, 2018
Search Tags:#frontend#react#routing#loaders#ssr#routes#madoc
One-click install
npx skills add https://github.com/digirati-co-uk/madoc-platform --skill frontend-site
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-site
Source: https://github.com/digirati-co-uk/madoc-platform/tree/main/.agents/skills/frontend-site
Command: npx skills add https://github.com/digirati-co-uk/madoc-platform --skill frontend-site

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers avoid broken public site pages, mismatched server-side rendering hydration, and inconsistent route data by documenting and guiding changes to the Madoc TypeScript site structure and SSR wiring.

Core Features & Use Cases

  • Route discovery and documentation: Locate and document the site route tree and the page components responsible for each public route.
  • SSR and loader alignment: Identify server entrypoints and route loaders that must be kept in sync to preserve hydration and client-side navigation.
  • Site layout and shared UI guidance: Clarify where site-specific layouts and shared site UI components live to prevent accidental reuse of admin-only code.
  • Use Case: When adding a new public page, use this Skill to find the route in routes.tsx, locate its server loader in server.ts, confirm necessary shared components, and verify SSR hydration for client navigation.

Quick Start

Open services/madoc-ts/src/frontend/site/routes.tsx and outline the route tree, associated page components, and any data loaders that must be updated for a new public site page.

Frequently Asked Questions about frontend-site

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

FAQPage Schema
How do I prevent React SSR hydration errors when adding new site routes?▼

Prevent React SSR hydration errors by aligning client and server route loaders so the server entrypoints in server.ts match the page components in routes.tsx, ensuring data consistency during client-side navigation.

How do I add a new public page to a Madoc TypeScript site frontend?▼

Adding a new public page requires locating the route in routes.tsx, identifying its page component and data loader, wiring the server entrypoint in server.ts, and verifying shared site UI components to prevent broken navigation.

Why am I getting broken navigation after updating my React site routes?▼

Broken navigation after updating React site routes typically results from unsynchronized client and server data loaders or altered deep-merged configuration objects, causing route data mismatches during client-side transitions.

Can I reuse admin components in my public site React routes?▼

Avoid reusing admin-only components in public site React routes to prevent inconsistent UI and hydration issues, relying instead on shared site UI components located in the site-specific frontend directory.

What do I need to verify after updating SSR route data loaders?▼

After updating SSR route data loaders, verify both SSR hydration and client-side navigation across modified routes to ensure server-rendered HTML matches client-rendered output and data loads correctly without mismatches.

Does updating Madoc site layouts require changes to server entrypoints?▼

Updating Madoc site layouts requires corresponding changes to server entrypoints if layout changes affect shared UI components or route data structures, ensuring server-side rendering remains aligned with client-side expectations.

Related Skills

Explore More Software Engineering Skills→
digirati-co-ukdigirati-co-uk
57

gateway-api-tasks

Update ApiClient wiring and gateway task definitions in Madoc TS.

Official
Intermediate
vallafedericovallafederico

solid-core-rendering-ssr

Explain SolidJS rendering and server-side rendering techniques.

Community
Intermediate
digirati-co-ukdigirati-co-uk
57

frontend-themes

Package and integrate Madoc TypeScript UI themes for consistent site and admin styling.

Official
Intermediate
digirati-co-ukdigirati-co-uk
57

frontend-core

Update Madoc TS frontend routes and SSR entry points.

Official
Intermediate