---
description: Generate impressive multi-section HTML presentations with parallax, theme toggle, bilingual VI/EN — then auto-capture as 16:9, 9:16, 1:1 social-ready images
argument-hint: [--auto|--fast|--clone] <topic>
---
# /ck:show-off — HTML Presentation + Social Capture
## Usage
/ck:show-off [--auto | --fast | --clone]
- **_(none)_** — Interactive: ask style/content, review gate before capture
- **`--auto`** — Skip all prompts, use defaults (gradient, 16x9+9x16+1x1, dark, en)
- **`--fast`** — Ask style only, skip review gate, capture immediately
- **`--clone`** — Re-capture existing HTML in `tmp/ck:show-off-<slug>/`, skip generation
---
### Step 1 — Parse
Strip flag from `$ARGUMENTS`. Derive `<slug>` (kebab-case) and `<title>`. Fallback: git branch name.
Output dir: `<project-root>/tmp/ck:show-off-<slug>/`
---
### Step 2 — Ask (interactive only)
**Skip if `--auto`, `--fast`, or `--clone`.**
Single message — do not ask one-by-one:
🎨 Show-off setup for "
"</p>
<p>Visual</p>
<ol>
<li>Style gradient · minimal · neon · glass · editorial [gradient]</li>
<li>Viewports 16x9 · 9x16 · 1x1 · all [all]</li>
<li>Theme dark · light [dark]</li>
<li>Language en · vi [en]</li>
</ol>
<p>Content
5. Key message One sentence — the headline value prop
6. Highlights 3 features/points to showcase (comma-separated)
7. Demo type code · pipeline · screenshot · table [code]</p>
<p>Background
8. Background folder path · auto [auto]</p>
<p>Example: "neon, 1x1, dark, en / Fastest way to ship · /ck:plan, /ck:cook, /ck:fix · pipeline / auto"</p>
<pre><code>
For any content field left blank — ask a targeted follow-up before generating. Do **not** invent content from the repo without asking.
`auto` background: search for a royalty-free photo via Unsplash API or pick randomly from `tmp/ck:show-off-<slug>/backgrounds/` if it exists.
`--fast`: ask style only (one line), skip the rest.
---
### Step 3 — Generate
**Skip if `--clone`.**
Write `tmp/ck:show-off-<slug>/index.html` — fully self-contained, no build step.
Sections in order: `#hero` (title, tagline, CTA) · `#features` (3 cards) · `#demo` (code/pipeline/detail) · `#cta` (share, install, stats)
#### Style recipes
**`gradient`** — Modern dev-tool / Inter 400/700/900 + JetBrains Mono
</code></pre>
<p>Dark --bg:#0a0a0f --bg2:#111118 --bg3:#1a1a24 --fg:#e8e8f0 --fg2:#9999bb
--accent:#7c6af5 --accent2:#a78bfa --accent3:#34d399
--border:rgba(124,106,245,0.2) --card:rgba(26,26,36,0.8)
--glow:rgba(124,106,245,0.15) --code-bg:#0d0d1a
Light --bg:#f5f5ff --bg2:#ebebff --bg3:#ddddf8 --fg:#111128 --fg2:#4444aa
--accent:#5b47e0 --accent2:#7c5ce8 --accent3:#059669
--border:rgba(91,71,224,0.25) --card:rgba(255,255,255,0.85)
--glow:rgba(91,71,224,0.1) --code-bg:#1a1a2e ← always dark, even in light</p>
<pre><code>
Techniques: gradient text via `-webkit-background-clip:text` (white→accent dark, `#111`→accent light — separate `[data-theme="light"] h1` rule required) · hero bg `radial-gradient` no `fixed` attachment · card `translateY(-4px)` + accent border + glow shadow on hover · `::before` 2px gradient top-border reveal · glow CTA button
**`minimal`** — Claude Code docs / Inter + JetBrains Mono + Playfair Display (hero)
Light `--bg-base:#faf9f7 --accent:#c15f3c --accent-sub:rgba(193,95,60,0.08) --bg-border:#ddd8d0` / Dark `--bg-base:#0a0a0a --bg-surface:#111111 --bg-border:#2a2a2a`
Techniques: `── LABEL ──` cover rule via flanking `<span class="rule">` · JetBrains Mono eyebrow uppercase · Playfair Display italic hero heading · bordered cards with accent glow on hover · `◈` section kicker
**`neon`** — Cyberpunk / Orbitron + Share Tech Mono · `--bg:#000 --green:#00ff41 --cyan:#00f5ff --magenta:#ff00aa`
Techniques: double `text-shadow` glow · CRT scanlines `body::after repeating-linear-gradient` · rolling scan beam animation · `@keyframes glitch` clip-path on h1 · corner bracket `::before/::after`
**`glass`** — Frosted future / Plus Jakarta Sans · mesh blobs (`#7c3aed #06b6d4 #ec4899`, blur:100px, position:fixed)
Techniques: `backdrop-filter:blur(16px)` glass cards · shimmer box-shadow border on hover · deeper blur on hover · `rgba` CTA button
**`editorial`** — Print magazine / DM Serif Display + Inter · `--bg:#fafaf8 --accent:#d4231a` (dark: `--bg:#111`)
Techniques: `border-top:3px` rule openers · oversized h1 `clamp(3.5rem,10vw,8rem)` · pull-quote `border-left:4px` · magazine dateline badge
#### Universal rules
- z-index: `::before`/`::after` → 0, text content → 1
- Hero: `max-width:720px` container, `font-size:clamp(2rem,6vw,5rem)`
- Sections: `padding:clamp(48px,8vw,96px) clamp(28px,6vw,80px)` — no fixed px
- Capture height: ~600–800px per section, no forced scroll
- Cards: `grid-template-columns:repeat(3,1fr)` with separator lines
- Code: JetBrains Mono, `line-height:1.8`, `padding:20px 24px`
- Theme: all tokens in `:root` (dark), ALL overridden in `[data-theme="light"]`; `--code-bg` always dark; gradient text needs separate light rule; deepen accents for light contrast
- Required: `#theme-toggle` + `#lang-toggle` in `#controls`; `data-en`/`data-vi` on every string; `applyLang(lang)` global; vanilla JS only; no `background-attachment:fixed`; no `min-height:100vh` on sections
---
### Step 4 — Review gate
**Skip if `--auto`, `--fast`, or `--clone`.**
</code></pre>
<p>📄 Preview ready: tmp/ck:show-off-<slug>/index.html Style: <style>
Open in browser — "ok" to capture · describe changes to iterate</p>
<pre><code>
Wait for user. Loop until approved.
---
### Step 5 — Capture + Composite
Spawn the **`playwright-capture`** agent:
</code></pre>
<p>HTML_PATH = <project-root>/tmp/ck:show-off-<slug>/index.html
OUTPUT_DIR = <project-root>/tmp/ck:show-off-<slug>/images
RUNNER = <project-root>/.claude/skills/playwright-skill/run.js
SECTIONS = hero, features, demo, cta
VIEWPORTS = <chosen> THEME = <chosen> LANG = <chosen>
BG_SOURCE
```</p>
</div> <textarea data-body-src hidden data-astro-cid-2e7mcdih>```md
---
description: Generate impressive multi-section HTML presentations with parallax, theme toggle, bilingual VI/EN — then auto-capture as 16:9, 9:16, 1:1 social-ready images
argument-hint: [--auto|--fast|--clone] <topic>
---
# /ck:show-off — HTML Presentation + Social Capture
## Usage
```
/ck:show-off [--auto | --fast | --clone] <topic>
```
- **_(none)_** — Interactive: ask style/content, review gate before capture
- **`--auto`** — Skip all prompts, use defaults (gradient, 16x9+9x16+1x1, dark, en)
- **`--fast`** — Ask style only, skip review gate, capture immediately
- **`--clone`** — Re-capture existing HTML in `tmp/ck:show-off-<slug>/`, skip generation
---
### Step 1 — Parse
Strip flag from `$ARGUMENTS`. Derive `<slug>` (kebab-case) and `<title>`. Fallback: git branch name.
Output dir: `<project-root>/tmp/ck:show-off-<slug>/`
---
### Step 2 — Ask (interactive only)
**Skip if `--auto`, `--fast`, or `--clone`.**
Single message — do not ask one-by-one:
```
🎨 Show-off setup for "<title>"
Visual
1. Style gradient · minimal · neon · glass · editorial [gradient]
2. Viewports 16x9 · 9x16 · 1x1 · all [all]
3. Theme dark · light [dark]
4. Language en · vi [en]
Content
5. Key message One sentence — the headline value prop
6. Highlights 3 features/points to showcase (comma-separated)
7. Demo type code · pipeline · screenshot · table [code]
Background
8. Background folder path · auto [auto]
Example: "neon, 1x1, dark, en / Fastest way to ship · /ck:plan, /ck:cook, /ck:fix · pipeline / auto"
```
For any content field left blank — ask a targeted follow-up before generating. Do **not** invent content from the repo without asking.
`auto` background: search for a royalty-free photo via Unsplash API or pick randomly from `tmp/ck:show-off-<slug>/backgrounds/` if it exists.
`--fast`: ask style only (one line), skip the rest.
---
### Step 3 — Generate
**Skip if `--clone`.**
Write `tmp/ck:show-off-<slug>/index.html` — fully self-contained, no build step.
Sections in order: `#hero` (title, tagline, CTA) · `#features` (3 cards) · `#demo` (code/pipeline/detail) · `#cta` (share, install, stats)
#### Style recipes
**`gradient`** — Modern dev-tool / Inter 400/700/900 + JetBrains Mono
```
Dark --bg:#0a0a0f --bg2:#111118 --bg3:#1a1a24 --fg:#e8e8f0 --fg2:#9999bb
--accent:#7c6af5 --accent2:#a78bfa --accent3:#34d399
--border:rgba(124,106,245,0.2) --card:rgba(26,26,36,0.8)
--glow:rgba(124,106,245,0.15) --code-bg:#0d0d1a
Light --bg:#f5f5ff --bg2:#ebebff --bg3:#ddddf8 --fg:#111128 --fg2:#4444aa
--accent:#5b47e0 --accent2:#7c5ce8 --accent3:#059669
--border:rgba(91,71,224,0.25) --card:rgba(255,255,255,0.85)
--glow:rgba(91,71,224,0.1) --code-bg:#1a1a2e ← always dark, even in light
```
Techniques: gradient text via `-webkit-background-clip:text` (white→accent dark, `#111`→accent light — separate `[data-theme="light"] h1` rule required) · hero bg `radial-gradient` no `fixed` attachment · card `translateY(-4px)` + accent border + glow shadow on hover · `::before` 2px gradient top-border reveal · glow CTA button
**`minimal`** — Claude Code docs / Inter + JetBrains Mono + Playfair Display (hero)
Light `--bg-base:#faf9f7 --accent:#c15f3c --accent-sub:rgba(193,95,60,0.08) --bg-border:#ddd8d0` / Dark `--bg-base:#0a0a0a --bg-surface:#111111 --bg-border:#2a2a2a`
Techniques: `── LABEL ──` cover rule via flanking `<span class="rule">` · JetBrains Mono eyebrow uppercase · Playfair Display italic hero heading · bordered cards with accent glow on hover · `◈` section kicker
**`neon`** — Cyberpunk / Orbitron + Share Tech Mono · `--bg:#000 --green:#00ff41 --cyan:#00f5ff --magenta:#ff00aa`
Techniques: double `text-shadow` glow · CRT scanlines `body::after repeating-linear-gradient` · rolling scan beam animation · `@keyframes glitch` clip-path on h1 · corner bracket `::before/::after`
**`glass`** — Frosted future / Plus Jakarta Sans · mesh blobs (`#7c3aed #06b6d4 #ec4899`, blur:100px, position:fixed)
Techniques: `backdrop-filter:blur(16px)` glass cards · shimmer box-shadow border on hover · deeper blur on hover · `rgba` CTA button
**`editorial`** — Print magazine / DM Serif Display + Inter · `--bg:#fafaf8 --accent:#d4231a` (dark: `--bg:#111`)
Techniques: `border-top:3px` rule openers · oversized h1 `clamp(3.5rem,10vw,8rem)` · pull-quote `border-left:4px` · magazine dateline badge
#### Universal rules
- z-index: `::before`/`::after` → 0, text content → 1
- Hero: `max-width:720px` container, `font-size:clamp(2rem,6vw,5rem)`
- Sections: `padding:clamp(48px,8vw,96px) clamp(28px,6vw,80px)` — no fixed px
- Capture height: ~600–800px per section, no forced scroll
- Cards: `grid-template-columns:repeat(3,1fr)` with separator lines
- Code: JetBrains Mono, `line-height:1.8`, `padding:20px 24px`
- Theme: all tokens in `:root` (dark), ALL overridden in `[data-theme="light"]`; `--code-bg` always dark; gradient text needs separate light rule; deepen accents for light contrast
- Required: `#theme-toggle` + `#lang-toggle` in `#controls`; `data-en`/`data-vi` on every string; `applyLang(lang)` global; vanilla JS only; no `background-attachment:fixed`; no `min-height:100vh` on sections
---
### Step 4 — Review gate
**Skip if `--auto`, `--fast`, or `--clone`.**
```
📄 Preview ready: tmp/ck:show-off-<slug>/index.html Style: <style>
Open in browser — "ok" to capture · describe changes to iterate
```
Wait for user. Loop until approved.
---
### Step 5 — Capture + Composite
Spawn the **`playwright-capture`** agent:
```
HTML_PATH = <project-root>/tmp/ck:show-off-<slug>/index.html
OUTPUT_DIR = <project-root>/tmp/ck:show-off-<slug>/images
RUNNER = <project-root>/.claude/skills/playwright-skill/run.js
SECTIONS = hero, features, demo, cta
VIEWPORTS = <chosen> THEME = <chosen> LANG = <chosen>
BG_SOURCE
```</textarea> <aside class="pb-card" data-pagefind-ignore data-astro-cid-bllr6etr> <svg class="pb-motif" width="54" height="54" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-astro-cid-bllr6etr> <line x1="75" y1="45" x2="75" y2="18" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></line> <line x1="75" y1="105" x2="75" y2="132" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></line> <line x1="45" y1="75" x2="18" y2="75" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></line> <line x1="105" y1="75" x2="132" y2="75" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></line> <rect x="53" y="53" width="44" height="44" rx="8" fill="var(--color-accent)" data-astro-cid-bllr6etr></rect> <rect x="53" y="2" width="44" height="26" rx="7" fill="none" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></rect> <rect x="53" y="122" width="44" height="26" rx="7" fill="none" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></rect> <rect x="2" y="62" width="26" height="26" rx="7" fill="none" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></rect> <rect x="122" y="62" width="26" height="26" rx="7" fill="none" stroke="var(--color-border-hi)" stroke-width="6" data-astro-cid-bllr6etr></rect> </svg> <div class="pb-text" data-astro-cid-bllr6etr> <p class="pb-title" data-astro-cid-bllr6etr>The Agentic Coding Playbook</p> <p class="pb-sub" data-astro-cid-bllr6etr>Skills, MCPs, loops & guardrails — a free 22-page playbook on engineering the system around the model.</p> </div> <a class="pb-btn" href="/playbook" data-astro-cid-bllr6etr>Get it free →</a> </aside> <section class="badge-cta" data-astro-cid-2e7mcdih> <h2 data-astro-cid-2e7mcdih>Maintain Show Off?</h2> <p data-astro-cid-2e7mcdih>Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.</p> <div class="badge-snippet" data-astro-cid-2e7mcdih> <code data-astro-cid-2e7mcdih>[Show Off on getagentictools](https://getagentictools.com/loops/dangquangse-ck-show-off-html-presentation-social-capture?ref=badge)</code> <button class="btn" data-copy="[Show Off on getagentictools](https://getagentictools.com/loops/dangquangse-ck-show-off-html-presentation-social-capture?ref=badge)" data-astro-cid-2e7mcdih>Copy</button> </div> </section> <section class="related" data-astro-cid-2e7mcdih> <h2 data-astro-cid-2e7mcdih>Related loops</h2> <div class="grid" data-astro-cid-2e7mcdih> <a href="/loops/tumma72-normalize-phase-number-8-08-but-preserve-decimals-like-2-1-02-1" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/tumma72.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>Plan Phase</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>Create detailed execution plan for a phase (PLAN.md) with verification loop</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>13</span> </div> </a><a href="/loops/daonhan-goal" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/daonhan.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>Spec Pipeline</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>Drive grill -> PRD -> plan -> [issues] in one chain. Disk-backed, resumable, context-isolated.</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>13</span> </div> </a><a href="/loops/aidanmorgan-bonfire-parallel-implementation-team-lead" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/aidanmorgan.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>Bonfire</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>Launch the parallel implementation team lead to execute a plan file.</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>12</span> </div> </a><a href="/loops/ahostbr-setup-as-ralph-leader" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/ahostbr.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>K Ralph</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>Configure as Ralph leader for autonomous task orchestration</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>12</span> </div> </a><a href="/loops/paulrobello-ralph-loop-setup" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/paulrobello.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>Ralph Loop Setup</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>I want to use the ralph loop tool for $ARGUMENTS</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>17</span> </div> </a><a href="/loops/actuallab-update-fusion-to-latest-version" class="card " data-astro-cid-yk5uq4gt> <div class="card-top" data-astro-cid-yk5uq4gt> <img class="avatar" src="https://github.com/ActualLab.png?size=80" alt="" loading="lazy" width="34" height="34" data-astro-cid-yk5uq4gt> <span class="name" data-astro-cid-yk5uq4gt>Fusion Update</span> </div> <p class="desc" data-astro-cid-yk5uq4gt>Update Fusion to the latest version from local artifacts</p> <div class="meta" data-astro-cid-yk5uq4gt> <span class="stars" data-astro-cid-yk5uq4gt><svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-astro-cid-yk5uq4gt><path d="M8 0l2.2 5.4L16 5.9l-4.4 3.7L13 15.3 8 12.2 3 15.3l1.4-5.7L0 5.9l5.8-.5z" data-astro-cid-yk5uq4gt></path></svg>16</span> </div> </a> </div> </section> </article> </main> <footer class="foot" data-pagefind-ignore data-astro-cid-gcn2mc3v> <div class="wrap foot-inner" data-astro-cid-gcn2mc3v> <div class="foot-brand" data-astro-cid-gcn2mc3v> <span class="brand-name" data-astro-cid-gcn2mc3v>getagentictools</span> <p data-astro-cid-gcn2mc3v>The #1 directory for skills, plugins, loops & MCPs in agentic coding. Curated, with real metrics.</p> <p class="disclaimer" data-astro-cid-gcn2mc3v>Independent project. Not affiliated with Anthropic.</p> </div> <div class="foot-col" data-astro-cid-gcn2mc3v> <h4 data-astro-cid-gcn2mc3v>Browse</h4> <a href="/skills" data-astro-cid-gcn2mc3v>Skills</a><a href="/mcp" data-astro-cid-gcn2mc3v>MCP</a><a href="/loops" data-astro-cid-gcn2mc3v>Loops</a><a href="/plugins" data-astro-cid-gcn2mc3v>Plugins</a> </div> <div class="foot-col" data-astro-cid-gcn2mc3v> <h4 data-astro-cid-gcn2mc3v>More</h4> <a href="/digest" data-astro-cid-gcn2mc3v>Digest</a> <a href="/playbook" data-astro-cid-gcn2mc3v>Playbook</a> <a href="/about" data-astro-cid-gcn2mc3v>About</a> <a href="/advertise" data-astro-cid-gcn2mc3v>Advertise</a> </div> </div> <div class="wrap foot-bottom" data-astro-cid-gcn2mc3v> <span data-astro-cid-gcn2mc3v>© 2026 getagentictools</span> </div> </footer> <div class="palette" data-palette hidden data-astro-cid-xao2j2xx> <div class="palette-backdrop" data-palette-close data-astro-cid-xao2j2xx></div> <div class="palette-box" role="dialog" aria-modal="true" aria-label="Search" data-astro-cid-xao2j2xx> <div class="palette-input-row" data-astro-cid-xao2j2xx> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-astro-cid-xao2j2xx><circle cx="11" cy="11" r="7" data-astro-cid-xao2j2xx></circle><path d="m21 21-4.3-4.3" data-astro-cid-xao2j2xx></path></svg> <input type="search" placeholder="Search skills, plugins, MCP servers, loops…" data-palette-input autocomplete="off" data-astro-cid-xao2j2xx> <kbd data-astro-cid-xao2j2xx>esc</kbd> </div> <div class="palette-results" data-palette-results data-astro-cid-xao2j2xx> <p class="palette-hint" data-astro-cid-xao2j2xx>Type to search across the whole catalog.</p> </div> </div> </div> <script type="module">const r=document.querySelector("[data-palette]"),o=document.querySelector("[data-palette-input]"),u=document.querySelector("[data-palette-results]");let n=null,s;const d="Type to search across the whole catalog.",a=e=>{u.innerHTML=`<p class="palette-hint">${e}</p>`};async function p(){if(n)return n;try{return n=await import("/pagefind/pagefind.js"),await n.options?.({excerptLength:15}),n}catch{return null}}function f(){r.hidden=!1,document.body.style.overflow="hidden",o.focus(),p()}function c(){r.hidden=!0,document.body.style.overflow="",o.value="",a(d)}document.querySelectorAll("[data-search-open]").forEach(e=>e.addEventListener("click",f));document.querySelectorAll("[data-palette-close]").forEach(e=>e.addEventListener("click",c));document.addEventListener("keydown",e=>{(e.metaKey||e.ctrlKey)&&e.key==="k"&&(e.preventDefault(),r.hidden?f():c()),e.key==="Escape"&&!r.hidden&&c()});async function y(e){const l=await p();if(!l){a("Search is available on the deployed site.");return}if(!e.trim()){a(d);return}const h=await l.search(e),i=await Promise.all(h.results.slice(0,8).map(t=>t.data()));if(!i.length){a("No results.");return}u.innerHTML=i.map(t=>`<a class="p-result" href="${t.url}"><h4>${t.meta?.title??t.url}</h4><p>${t.excerpt}</p></a>`).join("")}o?.addEventListener("input",()=>{clearTimeout(s),s=setTimeout(()=>y(o.value),140)});</script> <vercel-analytics data-props="{}" data-params="{"category":"loops","slug":"dangquangse-ck-show-off-html-presentation-social-capture"}" data-pathname="/loops/dangquangse-ck-show-off-html-presentation-social-capture.html"></vercel-analytics> <script type="module">var v=()=>{window.va||(window.va=function(...i){window.vaq||(window.vaq=[]),window.vaq.push(i)})},w="@vercel/analytics",h="2.0.1";function f(){return typeof window<"u"}function p(){try{const e="production"}catch{}return"production"}function y(e="auto"){if(e==="auto"){window.vam=p();return}window.vam=e}function m(){return(f()?window.vam:p())||"production"}function d(){return m()==="development"}function b(e,i){if(!e||!i)return e;let n=e;try{const t=Object.entries(i);for(const[r,o]of t)if(!Array.isArray(o)){const a=u(o);a.test(n)&&(n=n.replace(a,`/[${r}]`))}for(const[r,o]of t)if(Array.isArray(o)){const a=u(o.join("/"));a.test(n)&&(n=n.replace(a,`/[...${r}]`))}return n}catch{return e}}function u(e){return new RegExp(`/${g(e)}(?=[/?#]|$)`)}function g(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function E(e){return e.scriptSrc?s(e.scriptSrc):d()?"https://va.vercel-scripts.com/v1/script.debug.js":e.basePath?s(`${e.basePath}/insights/script.js`):"/_vercel/insights/script.js"}function S(e,i){var n;let t=e;if(i)try{t={...(n=JSON.parse(i))==null?void 0:n.analytics,...e}}catch{}y(t.mode);const r={sdkn:w+(t.framework?`/${t.framework}`:""),sdkv:h};return t.disableAutoTrack&&(r.disableAutoTrack="1"),t.viewEndpoint&&(r.viewEndpoint=s(t.viewEndpoint)),t.eventEndpoint&&(r.eventEndpoint=s(t.eventEndpoint)),t.sessionEndpoint&&(r.sessionEndpoint=s(t.sessionEndpoint)),d()&&t.debug===!1&&(r.debug="false"),t.dsn&&(r.dsn=t.dsn),t.endpoint?r.endpoint=t.endpoint:t.basePath&&(r.endpoint=s(`${t.basePath}/insights`)),{beforeSend:t.beforeSend,src:E(t),dataset:r}}function s(e){return e.startsWith("http://")||e.startsWith("https://")||e.startsWith("/")?e:`/${e}`}function k(e={debug:!0},i){var n;if(!f())return;const{beforeSend:t,src:r,dataset:o}=S(e,i);if(v(),t&&((n=window.va)==null||n.call(window,"beforeSend",t)),document.head.querySelector(`script[src*="${r}"]`))return;const a=document.createElement("script");a.src=r;for(const[c,l]of Object.entries(o))a.dataset[c]=l;a.defer=!0,a.onerror=()=>{const c=d()?"Please check if any ad blockers are enabled and try again.":"Be sure to enable Web Analytics for your project and deploy again. See https://vercel.com/docs/analytics/quickstart for more information.";console.log(`[Vercel Web Analytics] Failed to load script from ${r}. ${c}`)},document.head.appendChild(a)}function $({route:e,path:i}){var n;(n=window.va)==null||n.call(window,"pageview",{route:e,path:i})}function A(){try{return}catch{}}function j(){try{return'{"analytics":{"scriptSrc":"32ea31ac6eaa2815/script.js","viewEndpoint":"32ea31ac6eaa2815/view","eventEndpoint":"32ea31ac6eaa2815/event","sessionEndpoint":"32ea31ac6eaa2815/session"},"speedInsights":{"scriptSrc":"16663ccdea61a328/script.js","endpoint":"16663ccdea61a328/vitals"}}'}catch{}}customElements.define("vercel-analytics",class extends HTMLElement{constructor(){super();try{const i=JSON.parse(this.dataset.props??"{}"),n=JSON.parse(this.dataset.params??"{}");k({...i,disableAutoTrack:!0,framework:"astro",basePath:A(),beforeSend:window.webAnalyticsBeforeSend},j());const t=this.dataset.pathname;$({route:b(t??"",n),path:t})}catch(i){throw new Error(`Failed to parse WebAnalytics properties: ${i}`)}}});</script> </body></html> <script type="module">function d(t,n){const o=t.querySelector(".btn-ico")??t,c=o.textContent;o.textContent=n,setTimeout(()=>o.textContent=c,1200)}document.querySelectorAll("[data-copy]").forEach(t=>t.addEventListener("click",()=>{navigator.clipboard.writeText(t.dataset.copy??""),d(t,"Copied")}));const r=document.querySelector("[data-body-src]")?.value??"";document.querySelectorAll("[data-copy-body]").forEach(t=>t.addEventListener("click",()=>{navigator.clipboard.writeText(r),t.textContent="Copied"}));const a=document.querySelector("[data-llm-trigger]"),e=document.querySelector("[data-llm-menu]");a?.addEventListener("click",t=>{t.stopPropagation(),e.hidden=!e.hidden});document.addEventListener("click",()=>{e&&(e.hidden=!0)});</script>