Menu
Build modern static websites using semantic HTML and CSS without external dependencies or build systems
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | web-static |
| description | Build modern static websites using semantic HTML and CSS without external dependencies or build systems |
| argument-hint | [description of the website or page to build] |
Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.
<script> tags, no inline event handlers, no .js files.css files<div>/<span> — use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, <address><main> per pagelang attribute on <html>alt on all images (empty alt="" for decorative)aria-label on <nav> when multiple navs exist<label> associated with every form input<a> for navigation, not buttons<br> only for line breaks in content, never for spacing--color-primary, --spacing-unit, etc.)margin-block, padding-inline, inline-size, block-size)min-width breakpointsoklch() colorsclamp() for fluid typographygap over margins for spacing in flex/grid layoutsprefers-reduced-motion: reduce and prefers-color-scheme: dark media queriescontent-visibility: auto for off-screen sections:focus-visible indicators@supports for feature detection when applying Baseline Newly Available features, providing a graceful fallback for older browsersEvery project starts with:
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
When interactivity is needed, use these approaches — never JavaScript:
<details>/<summary>:target pseudo-class with anchor links:checked + sibling selectors:hover + :focus-within:checked + sibling selectorsappearance: none to customize native controlsloading="lazy" on below-fold images<picture> with WebP sources for responsive imagescontain: layout style paint on repeated componentsproject/
├── index.html
├── css/
│ └── style.css
├── images/
├── fonts/
└── icons/
For small sites, a flat structure (HTML + single style.css + images/) is acceptable.
<br> for spacing<div> when a semantic element existsonclick or any inline event handlersSpec-driven BCE workflow where one capability spec equals one business component (same name) and the spec is the boundary contract. Invoked as `/sbce new|apply <capability-or-feature>` (or by intent), it drives declare → converge; the stack's own test loop is the oracle for "done". `new` accepts a BC name or a natural-language feature description that may decompose into one or several BCs (new or existing). Stack-neutral — composes with `/bce` and a stack skill (`/java-cli-app`, `/microprofile-server`, `/web-components`, …) for code shape and verification. Use when authoring or converging a capability spec, declaring a feature as one or more BCs, mapping a spec to a BC, or running `/sbce new`, `/sbce apply`. Triggers on "SBCE", "capability spec", "spec-driven BCE", "declare a feature", "spec to BC", "converge to spec", "/sbce new", "/sbce apply".
Create zero-dependency, single-file executable Java scripts for system-wide use via PATH. Use when asked to create a single-file Java shell script, system utility, PATH-installed Java tool, or shebang-launched Java program without the .java extension. Triggers on "Java script", "Java utility", "PATH script", "system script", or requests for single-file Java programs installed in /usr/local/bin or similar PATH directories. Not for multi-file Java applications — use java-cli-app for those.
Architecture and coding rules for long-running Java MicroProfile / Jakarta EE server applications — BCE layering, business components (BC), JAX-RS resources, CDI, JSON-P, testing (unit/integration/system), and Maven project structure. Use when creating, generating, scaffolding, writing, or reviewing code, resources, entities, boundaries, or business components in MicroProfile server projects. Not for serverless deployments.
Architecture and coding rules for single-page applications using web components, BCE layering, lit-html templating, Redux Toolkit state management, and client-side routing. Web standards and web platform first, minimal external dependencies. Use when creating, scaffolding, generating, writing, or reviewing web component applications, custom elements, state management, client-side routing, or frontend BCE architecture. Not for server-side rendering or framework-heavy applications.
Deliberately overengineer code by adding as many patterns, indirections, modules, anti-corruption layers, abstractions, and encapsulations as possible. Zero dependency on implementation. Use when asked to overengineer, enterprisify, enterprise-ify, abstract, add layers, add patterns, or make code "production-ready" in the most excessive way. Triggers on "enterprisify this", "overengineer this", "enterprise-ify", "add all the patterns", "make it abstract", "add indirection", "wrap this properly", or when maximum abstraction is requested for comedic or educational purposes.
Build Java 25+ projects with zb (Zero Dependencies Builder). Use when compiling, building, packaging, or running Java projects that have no external dependencies. Triggers on "build with zb", "zb build", "compile and package", "create executable JAR", or when a .zb configuration file is present in the project. Not for projects requiring Maven/Gradle dependency management.