無料GitHub で公開

plantuml-salt

PlantUML Salt 記法でワイヤーフレームを正確に生成するためのベストプラクティスガイド。Salt 特有のハマりポイント（横並び `} | {` の1行ルール、列数統一、ネスト閉じ括弧）を防ぎ、モバイルアプリやWebアプリのワイヤーフレームを高精度で生成する。

Use when: PlantUML Salt でワイヤーフレームを生成するとき。画面設計をテキストベースで行うとき。Salt 図が壊れたとき。

機能から画面構成に落とすとき。ワイヤーフレームを Markdown に埋め込むとき。Triggers: "Salt", "salt", "PlantUML", "plantuml", "ワイヤーフレーム", "wireframe", "画面設計", "画面構成", "@startsalt", "Salt図"

sean-sunagaku/claude-code-plugin

インストール方法を見る

含まれるファイル（4）

SKILL.md3.7 KB
references/flow-patterns.md1.7 KB
references/mobile-patterns.md3.3 KB
references/syntax-guide.md4.0 KB

SKILL.md（原文）

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

PlantUML Salt ベストプラクティス

Critical Rules

Salt 図を生成する前に必ず守るべきルール。これを守らないとパースエラーやレイアウト崩れが起きる。

1. `} | {` は絶対に1行で書く

横並びパネルの区切り } | { を改行すると壊れる。

NG:
}
|
{

OK:
  } | {

2. テーブルの列数は全行で統一する

NG:
{#
  名前 | 値
  A | B | C
}

OK:
{#
  名前 | 値 | 備考
  A    | B  | C
}

3. ネストの `}` の対応を必ず確認する

1つでもずれると全体が壊れる。インデントで可読性を確保すること。

4. ドロップダウンの `^` は必ずペアで閉じる

NG: ^値^項目1^項目2
OK: ^値^項目1^項目2^

5. 外枠 `{+` を使うとモバイル画面っぽくなる

モバイルアプリのワイヤーフレームには {+ を基本にする。

コンポーネントとレイアウト

全コンポーネント一覧、レイアウト修飾子、セパレータの詳細は references/syntax-guide.md を参照。

主要なもの:

ボタン: [ラベル]
テキスト入力: "テキスト "（末尾スペースで幅調整）
ドロップダウン: ^値^（閉）/ ^選択値^項目1^項目2^（開）
チェックボックス: [ ] OFF / [X] ON
ラジオボタン: () OFF / (X) ON
アイコン: <&person> <&home> <&magnifying-glass> 等（OpenIconic）

レイアウト修飾子早見表

記法	用途
`{`	縦並び（デフォルト）
`{+`	外枠付き
`{#`	全罫線テーブル
`{!`	縦線のみ
`{-`	横線のみ
`{/`	タブ
`{*`	メニューバー
`{T`	ツリー
`{^"名前"`	グループボックス（カード風）
`{S`	スクロールバー

モバイルアプリ向けパターン

モバイル画面の具体的なパターン集は references/mobile-patterns.md を参照。

基本構成は「ナビバー + メインコンテンツ + ボトムタブ」の3層:

@startsalt
{+
  {#
    <&arrow-left> | **画面タイトル** | <&ellipses>
  }
  --
  メインコンテンツ
  .
  ==
  {#
    <&home> ホーム | <&list> タスク | <&bell> 通知 | <&person> 設定
  }
}
@endsalt

画面遷移フロー

アクティビティ図に Salt を埋め込んで画面遷移フローを表現できる。詳細は references/flow-patterns.md を参照。

Workflow

生成前にこのスキルの Critical Rules を確認する
必要なコンポーネントを references/syntax-guide.md から選ぶ
モバイルアプリの場合は references/mobile-patterns.md のパターンを使う
画面遷移を表現する場合は references/flow-patterns.md を参照する
生成後、Critical Rules の5項目を再チェックする

レビュー

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

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

同じリポジトリのスキル

概要と使いどころ

agent-team

無料

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

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