This skill should be used when the user asks about Hugo themes, installing a theme, customizing a theme, overriding theme layouts or partials, Hugo template lookup order, creating a Hugo theme from scratch, Hugo asset pipeline (SCSS, PostCSS), Hugo baseof.html, or theme configuration parameters. Also applies when evaluating which theme to use, switching themes, or troubleshooting theme-related rendering issues.
From hugo-reponpx claudepluginhub therealbill/mynet --plugin hugo-repoThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Retrieves current documentation, API references, and code examples for libraries, frameworks, SDKs, CLIs, and services via Context7 CLI. Ideal for API syntax, configs, migrations, and setup queries.
Hugo themes control the visual presentation and layout structure of a site. Most users install a community theme and customize it by overriding specific templates and styles. Full theme creation from scratch is less common but documented here at reference level.
The recommended approach — no git submodules, version-managed:
# Initialize modules if not already done
hugo mod init github.com/username/mysite
# Add theme as module dependency
hugo mod get github.com/theNewDynamic/gohugo-theme-ananke
In hugo.toml:
[module]
[[module.imports]]
path = 'github.com/theNewDynamic/gohugo-theme-ananke'
Update the theme:
hugo mod get -u github.com/theNewDynamic/gohugo-theme-ananke
Hugo resolves templates in this order (first match wins):
layouts/ in the project root (your overrides)layouts/ in the themeThis means: to override any theme template, create the same file path under your project's layouts/ directory.
If the theme has themes/mytheme/layouts/partials/header.html, override it by creating:
layouts/partials/header.html
Your version replaces the theme's version completely. To extend rather than replace, copy the theme's partial and modify it.
Theme provides themes/mytheme/layouts/_default/single.html. Override with:
layouts/_default/single.html
Override the list template only for the blog section:
layouts/blog/list.html
Hugo's template lookup searches section-specific templates before _default/.
Add to static/css/custom.css and include in the head partial:
<!-- layouts/partials/head.html -->
{{ partial "head/meta.html" . }}
{{ partial "head/css.html" . }}
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">
Process SCSS/CSS through Hugo's asset pipeline:
<!-- layouts/partials/head.html -->
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
Place source files in assets/scss/main.scss.
Many themes support CSS customization via config:
[params]
customCSS = ["css/custom.css"]
colorScheme = "dark"
Check the theme's documentation for supported parameters.
Themes define custom parameters in [params]:
[params]
# Common theme parameters
logo = "/images/logo.png"
favicon = "/images/favicon.ico"
description = "Site description"
dateFormat = "January 2, 2006"
# Social links (theme-specific)
[params.social]
github = "username"
twitter = "username"
# Navigation (theme-specific)
[params.nav]
showBreadcrumbs = true
showTableOfContents = true
hugo new theme mytheme
Creates:
themes/mytheme/
├── archetypes/
│ └── default.md
├── layouts/
│ ├── _default/
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── partials/
│ │ ├── footer.html
│ │ ├── head.html
│ │ └── header.html
│ └── index.html
├── static/
│ ├── css/
│ └── js/
└── theme.toml
All pages inherit from this:
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
{{ partial "header.html" . }}
<main>
{{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }}
</body>
</html>
{{ define "main" }}
<article>
<h1>{{ .Title }}</h1>
<time>{{ .Date.Format "January 2, 2006" }}</time>
{{ .Content }}
</article>
{{ end }}
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
<ul>
{{ range .Pages }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
<p>{{ .Summary }}</p>
</li>
{{ end }}
</ul>
{{ end }}
For detailed theme creation patterns, see Hugo's template documentation. The hugo-content-authoring skill covers shortcodes and render hooks that complement theme layouts.