blog/.agents/skills/eleventy-tiling-blog/SKILL.md

name, description

name	description
eleventy-tiling-blog	Use this skill when developing, refactoring, or building the River Rooks Eleventy blog, modularizing CSS into tokens and components, creating Nunjucks layouts and partials from sample designs, or configuring Eleventy build pipelines.

Eleventy Tiling Blog Development Skill

This skill guides the agent in modularizing templates and CSS from sample-designs/ into a clean, DRY Eleventy (11ty) static publication site.

---

1. CSS Modularization Workflow

When extracting CSS from sample-designs/*.html into src/assets/css/:

1. Tokens (src/assets/css/tokens.css): Extract all :root custom properties:

   :root {
     --bg-canvas: #0d0f12;
     --bg-surface: #121417;
     --bg-elevated: #1c1f26;
     --border-color: #2b303b;
     --text-primary: #e0e6f0;
     --text-muted: #8a95a5;
     --accent-cyan: #00f0ff;
     --accent-green: #00e676;
     --accent-amber: #ffb700;
     --accent-red: #ff5252;
     --font-mono: 'IBM Plex Mono', monospace;
     --font-code: 'JetBrains Mono', monospace;
     --font-prose: 'Inter', sans-serif;
   }
   

2. Reset & Base (src/assets/css/reset.css):

   • Universal box-sizing reset (box-sizing: border-box; margin: 0; padding: 0;).
   • Body font defaults, base line-height (1.6), instant hover transitions (transition: none;).
   • Explicit 1px/2px focus ring styling for keyboard accessibility.

3. Layout Grid (src/assets/css/layout.css):

   • .tiling-layout: Centered flex column, max-width: 1120px to 1160px.
   • .split-grid: 2-column or multi-tile layout with rigid gaps (16px).
   • .article-workspace-grid: Left sticky sidebar (290px) + main article reading view (1fr).

4. Component Modules (src/assets/css/components/):

   • global-bar.css: .global-bar, .brand-group, .status-indicator, .bar-nav, .bar-link.
   • tiles.css: .tile, .tile-header, .tile-title, .tile-meta, .hero-tile.
   • code-box.css: .terminal-code-box, .code-titlebar, .code-content.
   • article.css: Prose typography capped at 65ch, inline <kbd>, tables, callouts.

---

2. Nunjucks (.njk) Component Architecture

1. Layout Inheritance:

   • src/_includes/layouts/base.njk:

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>{{ title }} | River Rooks</title>
       <link rel="stylesheet" href="/assets/css/main.css">
     </head>
     <body>
       <main class="tiling-layout">
         {% include "partials/global-bar.njk" %}
         {{ content | safe }}
         {% include "partials/footer.njk" %}
       </main>
     </body>
     </html>
     

   • src/_includes/layouts/post.njk: Extends layouts/base.njk, injecting the .article-workspace-grid with the table of contents sidebar and article body.

2. Reusable Partials:

   • src/_includes/partials/global-bar.njk
   • src/_includes/partials/hero-tile.njk
   • src/_includes/partials/post-card.njk
   • src/_includes/partials/stats-sidebar.njk
   • src/_includes/partials/code-box.njk

---

3. Explaining Changes to the User

When writing or modifying Eleventy files:

• Explain how Nunjucks blocks and layout inheritance prevent template duplication.
• Explain how CSS custom properties cascade and ensure dark-mode consistency.
• Point out how the resulting build outputs raw static HTML in _site/ with zero runtime JavaScript overhead.

---

4. Validation & Verification

Run these commands to test Eleventy builds:

# Validate Eleventy configuration and build static output
npx @11ty/eleventy --dryrun

# Build to _site directory
npx @11ty/eleventy

# Launch local dev server with auto-refresh
npx @11ty/eleventy --serve