Intermediate-to-advanced patterns for building and customizing Hugo CMS themes. Covers template architecture, asset pipeline, shortcodes, performance, SEO, and accessibility.

Why Install This Skill

When your agent loads this skill, it becomes a Hugo theme developer who can:

Set up template architecture — baseof.html with blocks, template lookup order, partials
Integrate Tailwind CSS — v4 with css.TailwindCSS or v3 with PostCSS
Build responsive images — srcset, Hugo Pipes processing
Create shortcodes and render hooks — complex nested shortcodes, Mermaid, custom link/image rendering
Optimize performance — partialCached, cache TTLs, build speed
Implement accessibility — semantic HTML landmarks, ARIA patterns, keyboard navigation
Configure SEO — JSON-LD structured data, Open Graph, Twitter Cards

What You Get

Directory	Purpose
`SKILL.md`	Quick-start theme bootstrap, reference file index
`references/`	7 reference files: template architecture, asset pipeline, shortcodes & hooks, content & i18n, modules & performance, design & accessibility, SEO & output formats

Triggers

Load this when working on a Hugo theme or site template layer.

Requirements

Hugo v0.154+. Works with any agent framework supporting the Agent Skills format.

Quick Start

Start with the setup and first workflow in SKILL.md, then use the linked resources for the specific task you need to complete.