Skill.md検索

音声入力の文字起こしテキストを自動修正・補完し、完成度の高いブログ記事として仕上げることができます。 技術用語やサービス名を自動調査し、正確な情報を記事に反映させ、信頼性の高いコンテンツを実現できます。 過去記事のスタイルを参考にしながら、章立てや見出し構成をAIが提案し、ユーザー確認を経て記事を作成できます。 textlintなどのツールを使った文章品質チェックと記事レビューサブエージェントによる最終検証で、プロ品質の記事に仕上げます。 Markdown形式でFront Matter付きの完成記事を自動生成し、ブログシステムにそのまま投稿できます。 音声で思考を整理しながらブログ記事を作成したいライターやテックブロガー 話し言葉を文語に直す作業や文章推敲に時間をかけたくない執筆者 ブログ記事の品質を保ちながら執筆時間を短縮したいコンテンツクリエーター 定期的に技術ブログを公開する必要があるエンジニアやテック企業の広報担当者 tubone24のブログ記事作成スキルです。音声入力の文字起こしテキスト（誤認識、脱字、句読点欠落、論理の飛躍を含む）をブログ記事として完成させます。 ワークフローは以下の通り：ユーザープロンプトの主題・目的を理解し、不明点は確認を取ります。次に、技術用語調査サブエージェントで記事内のすべての技術用語・ツール名・サービス名を調査。過去記事を参照してライティングスタイルや構成を把握し、章立てを提案・確認します。各セクション執筆後、textlintで文章品質を向上させ、記事レビューサブエージェントで品質チェックと引用リンク検証を実施。最終版をユーザーに提出し、修正を経て完成させます。 Front Matterは必須で、slug（YYYY/MM/DD/slug形式）、title、date、tags、headerImage、templateKey（blog-post固定）、useAi（true固定）を含みます。見出しはh2～h5のみ、Mermaid図とコードブロックは言語タグ付き、箇条書きは最小限にとどめるという文体ルールを厳守します。

起動済みChromeから直接メール取得：プロジェクト内に既に起動しているChromeに自動接続し、OAuth設定不要でGmailのメール一覧を取得できます。 キーワード検索で該当メールを抽出：検索クエリを指定して、膨大なメールから必要な情報だけを素早く絞り込めます。 スレッド単位でメール本文を読込：特定のスレッドID を指定してメール本文と返信履歴を一括取得できます。 添付ファイルの自動ダウンロード：メールに含まれるファイルを指定フォルダに自動保存し、手作業を削減できます。 デバッグポート経由でセキュアに接続：既存Chromeセッションを再利用するため、ログイン情報の再入力が不要です。 メール内容を自動抽出して業務システムに連携させたい開発者 大量のメール添付ファイルを一括処理したい事務職・企画担当者 Gmail と連携したBot・自動化システムを構築したいエンジニア プロジェクト内で定期的にメール情報を自動収集・分析したい業務システム管理者 このスキルは、Chrome の既存セッションを利用して Gmail のメールを DOM スクレイピングで取得します。OAuth設定は不要です。このプロジェクトでは Chrome が起動済みのため、常に--no-launchモードで動作し、リモートデバッグプロトコル経由（デフォルトポート9222）で接続します。 実行コマンド：スクリプトディレクトリ（$CLAUDE_PROJECT_DIR/.claude/skills/gmail/scripts）でnpx tsx src/index.ts [command]を実行。①list：メール一覧取得（--no-launch --port 9222）、②search：メール検索（-q "検索クエリ"で指定）、③read：メール本文読取（--thread "スレッドID"）、④download：添付ファイルダウンロード（--output ./downloadsで保存先指定） オプション一覧：--label でラベル指定、--limit で取得件数上限（デフォルト50）、--format json|textで出力形式選択、--no-launchで既存Chrome接続（このプロジェクトでは常に指定必須）、--port でデバッグポート指定（デフォルト9222） 前提条件：Chrome が--remote-debugging-port=9222で起動済みであること、Gmail にログイン済みの Chrome セッションが必要なこと、DOM セレクタは Google の仕様更新で変わる可能性があることに留意してください。

Chromeの既存ログイン済みセッションを利用して、Spotify Web Playerを操作できるため、複雑な認証設定が不要です。 保有しているDaily Mixプレイリストの一覧を自動取得し、どのプレイリストが利用可能かをすぐに確認できます。 コマンドラインから指定したDaily Mixを再生でき、手動でSpotifyを開く手間が削減されます。 複数のChromeプロファイルに対応し、異なるSpotifyアカウントを切り替えて操作できます。 開発作業中に音楽を再生したいエンジニア CLIツールから自動でSpotifyを操作したいカスタマイズ好きな人 複数のSpotifyアカウント（仕事用・個人用など）を使い分けている人 既存のChrome環境を活用し、新たな認証設定を追加したくない人 Chrome既存セッションを利用してSpotify Web PlayerのDaily Mixを再生します。Spotifyログイン済みのChromeセッションが必須です（OAuth設定不要）。使い方は以下の通り：Daily Mix一覧取得はcd .claude/skills/spotify/scripts && npx tsx src/index.ts list -p "プロファイル名"、Daily Mix再生はnpx tsx src/index.ts play -p "プロファイル名" --index 1。オプションは-p, --profile （Chromeプロファイル名）、--index （再生するDaily Mixの番号・1始まり）、--no-launch（既存Chromeに接続）、--port （デバッグポート・デフォルト9222）。注意事項として、Spotifyログイン済みプロファイルが必須、Spotify Premiumを推奨（フリーアカウントでは広告挿入）、DOMセレクタはSpotify更新で変更の可能性、headlessモードではDRM制約で音声再生不可です。

Reactコンポーネントの型定義、状態管理、再レンダリング効率などのコード品質をチェックして改善提案を得られます。 ローディング状態・エラー表示・操作フィードバック・フォーカス管理などのUX観点から、ユーザーの使いやすさを検証できます。 セマンティックHTML、キーボード操作対応、ARIA属性の適切性、コントラスト比などのアクセシビリティ（視覚や操作に障害のある方への対応）を確認できます。 ライト/ダークモード両方で視認性が保たれているか、CSS変数を使ったテーマ管理が正しく機能しているかを検査できます。 実際に測定可能な重要な問題のみを指摘し、抽象的で実行不可能な指摘を避けた実用的なレビューを受けられます。 Reactコンポーネントを開発しており、品質チェックを自動化したい開発者 ダークモード対応など複雑なUI実装が含まれるプロジェクトに関わる方 アクセシビリティ対応が必須な業務システムやWebアプリの開発チーム コードレビュー時にUXと技術品質の両面から実用的なフィードバックを得たい方 UIレビュースキルは、コンポーネントコードの品質・保守性・UXの観点からレビューを実施します。チェック項目はコード品質（複雑さ排除、props型定義、状態管理粒度、再レンダリング検証）、UX（ローディング/エラー状態表示、操作フィードバック、フォーカス管理）、アクセシビリティ（セマンティックHTML、キーボード対応、ARIA属性、コントラスト比）です。ダークモード対応では、ライト/ダークモード両方でのコントラスト保持、テーマ切り替え状態管理（CSS変数・OKLCH）、一貫性のあるカラーパレット、ダークモード特有のUI問題（グローや過度な明度）をチェックします。配色チェックポイントではハードコード色の排除、CSS変数使用推奨、コントラスト基準（AA 4.5:1以上、AAA 7:1以上）、アクセント色の控えめ使用を定めます。OKLCHカラースペースを推奨し、テーマ管理ではCSS変数ベース・システム設定尊重・SSRフラッシュ防止・ユーザー選択永続化の非推奨を指導します。パフォーマンスチェックでは大規模リスト仮想化必要性、画像最適化、バンドル肥大化を検証します。レビュースタイルでは重要問題（バグ、重大アクセシビリティ違反）と改善提案（具体的で理由明確）と良い点を簡潔に示し、将来的問題や出典なし推奨を避けます。

キーボード操作の確認: すべてのボタンやメニューがキーボードだけで操作できるか、Tab順序が正しいかを検査できます。マウスなしでサイトを使えるかを自動判定します。 HTMLの構造を改善: 見出しレベルやリスト、フォームラベルなどが正しく記述されているかをチェックし、スクリーンリーダー利用者が内容を理解しやすいサイトに改善できます。 色のコントラスト比を検証: テキストと背景色の組み合わせが視認可能か自動計算し、色覚多様性のある人でも読める配色になっているか確認できます。 不要なARIA属性を削減: セマンティックHTML（本来の正しいタグ）で対応できる場合を自動検出し、複雑すぎるコードをシンプルに保つよう指摘します。 ダークモード対応の色合いをチェック: FinBro標準カラーパレットのコントラスト比を自動検証し、ダークモードでも読みやすい配色になっているか確認できます。 フロントエンドエンジニア・デザイナー: コード実装時にアクセシビリティ要件を満たしているか、毎回確認したい人。 QAテスター: 目視では見つけにくいキーボード操作やスクリーンリーダー対応を、体系的にテストしたい人。 プロダクトマネージャー・ディレクター: Webサイトが法的要件（WCAG 2.1 AA）に対応しているか確認し、リスクを回避したい人。 アクセシビリティ推進者: 組織内のWeb標準化とアクセシビリティ対応を推進している人。

フレームワークに合わせた実装: React、Vue、Svelteなど、プロジェクトで使っているフレームワークの書き方に自動で対応したコンポーネントを生成できます。 プロジェクト規約を自動適用: package.jsonやスタイルファイルを読み込んで、既存コンポーネントと同じパターンで新しいコンポーネントを作成できるため、手作業での規約確認が不要になります。 ダークモード対応を自動実装: FinBro標準のカラーパレットを使った配色やコントラスト比を自動適用し、ダークモードでも見やすいコンポーネントを即座に作成できます。 アクセシビリティ基準を満たす: WCAG 2.1 AA準拠の要素（キーボード操作対応、セマンティックHTML、色コントラスト）を自動的に組み込みます。 過度な複雑化を回避: 単一責任の原則に従い、シンプルで保守しやすいコンポーネント設計を自動で判断します。 フロントエンドエンジニア: 既存プロジェクトの規約を守りながら、新しいUIコンポーネントを素早く実装したい人。 スタートアップ・小規模チーム: 設計ガイドラインを統一したいが、毎回チェックしていられない環境にいる人。 デザインシステム担当者: 複数プロジェクトで統一されたコンポーネント設計を推進したい人。 非エンジニア（デザイナー・PM）: UIコンポーネントの基本形を素早く作成し、実装チームの負担を減らしたい人。