Token导航 LogoToken导航TokenDH.com
前端设计需要联网github未标认证来源可访问许可证需确认审计通过

package-design包装设计

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

582

周安装

24

GitHub Stars

75

下载量

190
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:package-design(包装设计)
来源仓库:https://github.com/j5ik2o/okite-ai
仓库路径:skills/package-design
安装命令:
npx skills add https://github.com/j5ik2o/okite-ai --skill package-design
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/j5ik2o/okite-ai --skill package-design

简介

package-design 用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化,适合让 Agent 根据产品场景整理页面结构、生成 UI 方案或检查视觉一致性。

  • 适用于需要界面设计、视觉规范和交互优化的产品设计场景。
  • 核心能力包括页面结构规划、UI 方案生成和视觉一致性检查。
  • 使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素。
  • 涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

SKILL.md

パッケージ設計スキル

乱雑なコードを、体系立てた分析で整理されたパッケージへ再構成する。

核心: パッケージ設計は「ソースコードの配置」ではなく「変更の波をどこで止めるか」「依存の向きをどう制御するか」の設計問題である。

コアワークフロー

フェーズ1: 変更理由の分析 - 分割の起点を見つける

分割の出発点は「処理手順」ではなく「変化しそうな設計決定」である。

Parnas の情報隠蔽に基づき、まず以下を問う:

  • 「何が変わるか?」(変更理由・変更源の列挙)
  • 「変わったとき、どこまでを巻き込んでよいか?」(リリース単位・責務境界)
  1. 対象コードの変更履歴(git log)を分析し、一緒に変更されるファイル群を特定する
  2. 外部要因(UI変更、DB変更、API変更、ビジネスルール変更)ごとに影響範囲を整理する
  3. 各変更理由に対して「この変更は、ここで閉じるべき」という境界候補を仮置きする

出力: 変更理由と影響範囲の対応表

フェーズ2: Chunk Down(分解) - 責務を洗い出す

対象コードから原子的な責務を抽出する:

  1. 公開されている型・関数・トレイトをすべて列挙する
  2. 各要素に対して「一文の責務説明」を書く
  3. 暗黙的な責務(エラー処理、ログ、設定など)を洗い出す
  4. 複数責務を持つ要素(SRP違反)をフラグする

出力: 10〜50件の原子的な責務一覧

フェーズ3: グルーピング - 候補パッケージを作る

責務を分割する際の軸を選択し、グルーピングする。

分割軸の選択

分割軸凝集の性質適するケースリスク
機能(feature/vertical)変更が縦に閉じるチーム独立、マイクロサービス候補共通化地獄
ドメイン(業務概念)情報的凝集ドメインモデルの一貫性重視コンテキスト間翻訳コスト
レイヤ(技術層)技術責務の分離小規模、導入初期1変更が全層に散る
責務(変更理由)CCP準拠変更頻度が明確初期分析コスト
API境界(公開IF)表面積最小化ライブラリ設計内部柔軟性とのバランス

グルーピングのヒューリスティクス

  • 一緒に変更される要素 → 同一パッケージ(CCP)
  • 一緒に再利用される要素 → 同一パッケージ(CRP)
  • ドメイン概念の境界 → 自然なパッケージ境界

出力: 3〜7個の候補パッケージ(認知負荷の観点から7±2が目安)

MECEによる検証(設計目標ではなくチェック観点として)

MECEは「設計の目的」ではなく「網羅性チェックの補助」として使う。 厳密MECEにこだわりすぎると、横断的関心(ログ、認可、トランザクション等)の扱いで境界が薄くなる危険がある。8〜9割の網羅で十分。

  • 各責務は1つのパッケージに割り当てられているか(重複なし)
  • 未割り当ての責務が残っていないか(漏れなし)
  • 「Xはどこに置く?」に対して答えが1つだけあるか

詳細は references/principles.md#mece-分割 を参照。

フェーズ4: Chunk Up - 抽象化と命名

各グループを一段抽象化して命名する:

  1. 各グループを貫く概念を見つける
  2. 技術的な役割ではなく、ドメイン概念で命名する
  3. そのパッケージの目的を一文で言えることを確認する
  4. 命名が難しい場合はグルーピングが誤っている可能性が高い → フェーズ3に戻る

良い例: authentication, billing, inventory 避ける例: utils, helpers, common, misc

フェーズ5: 依存関係設計と原則検証

依存の向きを設計する

依存は「より安定・より抽象」な側へ向ける。

  1. パッケージ間の依存グラフを描く
  2. 循環依存がないか確認(ADP)
  3. 安定側(多くから依存される)→ 不安定側(多くに依存する)の向きに依存が逆転していないか確認(SDP)
  4. 安定なパッケージが十分抽象的か確認(SAP)

循環依存の解消手順

循環が見つかった場合:

  1. 依存性逆転: 依存される側の抽象(Interface/Trait)を依存する側へ移し、実装は逆向きに差し込む
  2. 共有抽出: 相互参照している共通型/ロジックを第三のパッケージへ移動し、循環辺を切る
  3. 統合: 本当に同一責務ならパッケージを統合する

原則チェック

原則確認観点
高凝集パッケージ内の要素が単一目的に収束しているか
低結合パッケージ間の依存が最小か
ADP循環依存がないか
SDP依存が安定側に向かっているか
SAP安定なパッケージが十分抽象的か
CCP同じ変更理由のものが同一パッケージに閉じているか

詳細は references/principles.md を参照。

フェーズ6: 公開インターフェースとテスト境界の定義

公開インターフェース

各パッケージについて:

  1. pub にすべき要素(外部契約)を特定する
  2. それ以外は pub(crate) か private にする
  3. インターフェースが複雑ならファサード型/関数を用意する
  4. モジュールドキュメントで契約を説明する

テスト境界の対応付け

テストを「境界」に対応させる:

テスト種別対象目的
ユニットテストパッケージ内部内部の凝集を守る
統合テストパッケージ間境界横断の依存が設計どおりか
契約テスト公開API境界互換性(結合点)を守る

評価チェックリスト

提案した構造が以下を満たしているか確認する(Yesが多いほど高凝集・低結合):

  • 各パッケージの目的が一文で言える(何を提供し、何を隠すか)
  • 境界を越える依存は、公開API(ファサード/ポート)を経由している
  • パッケージ依存グラフが非循環である
  • 安定度の高い領域が十分抽象化されている
  • 変更理由がパッケージ境界で止まる
  • 境界のテストが公開APIの範囲と一致している

メトリクスによる定量評価

メトリクス対象意味
Ca(求心結合)パッケージ外部から依存される数
Ce(遠心結合)パッケージ外部へ依存する数
I = Ce/(Ca+Ce)パッケージ不安定性(0=最安定, 1=最不安定)
D(Main Sequenceからの距離)パッケージA + I = 1 からの乖離

詳細は references/principles.md#パッケージメトリクス を参照。

リファクタリングトリガー

以下が観測されたら分割/境界の見直しを検討する:

  • 変更が複数パッケージに散る(CCP違反の兆候)
  • Ce増大(外部依存が増え続ける)
  • パッケージサイクル(循環依存)が発生する
  • パッケージ内の複雑度が上昇し続ける

Rust固有のパターン

references/rust-patterns.md を参照:

  • mod 階層設計
  • ワークスペースと単一クレートの選択
  • featureフラグ戦略
  • 再エクスポートの指針

※ このプロジェクトでは mod.rs を使わない。2018モジュール方式で package_name.rspackage_name/ 配下のファイルで構成する。

代表パターン比較

パターン凝集軸利点リスク
レイヤード技術責務導入容易1変更が全層に散る
機能別(vertical slicing)ユースケース変更が閉じやすい共通化地獄
コンポーネント別機能集合境界が明確公開API設計コスト
Bounded Contextドメイン境界モデル整合性コンテキスト間翻訳コスト
Ports & Adapters / Clean依存方向テスト容易構造の形式主義

アンチパターン

  • God module: 1ファイルに500行以上の責務が集中している
  • 循環依存: A → B → C → A(境界が実質的に崩壊したシグナル)
  • 不安定依存: 中核モジュールが変化の激しいモジュールに依存(SDP違反)
  • 抽象の漏れ: 内部型が公開APIに漏れ出る
  • 雑多な util/common: 関連性の低い要素が「その他」で集約される(共通結合の温床)
  • レイヤだけで境界なし: 見た目がレイヤでも相互参照や内部参照が放置されている
  • cargo cult パッケージング: パターンを理由理解なしに適用し、構造は整って見えるが意図が失われている

出力フォーマット

再構成提案は以下の形式で示す:

## 提案パッケージ構成

package_name.rs (目的: 1文で説明)
package_name/
├── submodule_a.rs
└── submodule_b.rs

### 依存関係
package_a → package_b (reason)

### メトリクス概算
package_a: Ca=3, Ce=1, I=0.25 (安定)
package_b: Ca=1, Ce=2, I=0.67 (不安定)

### 移行手順
1. 新しいモジュール構造を作成する
2. 型や関数を最小変更で移動する
3. import を更新する
4. テストが通ることを確認する
5. 循環依存がないことを静的解析で確認する

関連スキル(併読推奨)

このスキルを使用する際は、以下のスキルも併せて参照すること:

  • ddd-module-pattern: DDD文脈でのドメイン語彙ベースのモジュール設計
  • refactoring-packages: 既存パッケージ構造のリファクタリング実行
  • clean-architecture: パッケージ設計の基盤となる4層アーキテクチャ

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

32.9%
按下载量换算63

Claude

29.46%
按下载量换算56

Cursor

21.13%
按下载量换算40

Gemini CLI

9.86%
按下载量换算19

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills