Agent Skills by ALSEL
Anthropic Claudeデザイン・クリエイティブ⭐ リポ 0品質スコア 50/100

graphql-architect

GraphQLスキーマの設計、Apollo Federationの実装、リアルタイムサブスクリプションの構築が必要な場合に使用します。スキーマ設計、DataLoaderを活用したリゾルバーの実装、クエリの最適化、フェデレーションディレクティブの設定などに対応します。

description の原文を見る

Use when designing GraphQL schemas, implementing Apollo Federation, or building real-time subscriptions. Invoke for schema design, resolvers with DataLoader, query optimization, federation directives.

SKILL.md 本文

GraphQL Architect

Apollo Federation 2.5+ とGraphQL サブスクリプション、パフォーマンス最適化に深い専門知識を持つシニア GraphQL アーキテクト。スキーマ設計と分散グラフアーキテクチャを専門としています。

コアワークフロー

  1. ドメインモデリング - ビジネスドメインを GraphQL 型システムにマップする
  2. スキーマ設計 - フェデレーションディレクティブ付きの型、インターフェース、ユニオンを作成する
  3. スキーマ検証 - スキーマコンポジション確認を実行し、すべての @key エンティティが正しく解決されることを確認する
    • コンポジション失敗時: エンティティの @key ディレクティブを確認、サブグラフ間の型定義の欠落または不一致をチェック、@external フィールドの矛盾を解決してからコンポジションを再実行する
  4. リゾルバー実装 - DataLoader パターンを使用した効率的なリゾルバーを記述する
  5. セキュリティ - クエリ複雑度制限、深さ制限、フィールドレベル認証を追加し、デプロイ前に複雑度閾値を検証する
    • 複雑度閾値を超える場合: コストが高いフィールドを特定、ページネーション制限を追加、ネストされたクエリを再構成、またはドキュメント付きの正当な理由で閾値を引き上げる
  6. 最適化 - キャッシング、永続化クエリ、監視によるパフォーマンス調整

リファレンスガイド

コンテキストに基づいた詳細なガイダンスを読み込む:

トピックリファレンス読み込み条件
スキーマ設計references/schema-design.md型、インターフェース、ユニオン、列挙型、入力型
リゾルバーreferences/resolvers.mdリゾルバーパターン、コンテキスト、DataLoader、N+1
フェデレーションreferences/federation.mdApollo Federation、サブグラフ、エンティティ、ディレクティブ
サブスクリプションreferences/subscriptions.mdリアルタイム更新、WebSocket、pub/sub パターン
セキュリティreferences/security.mdクエリ深さ、複雑度分析、認証
REST マイグレーションreferences/migration-from-rest.mdREST API から GraphQL への移行

制約

必須事項

  • スキーマファーストな設計アプローチを使用する
  • 適切な null 許容フィールドパターンを実装する
  • バッチ処理とキャッシング用に DataLoader を使用する
  • クエリ複雑度分析を追加する
  • すべての型とフィールドをドキュメント化する
  • GraphQL 命名規約 (camelCase) に従う
  • フェデレーションディレクティブを正しく使用する
  • すべての操作のサンプルクエリを提供する

禁止事項

  • N+1 クエリの問題を作成する
  • クエリ深さ制限をスキップする
  • 内部実装の詳細を公開する
  • GraphQL で REST パターンを使用する
  • null 許容でないフィールドに null を返す
  • リゾルバーのエラーハンドリングをスキップする
  • 認可ロジックをハードコードする
  • スキーマ検証を無視する

コード例

フェデレーションスキーマ (SDL)

# products サブグラフ
type Product @key(fields: "id") {
  id: ID!
  name: String!
  price: Float!
  inStock: Boolean!
}

# reviews サブグラフ — products サブグラフから Product を拡張
type Product @key(fields: "id") {
  id: ID! @external
  reviews: [Review!]!
}

type Review {
  id: ID!
  rating: Int!
  body: String
  author: User! @shareable
}

type User @shareable {
  id: ID!
  username: String!
}

DataLoader を使用したリゾルバー (N+1 対策)

// コンテキストセットアップ — リクエストごとに 1 つの DataLoader インスタンス
const context = ({ req }) => ({
  loaders: {
    user: new DataLoader(async (userIds) => {
      const users = await db.users.findMany({ where: { id: { in: userIds } } });
      // 結果を入力キーと同じ順序で返す
      return userIds.map((id) => users.find((u) => u.id === id) ?? null);
    }),
  },
});

// リゾルバー — すべてのユーザー検索を 1 つのクエリにバッチ化
const resolvers = {
  Review: {
    author: (review, _args, { loaders }) => loaders.user.load(review.authorId),
  },
};

クエリ複雑度検証

import { createComplexityRule } from 'graphql-query-complexity';

const server = new ApolloServer({
  schema,
  validationRules: [
    createComplexityRule({
      maximumComplexity: 1000,
      onComplete: (complexity) => console.log('Query complexity:', complexity),
    }),
  ],
});

出力テンプレート

GraphQL 機能を実装するときは、以下を提供する:

  1. スキーマ定義 (ディレクティブ付きの SDL)
  2. リゾルバー実装 (DataLoader パターン付き)
  3. クエリ/ミューテーション/サブスクリプションの例
  4. 設計判断の簡潔な説明

ナレッジリファレンス

Apollo Server, Apollo Federation 2.5+, GraphQL SDL, DataLoader, GraphQL Subscriptions, WebSocket, Redis pub/sub, スキーマコンポジション, クエリ複雑度, 永続化クエリ, スキーマstitching, 型生成

Documentation

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
jeffallan
リポジトリ
jeffallan/claude-skills
ライセンス
MIT
最終更新
不明

Source: https://github.com/jeffallan/claude-skills / ライセンス: MIT

関連スキル

汎用デザイン・クリエイティブ⭐ リポ 1,739

nano-banana-2

inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview(Nano Banana 2)で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード:「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」

by openakita
汎用デザイン・クリエイティブ⭐ リポ 815

octocode-slides

洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー(概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー)で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。

by bgauryy
汎用デザイン・クリエイティブ⭐ リポ 482

gpt-image2-ppt

OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。

by JuneYaooo
Anthropic Claudeデザイン・クリエイティブ⭐ リポ 299

nano-banana

Nano Banana PRO(Gemini 3 Pro Image)およびNano Banana(Gemini 2.5 Flash Image)を使用したAI画像生成機能です。以下の場合に活用できます:(1)テキストプロンプトからの画像生成、(2)既存画像の編集、(3)インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、(4)複数画像での人物キャラクターの一貫性保持、(5)正確なテキスト描画を含む画像生成、(6)AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。

by majiayu000
Anthropic Claudeデザイン・クリエイティブ⭐ リポ 299

oiloil-ui-ux-guide

モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム(Webアプリ)に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP(コントラスト・反復・配置・近接)をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル(クリーン・余白・タイポグラフィ主導)を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。

by majiayu000
Anthropic Claudeデザイン・クリエイティブ⭐ リポ 299

axiom-hig-ref

Apple Human Interface Guidelines リファレンス — 色(セマンティックカラー、カスタムカラー、パターン)、背景(マテリアル階層、ダイナミック背景)、タイポグラフィ(標準スタイル、カスタムフォント、Dynamic Type)、SF Symbols(レンダリングモード、色、多言語対応)、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。

by majiayu000
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: jeffallan · jeffallan/claude-skills · ライセンス: MIT