Community研究&データ分析github.com

gabrielmustiere/skills

Claudeスキルセット:ウェブ開発を効率化するためのコマンドとプロンプト集

skills とは?

このスキルセット「gabrielmustiere/skills」は、Claude Codeや類似のAIエージェント上でウェブ開発を効率的に進めるための実用的なコマンドとプロンプトを提供します。HTML/CSS/JavaScriptのコーディング、フレームワーク操作、デバッグ、テスト実行など、日常的な開発タスクを自然言語の指示で素早く実行できるよう設計されています。各スキルは開発者のワークフローを短縮し、繰り返し作業や定型処理を自動化することを目的としています。対応プラットフォームは主にClaude Code(公式CLI)および互換性のあるAIターミナルインターフェースです。スキル定義ファイル(SKILL.md)内に各コマンドの具体的なプロンプト例が記載されており、ユーザーはそのままコピーして利用できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add gabrielmustiere/skills

Installed? Explore more 研究&データ分析 skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

skills は何をしますか?

Claudeスキルセット:ウェブ開発を効率化するためのコマンドとプロンプト集

このリポジトリには、Claude Code上でウェブ開発作業を迅速に行うためのスキル定義が含まれています。各スキルは、特定の開発タスクを自然言語でトリガーできるように設計されています。

使い方

  1. スキルをClaude Codeに追加します(例: claude add-skill gabrielmustiere/skills)。
  2. 以下のプロンプト例を参考に、タスクを実行してください。

利用可能なスキル

ウェブ開発全般

  • プロジェクトの初期化: 新しいVite + Reactプロジェクトを作成して
  • ファイル作成: components/Header.jsxを作成して
  • コードのリファクタリング: このコンポーネントを関数コンポーネントに変換して

CSS / スタイリング

  • スタイルの追加: この要素にフレックスボックスを適用して
  • レスポンシブ対応: モバイルファーストのグリッドレイアウトを追加して

デバッグ & テスト

  • エラーの調査: コンソールエラーをデバッグして
  • テストの実行: npm testを実行して結果を確認して

注意: スキルの動作はClaude Codeのバージョンや設定によって異なる場合があります。

関連スキル