AI TOOLS RADAR
Alle Skills / FANDHE-AI
fandhe-ai/agent-reference-skills

react-flow

React Flow (ノードベース UI / フロー図ライブラリ for React) リファレンス。 ReactFlow コンポーネント、Node, Edge, Handle, Viewport、 カスタムノード / エッジ、Controls / MiniMap / Background、 レイアウトアルゴリズム (dagre, elkjs)、ドラッグ&ドロップ、エッジ接続。

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill react-flow

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

React Flow リファレンス

React Flow ライブラリの全 API ドキュメントを網羅したスキル。 ユーザーのタスクに応じて適切な README.md を読み、そこから個別ファイルへ辿ること。

ディレクトリ構成

text
skills/react-flow/
  SKILL.md
  references/
    learn/
      README.md
      accessibility.md
      adding-interactivity.md
      built-in-components.md
      building-a-flow.md
      computing-flows.md
      custom-edges.md
      custom-nodes.md
      devtools-and-debugging.md
      edge-labels.md
      getting-started-with-react-flow-components.md
      handles.md
      hooks-providers.md
      layouting.md
      mind-map-app-with-react-flow.md
      multiplayer.md
      performance.md
      react-flow-and-the-web-audio-api.md
      slide-shows-with-react-flow.md
      ssr-ssg-configuration.md
      state-management.md
      sub-flows.md
      terms-and-definitions.md
      testing.md
      the-viewport.md
      theming.md
      typescript.md
      uncontrolled-flow.md
      utility-classes.md
      whiteboard.md
    troubleshooting/
      README.md
      common-errors.md
      migrate-to-v10.md
      migrate-to-v11.md
      migrate-to-v12.md
      remove-attribution.md
    components/
      README.md
      ReactFlow.md
      ReactFlowProvider.md
      Background.md
      Controls.md
      ControlButton.md
      MiniMap.md
      Handle.md
      Panel.md
      BaseEdge.md
      EdgeLabelRenderer.md
      EdgeText.md
      EdgeToolbar.md
      NodeResizer.md
      NodeResizeControl.md
      NodeToolbar.md
      ViewportPortal.md
    hooks/
      README.md
      useReactFlow.md
      useNodes.md
      useEdges.md
      useNodesState.md
      useEdgesState.md
      useNodesData.md
      useNodesInitialized.md
      useNodeId.md
      useNodeConnections.md
      useHandleConnections.md
      useInternalNode.md
      useConnection.md
      useOnSelectionChange.md
      useOnViewportChange.md
      useViewport.md
      useStore.md
      useStoreApi.md
      useUpdateNodeInternals.md
      useKeyPress.md
    types/
      README.md
      Node.md
      NodeChange.md
      NodeConnection.md
      NodeHandle.md
      NodeMouseHandler.md
      NodeOrigin.md
      NodeProps.md
      NodeTypes.md
      InternalNode.md
      MiniMapNodeProps.md
      Edge.md
      EdgeChange.md
      EdgeMarker.md
      EdgeMouseHandler.md
      EdgeProps.md
      EdgeTypes.md
      DefaultEdgeOptions.md
      MarkerType.md
      OnReconnect.md
      Connection.md
      ConnectionLineComponent.md
      ConnectionLineComponentProps.md
      ConnectionLineType.md
      ConnectionMode.md
      ConnectionState.md
      IsValidConnection.md
      HandleConnection.md
      OnBeforeDelete.md
      OnConnect.md
      OnConnectEnd.md
      OnConnectStart.md
      OnDelete.md
      OnEdgesChange.md
      OnEdgesDelete.md
      OnError.md
      OnInit.md
      OnMove.md
      OnNodeDrag.md
      OnNodesChange.md
      OnNodesDelete.md
      OnSelectionChangeFunc.md
      Viewport.md
      XYPosition.md
      Position.md
      Rect.md
      CoordinateExtent.md
      FitViewOptions.md
      PanelPosition.md
      PanOnScrollMode.md
      SnapGrid.md
      Align.md
      AriaLabelConfig.md
      BackgroundVariant.md
      ColorMode.md
      DeleteElements.md
      Handle.md
      KeyCode.md
      ProOptions.md
      ReactFlowInstance.md
      ReactFlowJsonObject.md
      ResizeParams.md
      SelectionDragHandler.md
      SelectionMode.md
      ZIndexMode.md
    utils/
      README.md
      addEdge.md
      applyEdgeChanges.md
      applyNodeChanges.md
      getBezierPath.md
      getConnectedEdges.md
      getIncomers.md
      getNodesBounds.md
      getOutgoers.md
      getSimpleBezierPath.md
      getSmoothStepPath.md
      getStraightPath.md
      getViewportForBounds.md
      isEdge.md
      isNode.md
      reconnectEdge.md
    examples/
      README.md
      edges.md
      grouping.md
      interaction.md
      layout.md
      misc.md
      nodes.md
      styling.md
      whiteboard.md
  samples/
    README.md
    basic-flow.md
    interactive-flow.md
    custom-nodes.md
    custom-edges.md
    state-management-zustand.md
    auto-layout-dagre.md
    sub-flows.md
    computing-flows.md
    use-react-flow-hook.md
  scripts/
    README.md
    install.md
    testing.md
    ui-components.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

  1. 下記マッピング表でタスクに対応するカテゴリを探す
  2. そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
  3. 該当ページの .md を Read して詳細を確認する

タスク → カテゴリ マッピング

タスクカテゴリ参照 README
基本概念・用語を理解したいlearnreferences/learn/README.md
フロー構築・インタラクション・カスタマイズ手順を知りたいlearnreferences/learn/README.md
カスタムノード / エッジ・レイアウト・SSR を実装したいlearnreferences/learn/README.md
マインドマップ・スライドショー・Web Audio 連携等のチュートリアルを参照したいlearnreferences/learn/README.md
エラー対応・バージョンマイグレーションを行いたいtroubleshootingreferences/troubleshooting/README.md
アトリビューション（帰属表示）を削除したいtroubleshootingreferences/troubleshooting/README.md
ReactFlow, Background, Controls, MiniMap 等コンポーネントの Props を調べたいcomponentsreferences/components/README.md
Handle, NodeResizer, EdgeToolbar, Panel 等 UI コンポーネントを使いたいcomponentsreferences/components/README.md
useReactFlow, useNodes, useEdges, useStore 等フックを使いたいhooksreferences/hooks/README.md
ビューポート操作・選択変化・接続状態を購読したいhooksreferences/hooks/README.md
Node, Edge, Connection, Viewport 等の型定義を調べたいtypesreferences/types/README.md
イベントハンドラ型・カスタムノード / エッジ Props 型を調べたいtypesreferences/types/README.md
addEdge, applyNodeChanges, getBezierPath 等ユーティリティを使いたいutilsreferences/utils/README.md
ノード / エッジのグラフ探索・パス生成を行いたいutilsreferences/utils/README.md
ドラッグ & ドロップ・グルーピング・ホワイトボード等の実装例を参照したいexamplesreferences/examples/README.md
dagre / elkjs レイアウトやカスタムスタイリングの実装例を参照したいexamplesreferences/examples/README.md
典型的な使い方のサンプルコードを見たいsamplessamples/README.md
インストール・CLI コマンド・テスト環境セットアップを知りたいscriptsscripts/README.md

Verwandte Aufgaben

affaan-m
Community

backend-patterns

Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.

Installationen
3
GitHub Stars
288.088
Aktualisiert
20. Okt.
MIT1 Dateien
Skill-Details ansehen →

Grund für die Auswahl: Entwicklung

aus demselben Repository

Weitere Skills

Alle Skills
fandhe-ai
Community

better-auth

Better Auth (TypeScript 認証フレームワーク) v1.7 リファレンス。 認証・認可、サインアップ・サインイン、セッション管理、OAuth、パスキー、二要素認証 (2FA / TOTP)、SSO / SAML、SCIM、 OAuth Provider (OAuth 2.1 / OIDC)、MCP 認可 (@better-auth/mcp)、Infrastructure (dash / sentinel)、 プラグイン (organization, admin, magic-link, anonymous 等)。betterAuth, createAuthClient, signUp, signIn, getSession。 Next.js, Nuxt, SvelteKit, Hono, Express, Expo, TanStack, Effect 統合。

Installationen
2
GitHub Stars
4
Aktualisiert
24. Okt.
227 Dateien
Skill-Details ansehen →
fandhe-ai
Community

anthropic-api-core

Claude API (platform.claude.com) の Messages API リファレンス。 streaming (SSE), thinking (adaptive) / effort, prompt caching, context editing, compaction, structured outputs, Message Batches, token counting, vision / PDF, Files API, citations, embeddings (Voyage AI)。 errors, rate limits, beta headers, Amazon Bedrock / Vertex AI / Foundry 経由アクセスを含む。

Installationen
1
GitHub Stars
4
Aktualisiert
14. Okt.
87 Dateien
Skill-Details ansehen →
fandhe-ai
Community

anthropic-claude-code-admin

Claude Code (code.claude.com) の権限・セキュリティ・企業管理リファレンス。 permissions (allow / ask / deny), permission modes, auto mode, sandboxing (sandboxed Bash), sandbox environments, zero data retention, data usage, admin setup, server-managed settings, corporate launcher, network config, authentication (SSO), analytics, monitoring (OpenTelemetry), costs, large codebases。

Installationen
1
GitHub Stars
4
Aktualisiert
14. Okt.
26 Dateien
Skill-Details ansehen →
fandhe-ai
Community

anthropic-claude-code-deploy

Claude Code (code.claude.com) のデプロイ・CI/CD リファレンス。 Amazon Bedrock / Google Cloud Agent Platform (Vertex AI) / Microsoft Foundry / Claude Platform on AWS 経由、Claude apps gateway、LLM gateway (protocol / rollout)、 GitHub Actions (claude-code-action) / GitLab CI/CD / GitHub Enterprise Server (GHES)、 code review 自動化・ultrareview、Slack (Claude Tag)、headless mode、cloud environments、 devcontainer、self-hosted environments（runner 構成・identity 検証・本番デプロイ）。

Installationen
1
GitHub Stars
4
Aktualisiert
14. Okt.
54 Dateien
Skill-Details ansehen →