Skip to content
Development
Skill

/prototype

HTML/CSS прототип для проверки user stories ДО реального кода. Запускает prototype-builder (Sonnet). Один главный flow, mock data, кликабельно. FULL этап 9. Триггеры — "/prototype", "клик прототип", "html макет".

Boost this skill
@andrewciganandrewcigan@andrewcigan
From plugin
vibe-dev
529 skills24 agents7 hooks
Install
$ npx -y skills add andrewcigan/vibe-dev-plugin --skill prototype --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/prototype

Context preview

The summary Claude sees to decide when to auto-load this skill.

HTML/CSS прототип для проверки user stories ДО реального кода. Запускает prototype-builder (Sonnet). Один главный flow, mock data, кликабельно. FULL этап 9. Триггеры — "/prototype", "клик прототип", "html макет".

SKILL.md

prototype.SKILL.md
name: prototype
description: HTML/CSS прототип для проверки user stories ДО реального кода. Запускает prototype-builder (Sonnet). Один главный flow, mock data, кликабельно. FULL этап 9. Триггеры — "/prototype", "клик прототип", "html макет".
when_to_use: FULL только, после /architecture. Дешёвая UX-валидация — пользователь подтверждает концепцию до того как пишем production-код.

/prototype

HTML-прототип через prototype-builder agent.

Что происходит

1. Subagent `prototype-builder` (Sonnet) читает PRODUCT.md, user-stories, ARCHITECTURE.md 2. Identify главный user flow (один!) 3. Build `prototype/index.html` (HTML + Tailwind CDN + inline mock data) 4. 1-3 экрана связанных, главный flow работает 5. Пользователь открывает в браузере и тестирует

Output

  • `prototype/index.html`
  • (опц.) `prototype/screen-2.html`, `screen-3.html`

НЕ делаем

  • Финальный дизайн (для этого /design-handoff → Claude Design)
  • Реальный backend (это не MVP)
  • Все экраны (один flow)

Дальше

После confirm пользователя — `/choose-stack`.

Cost

$1.50. Без external API.

Read it on GitHub ↗
Ships withvibe-dev

🌐 English: this file · Русский: README.ru.md A harness-first plugin that turns a business idea into a shipped product — for founders who build with Codex and Claude Code.

Get the whole plugin
Stats
JavaScriptNext.jsshadcn/uiHTMLCSS
+7 tags
BashGitGitHubPlaywrightMermaidAnthropicMCP
5
Stars
0
Forks
Active
Maintenance
Shell
Language
MIT
License
7d ago
Last commit
3mo ago
Created

Repo: andrewcigan/vibe-dev-plugin

In this plugin
29 skills24 agents7 hooks
See everything inside

Other skills on vibe-dev.

architecture
Skill
DevelopmentJavaScriptNext.js

architecture

V0 архитектура с TOC bottleneck-анализом. Запускает architect (Fable 5.1). ≤10 компонентов, Mermaid диаграмма, invariants как constraints, top-3 риска. FAST +…

vibe-dev
@andrewcigan@andrewciganView Skill
checkpoint
Skill
DevelopmentJavaScriptNext.js

checkpoint

Управляемый чекпоинт состояния в файлы посреди работы — вместо авто-сжатия («рулетки»). Перезаписывает Current State, синхронизирует статусы, ротирует…

vibe-dev
@andrewcigan@andrewciganView Skill
critique
Skill
DevelopmentJavaScriptNext.js

critique

FULL этап 5 — автономный critique long-list идей. Запускает idea-critic (Sonnet), который отсеивает hard-filters и оставляет Top-3-5 по score. Триггеры —…

vibe-dev
@andrewcigan@andrewciganView Skill
See all 29 skills in vibe-dev