Communitygithub.com

ポートフォリオプロジェクトプレビューリーダー

既存のアーカイブプレビュー内で、承認された長尺プロジェクトのビジュアルを、周囲のブラウジングフローを壊すことなく表示します。

ポートフォリオプロジェクトプレビューリーダー とは?

このスキルは、長尺画像、ドキュメントページ、段階的なビジュアルモジュールからなるポートフォリオプロジェクトを、既存のプレビューダイアログ内でアクセシブルに閲覧できるようにするものです。開発者は、指定されたソース順序を維持し、各ページまたはモジュールにローカライズされたラベルを付与し、水平オーバーフローを防ぐ垂直な閲覧面を実装する必要があります。また、プレビューダイアログが既に提供するクローズ、Escapeキー、フォーカス復元、スクロールロック、キーボード操作といった動作を維持します。公開可能なプロジェクトのみを詳細ページにルーティングし、壊れたリンクや意味的に重複したリンクを作成しないようにします。このスキルは静的なサイトやアプリケーションに適しており、プロジェクトアセットの読み込み、ラベルの確認、プレビューの開閉、レスポンシブデザインの確認など、バリデーション手順も含まれています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-project-preview-reader

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

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

ドキュメント

Portfolio Project Preview Reader

承認された長尺プロジェクトのビジュアルを、既存のアーカイブプレビュー内で、周囲のブラウジングフローを壊すことなく表示します。

実装前

アーカイブ/ダイアログの状態モデル、既存のドキュメントリーダーパス、プロジェクトレジストリ、ソースアセットの順序、モバイルスタイルを調査します。実際に繰り返される動作のみを一般化し、再利用可能な抽象化が正当化されない場合、1回限りのプロジェクトルールはローカルに保持します。

要件

  • 宣言されたソース順序を維持し、各ページまたはモジュールにアクセシブルなローカライズされたラベルを付与する。
  • 包含された垂直な閲覧面を使用する。ページを予期せず拡張したり、水平オーバーフローを発生させない。
  • プレビューダイアログが既に提供するクローズ、Escapeキー、フォーカス復元、スクロールロック、キーボード操作を維持する。
  • 公開可能な場合のみ詳細ページにルーティングし、壊れたリンクや意味的に重複したリンクを公開しない。

バリデーション

すべてのアセットが読み込まれること、順序付けられたラベルが存在すること、プレビューの開閉が機能すること、リーダーの幅にデスクトップおよびモバイルサイズで水平オーバーフローがないことを確認します。コード変更後は、型チェック、リント、プロダクションビルドチェックを実行します。

Individual skills in this repo

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

関連スキル