New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Page Prototype

by VKirill in VKirill/claude-lane-stack

Axure-like gray HTML wireframe of one page. An agent skill from VKirill/claude-lane-stack.

MITAuto-check: notesFrontend & Design

Install Page Prototype

skills CLI
$ npx skills add VKirill/claude-lane-stack --skill page-prototype -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install VKirill/claude-lane-stack page-prototype --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/lane-stack/skills/page-prototype .claude/skills/page-prototype && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
page-prototype
GitHub stars
122
Token cost
~1.5k tokens
SKILL.md length
466 words
Files
6 (incl. references)
Skills in repo
49
Repo updated
First seen
Licence
MIT

At a glance

Axure-like gray HTML wireframe of one page. An agent skill from VKirill/claude-lane-stack.

  • Works in 5 steps: If _kit/ missing: copy… → If INDEX.md missing: copy… → Copy references/shell.html into the page… → …
  • : прототип страницы
  • SKILL.md covers Info (print and stop), Disk, Widgets and MUST, plus 1 more section
  • Runs JavaScript and Python scripts from its folder; calls python3; reaches htmlshare.pro; needs HTML_HOST_TOKEN

What it does

Page Prototype is an agent skill from VKirill/claude-lane-stack. Axure-like gray HTML wireframe of one page. Shared proto.css/js: slider, tabs, accordion, modal, toggle. Use when: прототип страницы, вайрфрейм, axure, html mock, кликабельный макет, слайдер. SKIP: live UI (dev-orchestrator run); tokens (project-design); slop/layout review (web-design); copy brief only (site-copy-headlines).

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/INDEX.template.md`, `references/kit/proto.js` and `references/publish.py`).

It sits in Frontend & Design, covering UI design. The repository describes itself as: Multi-agent AI coding factory for one person — Claude Code PM + Codex/Qwen/Grok/Kimi/AGY writers, durable conveyor, auto-merge to main. The licence is MIT.

When your agent uses it

  • : прототип страницы
  • Кликабельный макет

Example prompts

  • “/page-prototype”

Requirements

  • Python 3
  • Node.js
  • A credential in HTML_HOST_TOKEN

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. If _kit/ missing: copy references/kit/proto.css and proto.js there. Do not edit the kit per page.
  2. If INDEX.md missing: copy references/INDEX.template.md.
  3. Copy references/shell.html into the page folder. Fix the two ../../_kit/ paths if this is app/ (../../../_kit/). Fill slots. Delete unused…
  4. Update INDEX. If a copy brief exists, one-line prototype:.
  5. If the human asked to open / share / preview, publish to https://htmlshare.pro (24h, then gone; disk stays).

What it can do on your machine

Read from SKILL.md and the folder at commit ad5d501. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript and Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • htmlshare.pro

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • HTML_HOST_TOKEN

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Page Prototype loads about 1.5k tokens when it runs, and up to ~6.1k if it reads all its reference files. Until then it costs about 85 tokens; SKILL.md has 466 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:139
    - Secrets or `.env` values inside published HTML

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from VKirill/claude-lane-stack at commit ad5d501, republished under its MIT licence (© VKirill). 466 words, ~1,478 tokens.

Download SKILL.mdSave it as .claude/skills/page-prototype/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
page-prototype
description
Axure-like gray HTML wireframe of one page. Shared proto.css/js: slider, tabs, accordion, modal, toggle. Use when: прототип страницы, вайрфрейм, axure, html mock, кликабельный макет, слайдер. SKIP: live UI (dev-orchestrator run); tokens (project-design); slop/layout review (web-design); copy brief only (site-copy-headlines).
argument-hint
[info]

Page prototype

One HTML file per screen + shared kit. Gray boxes. Real copy if a brief exists. Open in a browser.

Not a designed page. Not a writer lane. Not Vue. Not npm.

Info (print and stop)

If $ARGUMENTS is info: print the block below verbatim, then stop.

text
page-prototype — серый HTML-вайрфрейм + общий kit.

Диск
<repo>/.agents/prototypes/
  _kit/proto.css  proto.js         один раз, не править под страницу
  INDEX.md
  site/<slug>/index.html           публичная страница
  site/<slug>/empty.html
  app/<app>/<slug>/index.html      экран продукта (= apps/<app>)
  flows/<flow>/01-<slug>.html

Куда класть
- лендинг / статья / оффер  → site/<slug>/
- кабинет / apps/<имя>      → app/<имя>/<slug>/
- воронка                   → flows/<flow>/NN-<slug>.html
Не плодить copy/ и seo/.

Kit (только эти виджеты)
slider · tabs · accordion · toggle · modal · mobile menu
Разметка: data-proto-* как в references/shell.html
href kit: site/ и flows/ → ../../_kit/ · app/ → ../../../_kit/
Превью 24ч: htmlshare.pro
  один файл:  publish.py --one
  пачка:      publish.py --bundle  (index.html + style.css + script.js + _kit)
  повтор:     тот же URL из .host.json · новая страница — новая папка · --new = новый URL

Источник текста
1 .agents/copy/pages/<slug>.md
2 .agents/seo/** brief
3 иначе [LABEL]

Нельзя
- россыпь html в корне · hex бренда · Tailwind · Vue · npm/CDN
- своя анимация вместо proto.css

Disk

text
.agents/prototypes/
  _kit/proto.css
  _kit/proto.js
  INDEX.md
  site/<slug>/index.html
AskPath
Публичная страницаsite/<slug>/index.html
Состояниеsite/<slug>/<state>.html
Экран продуктаapp/<app>/<slug>/index.html
Клик-путьflows/<flow>/01-<slug>.html
  1. If _kit/ missing: copy references/kit/proto.css and proto.js there. Do not edit the kit per page.
  2. If INDEX.md missing: copy references/INDEX.template.md.
  3. Copy references/shell.html into the page folder. Fix the two ../../_kit/ paths if this is app/ (../../../_kit/). Fill slots. Delete unused widgets. Do not invent a second CSS/JS stack.
  4. Update INDEX. If a copy brief exists, one-line prototype:.
  5. If the human asked to open / share / preview, publish to https://htmlshare.pro (24h, then gone; disk stays). Same page folder → same URL (script writes .host.json and sends id). New slug/folder → new POST, new URL. Expired id → new URL, rewrite .host.json. --new only if they asked for a fresh link.
bash
# one HTML (kit inlined) — short page, no extra css/js
python3 <this-skill>/references/publish.py --one .agents/prototypes/site/<slug>/index.html

# separate files so the browser loads CSS/JS like a real site
python3 <this-skill>/references/publish.py --bundle .agents/prototypes/site/<slug>/index.html

# force a new URL (do not reuse .host.json)
python3 <this-skill>/references/publish.py --new .agents/prototypes/site/<slug>/index.html

No flag: --bundle if the folder has style.css / script.js / extra .css/.js, else --one.

Bundle layout on the host (POST /api/pages {"files":{...}}):

DiskUploaded as
index.htmlindex.html (kit hrefs rewritten to _kit/proto.css / _kit/proto.js)
style.cssstyle.css — page-local extras only
script.jsscript.js
_kit/proto.css proto.js_kit/… if the HTML still links them

Complex page: put extras in that folder as style.css / script.js (or more .css/.js names). Do not invent Vue. Kit stays the widget runtime.

API without the script: {"html":"<html>…"} or {"files":{"index.html":"…","style.css":"…","script.js":"…"}}. Update: add "id" from that page’s .host.json. Host: HTML_HOST_BASE (default https://htmlshare.pro). Optional HTML_HOST_TOKEN. Write url + files into INDEX notes. Host down → say so, keep local files. Do not commit .host.json if the repo treats it as local.

Show full SKILL.md (180 more words)Show less

Widgets

NeedMarkup
Slider[data-proto-slider] + .proto-slider-track + [data-proto-prev] / [data-proto-next] + .proto-dots
Tabs[data-proto-tabs] + [role=tab] / [role=tabpanel]
Accordion[data-proto-acc] (add data-proto-many to keep several open)
Show/hide.proto-toggle + [data-proto-toggle] + [data-proto-panel]
Modal.proto-modal#id + [data-proto-open="id"] + [data-proto-close]
Narrow nav[data-proto-menu-btn="[data-proto-menu]"] + [data-proto-menu]

Image = .img gray box + label, no URL. Motion = kit fade / slide only.

MUST

  1. Link the kit. No <style> of your own except a one-off layout gap.
  2. Chips on blocks: HEADER HERO SLIDER TABS ACCORDION TOGGLE FORM MODAL FOOTER IMAGE.
  3. One <h1>. One primary CTA (verb + object).
  4. Brief strings when they exist. Else [H1] / [CTA].
  5. Notes (aside.note) = job of the block.
  6. Links: ./empty.html, ../other/index.html, ./02-pay.html. No live URLs unless the brief has them.
  7. Extra state = extra file in the same folder.

NEVER

  • Flat .agents/prototypes/*.html
  • Folders copy/ or seo/
  • DESIGN.md tokens, brand hex, Google fonts, Tailwind, Vue/React, npm, CDN (Swiper, jQuery, Alpine)
  • A second proto.css / inline animation kit
  • Files under apps/, src/, public/
  • Stock photos, SVG art, gradients
  • Lorem when a brief already has headlines
  • Two primary CTAs / “Learn more”
  • run-init or a writer lane
  • Secrets or .env values inside published HTML

© VKirill, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in plugins/lane-stack/skills/page-prototype of VKirill/claude-lane-stack.

  • SKILL.md
  • references/INDEX.template.md
  • references/kit/proto.css
  • references/kit/proto.js
  • references/publish.py
  • references/shell.html

Open the folder on GitHubat commit ad5d501

Compare with similar skills

Page Prototype next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Page Prototype compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Page Prototype this skillVKirill/claude-lane-stack122—~1.5kAutomated safety check: NotesMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause
Stitch Prompt Enhancergoogle-labs-code/stitch-skills8.4k6 repos~1.7kAutomated safety check: PassApache-2.0

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes

  • Stitch Prompt Enhancer

    google-labs-code/stitch-skills

    Official

    Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

    8.4k GitHub starsUsed in 6 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

More from VKirill/claude-lane-stack

All 49 skills in this repo

  • UI UX Pro Max

    VKirill/claude-lane-stack

    Lane-stack design + brand intelligence (vendored ui-ux-pro-max).

    122 GitHub stars~4.7k tokensUpdated yesterday
    Auto-check passed

  • App Architect

    VKirill/claude-lane-stack

    Owner-facing architect for a new app or service. An agent skill from VKirill/claude-lane-stack.

    122 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Browser QA

    VKirill/claude-lane-stack

    Live browser QA + Playwright-compatible replay. An agent skill from VKirill/claude-lane-stack.

    122 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • Copy Project Life

    VKirill/claude-lane-stack

    Карта файлов копирайта в .agents/copy/: шаблоны, статусы, цепочка audience→headlines→ux.

    122 GitHub stars~534 tokensUpdated yesterday
    Auto-check passed

  • Copy Research

    VKirill/claude-lane-stack

    Dispatch copy-lead helpers: Tavily, Codex luna/terra, grok/X, OpenCode DeepSeek, Cursor Grok 4.6 medium-fast.

    122 GitHub stars~827 tokensUpdated yesterday
    Auto-check passed

  • Docs Maintain

    VKirill/claude-lane-stack

    Keep living docs/ honest after code changes. An agent skill from VKirill/claude-lane-stack.

    122 GitHub stars~459 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Page Prototype

What does Page Prototype do?

Axure-like gray HTML wireframe of one page. An agent skill from VKirill/claude-lane-stack. Page Prototype is an agent skill from VKirill/claude-lane-stack. Axure-like gray HTML wireframe of one page.

When should I use Page Prototype?

Page Prototype fits situations like: : прототип страницы; Кликабельный макет.

How do I install Page Prototype in Claude Code?

Run `npx skills add VKirill/claude-lane-stack --skill page-prototype -a claude-code`. Or copy the skill folder (plugins/lane-stack/skills/page-prototype in VKirill/claude-lane-stack) into .claude/skills/page-prototype in your project. Claude Code loads it when a task matches its description.

How do I install Page Prototype in Codex?

Run `npx skills add VKirill/claude-lane-stack --skill page-prototype -a codex`. Or copy the skill folder (plugins/lane-stack/skills/page-prototype in VKirill/claude-lane-stack) into .agents/skills/page-prototype in your project. Codex loads it when a task matches its description.

Can I use Page Prototype in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add VKirill/claude-lane-stack --skill page-prototype -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/page-prototype, .gemini/skills/page-prototype, .github/skills/page-prototype and .opencode/skills/page-prototype in your project.

What does Page Prototype need to run?

Going by SKILL.md and its folder, Page Prototype needs JavaScript and Python for the scripts in its folder, the command-line tools its instructions call (python3) and credentials named HTML_HOST_TOKEN. Our summary lists: Python 3; Node.js; A credential in HTML_HOST_TOKEN.

Does Page Prototype access the network?

SKILL.md names 1 domain. In commands or code: htmlshare.pro; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Page Prototype safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Page Prototype use?

Page Prototype is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Page Prototype use?

About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.6k tokens, read only when the agent opens those files.

What are the alternatives to Page Prototype?

Skills that share tags, products or a category with Page Prototype: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Page Prototype?

VKirill (a GitHub user) maintains it in VKirill/claude-lane-stack, which has 122 GitHub stars. The repository holds 49 skills in this directory. The repository was last updated on October 6, 2026.

Source: VKirill/claude-lane-stack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.