SigNoz

Storybookの画面をGitの変更前後で撮影し、明暗両テーマの見た目を比較します。撮影時の揺れも確認し、レビュー用の注釈付き差分ページにまとめます。

• 変更前後の画面を比較したいとき
• 明暗テーマの表示崩れ確認
• 注釈付きの画面差分をPRで共有

新しいページやコンポーネントのひな形をコマンドで生成し、関連ファイルを機能ごとにまとめます。タブ付き画面の構成とページのルート登録も扱うスキル。

• 構成をそろえて新しいページを作りたいとき
• 複数タブを持つ画面の土台作り
• 機能内で使うコンポーネントの追加

SigNozのページが使うAPIや表示状態を調べ、読み込み中・エラー・権限差などを操作パネルから再現できるStorybookのストーリーを作るスキル。

• SigNozのページストーリー作成
• 読み込み中・空・エラー表示の確認
• 権限によるボタンや操作の違いの確認

ReduxやReact Contextに集まった状態を用途別に分類し、APIデータ・URLで共有する条件・画面内の状態それぞれに合う管理方法へ移すスキル。

• ReduxやReact Contextから移行したいとき
• APIデータの二重管理を解消したいとき
• 検索条件やページ番号をURLで共有