agentleFS
Sign inStart free
tkc310tkc310/8341-ui/.claude/skills/design-principles/SKILL.md

design-principles

Skill1 starsChanged 20 days agoMITView on GitHub

ウェブの画面設計ルール。新規デザインシステムの作成、既存システムの調整、デザインレビュー、アクセシビリティ評価に使用する。UIの方向性、サービス別特化ルール、原則、WCAG 2.2の順で適用する。

24 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use test-driven-development.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • OpenAISkill

    test-driven-development

    Use when implementing any feature or bugfix, before writing implementation code

    Also in 3 projects that use this

The file

Create a free account to mount
Files
SKILL.md

デザイン原則スキル

ウェブの画面を設計するときのルールを提供する。設計作業、DESIGN.md の作成・更新、デザインレビューのときに使う。 ルールの本文は references/（このリポジトリの docs/design-principles/ へのシンボリックリンク）にある。この本体には手順の骨組みだけを置き、詳細は作業モードを決めてから読む。

ルールの優先順位

次の順で適用する。後のルールは、前のルールが書いていない判断にだけ使う。

  1. UI の方向性 - オブジェクト指向 UI かタスク指向 UI かを、ドメインと対象ユーザーから決める
  2. サービス別の特化ルール - 管理画面、社内向けツール、SaaS、toC のいずれかに当たる画面では、特化ルールを満たす
  3. ウェブデザインの原則 - 1 と 2 が書いていない判断に使う
  4. WCAG 2.2 の達成基準 - この必須は、1〜3 のいずれからも緩めない
ルールDESIGN.md での扱い
WCAG の必須外せない。緩めることもできない
特化ルールと原則の必須原則として採る。外すときは、外す理由を DESIGN.md に書く
推奨プロダクトごとに採るかどうかを決める

手順

  1. 前提条件をヒアリングする（すべてのモードで、アウトプットを作る前に）。references/hearing.md に従い、リポジトリから分かることは聞かず、推測できない項目だけを短いリストで聞く。回答を要約して確認し、DESIGN.md に記録する

  2. 作業モードを選び、そのモードの文書だけを読む

    目的モード読む文書
    これから作るプロダクトの DESIGN.md を書く・新しいデザインシステムを定義する1. 新規作成mode-1-init.md
    既存のデザインシステムや DESIGN.md を見直す・トークンやコンポーネントを足す2. 既存の調整mode-2-adjust.md
    画面やモックアップを評価し、違反と改善案を出す3. 評価・レビューmode-3-review.md
  3. モードの文書が指す references/ のファイルを、必要な範囲だけ読む（下の「読む範囲を絞る」）
  4. ルールにギャップや曖昧さを見つけたら、feedback.md の手順でユーザーに伝える

読む範囲を絞る

すべてのルールを一度に読まない。

  • 画面の方向性を決めるだけ: references/ui-orientation.md だけ（特化ルールや原則は読まない）
  • 画面の種類が決まっている: その特化ルール（references/services/ の 1 ファイル）だけ
  • レビュー対象が部分的: references/principles.md の該当する適用ルールの節だけ（見出しで探して読む）
  • WCAG の確認だけ: references/wcag-for-designers.md の該当する達成基準だけ

注意事項

  • UI の方向性と特化ルールが原則と食い違うときは、UI の方向性と特化ルールを採る
  • 特化ルールが WCAG より厳しいときは、特化ルールを採る
  • 必須ルールを外すときは、外す理由を必ず DESIGN.md に書く
  • UI の方向性とサービス種別は別の概念である（方向性は OOUI かタスク指向か、サービス種別は管理画面か SaaS かなど）
  • 複数のプロダクトで共有する基盤のデザインシステムでは、UI の方向性とサービス種別を決めない（mode-1-init.md の「共有の基盤の場合」）

references/ の中身

ファイル内容
README.mdルール全体の構造と読み順
hearing.md前提条件のヒアリング項目
ui-orientation.mdUI の方向性の選択とチェックリスト
services/README.md特化ルールの選び方（admin.md・internal.md・saas.md・consumer.md）
principles.mdウェブデザインの原則（15 の適用ルール）
wcag-for-designers.mdWCAG 2.2 の達成基準

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free