Sites are hand-written HTML, CSS, and vanilla JavaScript on GitHub Pages: no build step, frameworks, CSS libraries, or web fonts, and no dependencies beyond unmodified vendored code. Sibling sites share one base, and each keeps its own palette and motif.

Read the repo's AGENTS.md first; it wins where it disagrees with this skill. The exact values, class names, and file contracts are in references/design-system.md and references/code.md. For anything not covered here, copy from a sibling site that already does something similar rather than inventing, but where a sibling breaks a rule below, follow the rule.

Rules

Three sheets. styles/index-common.css holds everything theme-independent; index-light.css and index-dark.css hold tokens and theme-painted backgrounds. Both theme sheets ship on every load, media-scoped to prefers-color-scheme, so the page follows the OS with no JavaScript. scripts/dark-mode.js acts only on a stored override.
Anything else themed ships both variants, media-scoped, with data-theme for the script to flip (<picture> with a dark <source>). Never swap src from script or hide a duplicate with display.
Colors come from the product (its icon, logo, or own UI), with the source named in a comment, and stay distinct from sibling sites' palettes.
Contrast. Text holds 4.5:1 on whatever it sits on, including --bg, the glow's strongest point, and chips; the title gradient and non-text UI hold 3:1. Note checked ratios in the tokens' comments. Composite translucent layers over what they sit on before measuring.
Shared brand mark. When sites share a logo, each loads it from its one canonical URL rather than a copy, uncropped on a theme-aware backing (--logo-circle) that holds 3:1 with its main colors, with the same values on every site.
Scroll-to-top is overview-return. Ad blockers hide back-to-top, jump-to-top, and scroll-to-top.
Accessibility. Hover styles only inside @media (hover: hover) and (pointer: fine); a 2px :focus-visible ring; prefers-reduced-motion honored in CSS and in scripted scrolling; no user-scalable=no; aria-label on icon-only controls and aria-hidden="true" on their SVGs.
Images. Every published <img> has width, height, and decoding="async", plus fetchpriority="high" for the hero or loading="lazy" below the fold. Decorative ones get alt="".
Publishing. Pages runs Jekyll on the branch root and copies files without front matter verbatim, so add none. List every root file that isn't part of the site in _config.yml's exclude by name, since **/*.md misses the root. Publish third-party licenses that require it as .txt, so the Markdown exclusions can't drop them.
Link previews are 1200x630 opaque PNGs on the dark theme, rendered with headless Chrome from a committed, unpublished og-image/. Re-render in the same change as anything they show.
Shared patterns stay in sync. When one changes on a site, carry it to every sibling that has it, and update this skill if a rule here changed.

static-site-rules

Rules

Update together