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

workshop-project-design

Produce or refine a project-level mockup illustrating a section of the PRD

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.0 KB

SKILL.md(原文)

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

Your task: Workshop design (project surface)

Produce or refine a project-level mockup. Project mockups live at .workhorse/projects/{hash}-{slug}/mockups/{slug}.html on the project branch — they sit alongside the PRD until a card carries them forward at card-creation time.

Pick the section first

Project PRDs often contain more than one logical section (component-led or mixed shapes). If the PRD has more than one section that could plausibly be the target, ask which section the mockup is for before generating. If there's only one section, or the user has already named it, skip the question and proceed.

Source the visual language before authoring

Follow the Design sourcing process from your system prompt — do not skip steps:

  1. Read the actual implementation of the section being mocked in the target repo. The shipped code is the baseline — components, layout, spacing, copy
  2. Read implementations of similar components elsewhere in the target repo for any new elements not yet present
  3. Cross-check against .workhorse/design/ — design system, component docs, philosophy notes. The design library wins on clash
  4. Do not reference mockups from other cards or other projects as inspiration — they are point-in-time artefacts

Author and preserve

  • Standalone HTML with inline CSS, like card-level mockups
  • Author fresh markup only for the feature or area being explored. For every other region of the screen, be visually faithful to the current implementation — same layout, components, copy, spacing, styling
  • Do not let stale styling from earlier mockups leak into unchanged regions
  • Include an HTML comment header at the top linking to the PRD section being illustrated, e.g. <!-- prd: components/registration -->

How to run

  1. Identify the section (asking only when the PRD genuinely has multiple plausible targets)
  2. Source the visual language as above
  3. Write the file at .workhorse/projects/{hash}-{slug}/mockups/{slug}.html
  4. Briefly summarise what you produced

Restrictions on this surface

You are working on the project surface, not a card workspace. Edits in this conversation may only touch the project's artefacts, all on the project branch:

  • .workhorse/projects/{hash}-{slug}/prd.md
  • .workhorse/projects/{hash}-{slug}/mockups/
  • .workhorse/projects/{hash}-{slug}/breakdown.md

Do not edit specs, per-card plans, test cases, card working docs, or any code. If the user asks for any of those, explain that the work belongs at card level — the user can either spawn a card via the breakdown and continue there, or open an existing card and work on it.

You may read anything from the workspace's main branch for context.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Check whether this card's code meets the acceptance criteria

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

beyondessential/tamanu92026年10月10日 更新

Summarise the unit and e2e tests a branch/PR adds, run only those, and produce a paste-ready report (e.g. for a Linear card). Use when asked to 'summarise added tests', 'run the new tests', 'what tests did this PR add', or to prove a card's test coverage.

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

beyondessential/tamanu92026年10月10日 更新

Run a quick UX/UI workshop using ASCII-art sketches

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

beyondessential/tamanu92026年10月10日 更新

Write automated tests for unticked scenarios in this card's test cases

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

beyondessential/tamanu92026年10月10日 更新

Review code changes on this card for likely bugs, regressions, and missed edges

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

beyondessential/tamanu92026年10月10日 更新

Maintain a support docs pack — dedup, length budgets, and no splintering — and land changes as a reviewed pull request. Use when a support thread, or a hand-off from Support assist, surfaces a new resolution, a correction to an existing one, or a deployment quirk worth recording. Not for ordinary code changes.

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

beyondessential/tamanu92026年10月10日 更新

beyondessential のスキルをすべて見る

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