skills.rest
agentconfig
agentconfigOFFICIAL
Explore all skills by this author →
GitHub

page-styling

Standardize page layout and hero styling with PageLayout and Agents-style typography.

7|3|Updated Jan 9, 2026
Search Tags:#typography#design-system#responsive-design#ux-guidance#page-styling#hero-layout
One-click install
npx skills add https://github.com/agentconfig/agentconfig.org --skill page-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-styling
Source: https://github.com/agentconfig/agentconfig.org/tree/main/.github/skills/page-styling
Command: npx skills add https://github.com/agentconfig/agentconfig.org --skill page-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes page layout and hero styling across agentconfig.org to ensure consistent visuals for new pages and route entries, including left-aligned hero and colored pills used on /agents.

Core Features & Use Cases

  • Enforces PageLayout for top-level pages, with route entries at site/src/pages/{slug}.tsx and page components at site/src/components/{PageName}Page/.
  • Guides hero layout and typography to match Agents style, including left-aligned headings, muted copy, and label pills.
  • Supports alignment and spacing decisions across sections to mirror the homepage design for a cohesive site experience.
  • Use Case: creating a new page, updating a hero, or aligning section widths to the homepage.

Quick Start

Create a new page with PageLayout and an Agents-style hero that matches the site’s typography and spacing.

Frequently Asked Questions about page-styling

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

FAQPage Schema
How do I standardize page layout and hero styling across a site?▼

Apply a standardized PageLayout wrapper for top-level pages and enforce specific hero classes, left-aligned headings, muted copy, and label pills to ensure site-wide visual consistency.

How do I create a new page that matches existing hero typography and spacing?▼

Place route entries at the page slug path and page components in the correct directory, applying codified PageLayout and hero classes to match existing typography and section spacing guidelines.

What is the best way to align section widths to a homepage design system?▼

Follow typography guidelines and spacing rules that mirror the homepage, ensuring left-aligned hero headings and consistent section alignment across route entries for a cohesive site experience.

When do I need to use PageLayout for route entries?▼

Use PageLayout whenever creating new top-level pages or updating heroes, as it enforces design system standards for typography, spacing, and colored label pills across the site.

Can I update a hero section without breaking responsive design consistency?▼

Apply specific hero classes and typography guidelines defined in the design system, maintaining left-aligned headings and muted copy across page components to preserve responsive design consistency.

Related Skills

Explore More Design & Creative Skills→
AgLyx3AgLyx3

ui-design-system

Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.

Community
Advanced
jiaiyanjiaiyan
21

element-plus-design-layout

Design responsive Element Plus layouts with a 24-column grid system.

Community
Intermediate
Akhil-Naik-9Akhil-Naik-9
1

design-work

Codify Wix Vibe UI guidelines for layouts, typography, color, and components.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate