Using Site Designer
Overview
This skill routes you to static site design and implementation capabilities. Use it when building websites for developer tools, open-source projects, or documentation-heavy sites where content quality and developer UX matter more than marketing aesthetics.
Core Principle: Developer tool sites succeed on substance — clear docs, working examples, and fast navigation. Not hero images and testimonials.
When to Use
Load this skill when:
- Planning site structure or information architecture for a project
- Implementing HTML/CSS for a developer-facing site
- Setting up design tokens and theming (dark/light mode)
- Building documentation site layouts with sidebars, breadcrumbs, search
- Choosing and configuring a static site generator or docs-first framework (Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3)
- User mentions: "website", "homepage", "landing page", "docs site", "static site"
Don't use for: General UI/UX design principles (use lyra-ux-designer), document formatting/PDF output (use muna-document-designer), or web API backend development (use axiom-web-backend).
How This Pack Works
This pack provides a site-designer agent — a specialist subagent that combines information architecture, CSS craftsmanship, and developer UX expertise. The agent handles:
| Capability |
Details |
| Information architecture |
Site maps, navigation strategy, audience-specific paths |
| HTML/CSS implementation |
Semantic markup, CSS custom properties, responsive layouts |
| Design tokens |
Color palettes, typography, spacing scales, dark/light mode |
| Developer UX |
Code blocks with copy, anchor links, version selectors, search |
| Static site tooling |
Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3 — selection and configuration |
| Accessibility |
WCAG AA compliance, keyboard nav, screen reader support |
Reference Sheets
Reference sheets are located in the same directory as this SKILL.md file. Load them when the user's task matches:
| Reference |
When to Load |
| code-block-patterns.md |
Code blocks with copy-to-clipboard, syntax highlighting, language tabs, terminal styling, heading anchors |
| documentation-sites.md |
Multi-page documentation with sidebar navigation, versioning, search, API reference layouts |
| landing-pages.md |
Project homepages and landing pages — content-first design for open-source and developer tools |
| responsive-patterns.md |
Container queries, :has(), native nesting, fluid type, <dialog popover> mobile sidebar, sidebar collapse, responsive tables and code blocks |
| static-site-tooling.md |
Choosing and configuring docs-first frameworks (Starlight, VitePress, Docusaurus 3) and general-purpose generators (Hugo, Astro, Eleventy) — build pipelines and deployment with the first-party GitHub Pages flow |
| theming-and-tokens.md |
Design token systems with OKLCH primitives, light-dark() semantic tokens, color-mix() derivations, dark/light mode toggle |
To load: Read the reference sheet from this skill's directory and include its guidance when dispatching the site-designer agent. Multiple sheets can be combined (e.g., documentation-sites + theming-and-tokens + responsive-patterns for a themed responsive docs site).
Quick Start
Designing a New Site
Ask for what you need — the site-designer agent will be dispatched:
"Plan the site structure for our open-source CLI tool"
"Create a docs site layout with sidebar navigation"
"Set up design tokens with dark mode for our project site"
"Build a landing page for our Python library"
Common Workflows
New project site:
Start with information architecture (who are the audiences, what content exists), then design tokens, then implement pages incrementally.
Documentation site:
Load the documentation-sites reference sheet. Focus on navigation patterns, content hierarchy, and cross-linking before any visual design.
Adding theming:
Load the theming-and-tokens reference sheet. Define CSS custom properties, implement dark/light toggle, derive the full palette from brand colors.
Relationship to Other Skills
| Need |
Use |
| UI/UX design principles and patterns |
lyra-ux-designer |
| Professional PDF/document formatting |
muna-document-designer |
| Writing documentation content |
muna-technical-writer |
| Web API backend development |
axiom-web-backend |
| Building the website itself |
lyra-site-designer (this pack) |
The typical flow: design with lyra-ux-designer, write content with muna-technical-writer, build the site with lyra-site-designer.
1---2name: using-site-designer3description: Use when designing or implementing static websites for developer tools, open-source projects, or technical documentation — information architecture, HTML/CSS, design tokens, developer UX patterns4---56# Using Site Designer78## Overview910This skill routes you to static site design and implementation capabilities. Use it when building websites for developer tools, open-source projects, or documentation-heavy sites where content quality and developer UX matter more than marketing aesthetics.1112**Core Principle**: Developer tool sites succeed on substance — clear docs, working examples, and fast navigation. Not hero images and testimonials.1314## When to Use1516Load this skill when:17- Planning site structure or information architecture for a project18- Implementing HTML/CSS for a developer-facing site19- Setting up design tokens and theming (dark/light mode)20- Building documentation site layouts with sidebars, breadcrumbs, search21- Choosing and configuring a static site generator or docs-first framework (Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3)22- User mentions: "website", "homepage", "landing page", "docs site", "static site"2324**Don't use for**: General UI/UX design principles (use `lyra-ux-designer`), document formatting/PDF output (use `muna-document-designer`), or web API backend development (use `axiom-web-backend`).2526## How This Pack Works2728This pack provides a **site-designer agent** — a specialist subagent that combines information architecture, CSS craftsmanship, and developer UX expertise. The agent handles:2930| Capability | Details |31|------------|---------|32| **Information architecture** | Site maps, navigation strategy, audience-specific paths |33| **HTML/CSS implementation** | Semantic markup, CSS custom properties, responsive layouts |34| **Design tokens** | Color palettes, typography, spacing scales, dark/light mode |35| **Developer UX** | Code blocks with copy, anchor links, version selectors, search |36| **Static site tooling** | Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3 — selection and configuration |37| **Accessibility** | WCAG AA compliance, keyboard nav, screen reader support |3839## Reference Sheets4041Reference sheets are located in the **same directory** as this SKILL.md file. Load them when the user's task matches:4243| Reference | When to Load |44|-----------|-------------|45| [code-block-patterns.md](code-block-patterns.md) | Code blocks with copy-to-clipboard, syntax highlighting, language tabs, terminal styling, heading anchors |46| [documentation-sites.md](documentation-sites.md) | Multi-page documentation with sidebar navigation, versioning, search, API reference layouts |47| [landing-pages.md](landing-pages.md) | Project homepages and landing pages — content-first design for open-source and developer tools |48| [responsive-patterns.md](responsive-patterns.md) | Container queries, `:has()`, native nesting, fluid type, `<dialog popover>` mobile sidebar, sidebar collapse, responsive tables and code blocks |49| [static-site-tooling.md](static-site-tooling.md) | Choosing and configuring docs-first frameworks (Starlight, VitePress, Docusaurus 3) and general-purpose generators (Hugo, Astro, Eleventy) — build pipelines and deployment with the first-party GitHub Pages flow |50| [theming-and-tokens.md](theming-and-tokens.md) | Design token systems with OKLCH primitives, `light-dark()` semantic tokens, `color-mix()` derivations, dark/light mode toggle |5152To load: Read the reference sheet from this skill's directory and include its guidance when dispatching the site-designer agent. Multiple sheets can be combined (e.g., documentation-sites + theming-and-tokens + responsive-patterns for a themed responsive docs site).5354## Quick Start5556### Designing a New Site5758Ask for what you need — the site-designer agent will be dispatched:5960```61"Plan the site structure for our open-source CLI tool"62"Create a docs site layout with sidebar navigation"63"Set up design tokens with dark mode for our project site"64"Build a landing page for our Python library"65```6667### Common Workflows6869**New project site:**70Start with information architecture (who are the audiences, what content exists), then design tokens, then implement pages incrementally.7172**Documentation site:**73Load the documentation-sites reference sheet. Focus on navigation patterns, content hierarchy, and cross-linking before any visual design.7475**Adding theming:**76Load the theming-and-tokens reference sheet. Define CSS custom properties, implement dark/light toggle, derive the full palette from brand colors.7778## Relationship to Other Skills7980| Need | Use |81|------|-----|82| UI/UX design principles and patterns | `lyra-ux-designer` |83| Professional PDF/document formatting | `muna-document-designer` |84| Writing documentation content | `muna-technical-writer` |85| Web API backend development | `axiom-web-backend` |86| **Building the website itself** | **`lyra-site-designer`** (this pack) |8788The typical flow: design with `lyra-ux-designer`, write content with `muna-technical-writer`, build the site with `lyra-site-designer`.
tachyon-beep