chore: sync generated files and fix frontmatter
This commit is contained in:
sck_0
@@ -2,7 +2,7 @@
|
||||
|
||||
Generated at: 2026-02-08T00:00:00.000Z
|
||||
|
||||
Total skills: 857
|
||||
Total skills: 860
|
||||
|
||||
## architecture (64)
|
||||
|
||||
@@ -300,7 +300,7 @@ Use when creating container-based agents that run custom code in Azure ... | hos
|
||||
| `xlsx-official` | Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work ... | xlsx, official | xlsx, official, spreadsheet, creation, editing, analysis, formulas, formatting, data, visualization, claude, work |
|
||||
| `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search |
|
||||
|
||||
## development (128)
|
||||
## development (129)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -420,6 +420,7 @@ Triggers: "queue storage", "QueueServic... | azure, storage, queue, py | azure,
|
||||
| `python-performance-optimization` | Profile and optimize Python code using cProfile, memory profilers, and performance best practices. Use when debugging slow Python code, optimizing bottleneck... | python, performance, optimization | python, performance, optimization, profile, optimize, code, cprofile, memory, profilers, debugging, slow, optimizing |
|
||||
| `python-pro` | Master Python 3.12+ with modern features, async programming, performance optimization, and production-ready practices. Expert in the latest Python ecosystem ... | python | python, pro, 12, features, async, programming, performance, optimization, latest, ecosystem, including, uv |
|
||||
| `python-testing-patterns` | Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development. Use when writing Python tests, setting up test suites... | python | python, testing, pytest, fixtures, mocking, test, driven, development, writing, tests, setting, up |
|
||||
| `react-flow-architect` | Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integra... | react, flow | react, flow, architect, reactflow, building, interactive, graph, applications, hierarchical, node, edge, performance |
|
||||
| `react-flow-node-ts` | Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating vis... | react, flow, node, ts | react, flow, node, ts, components, typescript, types, zustand, integration, building, custom, nodes |
|
||||
| `react-modernization` | Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, m... | react, modernization | react, modernization, upgrade, applications, latest, versions, migrate, class, components, hooks, adopt, concurrent |
|
||||
| `react-native-architecture` | Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, impleme... | react, native, architecture | react, native, architecture, apps, expo, navigation, modules, offline, sync, cross, platform, developing |
|
||||
@@ -705,7 +706,7 @@ Triggers: "azure-storage-file-share", "Share... | azure, storage, file, share, p
|
||||
| `wireshark-analysis` | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow... | wireshark | wireshark, network, traffic, analysis, skill, should, used, user, asks, analyze, capture, packets |
|
||||
| `workflow-automation` | Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost... | | automation, infrastructure, makes, ai, agents, reliable, without, durable, execution, network, hiccup, during |
|
||||
|
||||
## security (126)
|
||||
## security (128)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -775,6 +776,8 @@ Triggers: "keyvault secrets rust", "SecretClient rust"... | azure, keyvault, sec
|
||||
| `k8s-manifest-generator` | Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when gen... | k8s, manifest, generator | k8s, manifest, generator, kubernetes, manifests, deployments, configmaps, secrets, following, security, standards, generating |
|
||||
| `k8s-security-policies` | Implement Kubernetes security policies including NetworkPolicy, PodSecurityPolicy, and RBAC for production-grade security. Use when securing Kubernetes clust... | k8s, security, policies | k8s, security, policies, kubernetes, including, networkpolicy, podsecuritypolicy, rbac, grade, securing, clusters, implementing |
|
||||
| `kubernetes-architect` | Expert Kubernetes architect specializing in cloud-native infrastructure, advanced GitOps workflows (ArgoCD/Flux), and enterprise container orchestration. Mas... | kubernetes | kubernetes, architect, specializing, cloud, native, infrastructure, gitops, argocd, flux, enterprise, container, orchestration |
|
||||
| `laravel-expert` | Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and m... | laravel | laravel, senior, engineer, role, grade, maintainable, idiomatic, solutions, clean, architecture, security, performance |
|
||||
| `laravel-security-audit` | Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel sec... | laravel, security, audit | laravel, security, audit, auditor, applications, analyzes, code, vulnerabilities, misconfigurations, insecure, owasp, standards |
|
||||
| `legal-advisor` | Draft privacy policies, terms of service, disclaimers, and legal notices. Creates GDPR-compliant texts, cookie policies, and data processing agreements. Use ... | legal, advisor | legal, advisor, draft, privacy, policies, terms, disclaimers, notices, creates, gdpr, compliant, texts |
|
||||
| `linkerd-patterns` | Implement Linkerd service mesh patterns for lightweight, security-focused service mesh deployments. Use when setting up Linkerd, configuring traffic policies... | linkerd | linkerd, mesh, lightweight, security, deployments, setting, up, configuring, traffic, policies, implementing, zero |
|
||||
| `loki-mode` | Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security... | loki, mode | loki, mode, multi, agent, autonomous, startup, claude, code, triggers, orchestrates, 100, specialized |
|
||||
|
||||
10
README.md
10
README.md
@@ -1,6 +1,6 @@
|
||||
# 🌌 Antigravity Awesome Skills: 857+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
# 🌌 Antigravity Awesome Skills: 860+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
|
||||
> **The Ultimate Collection of 857+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||
> **The Ultimate Collection of 860+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://claude.ai)
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
If this project helps you, you can [support it here](https://buymeacoffee.com/sickn33) or simply ⭐ the repo.
|
||||
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **857 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **860 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
|
||||
- 🟣 **Claude Code** (Anthropic CLI)
|
||||
- 🔵 **Gemini CLI** (Google DeepMind)
|
||||
@@ -38,7 +38,7 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
- [🎁 Curated Collections (Bundles)](#curated-collections)
|
||||
- [🧭 Antigravity Workflows](#antigravity-workflows)
|
||||
- [📦 Features & Categories](#features--categories)
|
||||
- [📚 Browse 857+ Skills](#browse-857-skills)
|
||||
- [📚 Browse 860+ Skills](#browse-860-skills)
|
||||
- [🤝 How to Contribute](#how-to-contribute)
|
||||
- [🤝 Community](#community)
|
||||
- [☕ Support the Project](#support-the-project)
|
||||
@@ -281,7 +281,7 @@ The repository is organized into specialized domains to transform your AI into a
|
||||
|
||||
Counts change as new skills are added. For the current full registry, see [CATALOG.md](CATALOG.md).
|
||||
|
||||
## Browse 857+ Skills
|
||||
## Browse 860+ Skills
|
||||
|
||||
We have moved the full skill registry to a dedicated catalog to keep this README clean.
|
||||
|
||||
|
||||
@@ -194,6 +194,7 @@
|
||||
"python-pro",
|
||||
"python-testing-patterns",
|
||||
"react-best-practices",
|
||||
"react-flow-architect",
|
||||
"react-flow-node-ts",
|
||||
"react-modernization",
|
||||
"react-native-architecture",
|
||||
@@ -290,6 +291,8 @@
|
||||
"k8s-manifest-generator",
|
||||
"k8s-security-policies",
|
||||
"kubernetes-architect",
|
||||
"laravel-expert",
|
||||
"laravel-security-audit",
|
||||
"legal-advisor",
|
||||
"linkerd-patterns",
|
||||
"loki-mode",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"generatedAt": "2026-02-08T00:00:00.000Z",
|
||||
"total": 857,
|
||||
"total": 860,
|
||||
"skills": [
|
||||
{
|
||||
"id": "3d-web-experience",
|
||||
@@ -12407,6 +12407,56 @@
|
||||
],
|
||||
"path": "skills/langgraph/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "laravel-expert",
|
||||
"name": "laravel-expert",
|
||||
"description": "Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"laravel"
|
||||
],
|
||||
"triggers": [
|
||||
"laravel",
|
||||
"senior",
|
||||
"engineer",
|
||||
"role",
|
||||
"grade",
|
||||
"maintainable",
|
||||
"idiomatic",
|
||||
"solutions",
|
||||
"clean",
|
||||
"architecture",
|
||||
"security",
|
||||
"performance"
|
||||
],
|
||||
"path": "skills/laravel-expert/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "laravel-security-audit",
|
||||
"name": "laravel-security-audit",
|
||||
"description": "Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel security best practices.",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"laravel",
|
||||
"security",
|
||||
"audit"
|
||||
],
|
||||
"triggers": [
|
||||
"laravel",
|
||||
"security",
|
||||
"audit",
|
||||
"auditor",
|
||||
"applications",
|
||||
"analyzes",
|
||||
"code",
|
||||
"vulnerabilities",
|
||||
"misconfigurations",
|
||||
"insecure",
|
||||
"owasp",
|
||||
"standards"
|
||||
],
|
||||
"path": "skills/laravel-security-audit/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "last30days",
|
||||
"name": "last30days",
|
||||
@@ -16057,6 +16107,31 @@
|
||||
],
|
||||
"path": "skills/react-best-practices/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-architect",
|
||||
"name": "react-flow-architect",
|
||||
"description": "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.",
|
||||
"category": "development",
|
||||
"tags": [
|
||||
"react",
|
||||
"flow"
|
||||
],
|
||||
"triggers": [
|
||||
"react",
|
||||
"flow",
|
||||
"architect",
|
||||
"reactflow",
|
||||
"building",
|
||||
"interactive",
|
||||
"graph",
|
||||
"applications",
|
||||
"hierarchical",
|
||||
"node",
|
||||
"edge",
|
||||
"performance"
|
||||
],
|
||||
"path": "skills/react-flow-architect/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-node-ts",
|
||||
"name": "react-flow-node-ts",
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
---
|
||||
name: laravel-expert
|
||||
description: Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
|
||||
risk: safe
|
||||
source: community
|
||||
---
|
||||
|
||||
# Laravel Expert
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
Name: laravel-expert
|
||||
Focus: General Laravel Development
|
||||
Scope: Laravel Framework (10/11+)
|
||||
Scope: Laravel Framework (10/11+)
|
||||
|
||||
---
|
||||
|
||||
@@ -14,6 +22,7 @@ You are a Senior Laravel Engineer.
|
||||
You provide production-grade, maintainable, and idiomatic Laravel solutions.
|
||||
|
||||
You prioritize:
|
||||
|
||||
- Clean architecture
|
||||
- Readability
|
||||
- Testability
|
||||
@@ -173,4 +182,4 @@ When refactoring:
|
||||
- Avoid unnecessary abstractions
|
||||
- Do not introduce microservice architecture unless requested
|
||||
- Do not assume cloud infrastructure
|
||||
- Keep solutions pragmatic and realistic
|
||||
- Keep solutions pragmatic and realistic
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
---
|
||||
name: laravel-security-audit
|
||||
description: Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel security best practices.
|
||||
risk: safe
|
||||
source: community
|
||||
---
|
||||
|
||||
# Laravel Security Audit
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
Name: laravel-security-audit
|
||||
Focus: Security Review & Vulnerability Detection
|
||||
Scope: Laravel 10/11+ Applications
|
||||
Scope: Laravel 10/11+ Applications
|
||||
|
||||
---
|
||||
|
||||
@@ -17,6 +25,7 @@ misconfigurations, and insecure coding practices.
|
||||
You think like an attacker but respond like a security engineer.
|
||||
|
||||
You prioritize:
|
||||
|
||||
- Data protection
|
||||
- Input validation integrity
|
||||
- Authorization correctness
|
||||
@@ -195,7 +204,7 @@ When auditing code:
|
||||
## Example Audit Output Format
|
||||
|
||||
Issue: Missing Authorization Check
|
||||
Risk: High
|
||||
Risk: High
|
||||
|
||||
Problem:
|
||||
The controller fetches a model by ID without verifying ownership.
|
||||
@@ -207,6 +216,8 @@ Fix:
|
||||
Use policy check or scoped query.
|
||||
|
||||
Refactored Example:
|
||||
|
||||
```php
|
||||
$post = Post::where('user_id', auth()->id())
|
||||
->findOrFail($id);
|
||||
->findOrFail($id);
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: react-flow-architect
|
||||
description: Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.
|
||||
description: "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements."
|
||||
---
|
||||
|
||||
# ReactFlow Architect
|
||||
@@ -12,21 +12,17 @@ Build production-ready ReactFlow applications with hierarchical navigation, perf
|
||||
Create basic interactive graph:
|
||||
|
||||
```tsx
|
||||
import ReactFlow, { Node, Edge } from 'reactflow';
|
||||
import ReactFlow, { Node, Edge } from "reactflow";
|
||||
|
||||
const nodes: Node[] = [
|
||||
{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
|
||||
{ id: '2', position: { x: 100, y: 100 }, data: { label: 'Node 2' } }
|
||||
{ id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
|
||||
{ id: "2", position: { x: 100, y: 100 }, data: { label: "Node 2" } },
|
||||
];
|
||||
|
||||
const edges: Edge[] = [
|
||||
{ id: 'e1-2', source: '1', target: '2' }
|
||||
];
|
||||
const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
|
||||
|
||||
export default function Graph() {
|
||||
return (
|
||||
<ReactFlow nodes={nodes} edges={edges} />
|
||||
);
|
||||
return <ReactFlow nodes={nodes} edges={edges} />;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -37,6 +33,7 @@ export default function Graph() {
|
||||
Build expandable/collapsible tree structures with parent-child relationships.
|
||||
|
||||
#### Node Schema
|
||||
|
||||
```typescript
|
||||
interface TreeNode extends Node {
|
||||
data: {
|
||||
@@ -45,38 +42,41 @@ interface TreeNode extends Node {
|
||||
hasChildren: boolean;
|
||||
isExpanded: boolean;
|
||||
childCount: number;
|
||||
category: 'root' | 'category' | 'process' | 'detail';
|
||||
category: "root" | "category" | "process" | "detail";
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### Incremental Node Building
|
||||
|
||||
```typescript
|
||||
const buildVisibleNodes = useCallback((
|
||||
allNodes: TreeNode[],
|
||||
expandedIds: Set<string>,
|
||||
otherDeps: any[]
|
||||
) => {
|
||||
const visibleNodes = new Map<string, TreeNode>();
|
||||
const visibleEdges = new Map<string, TreeEdge>();
|
||||
|
||||
// Start with root nodes
|
||||
const rootNodes = allNodes.filter(n => n.data.level === 0);
|
||||
|
||||
// Recursively add visible nodes
|
||||
const addVisibleChildren = (node: TreeNode) => {
|
||||
visibleNodes.set(node.id, node);
|
||||
|
||||
if (expandedIds.has(node.id)) {
|
||||
const children = allNodes.filter(n => n.parentNode === node.id);
|
||||
children.forEach(child => addVisibleChildren(child));
|
||||
}
|
||||
};
|
||||
|
||||
rootNodes.forEach(root => addVisibleChildren(root));
|
||||
|
||||
return { nodes: Array.from(visibleNodes.values()), edges: Array.from(visibleEdges.values()) };
|
||||
}, []);
|
||||
const buildVisibleNodes = useCallback(
|
||||
(allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {
|
||||
const visibleNodes = new Map<string, TreeNode>();
|
||||
const visibleEdges = new Map<string, TreeEdge>();
|
||||
|
||||
// Start with root nodes
|
||||
const rootNodes = allNodes.filter((n) => n.data.level === 0);
|
||||
|
||||
// Recursively add visible nodes
|
||||
const addVisibleChildren = (node: TreeNode) => {
|
||||
visibleNodes.set(node.id, node);
|
||||
|
||||
if (expandedIds.has(node.id)) {
|
||||
const children = allNodes.filter((n) => n.parentNode === node.id);
|
||||
children.forEach((child) => addVisibleChildren(child));
|
||||
}
|
||||
};
|
||||
|
||||
rootNodes.forEach((root) => addVisibleChildren(root));
|
||||
|
||||
return {
|
||||
nodes: Array.from(visibleNodes.values()),
|
||||
edges: Array.from(visibleEdges.values()),
|
||||
};
|
||||
},
|
||||
[],
|
||||
);
|
||||
```
|
||||
|
||||
### Performance Optimization
|
||||
@@ -84,21 +84,26 @@ const buildVisibleNodes = useCallback((
|
||||
Handle large datasets with incremental rendering and memoization.
|
||||
|
||||
#### Incremental Rendering
|
||||
|
||||
```typescript
|
||||
const useIncrementalGraph = (allNodes: Node[], allEdges: Edge[], expandedList: string[]) => {
|
||||
const useIncrementalGraph = (
|
||||
allNodes: Node[],
|
||||
allEdges: Edge[],
|
||||
expandedList: string[],
|
||||
) => {
|
||||
const prevExpandedListRef = useRef<Set<string>>(new Set());
|
||||
const prevOtherDepsRef = useRef<any[]>([]);
|
||||
|
||||
|
||||
const { visibleNodes, visibleEdges } = useMemo(() => {
|
||||
const currentExpandedSet = new Set(expandedList);
|
||||
const prevExpandedSet = prevExpandedListRef.current;
|
||||
|
||||
|
||||
// Check if expanded list changed
|
||||
const expandedChanged = !areSetsEqual(currentExpandedSet, prevExpandedSet);
|
||||
|
||||
|
||||
// Check if other dependencies changed
|
||||
const otherDepsChanged = !arraysEqual(otherDeps, prevOtherDepsRef.current);
|
||||
|
||||
|
||||
if (expandedChanged && !otherDepsChanged) {
|
||||
// Only expanded list changed - incremental update
|
||||
return buildIncrementalUpdate(
|
||||
@@ -107,19 +112,20 @@ const useIncrementalGraph = (allNodes: Node[], allEdges: Edge[], expandedList: s
|
||||
allNodes,
|
||||
allEdges,
|
||||
currentExpandedSet,
|
||||
prevExpandedSet
|
||||
prevExpandedSet,
|
||||
);
|
||||
} else {
|
||||
// Full rebuild needed
|
||||
return buildFullGraph(allNodes, allEdges, currentExpandedSet);
|
||||
}
|
||||
}, [allNodes, allEdges, expandedList, ...otherDeps]);
|
||||
|
||||
|
||||
return { visibleNodes, visibleEdges };
|
||||
};
|
||||
```
|
||||
|
||||
#### Memoization Patterns
|
||||
|
||||
```typescript
|
||||
// Memoize node components to prevent unnecessary re-renders
|
||||
const ProcessNode = memo(({ data, selected }: NodeProps) => {
|
||||
@@ -156,26 +162,27 @@ const styledEdges = useMemo(() => {
|
||||
Complex node/edge state patterns with undo/redo and persistence.
|
||||
|
||||
#### Reducer Pattern
|
||||
|
||||
```typescript
|
||||
type GraphAction =
|
||||
| { type: 'SELECT_NODE'; payload: string }
|
||||
| { type: 'SELECT_EDGE'; payload: string }
|
||||
| { type: 'TOGGLE_EXPAND'; payload: string }
|
||||
| { type: 'UPDATE_NODES'; payload: Node[] }
|
||||
| { type: 'UPDATE_EDGES'; payload: Edge[] }
|
||||
| { type: 'UNDO' }
|
||||
| { type: 'REDO' };
|
||||
type GraphAction =
|
||||
| { type: "SELECT_NODE"; payload: string }
|
||||
| { type: "SELECT_EDGE"; payload: string }
|
||||
| { type: "TOGGLE_EXPAND"; payload: string }
|
||||
| { type: "UPDATE_NODES"; payload: Node[] }
|
||||
| { type: "UPDATE_EDGES"; payload: Edge[] }
|
||||
| { type: "UNDO" }
|
||||
| { type: "REDO" };
|
||||
|
||||
const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
|
||||
switch (action.type) {
|
||||
case 'SELECT_NODE':
|
||||
case "SELECT_NODE":
|
||||
return {
|
||||
...state,
|
||||
selectedNodeId: action.payload,
|
||||
selectedEdgeId: null,
|
||||
};
|
||||
|
||||
case 'TOGGLE_EXPAND':
|
||||
|
||||
case "TOGGLE_EXPAND":
|
||||
const newExpanded = new Set(state.expandedNodeIds);
|
||||
if (newExpanded.has(action.payload)) {
|
||||
newExpanded.delete(action.payload);
|
||||
@@ -187,7 +194,7 @@ const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
|
||||
expandedNodeIds: newExpanded,
|
||||
isDirty: true,
|
||||
};
|
||||
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
@@ -195,18 +202,22 @@ const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
|
||||
```
|
||||
|
||||
#### History Management
|
||||
|
||||
```typescript
|
||||
const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) => {
|
||||
const useHistoryManager = (
|
||||
state: GraphState,
|
||||
dispatch: Dispatch<GraphAction>,
|
||||
) => {
|
||||
const canUndo = state.historyIndex > 0;
|
||||
const canRedo = state.historyIndex < state.history.length - 1;
|
||||
|
||||
|
||||
const undo = useCallback(() => {
|
||||
if (canUndo) {
|
||||
const newIndex = state.historyIndex - 1;
|
||||
const historyEntry = state.history[newIndex];
|
||||
|
||||
|
||||
dispatch({
|
||||
type: 'RESTORE_FROM_HISTORY',
|
||||
type: "RESTORE_FROM_HISTORY",
|
||||
payload: {
|
||||
...historyEntry,
|
||||
historyIndex: newIndex,
|
||||
@@ -214,11 +225,11 @@ const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) =
|
||||
});
|
||||
}
|
||||
}, [canUndo, state.historyIndex, state.history]);
|
||||
|
||||
|
||||
const saveToHistory = useCallback(() => {
|
||||
dispatch({ type: 'SAVE_TO_HISTORY' });
|
||||
dispatch({ type: "SAVE_TO_HISTORY" });
|
||||
}, [dispatch]);
|
||||
|
||||
|
||||
return { canUndo, canRedo, undo, redo, saveToHistory };
|
||||
};
|
||||
```
|
||||
@@ -230,12 +241,12 @@ const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) =
|
||||
Integrate Dagre for automatic graph layout:
|
||||
|
||||
```typescript
|
||||
import dagre from 'dagre';
|
||||
import dagre from "dagre";
|
||||
|
||||
const layoutOptions = {
|
||||
rankdir: 'TB', // Top to Bottom
|
||||
nodesep: 100, // Node separation
|
||||
ranksep: 150, // Rank separation
|
||||
rankdir: "TB", // Top to Bottom
|
||||
nodesep: 100, // Node separation
|
||||
ranksep: 150, // Rank separation
|
||||
marginx: 50,
|
||||
marginy: 50,
|
||||
edgesep: 10,
|
||||
@@ -245,22 +256,22 @@ const applyLayout = (nodes: Node[], edges: Edge[]) => {
|
||||
const g = new dagre.graphlib.Graph();
|
||||
g.setGraph(layoutOptions);
|
||||
g.setDefaultEdgeLabel(() => ({}));
|
||||
|
||||
|
||||
// Add nodes to graph
|
||||
nodes.forEach(node => {
|
||||
nodes.forEach((node) => {
|
||||
g.setNode(node.id, { width: 200, height: 100 });
|
||||
});
|
||||
|
||||
|
||||
// Add edges to graph
|
||||
edges.forEach(edge => {
|
||||
edges.forEach((edge) => {
|
||||
g.setEdge(edge.source, edge.target);
|
||||
});
|
||||
|
||||
|
||||
// Calculate layout
|
||||
dagre.layout(g);
|
||||
|
||||
|
||||
// Apply positions
|
||||
return nodes.map(node => ({
|
||||
return nodes.map((node) => ({
|
||||
...node,
|
||||
position: {
|
||||
x: g.node(node.id).x - 100,
|
||||
@@ -270,10 +281,7 @@ const applyLayout = (nodes: Node[], edges: Edge[]) => {
|
||||
};
|
||||
|
||||
// Debounce layout calculations
|
||||
const debouncedLayout = useMemo(
|
||||
() => debounce(applyLayout, 150),
|
||||
[]
|
||||
);
|
||||
const debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);
|
||||
```
|
||||
|
||||
### Focus Mode
|
||||
@@ -281,34 +289,38 @@ const debouncedLayout = useMemo(
|
||||
Isolate selected nodes and their direct connections:
|
||||
|
||||
```typescript
|
||||
const useFocusMode = (selectedNodeId: string, allNodes: Node[], allEdges: Edge[]) => {
|
||||
const useFocusMode = (
|
||||
selectedNodeId: string,
|
||||
allNodes: Node[],
|
||||
allEdges: Edge[],
|
||||
) => {
|
||||
return useMemo(() => {
|
||||
if (!selectedNodeId) return { nodes: allNodes, edges: allEdges };
|
||||
|
||||
|
||||
// Get direct connections
|
||||
const connectedNodeIds = new Set([selectedNodeId]);
|
||||
const focusedEdges: Edge[] = [];
|
||||
|
||||
allEdges.forEach(edge => {
|
||||
|
||||
allEdges.forEach((edge) => {
|
||||
if (edge.source === selectedNodeId || edge.target === selectedNodeId) {
|
||||
focusedEdges.push(edge);
|
||||
connectedNodeIds.add(edge.source);
|
||||
connectedNodeIds.add(edge.target);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Get connected nodes
|
||||
const focusedNodes = allNodes.filter(n => connectedNodeIds.has(n.id));
|
||||
|
||||
const focusedNodes = allNodes.filter((n) => connectedNodeIds.has(n.id));
|
||||
|
||||
return { nodes: focusedNodes, edges: focusedEdges };
|
||||
}, [selectedNodeId, allNodes, allEdges]);
|
||||
};
|
||||
|
||||
// Smooth transitions for focus mode
|
||||
const focusModeStyles = {
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
transition: "all 0.3s ease-in-out",
|
||||
opacity: isInFocus ? 1 : 0.3,
|
||||
filter: isInFocus ? 'none' : 'blur(2px)',
|
||||
filter: isInFocus ? "none" : "blur(2px)",
|
||||
};
|
||||
```
|
||||
|
||||
@@ -317,27 +329,25 @@ const focusModeStyles = {
|
||||
Search and navigate to specific nodes:
|
||||
|
||||
```typescript
|
||||
const searchNodes = useCallback((
|
||||
nodes: Node[],
|
||||
query: string
|
||||
) => {
|
||||
const searchNodes = useCallback((nodes: Node[], query: string) => {
|
||||
if (!query.trim()) return [];
|
||||
|
||||
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return nodes.filter(node =>
|
||||
node.data.label.toLowerCase().includes(lowerQuery) ||
|
||||
node.data.description?.toLowerCase().includes(lowerQuery)
|
||||
return nodes.filter(
|
||||
(node) =>
|
||||
node.data.label.toLowerCase().includes(lowerQuery) ||
|
||||
node.data.description?.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const navigateToSearchResult = (nodeId: string) => {
|
||||
// Expand parent nodes
|
||||
const nodePath = calculateBreadcrumbPath(nodeId, allNodes);
|
||||
const parentIds = nodePath.slice(0, -1).map(n => n.id);
|
||||
|
||||
setExpandedIds(prev => new Set([...prev, ...parentIds]));
|
||||
const parentIds = nodePath.slice(0, -1).map((n) => n.id);
|
||||
|
||||
setExpandedIds((prev) => new Set([...prev, ...parentIds]));
|
||||
setSelectedNodeId(nodeId);
|
||||
|
||||
|
||||
// Fit view to node
|
||||
fitView({ nodes: [{ id: nodeId }], duration: 800 });
|
||||
};
|
||||
@@ -359,16 +369,16 @@ class GraphAnalyzer {
|
||||
edgeCount: this.countEdges(content),
|
||||
renderTime: this.estimateRenderTime(content),
|
||||
memoryUsage: this.estimateMemoryUsage(content),
|
||||
complexity: this.calculateComplexity(content)
|
||||
complexity: this.calculateComplexity(content),
|
||||
},
|
||||
issues: [],
|
||||
optimizations: [],
|
||||
patterns: this.detectPatterns(content)
|
||||
patterns: this.detectPatterns(content),
|
||||
};
|
||||
|
||||
// Detect performance issues
|
||||
this.detectPerformanceIssues(analysis);
|
||||
|
||||
|
||||
// Suggest optimizations
|
||||
this.suggestOptimizations(analysis);
|
||||
|
||||
@@ -378,14 +388,14 @@ class GraphAnalyzer {
|
||||
countNodes(content) {
|
||||
const nodePatterns = [
|
||||
/nodes:\s*\[.*?\]/gs,
|
||||
/const\s+\w+\s*=\s*\[.*?id:.*?position:/gs
|
||||
/const\s+\w+\s*=\s*\[.*?id:.*?position:/gs,
|
||||
];
|
||||
|
||||
let totalCount = 0;
|
||||
nodePatterns.forEach(pattern => {
|
||||
nodePatterns.forEach((pattern) => {
|
||||
const matches = content.match(pattern);
|
||||
if (matches) {
|
||||
matches.forEach(match => {
|
||||
matches.forEach((match) => {
|
||||
const nodeMatches = match.match(/id:\s*['"`][^'"`]+['"`]/g);
|
||||
if (nodeMatches) {
|
||||
totalCount += nodeMatches.length;
|
||||
@@ -400,12 +410,12 @@ class GraphAnalyzer {
|
||||
estimateRenderTime(content) {
|
||||
const nodeCount = this.countNodes(content);
|
||||
const edgeCount = this.countEdges(content);
|
||||
|
||||
|
||||
// Base render time estimation (ms)
|
||||
const baseTime = 5;
|
||||
const nodeTime = nodeCount * 0.1;
|
||||
const edgeTime = edgeCount * 0.05;
|
||||
|
||||
|
||||
return baseTime + nodeTime + edgeTime;
|
||||
}
|
||||
|
||||
@@ -414,19 +424,19 @@ class GraphAnalyzer {
|
||||
|
||||
if (metrics.nodeCount > 500) {
|
||||
analysis.issues.push({
|
||||
type: 'HIGH_NODE_COUNT',
|
||||
severity: 'high',
|
||||
type: "HIGH_NODE_COUNT",
|
||||
severity: "high",
|
||||
message: `Too many nodes (${metrics.nodeCount}). Consider virtualization.`,
|
||||
suggestion: 'Implement virtualization or reduce visible nodes'
|
||||
suggestion: "Implement virtualization or reduce visible nodes",
|
||||
});
|
||||
}
|
||||
|
||||
if (metrics.renderTime > 16) {
|
||||
analysis.issues.push({
|
||||
type: 'SLOW_RENDER',
|
||||
severity: 'high',
|
||||
type: "SLOW_RENDER",
|
||||
severity: "high",
|
||||
message: `Render time (${metrics.renderTime.toFixed(2)}ms) exceeds 60fps.`,
|
||||
suggestion: 'Optimize with memoization and incremental rendering'
|
||||
suggestion: "Optimize with memoization and incremental rendering",
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -447,8 +457,9 @@ class GraphAnalyzer {
|
||||
|
||||
```typescript
|
||||
// Use Map for O(1) lookups instead of array.find
|
||||
const nodesById = useMemo(() =>
|
||||
new Map(allNodes.map(n => [n.id, n])), [allNodes]
|
||||
const nodesById = useMemo(
|
||||
() => new Map(allNodes.map((n) => [n.id, n])),
|
||||
[allNodes],
|
||||
);
|
||||
|
||||
// Cache layout results
|
||||
@@ -552,14 +563,14 @@ export default function InteractiveGraph() {
|
||||
const debouncedLayout = useMemo(
|
||||
() => debounce((nodes: Node[], edges: Edge[]) => {
|
||||
const cacheKey = generateLayoutCacheKey(nodes, edges);
|
||||
|
||||
|
||||
if (layoutCacheRef.current.has(cacheKey)) {
|
||||
return layoutCacheRef.current.get(cacheKey)!;
|
||||
}
|
||||
|
||||
const layouted = applyDagreLayout(nodes, edges);
|
||||
layoutCacheRef.current.set(cacheKey, layouted);
|
||||
|
||||
|
||||
return layouted;
|
||||
}, 150),
|
||||
[]
|
||||
|
||||
@@ -4427,6 +4427,24 @@
|
||||
"risk": "unknown",
|
||||
"source": "vibeship-spawner-skills (Apache 2.0)"
|
||||
},
|
||||
{
|
||||
"id": "laravel-expert",
|
||||
"path": "skills/laravel-expert",
|
||||
"category": "uncategorized",
|
||||
"name": "laravel-expert",
|
||||
"description": "Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).",
|
||||
"risk": "safe",
|
||||
"source": "community"
|
||||
},
|
||||
{
|
||||
"id": "laravel-security-audit",
|
||||
"path": "skills/laravel-security-audit",
|
||||
"category": "uncategorized",
|
||||
"name": "laravel-security-audit",
|
||||
"description": "Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel security best practices.",
|
||||
"risk": "safe",
|
||||
"source": "community"
|
||||
},
|
||||
{
|
||||
"id": "last30days",
|
||||
"path": "skills/last30days",
|
||||
@@ -5768,6 +5786,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-architect",
|
||||
"path": "skills/react-flow-architect",
|
||||
"category": "uncategorized",
|
||||
"name": "react-flow-architect",
|
||||
"description": "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-node-ts",
|
||||
"path": "skills/react-flow-node-ts",
|
||||
|
||||
Reference in New Issue
Block a user