chore: sync generated files and fix frontmatter

CATALOG.md

@@ -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 |

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**
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](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.
 

data/bundles.json

@@ -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",

data/catalog.json

@@ -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",

skills/laravel-expert/SKILL.md

@@ -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

skills/laravel-security-audit/SKILL.md

@@ -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);
+```

skills/react-flow-architect/SKILL.md

@@ -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: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
-  { id: '2', position: { x: 100, y: 100 }, data: { label: 'Node 2' } }
+  { id: "2", position: { x: 100, y: 100 }, data: { label: "Node 2" } },
 ];
 
-const edges: Edge[] = [
+const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
-  { id: 'e1-2', source: '1', target: '2' }
-];
 
 export default function Graph() {
-  return (
+  return <ReactFlow nodes={nodes} edges={edges} />;
-    <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((
+const buildVisibleNodes = useCallback(
-  allNodes: TreeNode[],
+  (allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {
-  expandedIds: Set<string>,
+    const visibleNodes = new Map<string, TreeNode>();
-  otherDeps: any[]
+    const visibleEdges = new Map<string, TreeEdge>();
-) => {
+
-  const visibleNodes = new Map<string, TreeNode>();
+    // Start with root nodes
-  const visibleEdges = new Map<string, TreeEdge>();
+    const rootNodes = allNodes.filter((n) => n.data.level === 0);
-  
+
-  // Start with root nodes
+    // Recursively add visible nodes
-  const rootNodes = allNodes.filter(n => n.data.level === 0);
+    const addVisibleChildren = (node: TreeNode) => {
-  
+      visibleNodes.set(node.id, node);
-  // Recursively add visible nodes
+
-  const addVisibleChildren = (node: TreeNode) => {
+      if (expandedIds.has(node.id)) {
-    visibleNodes.set(node.id, node);
+        const children = allNodes.filter((n) => n.parentNode === node.id);
-    
+        children.forEach((child) => addVisibleChildren(child));
-    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 {
-  rootNodes.forEach(root => addVisibleChildren(root));
+      nodes: Array.from(visibleNodes.values()),
-  
+      edges: Array.from(visibleEdges.values()),
-  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 GraphAction =
-  | { type: 'SELECT_NODE'; payload: string }
+  | { type: "SELECT_NODE"; payload: string }
-  | { type: 'SELECT_EDGE'; payload: string }
+  | { type: "SELECT_EDGE"; payload: string }
-  | { type: 'TOGGLE_EXPAND'; payload: string }
+  | { type: "TOGGLE_EXPAND"; payload: string }
-  | { type: 'UPDATE_NODES'; payload: Node[] }
+  | { type: "UPDATE_NODES"; payload: Node[] }
-  | { type: 'UPDATE_EDGES'; payload: Edge[] }
+  | { type: "UPDATE_EDGES"; payload: Edge[] }
-  | { type: 'UNDO' }
+  | { type: "UNDO" }
-  | { type: 'REDO' };
+  | { 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
+  rankdir: "TB", // Top to Bottom
-  nodesep: 100,   // Node separation
+  nodesep: 100, // Node separation
-  ranksep: 150,   // Rank 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(
+const debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);
-  () => 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((
+const searchNodes = useCallback((nodes: Node[], query: string) => {
-  nodes: Node[],
-  query: string
-) => {
   if (!query.trim()) return [];
-  
+
   const lowerQuery = query.toLowerCase();
-  return nodes.filter(node =>
+  return nodes.filter(
-    node.data.label.toLowerCase().includes(lowerQuery) ||
+    (node) =>
-    node.data.description?.toLowerCase().includes(lowerQuery)
+      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);
+  const parentIds = nodePath.slice(0, -1).map((n) => n.id);
-  
+
-  setExpandedIds(prev => new Set([...prev, ...parentIds]));
+  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',
+        type: "HIGH_NODE_COUNT",
-        severity: 'high',
+        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',
+        type: "SLOW_RENDER",
-        severity: 'high',
+        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(() => 
+const nodesById = useMemo(
-  new Map(allNodes.map(n => [n.id, n])), [allNodes]
+  () => 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),
     []

skills_index.json

@@ -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",