postrboard

Postrboard

Postrboard は、プロダクトインターフェース向けの CSS フレームワークです。フレームワークは背景に徹してください。ページでは、ユーザーの作業、データ、意思決定を最も目立たせます。

Postrboard CSS で構築するページ、アプリ、ダッシュボード、ドキュメント、コンポーネントには、このスキルを使用してください。

優先順位

情報源の内容が食い違う場合は、次の順に従ってください。

1. ユーザーのコンテンツ、ユーザー、タスク。
2. このスキルの動作ルール。
3. コンポーネントのマークアップについては components.md。そのままコピーし、書き換えないでください。
4. トークンおよびレジストリに含まれていないクラスについては postrboard.css。
5. 一般的なデザイン知識。

記憶を頼りにクラスやマークアップの形式を作らないでください。レジストリからコピーしてください。

インストール

パッケージまたはリポジトリから skill/postrboard/ をエージェントのスキルディレクトリ（例：~/.agents/skills/postrboard/ またはプロジェクトのスキルフォルダー）にコピーします。エージェントが名前で読み込めるよう、そのパスに SKILL.md を置いてください。

セットアップ

スキルおよびレジストリとバージョンを合わせるため、インストール済みパッケージの CSS を優先してください。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/postrboard-css/postrboard.min.css">

パッケージがインストールされていない場合に限り、ホストされているファイルを使用してください。

https://burkeholland.github.io/postrboard-design/postrboard.min.css

用途に応じて、<html> に data-mode="light" または data-mode="dark" を設定してください。システム設定に従う場合は省略します。反対モードの領域を設ける場合は、そのモード、アクセント、サーフェスをまとめて設定してください。

5 段階のプロトコル

1. 状況を把握する

マークアップを書く前に、内部で次の一文を書いてください。

[Person] needs to [job] by working with [primary artifact].

次に、以下を特定します。

• モード： 操作、閲覧、説得、または体験。
• 設計姿勢： ワークフロー主導、エビデンス主導、データ主導、エディトリアル主導、またはコンバージョン主導。
• 主要な成果物： テーブル、フォーム、キュー、エディター、スケジュール、ログ、比較、メディア、またはその他の実際のオブジェクト。
• 実際のコンテンツ： ユーザーが提供した事実と、誠実なプレースホルダーのみ。

アプリは、そのアプリを説明するランディングページではなく、作業面から始めます。

2. 対応づける

components.md 全体を読む必要はありません。Index を開き、名前から各サーフェスを探して ### name に移動し、そのブロックを貼り付けてください。参照先は、インストール済みパッケージ、リポジトリのルート、または https://burkeholland.github.io/postrboard-design/components.md です。registry/index.json は同じ内容をデータ形式で提供します。

ページの各サーフェスを、コンポーネントの名前で対応づけてから、そのコンポーネントのマークアップを貼り付け、内容を置き換えてください。マークアップが API です。記憶を頼りに打ち直すと、ページにずれが生じます。

サーフェス	コンポーネント	カスタマイズする理由
メインアクション	button	なし
作業キュー	list-group	なし
リリース履歴	timeline	なし
ドメイン固有の比較	panel と data-table で構成	該当する単一のコンポーネントがない

レジストリに合うものがない場合は、新しいものを書く前に 2 つのコンポーネントを組み合わせてください。カスタムクラスを使えるのは、レジストリでは表現できないプロダクト固有の構成に限ります。Postrboard CSS を読み込んでも、そのコンポーネントを使わなければ Postrboard を使用したことにはなりません。

3. 決定する

好みの見た目ではなく、製品のシグナルをもとに視覚的な軸を選びます。

軸	API	値
アクセント	data-accent	coral、azure、sage、violet、amber、slate
サーフェス	data-surface	flat、outline、raised、glass
ジオメトリ	data-geometry	compact、sharp、soft
密度	data-density	comfortable、compact、roomy
ディスプレイの表現	data-type	neutral、sans-tight、mono-lede、editorial
アンビエンス	data-ambient	none、noise、grid、gradient

デフォルトは次のとおりです。

coral / flat / compact / comfortable / neutral / none

新しい製品の画面を作り始めるときは、すべての軸をデフォルトのままにせず、用途に合った方向性を優先してください。通常、軸を1つか2つ変更すれば十分です。既存の製品を拡張する場合は、ユーザーから再設計の依頼があるか、製品の意味が変わるのでない限り、確立された軸を維持してください。

これは製品との適合性を確認するものであり、目新しさのノルマではありません。多様性より一貫性を優先してください。変更する各軸は、利用シーンを支えるものでなければなりません。素材やデータに利点がある場合に限り、glass、grid、gradientを使ってください。sharpなジオメトリとgridのアンビエンス、暗くてモノスペースを多用したディスプレイの表現を、安易に組み合わせないでください。ひと目でよくある開発ツールのテンプレートに見えてしまいます。角は滑らかで適度な丸みを持たせるのが安全な基準です。sharpは実際の技術的な画面に必要な場合に限って使い、強い技術的なシグナルは一度に1つにとどめてください。

視覚的な大胆さは1か所に集中させてください。台帳のリズム、エディターのガター、スケジュールのライン、比較用のレールなど、題材に由来する特徴的なディテールを1つ選びます。それ以外は落ち着いた印象に保ちます。

4. 構築

まず、主要な成果物から始めます。その成果物を使ったり理解したりするうえで役立つ場合にのみ、説明文を追加してください。

components.md からコンポーネントを貼り付けてから、内容を置き換えてください。調べるコンポーネント名は次のとおりです。

必要なもの	コンポーネント
ページのリズム	container、stack、type
レイアウト構成	grid-split、grid-asymmetric、grid-thirds、grid-sidebar、grid-stack-rail、grid-holy-grail、grid-centered、grid-auto、grid-masonry、app-shell
ヘッダー	page-header、section-header
枠で囲まれた作業領域	panel、card、divider、accordion、scroll-area
アクション	button、button-group、icon-button、fab
フォーム	form、input、select、textarea、checkbox、radio、switch、segmented-control、range、combobox、floating-label、input-group、input-validation、dropzone、date-picker、time-picker、otp-input、auth-card
ステータス	badge、tag、alert、banner、toast、toast-region、progress、spinner、skeleton
データ	stat-strip、stat-card、data-table、sortable-table、list-group、description-list、timeline、stepper、styled-list、avatar、avatar-group、calendar、chart、empty-state
ナビゲーション	navbar、sidebar-nav、nav-rail、tabs、breadcrumb、pagination
オーバーレイ	modal、alert-dialog、drawer、dropdown、context-menu、tooltip、popover、hover-card、command-palette
コードとコンテンツ	terminal、inline-code、cmd-pill、icon、quote-block、footer
メディア	aspect-ratio、frame、figure、media-embed
マーケティング	feature-card、pricing-card、testimonial-card、cta-band、logo-cloud、newsletter、faq — まず Avoid の注意事項を読んでください
ユーティリティ	utility-spacing、utility-layout、utility-text、utility-sizing、utility-surface、utility-responsive — コンポーネントだけでは補えない部分に使う単一目的のクラス

対応している場合は、セマンティックな状態属性を優先してください：aria-current、aria-selected、aria-invalid、aria-busy、aria-disabled、data-state。選択状態に見える通常のボタンには、aria-selected を誤用するのではなく、aria-pressed または is-selected クラスを使用してください。

Postrboard は CSS のみで構成されています。CSS でモーダル、ドロワー、ドロップダウン、コンボボックス、タブ、ポップオーバーのスタイルは設定できますが、フォーカストラップ、Escape キーへの対応、ロービングフォーカス、選択ロジック、アナウンスは実装できません。必要な動作はアプリケーションコードに追加してください。CSS のみのシェルを、完全に操作できるコンポーネントだと説明しないでください。

5. 検証

範囲を限定したレビューを 1 回実施し、すべての問題をまとめて修正してから、最後に 1 回確認してください。

1. 具体性： このページは、無関係な 500 製品のどれにも当てはまりそうですか？そうであれば、成果物、コピー、またはレイアウト構成をより具体的にしてください。
2. フレームワークの使用： すべてのサーフェスは、再入力ではなくレジストリのコンポーネントを貼り付けて作られていますか？カスタムブロックには、それを使う明確な理由がありますか？
3. 構造： 装飾やマーケティング要素よりも、主要な成果物が上に配置されていますか？
4. コンテンツ： 主張、指標、人物、ロゴ、引用はすべて提供されたものですか？そうでない場合は、サンプルとして明確に示されていますか？
5. 状態： インタラクティブなコントロールには、関連するデフォルト、ホバー、フォーカス、アクティブ、無効、読み込み中、エラー、成功、空の各状態が用意されていますか？
6. アクセシビリティ： セマンティック HTML、ラベル、見出しの順序、キーボード操作、視認できるフォーカス、コントラスト、動きの低減、強制カラーモードを確認してください。
7. レスポンシブ動作： 320、375、768 ピクセル幅とデスクトップ幅で確認してください。テキストの切れ、ページの横スクロール、主要アクションの非表示、読み上げ順序の崩れがないことを確認してください。
8. 抑制と多様性： 特徴的な工夫は 1 つに絞り、それ以外はすべてそれを支えていますか？ありきたりなテンプレートではなく、この製品に合っていますか？

デザイン検出ツールを利用できる場合は、インターフェースの完成後に実行してください。

厳守事項

以下のルールに違反すると、成果物を公開できません。

1. カスタムの代替コンポーネントを使う前に、Postrboard のネイティブコンポーネントを使用してください。
2. 色、間隔、文字、角丸、影、モーション、フォーカスには Postrboard のトークンを使用してください。
3. 架空の指標、推薦文、顧客、ロゴ、人物、製品に関する主張を、事実として提示しないでください。提供された事実、誠実なプレースホルダー、またはサンプルデータであることが明記されたサンプルデータを使用してください。
4. インターフェースのアイコンに絵文字を使用しないでください。既存のプロジェクトのアイコンセットか、アクセシブルな小さな SVG を使用してください。
5. 1 つのサーフェスで目立たせるアクセントカラーは 1 色にしてください。セマンティックカラーはそれぞれの意味を保ってください。
6. カードを入れ子にしたり、あらゆるセクションを浮いたコンテナーにしたりしないでください。
7. 提供されたコンテンツが本当にその順序を必要としない限り、Hero -> Features -> Testimonials -> Pricing -> CTA を組み立てないでください。
8. 機能上の理由がない限り、モーションを追加しないでください。prefers-reduced-motion を尊重してください。
9. ビジュアルを洗練する作業中に、ユーザーのコピー、ルート、動作、情報設計を変更しないでください。
10. 検証に成功する前に公開しないでください。

AI 生成デザインの兆候

以下のうち 1 つだけであれば、致命的とは限りません。いくつも重なると、ページが機械生成に見えてしまいます。

兆候	見た目	代わりにすべきこと
テンプレート的な構成	中央揃えのヒーロー、同じ大きさの 3 つの機能紹介、最後の大きな CTA	実際のタスク、データ、オブジェクトを先頭に置く
装飾的なコンテナー	あらゆる段落を囲むカード、カードの中のカード	見出し、間隔、区切り線を使い、主な作業領域だけを囲む
デフォルトの高級感あるスタイル	大きな角丸、ガラス表現、発光、すべてに柔らかな影	フラットまたはアウトラインのサーフェスを使い、奥行きは実際のレイヤーに限る
技術的な要素の積み重ね	ダークモード、鋭い角、方眼紙のテクスチャ、太い等幅フォントをデフォルトで組み合わせる	本当に技術的なサーフェスでない限り、角を適度にし、テクスチャを使わない。強い技術的な要素は最大 1 つにする
不自然な配色	紫から青へのグラデーション、暗い背景のシアン、色付きの放射状ハロー	落ち着いたアクセントカラーを 1 色選び、セマンティックな状態色を使う
汎用的なタイポグラフィ	使い回されたサンセリフ体 1 種、平坦なスケール、詰めすぎた字間	提供された Sans／Serif／Mono の役割を使い、明確な階層を作る
埋め草の構成	見出しの上の短いラベル、根拠のないセクション番号	見出しとコンテンツの順序に役割を持たせる
アイコンタイル	すべての見出しの上にある角丸四角形のアイコン	アクションやオブジェクトを明確にする場合にだけアイコンを使う
装飾的なコード	コードがないのにターミナルのドット、点滅するカーソル、コードのテクスチャ	実際のコマンド、ログ、差分、ペイロードを表示するか、ターミナルを使わない
装飾的な埋め草	抽象的な SVG の塊、球体、偽のグラフ、装飾的なダッシュボード	製品の実物を表示するか、空の状態を表示する
あいまいなコピー	「ワークフローを変革」や「強力なインサイト」	何をするのか、結果として何が起きるのかを明確に述べる
作り物の証拠	架空のユーザー、指標、引用、アバター、ロゴ	実際のデータを使うか、サンプルデータと明記するか、掲載しない
繰り返されるモーション	すべての要素で同じ浮き上がり、発光、表示アニメーション	状態変化は控えめにし、実際のモーションは 1 か所だけ選ぶ
状態の欠如	フォーカス、エラー、読み込み、空の状態がない、見栄えだけのデフォルト状態	まずすべての状態を作り、その後にスタイルを適用する

誠実なプレースホルダー

何を入れるべきかがわかるプレースホルダーを使用してください。

• Metric not yet measured
• Customer quote pending
• Connect a data source to populate this table
• Example event payload
• Integration name

lorem ipsum や、整いすぎていて本物に見える偽のデータは使用しないでください。

最終基準

優れた Postrboard インターフェースは、具体的で、落ち着きがあり、アクセシブルで、レスポンシブで、ネイティブコンポーネントで構成されています。シャープにも柔らかくも、情報密度を高くも余裕を持たせることも、技術的にもエディトリアルにもできます。名詞を差し替えただけのテーマのように見えてはなりません。