From forge-core
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.
npx claudepluginhub n4m3z/forge-coreThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Processes PDFs: extracts text/tables/images, merges/splits/rotates pages, adds watermarks, creates/fills forms, encrypts/decrypts, OCRs scans. Activates on PDF mentions or output requests.
Share bugs, ideas, or general feedback.
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.
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.
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:
Generate a single HTML file at /tmp/css-preview-{topic}.html with this structure:
prefers-color-scheme media query with light mode fallbackOpen 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).
Each card is a self-contained demo. Use these conventions:
<!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>
<style> block — no external sheets/tmp/ — never write preview HTML into the project directory