Popup

Popup — publish a shareable web page

Popup turns content into a live web page with its own link in seconds. This skill helps you pick the right tool, produce good content, and hand back a clean link.

Prerequisite: the Popup connector

This skill drives the Popup MCP connector. The relevant tools are create_html_page, create_page, get_page, update_page, and list_templates.

If those tools are not available in this session, don't try to work around it — the user just needs to connect the connector once:

> Popup 커넥터를 추가해 주세요: Claude 설정 → 커넥터(통합) → 커스텀 커넥터 → > URL https://popup2026.com/api/mcp → 연결 → 구글 로그인. > 연결하면 만든 페이지가 자동으로 본인 계정(popup2026.com/my-pages)에 저장돼요.

Once connected, pages are owned by the user's account and editable at /my-pages. There is no PIN — never ask the user for one (older guides mentioned a PIN; it was removed).

Choosing the tool

Pick based on the shape of the content, not on what the user literally says:

• create_html_page — when you have (or will write) a **complete, self-contained HTML

document. This renders fullscreen, exactly as-is. Best for reports, data dashboards, visualizations, slide decks, custom-designed pages, or any HTML the user already produced (e.g., AI-generated artifacts). Limit: 5 MB**.

• create_page — when the content is simple, structured blocks: a short landing

page, a link-in-bio, an event invite, a notice. You compose an array of blocks (see references/blocks.md for the schema). Use list_templates first if a template fits (landing-page, event-invite, link-in-bio, portfolio, notice).

• get_page / update_page — to read or replace the blocks of an existing block page

(e.g., "edit the page you just made"). HTML pages aren't block-editable; to change one, publish a new create_html_page.

When unsure between the two: if the user already has rich/visual/custom layout, prefer HTML; if it's a few headings, text, links, and a button, prefer blocks (it's lighter and editable).

Workflow

1. Understand the goal. What is being shared, and who's the audience? Don't over-ask —

if the content is already in the conversation, just use it.

1. Produce the content well (see quality notes below), then call the matching tool.
2. Return the link clearly. Give the URL prominently and add the practical context:

• 🔗 the page URL (https://popup2026.com/{slug})
• 📅 lives for 30 days (the time limit is a feature — it creates a sense of freshness;

paid users can extend, and pages are managed at popup2026.com/my-pages)

• ✏️ editable from popup2026.com/my-pages (no PIN)

Keep it crisp — the user mainly wants the link.

Writing good HTML for create_html_page

The page renders inside a fullscreen iframe exactly as written, so it must stand alone:

• Self-contained: inline all CSS in a `` tag. No build step, no local imports.
• Mobile-friendly: include ``

and use responsive units. Many recipients open links on phones.

• External assets via URL only: images/fonts must be absolute https:// URLs (there's no

separate asset upload in this path). Avoid huge base64 blobs — they eat into the 5 MB limit.

• **A real `**: it becomes the page title and link preview. Add og:title/og:description`

meta tags when you can — they improve how the link looks when shared on KakaoTalk/X/Slack.

• JS is allowed (sandboxed), but prefer it to degrade gracefully.

Composing blocks for create_page

See references/blocks.md for the full block schema and examples. In short: an ordered array of { type, ... } blocks — h1/h2/text (content), image/link/youtube (url), button (label + href), divider. Lead with an h1 — it becomes the title and link preview.

Examples

Example 1 — AI-generated HTML User: "방금 만든 이 HTML 대시보드 공유 링크로 만들어줘" (HTML provided) → create_html_page with that HTML → return the link + 30-day/edit note.

Example 2 — simple landing User: "우리 동아리 모집 안내 페이지 하나 만들어줘. 제목, 소개 두 줄, 신청 버튼." → create_page with h1 + two text blocks + a button (label "신청하기", href to the form).

Example 3 — templated User: "링크 모음 페이지(링크인바이오) 만들어줘" → list_templates → start from link-in-bio, fill in their links → create_page.

Example 4 — connector missing The Popup tools aren't present → guide the user through adding the connector (URL above), then proceed once connected.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: richard-kim-79
• Source: richard-kim-79/popup-skill
• License: MIT

Install and usage instructions live in the source repository linked above.