web-design-reviewer
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
SKILL.md
| Name | web-design-reviewer |
| Description | This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. |
pecus-aspire
AIを社畜扱いして作成中のAspireアプリケーション。 コーディングは一切行わずGithub Copilot エージェントのプロンプト入力だけでAspireアプリケーションを実装する実験。
コミットメッセージもGithub Copilot エージェントが生成。
今のところは、どうしても先に進まなくなった時だけ自分でちょい直すぐらい
AIに対するコーディングルールは、.github\copilot-instructions.mdにて
作業開始
2025/10/24 作業開始
📋 プロジェクト概要
Coati は、.NET Aspire 10.0 を使用した分散マイクロサービス構成のマルチテナント型プロジェクト・タスク管理システムです。 AI支援による高度なタスク管理、リアルタイムコラボレーション、ゲーミフィケーション要素を備えた次世代のチーム管理プラットフォームです。
プロジェクトコードネーム: pecus-aspire
✨ 主な機能
📊 プロジェクト・タスク管理
- ワークスペース管理 - プロジェクト単位での作業領域管理
- アイテム(課題・ドキュメント)管理
- ワークスペース内の作業やドキュメント単位
- リッチテキストエディタ(Lexical)による専用エディタ
- 添付ファイルのアップロード
- タグ管理と相互関連付け
- アクティビティログによる変更履歴追跡
- ドキュメントモードでは、ドキュメントツリー構造化
- 高度なタスク管理
- アイテム配下のタスクを詳細管理
- 優先度、進捗率、見積もり・実績時間
- 先行タスク依存関係の設定
- タスクフロー図による視覚的な依存関係表示
- 担当者負荷チェック
🤖 AI支援機能
- AIタスク生成 - タスク候補の自動生成、クリティカルパス分析、見積もり提案、作業負荷を考慮したメンバー振分け
- コンテンツ提案 - エディタでのテキスト生成・改善提案
- 複数AIプロバイダー対応 - OpenAI、Anthropic (Claude)、DeepSeek、Gemini等
💬 コラボレーション
- リアルタイムチャット - DM、グループチャット、AIボットとの対話
- タスクコメント - コメント、リマインダー、助けてリクエスト
- 通知システム - システム通知、メール通知、アジェンダリマインダー
- アクティビティフィード - 変更履歴の追跡と表示
📅 スケジュール管理
- アジェンダ機能 - 会議・イベント管理、繰り返し設定、参加者管理
- 通知設定 - カスタマイズ可能なリマインダー
📈 ダッシュボード・統計
- 個人ダッシュボード - 自分のタスク状況、負荷情報
- 組織サマリ - 全体の進捗状況、完了率、トレンド
- 健康診断 -組織全体またはワークスペース単位の健康状態分析
- 優先度・ステータス別統計 - 視覚的なグラフ表示
- アクティビティタイムライン - チーム全体の活動追跡
🎮 ゲーミフィケーション
- 実績システム - バッジ・アチーブメント収集
- ランキング - バッジ獲得数、難易度、成長速度のランキング
🛡️ 認証・アクセス制御
- JWT認証 - Bearer token方式によるセキュアな認証
- ロールベースアクセス制御 (RBAC) - Admin/Editor/Viewerロール
- マルチテナント対応 - 組織・ワークスペース単位の権限管理
- デバイス管理 - ログインデバイスの追跡・管理
🔧 管理機能
- バックオフィス - 組織設定、システム通知、モニタリング
- 組織管理者機能 - ユーザー・組織・ワークスペース・マスターデータ管理
- Hangfireダッシュボード - バックグラウンドジョブの監視・管理
🪧 デモサイト
ログイン: user1@demo.coati.none、user2@demo.coati.none、user3@demo.coati.none パスワード: P@ssw0rd
- 管理者権限のユーザーは利用できません(AIプロバイダーやAPIキー保持のため)
- user2@demo.coati.noneでログインして色々触ってみるのが一番面白いかも?
- 複数のブラウザを利用して複数のユーザーでログインすればチャットも試せます。

🏗️ アーキテクチャ
プロジェクト構成
- pecus.AppHost - Aspire オーケストレーションホスト(サービス起動・構成管理)
- pecus.WebApi - メイン REST API(JWT認証、ページング、統計情報)
- pecus.BackFire - Hangfire バックグラウンドジョブサーバー
- pecus.DbManager - データベースマイグレーション・シード管理
- pecus.Libs - 共有ライブラリ(DB モデル、Hangfire タスク、メールサービス)
- pecus.ServiceDefaults - サービス共通設定(Serilog、ヘルスチェック、OpenTelemetry)
- pecus.Frontend - Next.js フロントエンドアプリケーション (SSR-first, Server Actions)
- pecus.LexicalConverter - Lexical 変換ユーティリティ(Node/Nest ベースのツール)
- pecus.Protos - gRPC / Protobuf 定義群(サービス間およびクライアント連携用)
技術スタック
バックエンド:
- .NET 10 (Preview)
- Entity Framework Core 10
- .NET Aspire 13.1
- PostgreSQL (pgroonga拡張による全文検索)
- Redis (セッションストア、Hangfireキュー)
フロントエンド:
- Next.js 16.1.1 (App Router)
- React 19.2.3
- Tailwind CSS 4.1.18
- FlyonUI 2.4.1 (UIコンポーネント)
- @iconify/tailwind4 (アイコン)
- Biome 2.3.10 (リンター/フォーマッター)
インフラストラクチャ
- PostgreSQL - メインデータベース(pecusdb)
- Redis - セッション管理、Hangfire キュー・キャッシュ
- Hangfire Dashboard - バックグラウンドジョブ管理UI
🔧 必要な環境
- .NET 10 SDK - Download
- Docker & Docker Compose - インフラストラクチャ(PostgreSQL、Redis)
- Node.js 18+ - フロントエンド開発用(オプション)
🚀 起動手順
1. リポジトリのクローン
git clone https://github.com/HiroyukiNIshimura/pecus-aspire.git
cd pecus-aspire
2. 環境構築
2.1 依存パッケージの復元
# ソリューション全体のパッケージを復元
dotnet restore pecus.sln
2.2 設定ファイルの生成
# 開発用オーバーライドファイルを作成(初回のみ)
cp config/settings.base.dev.json.example config/settings.base.dev.json
# 必要に応じて API キー等を編集
# vim config/settings.base.dev.json
# 設定ファイルを生成
node scripts/generate-appsettings.js -D
補足:
config/settings.base.jsonがベース設定(Git管理)config/settings.base.dev.jsonは開発者ローカル用(.gitignore)- 生成された
appsettings.jsonは各プロジェクトに配置されます pecus.Frontend/.env.localも自動生成されます
2.3 フロントエンド環境設定(pecus.Frontend)
# pecus.Frontend ディレクトリに移動
cd pecus.Frontend
# npm 依存パッケージをインストール
npm install
# Biome (リンター) のグローバルインストール (VSCode拡張機能用)
npm install -g @biomejs/biome
注: 環境変数ファイル .env.local は手順 2.2 で自動生成されています。手動作成は不要です。
3. アプリケーション起動
※開発環境のAspire環境ではRedisを永続化させていないのでNextjs側の認証情報は揮発性です。ですのでアプリ起動後は毎回ログインが必要になります。
3.1 Visual Studio で起動(推奨)
pecus.slnを Visual Studio で開く- スタートアッププロジェクトが
pecus.AppHostになっていることを確認 - F5 または デバッグ > デバッグの開始 を実行
- Aspire ダッシュボードが自動的にブラウザで開きます
💡 ヒント: Visual Studio では Aspire のホットリロード、デバッグ、リソース監視がシームレスに統合されています。
3.2 VS Code で起動
- ワークスペースを VS Code で開く
- ターミナル で以下を実行:
# プロジェクトルートで Aspire CLI を使用して起動
aspire run
または、C# Dev Kit 拡張機能がインストールされている場合:
- 実行とデバッグ パネル(Ctrl+Shift+D / Cmd+Shift+D)を開く
- 起動構成で
pecus.AppHostを選択 - F5 でデバッグ開始
📦 必要な拡張機能:
- C# Dev Kit
- .NET Aspire (オプション、ダッシュボード統合)
3.3 コマンドラインから起動
方法1: Aspire CLI を使用(推奨)
# プロジェクトルートで実行
aspire run
Aspire CLI のインストール:
dotnet tool install -g Aspire.Hosting.Cli
方法2: dotnet run を使用
cd pecus.AppHost
dotnet run
起動時の処理:
pecus.DbManagerが自動的に起動し、データベースマイグレーションを実行- シードデータが投入される(開発環境の場合)
pecus.WebApiが起動(https://localhost:7265)pecus.BackFireHangfire サーバーが起動- Aspire ダッシュボードが表示
⚠️ 初回起動時の注意: 初回起動時はマイグレーションとシードデータの大量投入を行うモードの場合、数分程度の時間がかかります。Aspire ダッシュボードで
pecus.DbManagerのコンソールを開いてシードデータの投入完了を確認してください。
3.4 個別にサービスを起動する場合
別々のターミナルで実行:
# ターミナル1: WebApi
cd pecus.WebApi
dotnet run
# ターミナル2: BackFire (Hangfire ワーカー)
cd pecus.BackFire
dotnet run
# ターミナル3: DbManager (データベース初期化)
cd pecus.DbManager
dotnet run
注: 個別起動の場合、Aspire ダッシュボードのUIを使用することで、各サービスの状態監視、ログ確認、サービスの再起動などを一元的に管理できます。
4. アプリケーションへのアクセス
| サービス | URL | 説明 |
|---|---|---|
| Aspire Dashboard | 動的 | サービス管理・監視 |
| WebApi | https://localhost:7265 | REST API ベースURL |
| Hangfire Dashboard | 動的 | バックグラウンドジョブ管理 |
| PostgreSQL | tcp:5432 | DB(ユーザー: postgres, パスワード: postgres) |
| Redis | 動的 | キャッシュ・キュー・セッション |
5. テストアカウント
| ユーザー | ログインID | パスワード | 権限 |
|---|---|---|---|
| 管理者 | admin@demo.coati.non | P@ssw0rd | Admin(全権限) |
| 一般 | user1@demo.coati.non | P@ssw0rd | ユーザー |
| 一般 | user2@demo.coati.non | P@ssw0rd | ユーザー |
📚 ドキュメント
詳細な設計ドキュメントは docs/ ディレクトリにあります。
- Frontend Guidelines: フロントエンド開発ガイドライン
- Backend Guidelines: バックエンド開発ガイドライン
- SSR Design Guidelines: SSR/Server Actions 設計指針
- Auth Architecture: 認証・セッション管理設計
- DB Concurrency: データベース同時実行制御
📚 API ドキュメント
WebApi のすべてのエンドポイント、リクエスト・レスポンス仕様は Swagger UI で確認できます。
WebApi が起動している状態で、以下にアクセスしてください:
- Swagger UI: https://localhost:7265/index
Swagger UI では、すべての API エンドポイント、パラメータ、レスポンススキーマが対話的に確認でき、直接 API をテストすることも可能です。
🗄️ データベース
初期化・マイグレーション
# 手動でマイグレーションを実行
cd pecus.DbManager
dotnet run
# または Aspire から自動的に実行される
シードデータ
共通(全環境):
- マスターデータ(権限・ロール・ジャンル・タスクタイプ)
- バックオフィス組織と管理者ユーザー
開発環境 (Development):
- 2 つの組織(テナント)
- 各組織に 10 人のユーザー
- 各組織に 5 つのワークスペース
- 各ワークスペースに 30 件のアイテム
- その他、タスク、コメント、アクティビティなどの関連データ
負荷テスト環境 (LoadTest):
ASPNETCORE_ENVIRONMENT=LoadTestで実行時- 5 つの組織
- 各組織に 100 人のユーザー
- 各組織に 50 つのワークスペース
- 大量のアイテムと関連データ
デモモード:
DemoModeOptions:Enabled=trueの場合、デモ用データを追加投入
⚠️ 注意: 初回起動時はデータ投入を行うため、時間がかかる場合があります。
本番環境 (Production):
- マスターデータとバックオフィス組織のみ投入
📝 ログとモニタリング
Serilog ログ
すべてのサービスで Serilog を使用しています。ログはコンソールと EventLog に出力されます。
Aspire ダッシュボード
サービス状態、リソース使用状況、トレース情報が確認できます。
Hangfire ダッシュボード
バックグラウンドジョブの実行状況が確認できます。 pecus.BackFireのURL/hangfire
💻 開発ワークフロー
データベース マイグレーション
新しいエンティティやカラムを追加した場合:
cd pecus.DbManager
# 新しいマイグレーションを作成
dotnet ef migrations add MigrationName
# マイグレーションを実行
dotnet run
補足
開発環境では以下のエンドポイントでHTMLメールデザイン確認可能 https://localhost:7265/api/dev/email-preview/index GET /api/dev/email-preview/index テンプレート一覧をHTMLで表示(ブラウザ用インデックスページ)
Hangfire タスク
新しいバックグラウンドタスクを追加:
pecus.Libs/Hangfire/Tasks/でタスククラスを定義- WebApi と BackFire の両方で DI 登録
IBackgroundJobClientを DI 経由で注入し、_backgroundJobClient.Enqueue<TaskClass>(x => x.Method(...))で実行
※ 静的API(BackgroundJob.Enqueue, RecurringJob.AddOrUpdate)は使用禁止。必ず DI 経由の IBackgroundJobClient / IRecurringJobManager を使用すること。
⚡ パフォーマンス最適化
- EF Core クエリ最適化(Include/Select の適切な使用)
- Hangfire で長時間処理をバックグラウンド化
- Redis キャッシング活用
- ページング実装で大規模データセット対応
🔐 セキュリティ
- JWT 認証(Authorization: Bearer {token})
- ロールベースアクセス制御(RBAC)
- パスワードハッシュ化(Bcrypt)
- HTTPS 対応(本番環境)
- CSRF 保護(SameSite Cookie)
🤖 Botキャラ

🎧 テーマソング
📄 ライセンス
MIT License
📖 参考資料
🤝 サポート
しません😅
最終更新日: 2026年1月4日