frontend-razor-pages-shared

Implements a Razor Pages layout system with HTMX partial rendering and MainContentLayoutOptions.

20|3|Updated Aug 13, 2023

Search Tags:#htmx #bootstrap #web-ui #layout-system #razor-pages #shared-patterns

Ready to run

npx skills add https://github.com/duranserkan/DRN-Project --skill frontend-razor-pages-shared

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-razor-pages-shared
Source: https://github.com/duranserkan/DRN-Project/tree/main/.agent/skills/frontend-razor-pages-shared
Command: npx skills add https://github.com/duranserkan/DRN-Project --skill frontend-razor-pages-shared

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a reusable, opinionated Razor Pages layout system that standardizes the page structure and navigation across DRN-hosted applications, reducing boilerplate and inconsistencies.

Core Features & Use Cases

Layout hierarchy: aligns the shell with _LayoutBase.cshtml, _Layout.cshtml, _Footer.cshtml, _Sidebar.cshtml, and _SubNavigation.cshtml to deliver a consistent chrome across pages.
HTMX integration: detects HTMX requests to serve minimal shells for partial updates, enabling smooth, SPA-like interactions without full reloads.
Dynamic layout options: uses MainContentLayoutOptions to control Title, centering, card styling, grid sizing, and text alignment for per-page variation.
Shared patterns: demonstrates how to wire header, navigation, and content areas together with a minimal, maintainable pattern.

Quick Start

Configure a page to use a main content layout by setting the MainContentLayoutOptions in your page model.

Frequently Asked Questions about frontend-razor-pages-shared

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

FAQPage Schema

How do I create a reusable Razor Pages layout system for consistent UI?▼

A reusable Razor Pages layout system standardizes page chrome by defining a _Layout family—LayoutBase, _Layout, _Footer, _Sidebar, and _SubNavigation—to deliver consistent structure and reduce boilerplate across hosted applications.

How does HTMX partial rendering work with Razor Pages layouts?▼

HTMX partial rendering in Razor Pages layouts detects HTMX requests to serve minimal shells, enabling smooth SPA-like interactions without full page reloads. This approach updates content areas dynamically while maintaining the shared layout hierarchy.

What's the best way to standardize page navigation and footer across multiple Razor Pages apps?▼

Standardizing page navigation and footers across Razor Pages apps requires a shared layout hierarchy wiring _Layout, _Sidebar, and _Footer together. This pattern ensures consistent chrome and navigation behavior with minimal maintenance overhead.

How do I control page title and card styling dynamically in a Razor Pages layout?▼

Dynamic page title and card styling in a Razor Pages layout are controlled using a MainContentLayoutOptions model. This model drives per-page variation for Title, centering, grid sizing, text alignment, and card styling.

Does Bootstrap integrate with a shared Razor Pages layout system?▼

Bootstrap integrates with a shared Razor Pages layout system by applying its framework classes within the defined layout hierarchy. The MainContentLayoutOptions model maps grid sizing and card styling to Bootstrap classes for responsive page rendering.

When do I need a separate _LayoutBase versus _Layout in Razor Pages?▼

A separate _LayoutBase is needed in Razor Pages when establishing the foundational shell, while _Layout builds upon it to configure specific layout options. This separation maintains a clean hierarchy for consistent UI rendering.