✨Data Intelligence Lab@HKU✨

APIから取得したデータを表示するダッシュボードパネルをTypeScriptで実装し、キャッシュや連続失敗時の通信休止、読み込み表示を組み込むスキル。

• 定期更新する株価パネルを作りたいとき
• API障害時の通信休止や代替値の実装
• 読み込み・エラー・件数表示の共通化

予定・メール・ニュース・株価などをまとめる個人用ダッシュボードの設計資料として、各パネルのデータ源やAPI、更新間隔、開発優先順位を整理したスキル。

• 次に作るパネルを選びたいとき
• パネルのAPIとデータ構造の確認
• 予定・連絡・株価の統合画面の設計

ダッシュボードの各パネルの定期更新を管理する実装パターンです。タブ非表示中は停止し、復帰時は対象を時間差で更新。同じパネルへの重複リクエストも防ぎます。

• パネル別に更新間隔を設定したいとき
• タブ非表示中の定期更新停止
• タブ復帰時の更新タイミング分散

コードの設計パターンや作業手順を、再利用できるSKILL.mdにまとめます。説明文、実行手順、依存関係を整え、OpenSpace向けの形式を検証します。

• 設計パターンをスキル化したいとき
• 既存資料をSKILL.mdに変えたいとき
• エージェントの作業手順を定義

通常のコマンドで起動できないTypeScriptの型チェックを別経路で実行し、変更対象ファイルのエラーを絞り込みます。既存エラーが多い開発にも使えます。

• npx tscが動かないときの型チェック
• 新規ファイルの診断を確認したいとき
• 機能別ディレクトリのエラー抽出

設定をブラウザに保存する処理と、矢印キー・Enterによる項目選択を備えたReact部品を、設定画面やコマンドパレット向けに作るスキル。

• 再読み込み後も設定を保持したいとき
• 矢印キーとEnterでコマンドを選ぶ画面
• 再利用できる設定ダイアログの作成

外部から受け取るデータでサイドバーやウィジェットを更新する実装を案内します。生成と更新の関数を分け、保持した画面要素の参照を使って必要な部分を書き換えます。

• 頻繁に更新するサイドバーの実装
• 外部の制御処理から渡すデータの表示
• ウィジェットの一部分だけ更新したいとき

画面幅に合わせてパネルを並べる、暗色のダッシュボードをCSSで組み立てます。配色と等幅フォントを統一し、読み込み中やエラー表示まで整えるスキルです。

• 複数の情報パネルを並べたいとき
• スマホと大画面に配置を対応させたいとき
• 暗色の配色と等幅フォントの統一

APIの定期取得で失敗が続くと待ち時間を延ばし、成功時に元へ戻す実装手順です。タブ非表示時の停止や、複数データの独立した更新管理も扱います。

• APIの一時障害に対応する画面を作りたいとき
• 非表示タブの定期取得を止めたいとき
• 複数データの更新間隔を別々に管理したいとき

ダッシュボードや管理画面に新しいパネルを追加し、既存コードの規約に合わせてAPI、処理ロジック、画面、登録設定、スタイル、サーバー接続まで整えるスキル。

• ダッシュボードにパネルを追加
• 管理機能をサーバーと画面に実装
• 新しいAPIをサーバーに接続

外部APIのキーをサーバー側で管理し、ダッシュボード用の中継APIを作るスキル。Vercel向けに、入力検証やキャッシュ、エラー応答を整えます。

• APIキーを隠して外部APIを使いたいとき
• 株価やニュースの取得APIを作りたいとき
• APIの応答形式やエラー処理の統一

コードや設定、文書を含むプロジェクトを、制作完了後の独立した工程でZIPにまとめます。アーカイブの存在と内容を確認し、保存場所と同梱内容まで報告するスキル。

• 完成したコード一式のZIP納品
• ダウンロード用プロジェクトの梱包
• 複数ファイルの成果物をまとめたいとき

ダッシュボードや管理画面に新しいパネルを追加する際、既存コードの設計に合わせて、API・処理ロジック・画面・登録設定・スタイルを一通り実装するスキル。

• ダッシュボードにパネルを追加したいとき
• サーバーと画面をまたぐ機能の実装
• 既存パネルの設計に合わせたいとき

ダッシュボードの目的から各パネルの表示内容、データ取得元、更新頻度までを整理するスキル。画面操作や外部連携の仕様も含め、設計資料にまとめます。

• ダッシュボードの要件を固めたいとき
• 各パネルのデータ元と更新頻度の整理
• 画面操作や外部連携の仕様を決めたいとき

大きなテキストファイルの保存がツールのサイズ制限で失敗したとき、保存先フォルダを作成してからrun_shellとPythonで書き込み、結果を確認する手順です。

• 保存エラーが出た大きなソースの書き込み
• 新しい深い階層へのファイル保存
• 長いJSONやMarkdownの保存

TypeScriptでバッジやサムネイル付きのパネルUIを作る手順です。データ取得の再試行、エラー表示、開閉状態やサイズの保存も共通の基底クラスにまとめます。

• サムネイル付きニュースパネルの作成
• 情報源別の色付きバッジ追加
• パネルのサイズや開閉状態の保存

ファイルにアクセスできない原因を、ディレクトリ構成・権限・内容から調べます。複数ファイルの並列確認とTypeScriptのインポート修正も扱います。

• ファイルの欠落やパス・権限の問題を調べたいとき
• 複数のソースファイルを並列に点検したいとき
• CSSや設定ファイルの先頭と行数を確認したいとき

ダッシュボードの情報パネルをTypeScriptで作り、タイトル・件数表示から読み込み中の表示、エラー時の再試行、定期更新まで実装するスキル。

• ダッシュボードに株価パネルを追加
• 読み込み表示や再試行を付けたいとき
• パネルのタイトルや件数表示の統一

ダッシュボードのパネルに、通信失敗時の自動再試行やエラー表示、開閉状態・サイズの保存を組み込むスキル。TypeScriptで共通クラスと個別パネルを実装します。

• TypeScriptでダッシュボードを作りたいとき
• 通信失敗時に自動再試行したいとき
• パネルのサイズや開閉状態を保存

ファイルを丸ごと置き換える前に現在の内容と比較し、一致する場合は書き込みを省く手順。不要な再ビルドや更新日時の変更、キャッシュへの影響を抑えます。

• 設定ファイルを変更時だけ更新
• 生成ファイルの不要な再ビルドを抑制
• 全体置換前に差分を確認したいとき

TypeScriptの型チェックを実行し、起動に失敗した場合は別の方法で再試行します。既存エラーと変更ファイルの診断を整理し、修正後の確認まで進めます。

• 変更後のTypeScriptを確認
• npxなどの起動失敗時に再試行
• 既存エラーと変更箇所の診断を整理

ダッシュボードのパネルに、開閉状態やサイズの保存、データ取得の再試行、エラー表示を組み込むスキル。フレームワークを使わないTypeScriptの実装例を示します。

• パネルのサイズや開閉状態の復元
• データ取得失敗時の自動再試行
• パネル間の読み込み・エラー表示統一

APIからのデータ取得処理をTypeScriptで整理し、任意の検索条件の組み立て、キャッシュ、連続失敗時の呼び出し停止を実装するスキル。

• 任意の検索条件でAPIを呼びたいとき
• APIの連続失敗時に呼び出しを止めたいとき
• 画面からデータ取得処理を分離したいとき

APIからのデータ取得を画面表示から分離し、連続失敗時の呼び出し休止、キャッシュや既定値の返却、型付きデータの受け渡しを実装するスキル。

• API通信と画面部品の分離
• APIの連続失敗時に呼び出しを止めたいとき
• キャッシュと既定値の設定