# Popup

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-richard-kim-79-popup-skill-popup-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [richard-kim-79](https://agentstack.voostack.com/s/richard-kim-79)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [richard-kim-79](https://github.com/richard-kim-79)
- **Source:** https://github.com/richard-kim-79/popup-skill

## Install

```sh
agentstack add skill-richard-kim-79-popup-skill-popup-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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.
2. **Produce the content well** (see quality notes below), then call the matching tool.
3. **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](https://github.com/richard-kim-79)
- **Source:** [richard-kim-79/popup-skill](https://github.com/richard-kim-79/popup-skill)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-richard-kim-79-popup-skill-popup-skill
- Seller: https://agentstack.voostack.com/s/richard-kim-79
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.