mcpField
L
lean-text-scaffolding

lean-text-scaffolding

github.com/jpcaparasデザイン・UI5655 回インストール2 日前に更新
リポジトリ

lean-text-scaffolding について

生成するWebページの冗長な文言を抑えつつ、アクセシビリティと操作に必要なテキストを残すライティングスキルです。ページの新規作成や編集の指針と、HTML・JSX/TSXファイルの監査スクリプトを備えています。

主な機能

  1. 01新規ページ向けの簡潔な文案基準
  2. 02既存ページの削減ルール
  3. 03アクセシブルなUI文言の保持指針
  4. 04Bun対応のHTML・JSX/TSX監査スクリプト

活用シーン

  1. 01ランディングページの文案付き作成
  2. 02ページ内の汎用ラベルや埋め草の削減
  3. 03必要なラベルを残したフォーム文言の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/jpcaparas/skills --skill lean-text-scaffolding

インストール後、Claude Code で/lean-text-scaffoldingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
metadata.json
README.md
skill-card.prompt.md
agents/
openai.yaml
assets/
.gitkeep
evals/
evals.json
references/
research.md
rules.md
scripts/
audit_lean_text.ts
test_skill.py
validate.py
templates/
.gitkeep

詳細

簡潔なテキストの足場

新たに作成した Web ページが、冗長な埋め草や汎用的なプレースホルダー語句、装飾的なラベル、繰り返しのアイブローテキストで埋め尽くされないようにします。

判断フロー

何を作成または編集していますか?

  • コピーを生成する新しい Web ページ、ランディングページ、製品ページ、ダッシュボード、またはセクション このファイルの簡潔な基本方針を適用してから、詳しい上限について references/rules.md を読んでください。

  • 既存のページが冗長、汎用的、またはラベルが多すぎると感じる references/rules.md を読み、価値の低いテキストを削除してから、Bun が利用可能な場合は変更した HTML/JSX/TSX ファイルに対して scripts/audit_lean_text.ts を実行してください。

  • フォーム、フィルター、検索、設定、またはその他の入力要素を含むページ 表示ラベルまたはアクセシブルなラベル、凡例、補助テキスト、エラーの説明を残してください。ラベルをプレースホルダーに置き換えようと考えた場合は、references/research.md を読んでください。

  • ユーザーが詳細なコピー、ラベル付きセクション、コンテンツのプレースホルダー、コピー集、SEO テキスト、法的文面、またはクライアント提供の文言を明示的に求めている 依頼に従ってください。コンテンツを整理しつつ、明示的な要件に反して簡潔さの既定方針を適用しないでください。

  • 作業が文章のみ、ドキュメントのみ、または Web 以外のコピーである このスキルは適用しないでください。代わりに、ライティングまたはドキュメント作成のスキルを使用してください。

クイックリファレンス

状況既定の対応参照/実行
新しく作成するページテキストとセクションを減らし、装飾的なラベルは使わずに始めるreferences/rules.md
ヒーローコピー追加の依頼がない限り、明確な H1 を 1 つと補足文を 1 文にするreferences/rules.md
機能カード具体的で短い見出しを使い、汎用的なカードの説明は省くreferences/rules.md
アイブロー、バッジ、チップ状態、カテゴリー、ナビゲーションの区別に必要な場合を除き、既定では省くreferences/rules.md
フォームと入力要素ラベル、凡例、補助テキスト、エラー、アクセシブルな名前を残すreferences/research.md
ソースファイルの監査埋め草の語句、ラベルの乱用、長い段落、プレースホルダーだけの入力欄を検出するscripts/audit_lean_text.ts

簡潔さの基本方針

ユーザーからより詳細なコピーを明示的に求められていない場合は、次の既定値を使用してください。

  1. ページを理解または操作するために必要なテキストだけを書く。
  2. アイブロー、見出し、副題を重ねるより、力強い見出しを 1 つ使う。
  3. 「機能」、「メリット」、「ソリューション」、「お客様の声」、「新着」、「信頼の実績」などの汎用的なセクションラベルは、ユーザーの理解を変えるものでない限り避ける。
  4. 埋め草のプレースホルダーは避ける。たとえば、lorem ipsum、「機能 1」、「強力なインサイト」、「必要なものがすべて揃う」、「オールインワンプラットフォーム」、「シームレスなワークフロー」などの定型句や、それに類する表現。
  5. 足場を充実して見せるために、統計、ロゴ、お客様の声、名前、引用、バッジ、ソーシャルプルーフを作り出さない。
  6. 必須の UI テキストは残す。ナビゲーションラベル、ボタンのテキスト、表の見出し、フォームラベル、補助テキスト、入力検証エラー、空の状態、スクリーンリーダー向けの名前。
  7. 状態を表示するために現実的なサンプルデータが必要な場合は、代表例を最小限だけ使用する。

コピーの既定上限

要素既定の上限
H1ブランド名/製品名、または明確な 3~8 語
ヒーローの補足文通常 12~24 語の 1 文
セクション見出し2~7 語。必要な場合を除き、独立したラベルは付けない
機能カードのタイトル2~5 語
機能カードの本文0~14 語。タイトルの内容を繰り返す場合は省く
CTA1~3 語のアクション表現
空の状態見出し 1 つと、短い復帰アクション 1 つ
フォームの補助テキスト形式、結果、または必須要件が明らかでない場合に限る

必ず維持する要素

簡潔なテキストにすることは、UI のラベルをなくすことではありません。次の要素を残すか、追加してください。

  • フォームコントロールの <label> と <legend> のテキスト
  • 表示テキストがない、または不十分な場合の aria-label、aria-labelledby、aria-describedby
  • 一般的でない形式、必須/任意の区別、破壊的な操作、エラーに関する表示可能な補助テキスト
  • 文脈から切り離されても意味が通じるリンクとボタンのテキスト
  • ユーザーが提供した規制、価格、契約、同意、安全に関する文言

ワークフロー

  1. スキャフォールディングの前に、ページの目的とユーザーが提供したコンテンツを推測します。
  2. リクエストを満たす、信頼性のある最小限のページを作成します。
  3. 装飾的なラベル、繰り返されるサブタイトル、汎用的なカード、根拠のないソーシャルプルーフ、埋め草のセクションを削除します。
  4. アクセシビリティと運用に必要なテキストは維持します。
  5. ソースファイルが存在し、Bun を利用できる場合は、次を実行します。
bun scripts/audit_lean_text.ts path/to/page.tsx
  1. ユーザーのリクエストで明示的に正当化されていない問題は、すべて修正します。

読み方ガイド

必要な情報参照先
詳細な維持・削除のルール、コピーの分量制限、監査のヒューリスティックreferences/rules.md
ソースに基づく根拠とアクセシビリティの境界references/research.md
HTML/JSX/TSX の決定論的なファイル監査scripts/audit_lean_text.ts

注意点

  1. ページをすっきり見せるために、実際のラベルを削除しないでください。 装飾的なバッジは任意ですが、入力ラベルやアクセシブルネームは削除できません。
  2. 実際のコンテンツを曖昧な表現に置き換えないでください。 「簡潔に」とは、具体性を保ったまま少ない語数で表現することです。汎用的な表現にすることではありません。
  3. 見せかけの充実感を演出しないでください。 根拠のない追加の推薦文、統計、バッジ、FAQ、ロゴ、比較ブロックは、スキャフォールドを賑やかに見せる一方で、信頼性を損ないます。
  4. 明示的なコピーのリクエストに反しないでください。 詳細なマーケティングコピー、ラベル付きのセクション、プレースホルダーコンテンツをユーザーが求めた場合は、その要件を満たし、構成を整えてください。
  5. 必要な説明をプレースホルダーの中に隠さないでください。 プレースホルダーのテキストは消えてしまうため、ラベルや常に表示されるヒントの代わりにはなりません。

コメント