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

breadboarding-workflow

Map UI elements and code relationships (affordances).

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.5 KB

SKILL.md(原文)

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

Breadboarding Workflow

Role Constraints: Lead (Write/Bash access allowed). File Access: Do NOT use literal placeholders for file paths. Use the glob tool to search for the active feature directory under .jonggrang/.output/features/.

Methodology

Transform a workflow description or shaped pitch into affordance tables showing UI and Code affordances with their wiring.

1. Locate Context

Use the glob tool to find the active feature directory inside .jonggrang/.output/features/. Use the read tool to read the pitch.md or requirements document located there.

2. Identify Affordances

Break down the shaped solution into three components:

  1. Places: Where the user is (e.g., "Dashboard", "Settings Page").
  2. Affordances: What the user can act on (buttons, fields, readable data).
  3. Connection Lines: Where an action takes the user next.

3. Draft the Breadboard

Create a text-based breadboard representation. Use a simple format mapping Places to their Affordances and Connections. Example: Place: Invoice View

  • Read: Invoice details, status
  • Action: Click "Pay Now" -> takes to Place: Payment Gateway

4. Save the Artifact

Use the write tool to save the breadboarding artifact as breadboard.md inside the active feature directory.

Completion Signal

When the breadboarding is saved and the workflow is mapped, output exactly:

BREADBOARDING_COMPLETE

レビュー

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

同じリポジトリのスキル

概要と使いどころ

anoa

無料

Drive a real browser from the command line — open pages, snapshot the interactive elements as refs, click and fill by ref, read text, run JS, screenshot. Use when a task needs a live browser: checking a page renders, walking a login or checkout flow, scraping something that only exists after JavaScript runs, or reproducing a UI bug.

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

porcupine-md/jonggrang152026年9月15日 更新

Run linters/typecheckers to calculate health score.

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

porcupine-md/jonggrang152026年9月15日 更新

Comprehensive UI/UX compliance check (A11y, performance, responsive).

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

porcupine-md/jonggrang152026年9月15日 更新

Infrastructure-first security audit (OWASP, secrets, dependencies).

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

porcupine-md/jonggrang152026年9月15日 更新

auth

無料

Setup authentication flow (register, login, session/JWT, middleware)

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

porcupine-md/jonggrang152026年9月15日 更新

Deep knowledge about deploying applications to AWS (EC2, ECS, S3, CloudFront, Cloud Run).

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

porcupine-md/jonggrang152026年9月15日 更新

porcupine-md のスキルをすべて見る

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