diff --git a/CATALOG.md b/CATALOG.md index c3c5ac59..04f3da3d 100644 --- a/CATALOG.md +++ b/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 | diff --git a/README.md b/README.md index f8bf1aa3..618ceb65 100644 --- a/README.md +++ b/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. diff --git a/data/bundles.json b/data/bundles.json index 543d9d90..572561d9 100644 --- a/data/bundles.json +++ b/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", diff --git a/data/catalog.json b/data/catalog.json index 907afad6..678ef9cd 100644 --- a/data/catalog.json +++ b/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", diff --git a/skills/laravel-expert/SKILL.md b/skills/laravel-expert/SKILL.md index 9b5ca033..1aa3ee83 100644 --- a/skills/laravel-expert/SKILL.md +++ b/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 \ No newline at end of file +- Keep solutions pragmatic and realistic diff --git a/skills/laravel-security-audit/SKILL.md b/skills/laravel-security-audit/SKILL.md index 7d5d4ebe..7c0ce018 100644 --- a/skills/laravel-security-audit/SKILL.md +++ b/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); \ No newline at end of file + ->findOrFail($id); +``` diff --git a/skills/react-flow-architect/SKILL.md b/skills/react-flow-architect/SKILL.md index 4db9537c..73fafe39 100644 --- a/skills/react-flow-architect/SKILL.md +++ b/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: '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 ( - - ); + return ; } ``` @@ -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, - otherDeps: any[] -) => { - const visibleNodes = new Map(); - const visibleEdges = new Map(); - - // 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, otherDeps: any[]) => { + const visibleNodes = new Map(); + const visibleEdges = new Map(); + + // 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>(new Set()); const prevOtherDepsRef = useRef([]); - + 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) => { +const useHistoryManager = ( + state: GraphState, + dispatch: Dispatch, +) => { 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) = }); } }, [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) = 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), [] diff --git a/skills_index.json b/skills_index.json index 1bf236c0..9f490d75 100644 --- a/skills_index.json +++ b/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",