obsidian-executive-htmllisted

Generate standalone, self-contained dark-themed executive HTML pages with a premium editorial aesthetic. USE THIS SKILL whenever the user mentions 'executive,' 'dark theme,' 'dark HTML,' 'obsidian,' 'playbook style,' or any combination like 'executive style dark themed HTML.' Also trigger when the user asks to create an HTML page, dashboard, landing page, strategy document, playbook, scorecard, report, presentation page, portfolio site, cheatsheet page, or any single-file HTML deliverable — especially when the output should look polished, premium, or dark-themed. Even short phrases like 'dark executive page,' 'executive HTML,' 'styled HTML page,' or 'obsidian theme' should trigger this skill. When in doubt about an HTML generation request, use it — it is the default HTML generation style for this workspace.
petermcalister/shared-skills · ★ 2 · Web & Frontend · score 65

Install: claude install-skill petermcalister/shared-skills

# Obsidian Executive HTML Generate standalone, single-file HTML pages that follow a strict dark-luxury editorial design system. The aesthetic is: obsidian backgrounds, soft gradient accents, editorial serif headlines, and quiet micro-interactions. Every page should feel like a premium strategy document — not a web app. ## Design Philosophy The system treats every page as a **self-contained artifact** — one HTML file, zero external dependencies beyond Google Fonts. The visual language communicates executive seriousness through darkness, restraint, and typographic hierarchy, while gradient accents and subtle motion add warmth and life. Core principles: - **Dark-first, not inverted-light.** Backgrounds are near-black with deliberate elevation layering, not just `#000` or "dark mode bootstrap." - **Serif headlines signal authority.** Playfair Display at heavy weights with tight tracking creates gravitas. - **Mono for metadata.** JetBrains Mono at tiny sizes with generous letter-spacing is used for labels, badges, tags, and section markers — it signals precision. - **Color through restraint.** Six accent colors exist, but each element uses only one. Color is earned, not sprayed. - **Cards are the unit of composition.** Nearly everything lives in a rounded card with a 2px gradient top-accent bar. - **Motion is ambient, not performative.** Hover lifts of 2px, subtle glow transitions, and scroll-reveal fades. No bouncing, no spinning. ## Design Tokens Always define these CSS cu