開発のスキル

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

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

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

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

大きなテキストファイルの保存がツールの容量制限で失敗したとき、シェルからPythonへ複数行の内容を渡して書き込み、保存結果を確認する代替手順のスキル。

• write_file失敗後の大きなコード保存
• 長いJSONやMarkdownの保存
• シェルで引用処理が複雑な内容の保存

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

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

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

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

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

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

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

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

CSSファイル同士を比較し、足りないルールやプロパティだけを追記します。既存の内容を残しながら、移行先に合わせたCSS変数の調整と追記後の確認まで進めます。

• プロジェクト間でスタイルを移したいとき
• 既存ルールを残して部品を再利用したいとき
• CSS変数を移行先に合わせたいとき

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

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

他の画面部品が取得したデータを受け取り、必要な項目がそろってから集計を表示。追加の通信を行わず、更新のたびに指標を書き換えるパネルを実装するスキル。

• メールと株価を一つの概要欄に集約
• 必要なデータがそろってから表示したいとき
• 取得済みデータで指標を更新したいとき

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

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

TypeScriptで作られた一覧やカードに、サムネイル、色分けバッジ、データに応じた装飾を追加し、表示ロジックとCSSをそろえて更新します。

• 一覧にカテゴリや配信元のバッジを付けたいとき
• 画像がない場合も含めたサムネイル表示
• データに応じて色や装飾を変えたいとき

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

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

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

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

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

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

株価やニュースを並べる個人用ダッシュボードの土台を、ViteとTypeScriptで整えるスキル。フォルダー構成、依存関係、設定ファイル、画面の起点を用意します。

• 株価とニュースのダッシュボードを新規作成
• パネルとデータ取得処理を分けたいとき
• TypeScriptとViteの設定を準備

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

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

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

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

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

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

Pythonの実行がサンドボックスのエラーやタイムアウトで止まったとき、必要なパッケージを導入し、run_shellで再実行して出力を確認する手順です。

• 実行環境で止まったPython処理の再開
• 不足パッケージの導入と実行
• シェル経由でのWord文書作成

サンドボックスでのPython実行がエラーやタイムアウトになったとき、コードをファイルに保存してrun_shellで再実行し、生成物の確認まで進めるスキル。

• サンドボックスで失敗したコードの再実行
• 失敗したExcelやCSV生成の再開
• 実行時間を延ばしてスクリプトを動かしたいとき

存在するはずのファイルが見つからないときに、コマンドの実行場所を確認し、対象フォルダへ移動してから操作することで、相対パスの食い違いに対処するスキル。

• 存在するファイルが見つからないとき
• 正しい場所からスクリプトを動かしたいとき
• ツールごとに異なるパス解決の確認

サンドボックスでのPython実行が繰り返し失敗するときに、コードをファイルへ保存してシェルで実行するスキル。複数ファイルの処理や出力確認、一時ファイルの片付けまで案内します。

• サンドボックスの連続失敗後に実行方法を変更
• 複数ファイルに分けたPythonを実行
• JSONを加工してCSVへ書き出す

ブロックチェーン上の処理と操作画面を備えるWeb3アプリを、構成設計から接続仕様、実装、段階的なテスト、デプロイ用スクリプトまで順序立てて開発するスキル。

• Web3プロジェクトの構成設計
• 外部プロトコルとの接続仕様整理
• ウォレット連携の操作画面開発