Boilerplate Static Website

Purpose

Built as a reusable starting point for static websites with a proper Sass architecture. Establishes the foundational folder conventions (abstracts, base, components, layout, pages, themes, vendors) that scale from prototype to production.

Stack

What I Learned

• The 7-1 Sass architecture (abstracts, base, components, layout, pages, themes, vendors + main.scss) is a timeless pattern for organizing stylesheets at any scale
• Boilerplates are not about saving time on the first project — they are about encoding decisions so you do not have to re-make them every time
• Separating structure (HTML), presentation (CSS/Sass), and behavior (JS) is the original component model — frameworks formalized it, but the principle predates them
• A well-organized vanilla project teaches you what frameworks are actually doing under the hood — bundling, scoping, and composing these same primitives

Key Insights

• In the age of AI agents, boilerplates are more important than ever — not for humans to copy, but as context for agents to follow. Without a boilerplate or a CLAUDE.md or a skill file telling the agent the scope of the app (prototype? business? enterprise?), the agent will scaffold in the most generic way possible. A boilerplate is a contract that says "build it like this."
• Markdown files (CLAUDE.md, DESIGN.md, SKILL.md) in your project root serve the same purpose as a boilerplate for AI agents — they encode architectural decisions, conventions, and scope so the agent composes the project your way instead of the default way
• The lesson for modern development: invest in your project scaffolding and instruction files. A 20-line CLAUDE.md can save hours of correcting an agent that guessed wrong about your architecture.