n4m3z/HtmlPlayground
skills/HtmlPlayground/SKILL.md
Generate single-file HTML demos comparing techniques side-by-side. USE WHEN preview css, compare css, css demo, show options, visual comparison, html playground, render demo.
$ install --global
skillsauthnpx skillsauth add n4m3z/forge-core HtmlPlaygroundInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 14, 2026, 6:09 AM140.2s2 files scanned
SKILL.md
- name:
- HtmlPlayground
- description:
- Generate single-file HTML demos comparing techniques side-by-side. USE WHEN preview css, compare css, css demo, show options, visual comparison, html playground, render demo.
- version:
- 0.1.0
HtmlPlayground
Generate a self-contained HTML file that renders techniques as side-by-side cards with realistic mock data. Open in browser for visual comparison before committing to production.
When to use
Before adding CSS to a project (snippets, themes, component styles), render the candidates visually so the user can compare and choose. One HTML file, no dependencies, no build step.
Instructions
-
Identify the CSS techniques to compare. Sources: conversation context, research findings, user description, or files in the working directory. Each technique becomes one card.
-
For each technique, determine:
- A short title and source attribution (URL if available)
- The CSS rules that define it
- What realistic mock content looks like (tasks, cards, lists, forms — match the user's actual domain)
-
Generate a single HTML file at
/tmp/css-preview-{topic}.htmlwith this structure:- Dark theme by default using CSS variables (adapts if user prefers light)
prefers-color-schememedia query with light mode fallback- A grid of cards, one per technique, each self-contained
- Each card has: title, source link, the rendered demo with realistic data
- A final card showing all techniques combined (if they layer without conflict)
- No external dependencies — all CSS inline, all fonts system
-
Open the file in the default browser.
-
Ask the user which techniques to adopt. Options: individual techniques by name, "all", or "none".
-
For adopted techniques, write the CSS to the appropriate location (snippet file, component stylesheet, or new file — based on context).
Card design
Each card is a self-contained demo. Use these conventions:
- Card background slightly darker than page background
- Subtle border, rounded corners (12px)
- Title in the card header with source attribution as small text below
- Demo content uses the same CSS variable names as the target platform (Obsidian vars for vault snippets, standard custom properties for web projects)
- Mock data should feel real — use the user's actual project names, task descriptions, and entity types when known from conversation context
HTML template skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Topic} — CSS Preview</title>
<style>
:root { /* dark mode variables */ }
@media (prefers-color-scheme: light) { :root { /* light overrides */ } }
/* page layout, card grid, shared base */
/* per-technique CSS in labeled sections */
</style>
</head>
<body>
<h1>{Topic}</h1>
<p class="subtitle">{Context line}</p>
<div class="grid">
<!-- one .card per technique -->
</div>
</body>
</html>
Constraints
- Maximum 6 cards per preview (4 techniques + 1 combined is ideal)
- All CSS inline in a single
<style>block — no external sheets - No JavaScript unless the comparison requires interactivity (hover states, toggles)
- File goes to
/tmp/— never write preview HTML into the project directory - Source attribution is mandatory when the technique has a known origin
- Mock data must feel realistic, not lorem ipsum
Sources
- https://gist.github.com/kaushikgopal/5e3018581946e09c49ac43aa8657b94c
- https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/3359
- https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/3421
Related Skills
n4m3z/Wtf
development
VerifiedTrustedCommunity
Reactive correction and root-cause fix. USE WHEN something went wrong, user is frustrated, demands a correction, says wtf, what the hell, why did you, that's wrong, this is broken, no not that, stop. Executes the immediate fix, then hunts the upstream artifact that caused it and creates a corrective change.
4SKILL.mdUpdated May 28, 2026
n4m3z/ResearchTopic
development
VerifiedTrustedCommunity
Decompose a research question into sub-queries, spawn parallel WebResearcher agents per angle, synthesize findings with citations and explicit confidence. USE WHEN the user asks to research, investigate, look online, look up, dig into, find sources, gather evidence, or survey what's known about a topic. Single-pass; for multi-round adversarial research use ResearchCouncil in forge-council.
4SKILL.mdUpdated May 27, 2026
n4m3z/WriteDocs
tools
VerifiedTrustedCommunity
Author project documentation that future humans (and AI sessions) actually read. Covers TLDRs for tools, READMEs, runbooks, journals. USE WHEN write documentation, create tldr, tool one-pager, document a cli, write readme, runbook, journal entry, capture knowledge about a tool, distill a session into reusable notes.
4SKILL.mdUpdated May 25, 2026
n4m3z/StagedReview
development
VerifiedTrustedCommunity
Review your own staged changes via a code-review TUI before triggering a commit. USE WHEN about to commit, walking through your own staged diff, self-reviewing before approval, tuicr, revdiff, git diff cached.
4SKILL.mdUpdated May 25, 2026