skills.rest
duranserkan
duranserkanCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/duranserkan/DRN-Project --skill frontend-razor-pages-shared
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
duranserkanduranserkan
20

drn-hosting

Configures secure ASP.NET Core web apps with managed startup hooks, routing and centralized defaults for credential-free environments.

Community
Advanced
cybersadercybersader
5

obsidian-bases

Create and edit Obsidian Bases with views, filters, formulas, and summaries.

Community
Intermediate
AGIBuildAGIBuild
10

bootstrap5-ui

Generate Bootstrap 5.3 UI patterns for ASP.NET Core Razor Pages.

Community
Intermediate
twofoldtech-dakotatwofoldtech-dakota
2

frontend-razor

Standardize Razor views, layouts, partials, and tag helpers in ASP.NET Core MVC projects.

Community
Basic