static-site-engineer

Develop front-end templates across Zola, Hugo, 11ty, Astro, and Eleventy sites.

Updated Apr 1, 2018
One-click install
npx skills add https://github.com/reset/dotfiles --skill static-site-engineer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: static-site-engineer
Source: https://github.com/reset/dotfiles/tree/main/.claude/skills/static-site-engineer
Command: npx skills add https://github.com/reset/dotfiles --skill static-site-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the subtle, costly errors that plague static site front-end work, including broken template syntax, CSS specificity conflicts, missed visual regressions, unoptimized assets, and frontmatter parsing issues, ensuring your static site renders correctly and performs well across all target viewports.

Core Features & Use Cases

  • Cross-SSG workflow guidance for Zola, Hugo, 11ty, Astro, and Eleventy projects, covering templates, SCSS/CSS, content authoring, small vanilla JS, and image processing.
  • Built-in mental models and cross-SSG pattern libraries to avoid reinventing existing functionality, plus SSG-specific gotchas for Tera (Zola) and Hugo templates.
  • Step-by-step verification workflows including build checks and visual regression testing to catch issues before deployment.
  • Use Case: If you are adding a new blog post template to an existing Hugo site, this Skill guides you to reuse existing partials, adhere to the project's CSS pattern library, run a green build, and verify the output renders correctly on mobile and desktop.

Quick Start

Invoke the static-site-engineer skill to add a new responsive blog post template to your existing Zola static site, reusing existing partials and verifying the output renders correctly on mobile and desktop viewports.

Frequently Asked Questions about static-site-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix broken Hugo template syntax and CSS specificity conflicts?

Fix broken Hugo template syntax and CSS specificity conflicts by applying built-in cross-SSG pattern libraries and SSG-specific gotcha checks. This approach eliminates subtle rendering errors and ensures your static site performs well across all target viewports before deployment.

Does this static site workflow support Zola, Astro, and Eleventy projects?

Yes, this static site workflow supports Zola, Astro, and Eleventy projects. It provides cross-SSG workflow guidance covering template editing, SCSS authoring, Markdown content work, and build debugging across all these major static site generators.

What is the best way to add a responsive blog post template to a Zola site?

The best way to add a responsive blog post template to a Zola site is to reuse existing partials and adhere to the project's CSS pattern library. Then run build checks and visual regression verification to ensure correct rendering on mobile and desktop viewports.

How do I verify visual regressions in static site front-end development?

Verify visual regressions in static site front-end development by running step-by-step verification workflows. These workflows include build checks and visual regression testing to catch unoptimized assets and rendering issues before deployment.

When do I need frontmatter schema design for static site generators?

You need frontmatter schema design for static site generators when authoring Markdown content to prevent parsing issues. Proper schema design ensures consistent data structure and eliminates costly errors across Zola, Hugo, 11ty, Astro, and Eleventy projects.

Why does my static site JavaScript budget constraint fail during vanilla JS implementation?

Your static site JavaScript budget constraint fails during vanilla JS implementation when scripts exceed performance limits. Adhering to static site JavaScript budget constraints requires small vanilla JS implementation to maintain optimal rendering and performance across target viewports.