theme-system — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited theme-system (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
The Lossless Group's firm-wide conventions for theme architecture, visual modes, and design token systems.
Status: Initial scaffold (May 2026) — actively developing from astro-knots patterns.
theme.css vs global.css organization/brand-kit or /design-system reference pagesEvery Lossless site ships with three modes, not two:
Why three? Stakeholder management. Nerds pick dark, traditionalists pick light, design-forward stakeholders pick vibrant. The toggle ends the "which mode" argument before it starts.
Critical: Vibrant mode is dark-based (like dark mode, not light mode). Common error: vibrant inherits light mode's white background. See references/vibrant-mode-implementation.md (TBD).
Tokens come in two tiers:
--color__blue-azure, --font__lato)__ separator--color-primary, --font-body)var()Why two tiers? Client iteration. When a client wants a different primary color, you add/change a named token and re-point the semantic token. Components don't change.
See references/two-tier-tokens.md (TBD).
@tailwindcss, imports theme.css, base resetsSee references/file-organization.md (TBD).
/brand-kit and /design-system pages follow doc conventionsSites with strong implementations:
All paths are under astro-knots/. Verified 2026-10-06.
data-mode with plain CSS. It has three designed modes in src/styles/theme.css (dark :62-87, light :90-116, vibrant :119-146) and an inline head pre-paint script at src/layouts/Base.astro:46-61.data-mode, a head pre-paint script (src/layouts/BaseLayout.astro:45-60), and a labeled radiogroup ModeToggle.astro.@custom-variant × 3 and @theme inline in src/styles/globals.css:8-35, with effects switched off by token in src/styles/tokens.css. It uses data-theme, a site deviation, so rename it to data-mode when copying.src/styles/theme.css).sites/hypernova-site. Its switcher is two-mode only and loses vibrant. packages/ui/theme-mode applies the mode on DOMContentLoaded, which runs after first paint, so it needs an inline pre-paint script added.astro-knots/context-v/explorations/Implement-Three-Mode-Theme-System-for-Lossless-Brand-Site-Decouplings.md.This skill is actively under development. Planned content:
references/vibrant-mode-implementation.md — full guide to dark-based vibrant modereferences/two-tier-tokens.md — deep dive on token architecturereferences/file-organization.md — theme.css vs global.css vs utilitiesreferences/mode-switcher-utilities.md — JS utilities patternreferences/brand-kit-page.md — required sections and patternsreferences/design-system-page.md — component catalog conventionsThis skill is being extracted from:
astro-knots/context-v/blueprints/Maintain-Themes-Mode-Across-CSS-Tailwind.mdastro-knots/context-v/prompts/New-Site-Quickstart-Guide.md §6astro-knots/references/playbooks/new-site-setup.md §8-9sites/lossless-toolkit-site, sites/lossless-slides-site, splash/, sites/fullstack-vc (and sites/reach-edu-hub, not checked out locally)Content will be migrated and refined incrementally. For now, cross-reference those sources.
astro-knots/context-v/blueprints/Maintain-Themes-Mode-Across-CSS-Tailwind.mdastro-knots/context-v/blueprints/Maintain-Design-System-and-Brandkit-Motions.md~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.