Communitygithub.com

plugin87/ux-writing

プロジェクトのトーン&ボイスに従い、ボタン・エラーメッセージ・空状態・マイクロコピー・通知・ラベルなどのUIコピーを作成またはレビューします。

ux-writing とは?

このスキルは、Claude CodeやCursorなどのAIエージェント向けに設計されたUXライティング支援ツールです。プロジェクト固有の音声トーンガイドライン(`content/voice-tone.md`)を読み込み、一貫性のあるUIコピーを生成または批評します。主な機能として、1) ユーザーの感情状態に合わせたトーンの調整、2) ボタン・確認ダイアログ・エラーメッセージ・空状態に対する定型的な数式の適用(例:エラーは「何が起こったか→なぜ→どう直すか」、確認ダイアログでは操作とオブジェクトを明示)、3) 文体系・数値・ラベル配置・包括的言語など機械的なルールの強制、4) 出荷前の10項目チェックリストによる品質保証を行います。これにより、開発者は自然でアクセシブル、かつユーザー中心のコピーを迅速に作成でき、翻訳やRTLレイアウトの考慮も含めた国際化対応が可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

スキル: UXライティング

プロジェクトのボイスに従ってインターフェースコピーを作成または批評します。

手順

  1. content/voice-tone.mdを読む(ボイス原則、トーンスペクトラム、数式、マイクロコピーパターン、包括的言語、出荷前チェックリスト)。
  2. ユーザーの感情状態(オンボーディング/成功/ルーティン/エラー/破壊的操作)にトーンを合わせる。ストレスが高いほど、より平易な言葉を使う。
  3. 以下の数式を適用する:
    • ボタン: 動詞を先頭に置き、結果を明示する。
    • 確認ダイアログ: 確認ボタンはアクションとオブジェクトを言い直す — 「アカウントを削除」であり、「削除」「OK」「はい」「確認」ではない。タイトルは疑問形で(「アカウントを削除しますか?」)、ボタンはそれに対応する言葉で答える。キャンセルは「キャンセル」のままにする。不可逆的/高リスクの操作には、タイプして確認手順を必須とする(WCAG 3.3.4/3.3.6)。
    • エラー: 何が起こったか → なぜ → どう直すか(行き止まりなし、コードやスタックトレースなし)。
    • 空状態: 価値 → 最初のアクション。
  4. 機械的ルールを強制する: 文頭のみ大文字、すべて大文字禁止、数字表記、ユーザー非難の禁止、プレースホルダーではなくラベル、方向や色だけの指示禁止。
  5. 10項目の出荷前コピーチェックリストを実行する。

出力

自然に音読でき、チェックリストを通過した最終的なコピー(または赤線レビュー)。タイトなUIの文字数制限内に収める。

検証(完了と宣言する前に必須)

すべての行を content/voice-tone.md の10項目出荷前チェックリストにかける — これをスキップしない:

  • 自然に音読できる;アクションの動詞が先頭;専門用語/非難/行き止まりなし。
  • エラーは「何が→なぜ→どう直すか」に従う;空状態は「価値→アクション」を与える;裸の「データなし」「エラー」は禁止。
  • 機械的ルール:文頭のみ大文字、数字表記、ラベル(プレースホルダーではない)、色/方向だけの手がかりなし、包括的言語。
  • 文字数制限内;翻訳可能(連結禁止 — accessibility/i18n-rtl.md参照)。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

関連スキル