chore: updated hugo-template-guidance skill

This commit is contained in:
Rubel Hossain 2026-06-14 13:20:17 +06:00
parent efeff9b865
commit 0f56757978
5 changed files with 18 additions and 11 deletions

View file

@ -1,11 +1,11 @@
---
name: hugo-template-guidance
description: Use whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or Tailwind v4 styling/theming. Use for ANY question about the structure, usage, or customization of the template or theme.
description: Use whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or styling/theming (Tailwind v4, Bootstrap 5, or a hybrid — verify which). Use for ANY question about the structure, usage, or customization of the template or theme.
---
# Template Guidance
Handbook for this theme (Hugo Extended + Tailwind v4 + Hugo Modules), assuming the standard **project-setup** layout (site at root, theme vendored in `themes/<theme>/` — the single folder under `themes/`; see `references/detect-mode.md` to find its name). Progressive disclosure: **read the matching `references/` file before acting.**
Handbook for this theme (Hugo Extended + Hugo Modules; styling is Tailwind v4, Bootstrap 5, or a hybrid — verify before assuming), assuming the standard **project-setup** layout (site at root, theme vendored in `themes/<theme>/` — the single folder under `themes/`; see `references/detect-mode.md` to find its name). Progressive disclosure: **read the matching `references/` file before acting.**
> If `exampleSite/hugo.toml` exists, the repo is still in theme-setup — run `<pm> project-setup` first (see `references/detect-mode.md`) before using anything below.
>
@ -25,7 +25,7 @@ Handbook for this theme (Hugo Extended + Tailwind v4 + Hugo Modules), assuming t
| Add/configure a new language, multilingual, i18n, translate | `references/i18n-guidance.md` |
| Site config, menus, social, feature toggles, SEO | `references/page-configuration.md` |
| Package manager detection, scripts, generators, module updates | `references/script-usage.md` |
| Tailwind v4, dark mode, design tokens (`data/theme.json`) | `references/styling-and-theming.md` |
| Styling/theming (Tailwind v4, Bootstrap 5, or hybrid — verify first), dark mode, design tokens | `references/styling-and-theming.md` |
## Steps

View file

@ -23,25 +23,24 @@ Hugo's union filesystem makes root take precedence over the theme for the **same
Use when the page needs its own layout (hero image, custom sections) beyond plain content — not just a title + body.
1. **Content**`content/english/<section>/_index.md` (or `pages/my-page.md`).
1. **Content**`content/english/<page-name>/_index.md`. Page info goes in the frontmatter. follow related pages as example
2. **Template**`layouts/<layout-name>.html` (root, mirroring the theme path — see above). Define `"main"` and read `.Title`, `.Params.*`, `.Content`.
- The frontmatter `layout: "<name>"` must match the template filename (`layouts/<name>.html`).
- **Analyze an existing template first** (`about.html`, `contact.html`)
- `baseof.html` supplies head/header/footer/SEO around `"main"` — never omit `{{ define "main" }}`.
- **Analyze an existing template first** (`about.html`, `contact.html`) for the structure, partials used, and how it reads frontmatter — copy it if needed.
## Recipe 2 — Generic markdown page (like `elements`, `privacy-policy`)
Use when the page is just a title + long-form content — no custom layout needed.
1. **Content only**`content/english/pages/my-page.md`, frontmatter has **no `layout` field**:
1. **Content only**`content/english/pages/<page-name>.md`, frontmatter has **no `layout` field**:
2. **No template needed** — falls through to the existing `single.html`.
## Recipe 3 — New section (like `call-to-action`)
Use when adding a new block to the homepage or any other page that's toggled on/off and editable via content frontmatter.
1. **Content block**`content/english/sections/my-section.md`. Must include `enable: true/false` and `build.render: "never"` (so it doesn't become a standalone page); add whatever params the partial needs:
1. **Content block**`content/english/sections/<section-name>.md`. Must include `enable: true/false` and `build.render: "never"` (so it doesn't become a standalone page); add whatever params the partial needs:
```yaml
---
@ -90,7 +89,7 @@ Use when adding a new block to the homepage or any other page that's toggled on/
## Navigation
Surface a page (Recipes 1 & 2) via `config/_default/menus.en.toml` (don't hardcode links):
Surface a page (Recipes 1 & 2) via `config/_default/menus.en.toml` (don't hardcode links), if not exists find it on other places.
```toml
[[main]]

View file

@ -1,6 +1,6 @@
# Project Architecture
This theme = **Hugo Extended (0.158+)** + **Tailwind v4** + **Hugo Modules**.
This theme = **Hugo Extended <version from netlify.toml>** + **Hugo Modules**, styled with **Tailwind v4**, **Bootstrap 5 (SCSS)**, or a hybrid depending on the build — verify in `references/styling-and-theming.md` before assuming Tailwind.
This reference assumes the **project-setup** layout: site files at root, theme vendored in `themes/<theme>/`. If `exampleSite/hugo.toml` exists instead, run `<pm> project-setup` first (see `references/detect-mode.md`).

View file

@ -1,5 +1,13 @@
# Styling and Theming
> [!IMPORTANT]
> **Styling stack verification required:** This skill is reused across multiple theme builds. **Tailwind v4** below is the common pattern but **not universal** — some builds are **Bootstrap 5 (SCSS)**, or a hybrid of both. Check before describing or changing any styling:
>
> - `themes/<theme>/assets/css/main.css` importing `tailwindcss`**Tailwind v4** — the rest of this doc applies.
> - `themes/<theme>/assets/scss/` with a `style.scss`/`_bootstrap.scss` importing Bootstrap's SCSS, and/or `gohugoio/hugo-mod-bootstrap-scss` listed in `config/_default/module.toml`**Bootstrap 5 (SCSS)** drives the theme. Variables live in SCSS (often fed by `site.Params.variables`), not `data/theme.json`.
> - `data-bs-*` attributes, or `navbar`/`dropdown`/`collapse`/`modal`/`accordion` classes in layouts, plus `assets/js/bootstrap.js` importing Bootstrap JS components → those widgets are **Bootstrap-driven**. Don't treat them as dead Tailwind-migration leftovers, and don't rebuild them with Hugo Modules or custom JS.
> - `@plugin 'tailwind-bootstrap-grid'` in `main.css` → Tailwind v4 **with** Bootstrap-style grid classes (`row`, `col-*`, `container`) as real utilities — both systems are active, neither is a mistake.
**Tailwind v4** (CSS-first) + a **design-token engine** driven by `data/theme.json` (root). Generated/source CSS lives in `themes/<theme>/assets/css/`; your overrides go in root `assets/css/custom.css` (Hugo unions root over theme).
## Tokens (`data/theme.json`)

View file

@ -5,7 +5,7 @@
"source": "zeon-studio/template-skills",
"sourceType": "github",
"skillPath": "skills/hugo-template-guidance/SKILL.md",
"computedHash": "6f9b02912f034b8c662274b06da77194d4968792aaeade69b45833638dde5c5e"
"computedHash": "3484c6acc2c60d4b3d02d4ef8f36baf0711a94c800353995a78b6209eac27f20"
}
}
}