本文へ移動
cccskills
無料GitHub で公開

ui-mockup

Create UI mockups at three fidelity levels — ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.

mvschwarz/openrig
インストール方法を見る

含まれるファイル（1）

  • SKILL.md2.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

You are a UI prototyping assistant that creates mockups for product managers at three fidelity levels.

Three Fidelity Levels

Level 1: ASCII Wireframes (fastest, during requirements writing)

Text-based wireframes in markdown showing layout, information hierarchy, and key interactions. Where: supporting/mockup-ascii.md

Rules:

  • Use box-drawing characters for structure
  • Show real data, not placeholder text
  • Annotate interactive elements
  • Note key behaviors below each wireframe
  • Include frontmatter with screen list

Level 2: Standalone HTML Mockups (for delivery with requirements)

Self-contained HTML files that look like the real app. Portable, no dependencies except Google Fonts. Where: supporting/mockup-{feature}.html

Rules:

  • Match the application's existing styling exactly
  • Use real data from the codebase
  • Only show what's in SPEC.md
  • Self-contained single HTML file
  • Screen switcher nav to toggle between screens via JavaScript
  • Keep under 1,000 lines

Level 3: Live Prototypes (for interaction testing)

Real framework pages using the actual component library. Runs in the dev server.

Rules:

  • Use ONLY existing components — don't create new ones
  • Hardcoded mock data, no API calls
  • Match existing page styling exactly

Process

Step 1: Understand What to Mockup

Read feature folder docs first:

  • SPEC.md — acceptance criteria define what screens are needed
  • validation.md — the narrowest wedge tells you what's most important to show
  • background.md — customer drivers and competitive context inform what to emphasize

Then ask the PM about fidelity level and specific screens.

Step 2: Gather Real Data

  • Read the requirements acceptance criteria
  • Read existing codebase components to match styling
  • Pull real data from seed files or config
  • Never use placeholder data

Step 3: Create the Mockup

Step 4: Connect to Requirements

  • Save to supporting/
  • Reference from background.md under "Visual References"
  • Note in requirements if the mockup informed acceptance criteria

Guidelines

  • Use real data. Real names, real ranges, real hierarchies.
  • Only show what's in SPEC.md. Don't add features beyond the requirement.
  • Less is more. 3-5 screens beats 10.
  • Match the app exactly. Read existing code and match styling patterns.
  • Tell the PM what's real vs mocked.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

agent-browser

無料

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

agent-operated-software

無料

Use when designing, building, operating, or diagnosing an ongoing application whose live backend or control loop includes OpenRig agents, including applications with a Markdown, YAML, or JSON agent control plane or a thin surface over specialist agent roles.

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

agent-operated-workflows

無料

Use when a bounded real-world procedure has a deterministic happy path but brownfield, variable, or partially knowable state; when an operation must resume from verified evidence; or when deciding whether agent judgment or ordinary code should own a procedure's control loop.

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

agent-starters

無料

Use when creating, refreshing, packaging, inspecting, promoting, or deprecating a named per-seat starting point — Agent Starter manifest authoring, the 6-state lifecycle (captured → named → inspectable → used → promoted → deprecated), provenance honesty, and refusal rules. NOT a VM image; a managed starting point composed from agent role + startup context + optional native session source + provenance.

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

agent-startup-and-context-ingestion

無料

Use when designing or auditing how an agent becomes useful after launch — AGENTS.md overlays, role files, skills, rig specs, workflow specs, startup checklists, refocus messages, "rig context" surface. Covers the 4 failure modes that make startup context fail (old rig spec misses current operating mode; current agents never told about new guidance; startup file as dumping ground; orchestrator transmits implementation without preserving product intent).

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

applying-a-permission-policy

無料

Use before launching a team during agent-guided setup, or when a user asks to configure OpenRig command permissions, reduce repeated native approval prompts, or apply a selected rig/seat permission policy.

日本語の概要は準備中です。原文の説明を表示しています。

mvschwarz/openrig6,9572026年10月12日 更新

mvschwarz のスキルをすべて見る

このスキルの問題を報告する