# Page Styling > Define agentconfig.org page layout and hero styling for new pages that match the site. Use when this capability is needed. - Skill: `tomevault-io/page-styling` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/page-styling` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/page-styling/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/page-styling --- # 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 `
`. - 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." --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/agentconfig) — claim your Tome and manage your conversions.