add-page

Scaffolds a four-layer server-rendered page with SSR, hydration, routing, and webpack wiring.

651|95|Updated Feb 29, 2020
One-click install
npx skills add https://github.com/astashov/liftosaur --skill add-page-astashov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-page
Source: https://github.com/astashov/liftosaur/tree/main/.claude/skills/add-page
Command: npx skills add https://github.com/astashov/liftosaur --skill add-page-astashov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Add a new server-rendered page to Liftosaur at a specified route, enabling SSR, routing, and client hydration with a consistent project structure.

Core Features & Use Cases

  • Scaffolds a four-layer page (lambda render, HTML component, content component, client entry) and wiring steps for a public route.
  • Automatically integrates routing, redirects, and page metadata to ensure consistency with existing pages.
  • Supports public-facing pages that require server rendering and client hydration for optimal performance.

Quick Start

Provide the route-path and a brief page description, and the system will scaffold the four-layer page accordingly.

Frequently Asked Questions about add-page

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

FAQPage Schema
How do I add a new server-rendered page with SSR and hydration?▼

To add a new server-rendered page, you provide a route-path and a page description. The system scaffolds a four-layer page architecture, wiring lambda render, HTML component, content component, and client entry for hydration.

What do I need to scaffold a public route with server-side rendering?▼

Scaffolding a public server-side rendering route requires a target route-path and a brief page description. The system validates these inputs against existing patterns to ensure a consistent project structure across all layers.

How does routing and hydration wiring work when creating a new page?▼

Routing and hydration wiring integrates automatically by updating webpack, lambda routes, redirects, and TopNavMenu. This ensures the new server-rendered page connects correctly with client hydration and existing navigation structures.

What is the best way to structure server-rendered pages to match existing project patterns?▼

The best way to structure server-rendered pages is to use a scaffolding tool that validates against existing patterns. This ensures your four-layer page architecture, routing, and metadata remain consistent with the project.

Can I use this to scaffold pages without configuring webpack and lambda routes manually?▼

Yes, you can scaffold pages without manual configuration. The system automatically handles wiring steps across webpack, lambda routes, and redirects, ensuring the new page integrates seamlessly into the server-rendered architecture.

Why does adding a new route require a four-layer page architecture?▼

Adding a new route requires a four-layer page architecture to properly separate lambda rendering, HTML structure, content components, and client entry points. This separation ensures optimal server rendering and client hydration performance.