skills.rest
JewelsHovan
JewelsHovanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

page-layout-patterns

Enforce standardized page layouts with MainLayout and Tailwind CSS grids.

Updated Nov 1, 2025
One-click install
npx skills add https://github.com/JewelsHovan/pain-plus-site --skill page-layout-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-layout-patterns
Source: https://github.com/JewelsHovan/pain-plus-site/tree/main/frontend/.claude/skills/page-layout-patterns
Command: npx skills add https://github.com/JewelsHovan/pain-plus-site --skill page-layout-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes page structure by enforcing a single MainLayout wrapper, consistent spacing (space-y-32), and predictable responsive grid patterns, resulting in a cohesive UI across the application.

Core Features & Use Cases

  • MainLayout enforcement: wrap all routes with a single layout component to provide a consistent header, container, and backdrop.
  • Page structure pattern: root container uses space-y-32 for major sections and semantic <section> blocks for content.
  • Spacing and grid conventions: apply the defined spacing scale and responsive grids (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) to ensure uniform density.
  • Hero and content recipes: guidelines for hero sections, content blocks, sidebars, and cards to maintain visual balance.
  • Use case: apply to marketing pages, product docs, and dashboard screens to maintain a cohesive experience.

Quick Start

Wrap your page content with the MainLayout and start following the patterns described above to achieve consistent, responsive layouts across pages.

Frequently Asked Questions about page-layout-patterns

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

FAQPage Schema
How do I standardize page layouts in a React and Tailwind CSS application?▼

Apply responsive grid patterns in Tailwind CSS using standard column breakpoints like grid-cols-1 md:grid-cols-2 lg:grid-cols-3. This ensures uniform density and predictable content arrangement across different screen sizes.

What is the best way to maintain consistent spacing across multiple React routes?▼

Maintain consistent spacing by enforcing a universal MainLayout wrapper that prescribes a root container with space-y-32 for major sections. This approach provides a predictable header, container, and backdrop across the application.

Can I apply a standardized layout pattern to both marketing pages and product dashboards?▼

You can apply this standardized layout pattern to marketing pages, product docs, and dashboard screens. It provides hero treatment, content block, sidebar, and card recipes to maintain visual balance across various page types.

Do I need to install new dependencies to enforce a universal layout wrapper in TypeScript?▼

You do not need to install new dependencies to enforce a universal layout wrapper. It utilizes existing React and Tailwind CSS layout primitives to standardize page structure without requiring additional tooling.

How do I structure semantic sections for a responsive grid in Tailwind CSS?▼

Structure semantic sections by wrapping content in semantic <section> blocks within a MainLayout container. Apply responsive grid conventions like grid-cols-1 md:grid-cols-2 lg:grid-cols-3 to ensure uniform density and visual balance.

Related Skills

edisonabeledisonabel

ckm:ui-styling

Create accessible responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-hero

Guides engineers to implement Canopy Hero sections with breadcrumbs and responsive layouts in Angular projects.

Official
Intermediate
SatanaCSharpSatanaCSharp

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 design tokens and CVA variants.

Community
Advanced
toddmoytoddmoy
1

responsive layout

Build mobile-first responsive layouts with Tailwind CSS, Grid, and Flexbox.

Community
Advanced