開発のスキル

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

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

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

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

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

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

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

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

TypeScript製ダッシュボードへのパネル追加を、APIルートから画面表示・登録まで一貫して進めるスキル。既存構成の確認、通信失敗への対処、表示状態の保存も扱います。

• サーバーと画面をまたぐパネル追加
• Expressやhttp.createServerへの接続
• キャッシュと連続失敗時の休止処理

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

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

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

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

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

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

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

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

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

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

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

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

APIからデータを取得する処理を画面から分離し、連続失敗時の呼び出し休止とキャッシュ利用を組み込み、自動更新と利用者の操作に応じて使い分けるスキル。

• 自動更新パネルのデータ取得を実装したいとき
• 障害中のAPIへの連続呼び出しを抑えたいとき
• 生成操作と自動更新のエラー処理を分けたいとき

TypeScriptで、定期的にデータを取得するパネルと外部データで更新するサイドバーを実装するスキル。再試行、表示状態の保存、CSSの重複挿入防止も扱います。

• 定期更新するダッシュボードの作成
• 外部データでサイドバーを更新したいとき
• パネルのサイズや開閉状態を保存

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

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

ダッシュボードの表示部品とデータ取得をまとめ、読み込み中・エラー表示、再試行、キャッシュ、自動更新の動作をそろえたパネルを実装するスキルです。

• データ取得を伴うダッシュボードの開発
• 読み込み中やエラー表示の共通化
• パネルごとのキャッシュと障害対応の設定

指定した場所のフォルダーをlist_dirの結果から抽出し、名前順の一覧と総数を示すスキル。ファイルとの区別や隠し項目の除外条件を整理し、構成の確認に使えます。

• プロジェクトのフォルダー構成を確認
• スキルやモジュールを棚卸ししたいとき
• リポジトリの構成を調べたいとき

既存のソースコードから設計パターンや実装の要点を抽出し、構造の解説、コードテンプレート、利用例を備えた再利用可能な学習用のSKILL.mdにまとめます。

• 参考実装から教材を作りたいとき
• 再利用できる実装パターンの文書化
• 利用例付きコードテンプレートの作成

GNewsやNewsAPIなどを使い、見出し取得、キーワード検索、カテゴリ別のニュース表示を実装します。記事データの整形や画面表示、取得失敗時の処理例も備えたスキルです。

• アプリにカテゴリ別ニュースを追加
• ニュースのキーワード検索を作る
• HackerNewsの記事リンクを一覧表示

TypeScriptでダッシュボードのパネルを作る実装ガイド。通信の重複防止、失敗時の再試行や連続失敗時の通信抑制、表示状態の保存を扱います。

• TypeScriptでパネルを作りたいとき
• 既存の通信処理にキャッシュを追加
• 待ち時間を延ばして通信を再試行

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

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

TypeScriptでダッシュボードのパネルを作り、サイズ保存や読み込み表示、通信失敗時の再試行を組み込むスキル。既存のデータ取得処理へのキャッシュ追加も案内します。

• TypeScriptでパネルを作りたいとき
• 再読み込み後もパネルサイズを保ちたいとき
• 通信失敗時の再試行を実装したいとき

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

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

ダッシュボードの表示部品をTypeScriptで作るスキルです。データの定期更新、読み込み中の表示、取得失敗時の再試行や状態管理の実装を案内します。

• ダッシュボードの表示枠を共通化したいとき
• 株価やニュースを定期更新したいとき
• 読み込み表示や再試行を加えたいとき

API障害に備えるダッシュボードのパネルを、通信の一時停止や再試行、キャッシュ、エラー表示、サイズや開閉状態の保存を組み合わせて実装するスキル。

• API障害に備えるダッシュボード開発
• 読み込み・エラー・再試行表示の追加
• パネルのサイズや開閉状態の保存