본문으로 건너뛰기
cccskills
무료GitHub에 공개

ui-mockup

Create screen mockups at three levels: text wireframes, standalone HTML files, or working prototype pages. Use requirements, existing app styles, and real project data to show layouts and interactions for review or testing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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
설치 방법 보기

이럴 때 유용합니다

  • Sketch screen layouts while writing requirements
  • Deliver HTML mockups alongside requirements
  • Test interactions with existing components

포함된 파일(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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agent-browser

무료

Automate website interactions through a command-line browser tool. Navigate pages, fill forms, extract text, save screenshots or PDFs, reuse login sessions, and compare page states to check the effects of actions or website changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Automating form entry and submission
  • Extracting page text and saving screenshots
  • Comparing page appearance before and after changes
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

agent-operated-software

무료

Design and maintain applications where OpenRig agents help run the system. Organize instructions, shared state, and artifact checks, then trace unexpected behavior to the code, skill, or schema that needs repair.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing an application operated by OpenRig agents
  • Organizing instructions and shared application state
  • Tracing unexpected behavior to its source
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

agent-operated-workflows

무료

Design and run bounded procedures in environments where current conditions are uncertain. The skill separates agent judgment from precise tool actions, verifies each effect, and records checkpoints so interrupted work can resume from observed evidence.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing procedures for environments with varying conditions
  • Resuming interrupted operations from verified evidence
  • Deciding whether an agent or ordinary code should control a procedure
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

agent-starters

무료

Create reusable starting configurations that combine an agent’s role, startup context, and source history. The skill guides registry entries, checks whether their sources are current, and manages their progression from initial capture to recommendation or retirement.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create reusable startup context for an agent role
  • Refresh an agent workspace from an existing starter
  • Check a starter’s source history and freshness
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

agent-startup-and-context-ingestion

무료

Guides the design and review of agent startup context, including role files and links to authoritative records. It helps identify stale guidance, missing updates, overloaded startup files, and instructions that lose the purpose of the work.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing startup files for a new agent
  • Reviewing stale guidance used by running agents
  • Separating role information from reusable procedures
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

applying-a-permission-policy

무료

Configure selected OpenRig command permissions in Claude Code or Codex at the agreed project or user scope. Preserve existing restrictions, verify that settings load and behave as intended, and record additions so they can be removed later.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Configuring command permissions before launching an agent team
  • Reducing repeated approvals for selected rig commands
  • Adding permission rules within a chosen project scope
mvschwarz/openrig7.9천2026년 10월 19일 업데이트

mvschwarz의 스킬 모두 보기

이 스킬의 문제 신고