Page Styling

Overview

Use this skill to keep page-level layout and hero styling consistent with agentconfig.org, especially the left-aligned hero and colored label pills used on /agents.

When to Use

• •Creating a new top-level page and its route entry
• •Updating a page hero, intro copy, or label badges
• •Aligning section widths and spacing with the homepage

Detailed Instructions

Page Structure

• •Use PageLayout for top-level pages.
• •Route entry: site/src/pages/{slug}.tsx should render {PageName}Page.
• •Page component lives in site/src/components/{PageName}Page/.

Hero Layout (Agents Style)

• •Wrap the hero in <header className="border-b border-border bg-muted/30">.
• •Use container mx-auto px-4 py-12 md:py-16.
• •Left-align headings and copy (no text-center).
• •Keep copy width similar to the homepage with max-w-2xl on the paragraph.

Hero Typography

• •h1 should use text-4xl md:text-5xl font-bold mb-4.
• •Paragraph should use text-xl text-muted-foreground max-w-2xl.

Label Pills

• •Use colored pill spans to highlight page attributes.
• •Base classes: px-3 py-1 rounded-full text-sm.
• •Wrap pills in flex gap-2 mt-6 flex-wrap.
• •Color tokens to match /agents:
  • •Green: bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
  • •Yellow: bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400
  • •Red: bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400

Sections

• •Use Section for homepage-style sections.
• •Keep section headings text-3xl md:text-4xl font-bold with descriptions text-lg text-muted-foreground.

Example Prompts

• •"Use the page-styling skill to make the Skills hero left-aligned with colored labels like /agents."
• •"Create a new page with PageLayout and an Agents-style hero using the site styling skill."