Skip to content

6 New Tools — Batch Build (April 17, 2026)

Built in: Single session, full lifecycle (V1 → QA → V2 → V3 → Audit) | Model: Claude Opus 4.6 (1M context) | Total tools: 38 → 44

Tools Built

1. SLA Uptime Calculator (/sla-calculator/)

  • What: Enter SLA % → see downtime budget (annual/monthly/weekly/daily). Reverse calculator (downtime → SLA %) and incident impact checker (which SLAs did you breach?)
  • Accent: #4ECDC4 Bright Mint | CSS: .slacalc-* | Body class: page-sla-calculator
  • Features: 3 calculator modes (forward/reverse/incident), preset buttons (99%–99.999%), SLA tier comparison table, M365 SLAs table with click-to-calculate, shareable URL, real-time slider input
  • Data: data/sla_calculator/slas.toml — 6 SLA tiers + 10 M365 SLAs (Exchange, Teams, SharePoint, OneDrive, Entra, Azure VMs, SQL, Intune, Defender, Power BI)
  • Tech: Pure math engine — no CDN deps. Forward: (1 - sla/100) × period. Reverse: (1 - downtime/period) × 100. Incident: compare actual downtime against tier thresholds
  • Tabs: Calculator, Compare, M365 SLAs, FAQ
  • Category: Admin
  • Template: layouts/sla-calculator/list.html | JS: static/js/sla-calculator.js (~9KB) | CSS: static/css/sla-calculator.css (~6KB)

2. IT Admin Achievement Badges (/admin-badges/)

  • What: Gamified career tracker — 45 badges across 6 categories, 4 rarity levels. Click to claim, view badge wall, download PNG
  • Accent: #FFD54F Soft Gold | CSS: .badges-* | Body class: page-admin-badges
  • Features: Badge wall (earned only), All Badges grid with category filter, daily challenge (date-seeded), canvas PNG download (1200×630), localStorage persistence, click to earn/un-earn with confirm dialog
  • Data: data/admin_badges/badges.toml — 45 badges, 6 categories (Survival, Security, Migration, Governance, Teaching, Legendary), 4 rarities (Common, Uncommon, Rare, Legendary)
  • Tech: Canvas-based PNG score card (1200×630), seeded daily challenge (mulberry32 or date-mod), event delegation on badge grid
  • Tabs: My Badges, All Badges, FAQ
  • Category: Community
  • Template: layouts/admin-badges/list.html | JS: static/js/admin-badges.js (~300 lines) | CSS: static/css/admin-badges.css

3. Password Policy Tester (/policy-tester/)

  • What: Score your org's password policy 0–100 against NIST 800-63B, CIS v8, Microsoft, Essential Eight
  • Accent: #26A69A Muted Teal | CSS: .ptester-* | Body class: page-policy-tester
  • Features: 6 form inputs (min length, complexity, expiry, lockout, MFA, history), SVG score ring (animated stroke-dashoffset), 5 category bars, real-time scoring on slider change, comparison table (your policy vs 4 standards with colour-coded pass/warn/fail cells), recommendations list, shareable URL
  • Data: data/policy_tester/standards.toml — 4 standards (NIST, CIS, Microsoft, Essential Eight) + 5 scoring rules with weighted checks
  • Tech: Weighted scoring algorithm — each input contributes to multiple category scores. Comparison table auto-generates pass/warn/fail by comparing user values against each standard's thresholds
  • Tabs: Assess, Compare Standards, FAQ
  • Category: Admin
  • Template: layouts/policy-tester/list.html | JS: static/js/policy-tester.js (~420 lines) | CSS: static/css/policy-tester.css

4. Incident Comms Generator (/incident-comms/)

  • What: Generate professional incident status updates. Pick outage type, severity, audience → get 3-phase update (initial/investigating/resolved) + optional creative mode
  • Accent: #FF8F66 Peach | CSS: .icomms-* | Body class: page-incident-comms
  • Features: Type/severity/audience dropdowns, creative mode toggle (professional → lighthearted), 3-phase output (initial/investigating/resolved) with per-section copy buttons, mailto integration (Open in Outlook), templates gallery with "Use Template" button to pre-fill generator
  • Data: data/incident_comms/templates.toml — 6 template types (Email Outage, Teams Down, Network Issue, Auth Failure, Cloud Service, Security Incident) with professional + creative versions per phase
  • Tech: Template engine with placeholder replacement ({{service}}, {{severity}}, {{audience}}). Mailto uses encodeURIComponent for safe subject/body encoding
  • Tabs: Generate, Templates Gallery, FAQ
  • Category: Admin
  • Template: layouts/incident-comms/list.html | JS: static/js/incident-comms.js (~260 lines) | CSS: static/css/incident-comms.css

5. CLI Command Quiz (/cli-quiz/)

  • What: See a task description, guess the PowerShell/CLI command. Multiple choice + hard mode (type it)
  • Accent: #7E57C2 Medium Purple | CSS: .cliquiz-* | Body class: page-cli-quiz
  • Features: 4 modes (Quick 10, Category Focus, Daily Challenge, Hard Mode), 10-second rAF timer with question-index race guard, category mastery tracker with bar charts, fuzzy match for hard mode (Levenshtein or includes-based), detailed explanations with MS Learn links, history (last 20 sessions), keyboard A/B/C/D shortcuts
  • Data: data/cli_quiz/commands.toml — 30 commands across 6 categories (Graph, Exchange, Teams, Azure, Windows, PowerShell) with accepted_commands[] array, difficulty level, learn_url
  • Tech: Same timer race guard pattern as Tech Acronym Battle — stores question index at timer start, validates it hasn't changed on timeout. Daily challenge uses date-seeded RNG. Hard mode fuzzy match normalises whitespace and case before comparison
  • Tabs: Play, Stats, FAQ
  • Category: Community
  • Template: layouts/cli-quiz/list.html | JS: static/js/cli-quiz.js (~480 lines) | CSS: static/css/cli-quiz.css

6. My IT Day Simulator (/it-day-sim/)

  • What: Choose-your-own-adventure as an IT admin. Branching story with 17 scenarios, score tracking, 4 result tiers
  • Accent: #C27BA0 Muted Rose | CSS: .itday-* | Body class: page-it-day-sim
  • Features: Branching story engine (Map-based O(1) scenario lookup), cumulative score tracker, progress bar (scenarios visited / total path length), choice result animation (fade-in feedback), daily challenge (fixed seed = same story path for everyone that day), canvas scorecard PNG (1200×630), game history in localStorage, shareable URL with seed, event delegation on choice buttons
  • Data: data/it_day_sim/story.toml — 17 scenarios with 2–3 choices each, each choice has points and next scenario ID. 4 result tiers: Chaos Agent (0–30), Survived (31–50), Solid Admin (51–70), Legendary Admin (71–100)
  • Tech: Story engine uses Map for O(1) scenario lookup by ID. No recursion — flat iteration through next pointers. Score accumulates per choice. Canvas PNG uses same pattern as Phishing Simulator / Acronym Battle
  • Tabs: Play, Results History, FAQ
  • Category: Community
  • Template: layouts/it-day-sim/list.html | JS: static/js/it-day-sim.js (~500 lines) | CSS: static/css/it-day-sim.css

Architecture Notes

  • All 6 follow the standard pattern: _index.md + list.html + .css + .js + TOML data
  • Glass pill tabs, tool-hero partial, FAQ tab, ecosystem cross-links, back-nav
  • All client-side, zero API calls, $0 cost
  • All use Hugo TOML double-access pattern: $data.filename.key (not $data.key)
  • Event delegation used on interactive grids (Badges, IT Day Sim) to prevent memory leaks
  • Timer race guard reused from Acronym Battle pattern (CLI Quiz)
  • Canvas PNG score card pattern reused from Phishing Simulator (Badges, IT Day Sim)
  • Daily challenge seeding reused from Bingo/Phishing/Acronym pattern (Badges, CLI Quiz, IT Day Sim)

Build Process

3-Phase Pattern

  1. Build phase — Create all 6 tools in parallel agents: _index.md, list.html, .css, .js, TOML data files. Each agent builds ONE tool and touches NO shared files
  2. Integration phase — Single session updates all shared files: toolkit_nav.toml, tool_colours.toml, tool_counters.toml, baseof.html body class chain, switcher.js Smart Nav TOOLS array, free-tools/list.html cards, taglines.toml, ecosystem partial (added community group)
  3. QA phase — 3-round audit: Round 1 (ID/class matching), Round 2 (structural issues), Round 3 (CSS polish)

Integration Files Updated

File Change
data/toolkit_nav.toml Added 6 entries with all fields (url, emoji, name, short, desc, color, category, visual, is_tool)
data/tool_colours.toml Added 6 colour entries — all share existing hues with different saturation/lightness
data/tool_counters.toml Added 6 base counter values
layouts/_default/baseof.html Added 6 body classes to chain (page-sla-calculator, page-admin-badges, page-policy-tester, page-incident-comms, page-cli-quiz, page-it-day-sim)
static/js/switcher.js Added 6 entries to Smart Nav TOOLS array
layouts/free-tools/list.html Added 6 tool cards in correct category sections (3 Admin, 3 Community)
scripts/og-generator/taglines.toml Added 6 taglines for OG image generation
layouts/partials/tool-ecosystem.html Added community group definition (was missing — only had copilot, m365-admin, ai-compare, cert, admin)

Colour Notes

Hue space is fully exhausted at 38 tools — every gap is < 10°. All 6 new tools share existing hues with different saturation/lightness values:

Tool Hex Hue Nearest Existing Compromise
SLA Calculator #4ECDC4 174° Meeting Planner #0EA5E9 (199°) Lower saturation, greener tint
Admin Badges #FFD54F 45° Countdown #FB923C (30°) Higher lightness, less orange
Policy Tester #26A69A 174° SLA Calculator #4ECDC4 (174°) Darker, more muted
Incident Comms #FF8F66 17° Service Health #EA580C (20°) Higher lightness, softer tone
CLI Quiz #7E57C2 262° CA Builder #7C3AED (265°) Lower saturation, warmer purple
IT Day Sim #C27BA0 330° AI News #ff66ff (300°) Lower saturation, desaturated rose

All documented in data/tool_colours.toml with rationale comments.

Quality Assurance

QA Summary

Round Focus Findings Fixed
Round 1 ID/class matching (HTML ↔ JS) 40+ mismatches — getElementById IDs not matching template id="" attributes, CSS class names inconsistent between .css and .html
Round 2 Structural issues Ecosystem partial missing community group, FAQ markdownify output wrapping in <p> instead of <div>, tab panel nesting errors
Round 3 CSS polish 15+ missing classes — hover states, active tab styles, mobile breakpoints, print CSS for score cards

Final result: 36/36 smoke test checks passing. All data pipeline arrays verified (TOML double-access confirmed with Node.js HTML parsing).

Key Fixes by Round

Round 1 — ID/Class Mismatches (40+) - Template id="slacalc-result" but JS had getElementById('sla-result') — namespace prefix inconsistency - CSS .badges-card but template had class="badge-card" — singular/plural mismatch - Tab panel IDs not matching aria-controls attributes - FAQ panels using hidden attribute instead of CSS class toggling

Round 2 — Structural Issues - Ecosystem partial had no community group defined — Badges, CLI Quiz, IT Day Sim had no cross-links - FAQ answers using {{ .answer | markdownify }} wrapped output in <p> tags inside existing <p> — switched to <div> wrapper - Tab panel nesting: some panels were siblings of tab bar instead of children of content container

Round 3 — CSS Polish (15+) - Missing .slacalc-preset.active style for selected SLA preset buttons - Missing .badges-rarity-legendary glow effect - Missing .ptester-cell-pass, .ptester-cell-warn, .ptester-cell-fail comparison table colours - Missing .icomms-phase-header styles for the 3-phase output sections - Mobile responsive breakpoints for score rings and comparison tables - Print CSS for canvas PNG download fallback

Lessons Learned

  1. CSS agents and template agents must be given the SAME namespace prefix — Round 1 found 40+ mismatches because CSS was authored with one prefix convention and templates with another. Fix: include the exact namespace (e.g., .slacalc-*) in every agent prompt, with 3 example class names
  2. Ecosystem partial needs group definitions — the community group was missing from tool-ecosystem.html. When adding a new tool category, always check the partial has a matching group. The 5 existing groups (copilot, m365-admin, ai-compare, cert, admin) weren't enough
  3. FAQ markdownify must use <div> wrapper not <p> — Hugo's markdownify outputs <p> tags. If the FAQ answer is inside a <p>, you get invalid nested <p> elements. Always wrap {{ .answer | markdownify }} in a <div>, never a <p>
  4. Always audit rendered HTML not just source — several bugs were invisible in the Hugo template but obvious in browser DevTools. The Node.js data pipeline test (Layer 2 of the 9-layer QA) caught TOML double-access issues that template reading alone missed
  5. Reuse proven patterns aggressively — Timer race guard (from Acronym Battle), canvas PNG (from Phishing Sim), daily seeded challenge (from Bingo), event delegation (from Bingo) — all copied verbatim. Zero new bugs from reused code
  6. 3-phase build process prevents conflicts — Build agents touch only their own 4 files. Integration session touches only shared files. No merge conflicts, no overwrites, no coordination needed between tool agents