Skill.md検索
2258件の Skill.mdから、あなたに最適なものを見つけましょう
ブラウザ操作を自動化・スクリプト化する
by nisshi-dev
ウェブサイトの訪問・ページ遷移を自動化できます。 フォーム入力・ボタンクリック・ドロップダウン選択などのブラウザ操作を自動実行できます。 スクリーンショット撮影・PDFエクスポートで画面を記録できます。 ウェブページからテキスト・データを自動抽出できます。 ログイン認証・マルチステップフローなど複雑なブラウザ操作を連鎖実行できます。 ウェブアプリケーションのテスト・動作確認を自動化できます。 ウェブ開発中に、複数ページにわたるユーザーフローをAIに自動実行させたい開発者 スクリーンショット取得・データ抽出などの繰り返し作業を自動化したい人 フォーム送信・認証ログイン・API連携フローなど、複合的なテストを実施したい QA担当者 ウェブアプリケーションの自動テストを作成・実行したい人 このスキルはAI向けのブラウザ自動化CLIツールで、以下の基本ワークフローに従います。 基本パターン(全操作の前提) ` 1. 遷移: agent-browser open 2. スナップショット: agent-browser snapshot -i(要素参照@e1, @e2を取得) 3. 操作: 参照を使ってクリック・入力・選択 4. 再スナップショット: ページ遷移・DOM変更後に新参照を取得 ` 主要コマンド ナビゲーション:open 、close スナップショット:snapshot -i(インタラクティブ要素)、snapshot -C(カーソル操作可能) 操作:click @e1、fill @e2 "text"、type、select、check、press、scroll 情報取得:get text @e1、get url、get title 待機:wait @e1(要素出現)、wait --load networkidle(ネットワーク完了)、wait 2000(ミリ秒待機) キャプチャ:screenshot、screenshot --full(フルページ)、pdf output.pdf フォーム送信例 `bash agent-browser open https://example.com/signup agent-browser snapshot -i agent-browser fill @e1 "Jane Doe" agent-browser fill @e2 "jane@example.com" agent-browser select @e3 "California" agent-browser click @e4 agent-browser wait --load networkidle ` 認証・セッション保持:ブラウザ状態を維持し、一度ログインすれば複数のテストで再利用可能
ユーザーの本音を引き出すアンケート設計
by nisshi-dev
満足度・課題・優先順位を正確に把握できる - NPS・CSAT・PMFサーベイなど、目的に応じた最適な指標を選択し、科学的根拠に基づいたアンケート設計を実現します。 バイアスのない回答を集める - ダブルバレル質問(複数のことを同時に聞く)を排除し、1つの質問で1つのことだけを正確に測定することで、クリーンなデータを得られます。 顧客の本当のニーズを優先順位付けできる - MaxDiff手法により、顧客が複数の機能から「最も重要なもの」と「最も重要でないもの」を選ぶことで、単純なランキングより価値の源泉を特定します。 コンバージョン向上につながるアンケートを設計できる - オンボーディングサーベイの活用で、新規ユーザーに「ここが正しい場所だ」という確信を与え、サインアップフローの改善も同時に実現します。 実装前に意思決定を明確にする - アンケート設計の前に「この結果でどのような決断をするのか」を問い直すことで、無駄のない調査設計が可能になります。 プロダクトマネージャー・プロダクトリーダー - ユーザーの満足度や課題を数字で把握し、プロダクト改善の優先順位を決めたい人 UXリサーチャー・ユーザーリサーチ担当者 - 科学的根拠に基づいたアンケート設計手法を学び、信頼性の高いデータを収集したい人 マーケティング・営業チーム - 顧客フィードバックを戦略的に活用し、プロダクト改善やセールスへの示唆を得たい人 スタートアップ創業者・起業家 - 限られたリソースの中で、最小限の調査で最大の学習を得たい人 厳密なリサーチシステムを構築した9人のプロダクトリーダーのフレームワークを活用します。アンケート設計では、目的の明確化(満足度測定か課題特定か優先順位付けか)、適切な指標選択(NPS・CSAT・PMFサーベイ・カスタム)、明確な質問設計、適切な回答者選定を段階的に実施します。NPSは科学的欠陥があるため5~7段階CSATスケール推奨、選択肢を3つに制限して優先順位付けを強制、3~6ヶ月の新規顧客をターゲット化、ダブルバレル質問の排除、機能優先順位付けにはMaxDiff使用など、具体的な原則と手法を提供します。確認項目(意思決定内容・単一測定・顧客選定・モバイル対応・優先順位付け仕組み)とよくある間違い(ダブルバレル・選択肢過多・タイミングミス・NPS信仰・隠れた選択肢)を明示します。
アンケートデータを API で自動投入できる
by nisshi-dev
アンケート設計から回答投入まで一気通貫で支援する API を使用できます。効果的なアンケート設計のための /designing-surveys スキルと連携し、設計→作成→更新→投入までの全工程を自動化できます。 POST /data/surveys で新しいアンケートを作成し、PUT /data/surveys/:id で質問や説明文を後から修正できます。テキスト入力、単一選択(ラジオボタン)、複数選択(チェックボックス)の 3 種類の質問タイプを組み合わせられます。 「その他(自由入力)」オプションを付けた質問や必須・任意の設定ができるため、柔軟なアンケート設計が可能です。 イベント、役割、プロダクトバージョン等のメタデータ(params)を定義し、データエントリごとに値を付与できます。これにより回答を複数の条件で比較分析できます。 ローカル・本番環境に対応した API URL(ローカルは http://localhost:5173/api、本番は Cloudflare Workers)と認証(X-API-Key ヘッダー)が整備されており、すぐに使用開始できます。 ユーザーリサーチャー・UXデザイナー:複数のアンケートを効率的に管理・配布したい プロダクトマネージャー:版別・イベント別の回答を一元管理し、比較分析したい マーケティング担当者:外部から大量のアンケートデータを投入・管理したい エンジニア:複雑なアンケート管理機能を REST API で自動化したい ワークフローは 7 ステップで構成されます:(1)アンケート設計で目的・質問・回答タイプ・パラメータを決定、(2)POST /data/surveys でアンケート作成、(3)PUT /data/surveys/:id で更新(任意)、(4)POST /data/surveys/:id/data-entries でデータエントリ作成(任意)、(5)PUT /data/surveys/:id/data-entries/:entryId でデータ修正(任意)、(6)POST /data/surveys/:id/responses で回答を一括投入、(7)/admin/surveys/:id で管理画面から確認。質問タイプは text(テキスト)、radio(単一選択)、checkbox(複数選択)の 3 種です。「allowOther」フラグで「その他」自由入力オプションを追加可能。params は key-label-visible で定義し、アンケートごとにメタデータを付与できます。認証は NISSHI_DEV_SURVEY_API_KEY を X-API-Key ヘッダーに設定し、API Base URL はローカルまたは本番環境に応じて使い分けます。
TypeScript認証機能を完全に構築できる
by nisshi-dev
Better Auth フレームワークの環境構築・セットアップを自動化でき、TypeScript による型安全な認証機能を実装できます。 メール/パスワード認証、OAuth(Google など)、マジックリンク、パスキーなど複数の認証方法をプラグインで簡単に追加できます。 Prisma・Drizzle などの ORM との連携設定を自動で行い、データベーススキーマを正確に適用できます。 セッション管理(Cookie キャッシュ戦略・有効期限・Redis 統合など)をカスタマイズでき、セキュリティレベルに応じた設定ができます。 CLI コマンド(migrate・generate・mcp)を実行して、プラグイン追加時のスキーマ再生成やマイグレーション管理を自動化できます。 TypeScript でアプリケーションを開発しており、認証機能を安全に実装したい人 マルチプラットフォーム・フレームワーク非依存の認証を導入したい人 OAuth や複数の認証方法に対応する必要があり、セットアップに時間をかけたくない人 セッション管理やセキュリティ設定を細かくカスタマイズしたい人 環境変数 BETTER_AUTH_SECRET(最低 32 文字・openssl で生成)と BETTER_AUTH_URL を設定し、未設定時のみ config で baseURL/secret を定義します。CLI は auth.ts を ./・./lib・./utils・./src 配下から検索し、カスタムパスは --config で指定可能です。npx @better-auth/cli@latest migrate でスキーマ適用、generate で ORM スキーマ生成、mcp で AI ツール MCP 追加を実行します。コア設定オプション(appName・baseURL・basePath・secret・database・emailAndPassword・socialProviders・plugins・trustedOrigins 等)のマッピング方法を記載します。データベースは直接接続(pg.Pool・mysql2・better-sqlite3・bun:sqlite)または ORM アダプター(Drizzle・Prisma・MongoDB)から選択できます。セッション管理は secondaryStorage(Redis/KV)・DB 永続化・Cookie キャッシュ戦略(compact/jwt/jwe)をサポートし、ユーザー・アカウント設定(modelName・additionalFields・accountLinking など)をカスタマイズ可能です。プラグイン追加・変更後は必ず CLI を再実行するルールを遵守します。
テストを書いてからコードを実装する習慣がつく
by nisshi-dev
Red-Green-Refactorサイクルに従い、テスト駆動開発(TDD)の流れを習得できます。 実装前に「何が起こるべきか」をテストで明確にすることで、ぶれない設計ができます。 失敗するテストを確認してからコードを書くため、本当に必要な機能だけを実装できます。 テストが通ったら安心して リファクタリング(コードの整理・改善)に進める仕組みが身につきます。 「今回だけスキップしよう」という自己正当化を防ぎ、継続的な品質を保てます。 新機能開発やバグ修正を担当するエンジニア 「テストは後でいい」と思いがちな人 コードの品質と保守性を重視したい人 テストの書き方・タイミングで迷っている人 基本原則: テストが失敗するのを見ていなければ、正しいものをテストしているか分からない。テストの前にコードを書いた場合は削除して最初からやり直す。 Red-Green-Refactorサイクル: 1. RED:何が起こるべきかを示す最小限のテストを1つ書く。2. GREEN:テストを通す最もシンプルなコードを書く。3. REFACTOR:クリーンアップしつつグリーン状態を維持。 テスト作成ルール: 一つの動作を、明確な名前で、実際のコードでテストする。本物のコード(避けられない場合以外モック不使用)を使う。失敗を必ず見届ける。
実装前にアイデアを完全な設計に落とし込む
by nisshi-dev
プロジェクトの現状を把握したうえで、段階的に質問を重ねてアイデアを具体化できます。ユーザーの本当の意図・制約・成功基準を引き出し、見落としやすい前提を検証します。 複数のアプローチを比較検討できます。トレードオフを示しながら推奨案を提示するため、実装前の判断ミスを減らせます。 設計を文書化して承認を得ることで、手戻りを防げます。小さな機能でも設計を明確にすることで、実装が迷走しません。 「単純だから設計は不要」という落とし穴を回避できます。TODO リストや単一関数のような小さなタスクでも、このプロセスを通すことで隠れた要件を見つけられます。 実装計画への自動移行が可能です。設計が承認されたら、次のステップとなる実装計画スキルへシームレスに引き継げます。 要件定義なしに実装を始めてしまい、後から大きな変更が入る経験がある方 プロジェクトの本当のゴールが曖昧なまま進めてしまう傾向がある方 複数の実装方法があるときに、どれが最適かを判断するのが難しいと感じている方 設計書を書くのは時間がかかると感じている方(短くても構わないという考え方を学べます)
画像と動画を自動圧縮してファイルサイズを大幅削減
by nisshi-dev
PNG・JPG 画像を AVIF 形式に自動変換し、60~80%のファイルサイズ削減を実現できます。元ファイルは .original.png として保持されるため、必要に応じて復元できます。 MP4 動画を WebM 形式(AV1 映像コーデック)に自動変換し、50~70%のファイルサイズ削減ができます。音声トラックの有無を自動判定して適切に処理します。 ドライランモードで、変換前に削減予定量を確認できます。実際の変換を実行する前に効果を見積もれるため、安心して進められます。 プロジェクト全体または指定パスのみを対象にできます。all で全体を最適化、パス指定で特定フォルダだけを処理できます。 最大幅・高さを自動制限するため、Web 配信に最適なサイズに統一できます。1920px 以上の画像や 1080px 以上の動画は自動的にリサイズされます。 Web サイトの読み込み速度を改善したい方 大量の画像や動画をプロジェクトで管理していて、ファイルサイズを削減したい方 ドキュメントや markdown に埋め込まれたメディアを自動で最適化したい方 CI/CD パイプラインの一部として、アセット最適化を自動化したい方
Jest 互換の高速ユニットテストを Vite で実行できる
by nisshi-dev
Jest 互換の API で、設定なしで ESM・TypeScript・JSX をテストできます。Vite が提供する同じトランスフォーマーとリゾルバーを使うため、プロジェクト設定との齟齬がありません。 スマートウォッチモードにより、変更したファイルに関係するテストだけが再実行されます。モジュール依存グラフを解析するため、不要なテスト再実行を大幅に削減でき、開発サイクルが高速化します。 マルチスレッド並列実行によるテスト高速化と、V8・Istanbul 組み込みカバレッジ(コード網羅率測定)を活用できます。カバレッジ設定も簡単です。 スナップショットテスト、モック(mock)、スパイ(spy)などのテストユーティリティが揃っており、複雑なテストケースにも対応できます。 ビジュアルリグレッションテスト(toMatchScreenshot)で、UI 変更を画像比較して検出できます。予期しない UI 破損を自動発見できます。 Jest からの移行を検討している Vite ユーザー TypeScript や JSX を使ったテストを書く必要があり、設定の手間を減らしたい方 テスト実行速度を大幅に改善したい方 UI コンポーネントのリグレッションテスト(変更による予期しない破損検出)を自動化したい方
UI コードがアクセシビリティと使いやすさに準拠しているか自動チェック
by nisshi-dev
Web Interface Guidelines(業界標準の UI ガイドライン)の全ルールに自動照合し、コードが準拠しているかを一瞬で判定できます。ガイドラインは毎回取得されるため、最新の基準で評価されます。 アクセシビリティと UX のベストプラクティスをスキャンし、file:line 形式の簡潔な指摘を得られます。どのファイルのどの行に問題があるか、一目で分かります。 デザイン監査として機能し、UI コンポーネントが標準的な良い設計になっているかを自動検証できます。手動チェックの手間を大幅に削減できます。 UI/UX デザインの品質を定期的にチェックしたい方 アクセシビリティ(WCAG など)を意識した実装ができているか確認したい方 複数の開発者が関わるプロジェクトで、UI コード品質を統一したい方 デザイン監査を自動化して、コードレビューの負担を減らしたい方
メールが確実に相手に届き、法律も守れるようにする
by nisshi-dev
迷惑メールフォルダを避ける設定ができる:SPF・DKIM・DMARC(メール認証技術)を設定して、送信したメールがGmailやYahooメールに正しく届くようになります。 パスワードリセットやOTP(ワンタイムパスワード)メールを実装できる:ユーザー認証に必要な確認メールなど、アプリケーションに必須のメール機能を正しく構築できます。 メールアドレス収集と同意管理ができる:ニュースレター登録フォームでユーザーの許可を正しく取得し、誤配信を防げます。 CAN-SPAM法・GDPR・CASL など各国の法律に対応できる:メール配信に関する法的要件を満たし、罰金や配信停止を避けられます。 メールが正しく届かないときの自動再送信やエラー対応ができる:配信失敗時の自動リトライや、バウンス・苦情メールの自動処理で、メール送信の信頼性が向上します。 Webアプリやサービスを運営している開発者:ユーザーへのメール送信が必須の場合に、正確で法令対応したメール機能を実装できます。 メールが迷惑メールに分類されて困っているエンジニア:認証設定やコンテンツの問題を診断し、到達率を改善できます。 マーケティング担当者と連携するプロダクト責任者:ニュースレターやキャンペーンメールを安全に配信する仕組みを構築できます。 グローバルサービスを提供している企業:各地域の法的要件(EUのGDPR、カナダのCALS等)を一度に理解して対応できます。
Honoフレームワークの開発を素早く進める
by nisshi-dev
Hono APIの使い方をすぐに調べられる:hono search コマンドでドキュメントを検索し、ミドルウェアやヘルパー関数の正しい使い方を瞬時に確認できます。 エンドポイントをHTTPサーバーを起動せずにテストできる:hono request コマンドでGET・POSTリクエストを実行し、コード修正前に動作確認ができるため、デバッグ時間が短縮されます。 コードを本番環境に合わせて最適化できる:hono optimize でバンドルサイズを圧縮し、Cloudflare Workers・Deno・その他プラットフォーム向けにビルドを最適化できます。 APIドキュメントの詳細をすぐに参照できる:検索結果から該当セクションの詳細ドキュメント(Context、Hono、ヘルパー等)を読み込めるので、実装時の迷いが減ります。 Honoで初めてアプリケーションを開発するエンジニア:APIの使い方がすぐに確認でき、効率よく実装を進められます。 Cloudflare Workers や Deno 向けにサーバーレスアプリを作っている開発者:プラットフォーム別の最適化やテストを自動化できます。 小規模チームでWebアプリを短期間に開発する人:ドキュメント検索とテストが統合されているため、開発サイクルが加速します。
Prismaデータベース設計を正確に実装し、パフォーマンスを最適化する
by nisshi-dev
スキーマ設計のエラーを診断・修正できる:リレーション定義の誤りやインデックス不足を検出し、ランタイムエラーやクエリ速度低下を未然に防げます。 マイグレーション失敗から復旧できる:失敗したマイグレーションによるデータベース不整合を診断し、段階的に修正できます。 クエリパフォーマンスを改善できる:適切なインデックス追加やクエリ構造の最適化により、遅いクエリを高速化できます。 複数データベース(PostgreSQL・MySQL・SQLite)に対応できる:データベース種別に応じたスキーマ設計やマイグレーション方法を正確に実装できます。 リレーション設計(1対多・多対多)を正しく構築できる:複雑なデータ構造を整理し、冗長なクエリを排除した効率的なスキーマを設計できます。 Prismaを使ったNode.jsアプリケーションを開発しているエンジニア:スキーマ設計からマイグレーション、クエリ最適化まで一貫してサポートを受けられます。 データベース設計で頻繁にエラーに直面している開発者:スキーマのよくあるアンチパターンを学び、最初から正しい設計ができるようになります。 複数の環境(開発・本番)でデータベースを管理している開発チーム:マイグレーション競合やシャドウDB(開発用DB)の問題を解決できます。 レガシーデータベースをPrismaに移行する人:既存DBの構造を分析し、Prismaスキーマに正確に変換できます。