chore: sync generated files and fix frontmatter

This commit is contained in:
sck_0
2026-02-16 13:28:04 +01:00
parent 1e797799a9
commit 3f08ade5c6
8 changed files with 269 additions and 130 deletions

View File

@@ -2,7 +2,7 @@
Generated at: 2026-02-08T00:00:00.000Z Generated at: 2026-02-08T00:00:00.000Z
Total skills: 857 Total skills: 860
## architecture (64) ## 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 | | `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 | | `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 | | 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-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-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 | | `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-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-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 | | `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 | | `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 | | `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 | | 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-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 | | `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 | | `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 | | `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 | | `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 | | `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 |

View File

@@ -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) [![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) [![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. 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) - 🟣 **Claude Code** (Anthropic CLI)
- 🔵 **Gemini CLI** (Google DeepMind) - 🔵 **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) - [🎁 Curated Collections (Bundles)](#curated-collections)
- [🧭 Antigravity Workflows](#antigravity-workflows) - [🧭 Antigravity Workflows](#antigravity-workflows)
- [📦 Features & Categories](#features--categories) - [📦 Features & Categories](#features--categories)
- [📚 Browse 857+ Skills](#browse-857-skills) - [📚 Browse 860+ Skills](#browse-860-skills)
- [🤝 How to Contribute](#how-to-contribute) - [🤝 How to Contribute](#how-to-contribute)
- [🤝 Community](#community) - [🤝 Community](#community)
- [☕ Support the Project](#support-the-project) - [☕ 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). 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. We have moved the full skill registry to a dedicated catalog to keep this README clean.

View File

@@ -194,6 +194,7 @@
"python-pro", "python-pro",
"python-testing-patterns", "python-testing-patterns",
"react-best-practices", "react-best-practices",
"react-flow-architect",
"react-flow-node-ts", "react-flow-node-ts",
"react-modernization", "react-modernization",
"react-native-architecture", "react-native-architecture",
@@ -290,6 +291,8 @@
"k8s-manifest-generator", "k8s-manifest-generator",
"k8s-security-policies", "k8s-security-policies",
"kubernetes-architect", "kubernetes-architect",
"laravel-expert",
"laravel-security-audit",
"legal-advisor", "legal-advisor",
"linkerd-patterns", "linkerd-patterns",
"loki-mode", "loki-mode",

View File

@@ -1,6 +1,6 @@
{ {
"generatedAt": "2026-02-08T00:00:00.000Z", "generatedAt": "2026-02-08T00:00:00.000Z",
"total": 857, "total": 860,
"skills": [ "skills": [
{ {
"id": "3d-web-experience", "id": "3d-web-experience",
@@ -12407,6 +12407,56 @@
], ],
"path": "skills/langgraph/SKILL.md" "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", "id": "last30days",
"name": "last30days", "name": "last30days",
@@ -16057,6 +16107,31 @@
], ],
"path": "skills/react-best-practices/SKILL.md" "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", "id": "react-flow-node-ts",
"name": "react-flow-node-ts", "name": "react-flow-node-ts",

View File

@@ -1,6 +1,14 @@
---
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 # Laravel Expert
## Skill Metadata ## Skill Metadata
Name: laravel-expert Name: laravel-expert
Focus: General Laravel Development 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 provide production-grade, maintainable, and idiomatic Laravel solutions.
You prioritize: You prioritize:
- Clean architecture - Clean architecture
- Readability - Readability
- Testability - Testability

View File

@@ -1,6 +1,14 @@
---
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 # Laravel Security Audit
## Skill Metadata ## Skill Metadata
Name: laravel-security-audit Name: laravel-security-audit
Focus: Security Review & Vulnerability Detection 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 think like an attacker but respond like a security engineer.
You prioritize: You prioritize:
- Data protection - Data protection
- Input validation integrity - Input validation integrity
- Authorization correctness - Authorization correctness
@@ -207,6 +216,8 @@ Fix:
Use policy check or scoped query. Use policy check or scoped query.
Refactored Example: Refactored Example:
```php ```php
$post = Post::where('user_id', auth()->id()) $post = Post::where('user_id', auth()->id())
->findOrFail($id); ->findOrFail($id);
```

View File

@@ -1,6 +1,6 @@
--- ---
name: 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. 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 # ReactFlow Architect
@@ -12,21 +12,17 @@ Build production-ready ReactFlow applications with hierarchical navigation, perf
Create basic interactive graph: Create basic interactive graph:
```tsx ```tsx
import ReactFlow, { Node, Edge } from 'reactflow'; import ReactFlow, { Node, Edge } from "reactflow";
const nodes: Node[] = [ 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() { 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. Build expandable/collapsible tree structures with parent-child relationships.
#### Node Schema #### Node Schema
```typescript ```typescript
interface TreeNode extends Node { interface TreeNode extends Node {
data: { data: {
@@ -45,38 +42,41 @@ interface TreeNode extends Node {
hasChildren: boolean; hasChildren: boolean;
isExpanded: boolean; isExpanded: boolean;
childCount: number; childCount: number;
category: 'root' | 'category' | 'process' | 'detail'; category: "root" | "category" | "process" | "detail";
}; };
} }
``` ```
#### Incremental Node Building #### Incremental Node Building
```typescript ```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>();
const visibleEdges = new Map<string, TreeEdge>();
// Start with root nodes // Start with root nodes
const rootNodes = allNodes.filter(n => n.data.level === 0); const rootNodes = allNodes.filter((n) => n.data.level === 0);
// Recursively add visible nodes // Recursively add visible nodes
const addVisibleChildren = (node: TreeNode) => { const addVisibleChildren = (node: TreeNode) => {
visibleNodes.set(node.id, node); visibleNodes.set(node.id, node);
if (expandedIds.has(node.id)) { if (expandedIds.has(node.id)) {
const children = allNodes.filter(n => n.parentNode === node.id); const children = allNodes.filter((n) => n.parentNode === node.id);
children.forEach(child => addVisibleChildren(child)); children.forEach((child) => addVisibleChildren(child));
} }
}; };
rootNodes.forEach(root => addVisibleChildren(root)); rootNodes.forEach((root) => addVisibleChildren(root));
return { nodes: Array.from(visibleNodes.values()), edges: Array.from(visibleEdges.values()) }; return {
}, []); nodes: Array.from(visibleNodes.values()),
edges: Array.from(visibleEdges.values()),
};
},
[],
);
``` ```
### Performance Optimization ### Performance Optimization
@@ -84,8 +84,13 @@ const buildVisibleNodes = useCallback((
Handle large datasets with incremental rendering and memoization. Handle large datasets with incremental rendering and memoization.
#### Incremental Rendering #### Incremental Rendering
```typescript ```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 prevExpandedListRef = useRef<Set<string>>(new Set());
const prevOtherDepsRef = useRef<any[]>([]); const prevOtherDepsRef = useRef<any[]>([]);
@@ -107,7 +112,7 @@ const useIncrementalGraph = (allNodes: Node[], allEdges: Edge[], expandedList: s
allNodes, allNodes,
allEdges, allEdges,
currentExpandedSet, currentExpandedSet,
prevExpandedSet prevExpandedSet,
); );
} else { } else {
// Full rebuild needed // Full rebuild needed
@@ -120,6 +125,7 @@ const useIncrementalGraph = (allNodes: Node[], allEdges: Edge[], expandedList: s
``` ```
#### Memoization Patterns #### Memoization Patterns
```typescript ```typescript
// Memoize node components to prevent unnecessary re-renders // Memoize node components to prevent unnecessary re-renders
const ProcessNode = memo(({ data, selected }: NodeProps) => { const ProcessNode = memo(({ data, selected }: NodeProps) => {
@@ -156,26 +162,27 @@ const styledEdges = useMemo(() => {
Complex node/edge state patterns with undo/redo and persistence. Complex node/edge state patterns with undo/redo and persistence.
#### Reducer Pattern #### Reducer Pattern
```typescript ```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 => { const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
switch (action.type) { switch (action.type) {
case 'SELECT_NODE': case "SELECT_NODE":
return { return {
...state, ...state,
selectedNodeId: action.payload, selectedNodeId: action.payload,
selectedEdgeId: null, selectedEdgeId: null,
}; };
case 'TOGGLE_EXPAND': case "TOGGLE_EXPAND":
const newExpanded = new Set(state.expandedNodeIds); const newExpanded = new Set(state.expandedNodeIds);
if (newExpanded.has(action.payload)) { if (newExpanded.has(action.payload)) {
newExpanded.delete(action.payload); newExpanded.delete(action.payload);
@@ -195,8 +202,12 @@ const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
``` ```
#### History Management #### History Management
```typescript ```typescript
const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) => { const useHistoryManager = (
state: GraphState,
dispatch: Dispatch<GraphAction>,
) => {
const canUndo = state.historyIndex > 0; const canUndo = state.historyIndex > 0;
const canRedo = state.historyIndex < state.history.length - 1; const canRedo = state.historyIndex < state.history.length - 1;
@@ -206,7 +217,7 @@ const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) =
const historyEntry = state.history[newIndex]; const historyEntry = state.history[newIndex];
dispatch({ dispatch({
type: 'RESTORE_FROM_HISTORY', type: "RESTORE_FROM_HISTORY",
payload: { payload: {
...historyEntry, ...historyEntry,
historyIndex: newIndex, historyIndex: newIndex,
@@ -216,7 +227,7 @@ const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) =
}, [canUndo, state.historyIndex, state.history]); }, [canUndo, state.historyIndex, state.history]);
const saveToHistory = useCallback(() => { const saveToHistory = useCallback(() => {
dispatch({ type: 'SAVE_TO_HISTORY' }); dispatch({ type: "SAVE_TO_HISTORY" });
}, [dispatch]); }, [dispatch]);
return { canUndo, canRedo, undo, redo, saveToHistory }; return { canUndo, canRedo, undo, redo, saveToHistory };
@@ -230,12 +241,12 @@ const useHistoryManager = (state: GraphState, dispatch: Dispatch<GraphAction>) =
Integrate Dagre for automatic graph layout: Integrate Dagre for automatic graph layout:
```typescript ```typescript
import dagre from 'dagre'; import dagre from "dagre";
const layoutOptions = { 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, marginx: 50,
marginy: 50, marginy: 50,
edgesep: 10, edgesep: 10,
@@ -247,12 +258,12 @@ const applyLayout = (nodes: Node[], edges: Edge[]) => {
g.setDefaultEdgeLabel(() => ({})); g.setDefaultEdgeLabel(() => ({}));
// Add nodes to graph // Add nodes to graph
nodes.forEach(node => { nodes.forEach((node) => {
g.setNode(node.id, { width: 200, height: 100 }); g.setNode(node.id, { width: 200, height: 100 });
}); });
// Add edges to graph // Add edges to graph
edges.forEach(edge => { edges.forEach((edge) => {
g.setEdge(edge.source, edge.target); g.setEdge(edge.source, edge.target);
}); });
@@ -260,7 +271,7 @@ const applyLayout = (nodes: Node[], edges: Edge[]) => {
dagre.layout(g); dagre.layout(g);
// Apply positions // Apply positions
return nodes.map(node => ({ return nodes.map((node) => ({
...node, ...node,
position: { position: {
x: g.node(node.id).x - 100, x: g.node(node.id).x - 100,
@@ -270,10 +281,7 @@ const applyLayout = (nodes: Node[], edges: Edge[]) => {
}; };
// Debounce layout calculations // Debounce layout calculations
const debouncedLayout = useMemo( const debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);
() => debounce(applyLayout, 150),
[]
);
``` ```
### Focus Mode ### Focus Mode
@@ -281,7 +289,11 @@ const debouncedLayout = useMemo(
Isolate selected nodes and their direct connections: Isolate selected nodes and their direct connections:
```typescript ```typescript
const useFocusMode = (selectedNodeId: string, allNodes: Node[], allEdges: Edge[]) => { const useFocusMode = (
selectedNodeId: string,
allNodes: Node[],
allEdges: Edge[],
) => {
return useMemo(() => { return useMemo(() => {
if (!selectedNodeId) return { nodes: allNodes, edges: allEdges }; if (!selectedNodeId) return { nodes: allNodes, edges: allEdges };
@@ -289,7 +301,7 @@ const useFocusMode = (selectedNodeId: string, allNodes: Node[], allEdges: Edge[]
const connectedNodeIds = new Set([selectedNodeId]); const connectedNodeIds = new Set([selectedNodeId]);
const focusedEdges: Edge[] = []; const focusedEdges: Edge[] = [];
allEdges.forEach(edge => { allEdges.forEach((edge) => {
if (edge.source === selectedNodeId || edge.target === selectedNodeId) { if (edge.source === selectedNodeId || edge.target === selectedNodeId) {
focusedEdges.push(edge); focusedEdges.push(edge);
connectedNodeIds.add(edge.source); connectedNodeIds.add(edge.source);
@@ -298,7 +310,7 @@ const useFocusMode = (selectedNodeId: string, allNodes: Node[], allEdges: Edge[]
}); });
// Get connected nodes // 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 }; return { nodes: focusedNodes, edges: focusedEdges };
}, [selectedNodeId, allNodes, allEdges]); }, [selectedNodeId, allNodes, allEdges]);
@@ -306,9 +318,9 @@ const useFocusMode = (selectedNodeId: string, allNodes: Node[], allEdges: Edge[]
// Smooth transitions for focus mode // Smooth transitions for focus mode
const focusModeStyles = { const focusModeStyles = {
transition: 'all 0.3s ease-in-out', transition: "all 0.3s ease-in-out",
opacity: isInFocus ? 1 : 0.3, opacity: isInFocus ? 1 : 0.3,
filter: isInFocus ? 'none' : 'blur(2px)', filter: isInFocus ? "none" : "blur(2px)",
}; };
``` ```
@@ -317,25 +329,23 @@ const focusModeStyles = {
Search and navigate to specific nodes: Search and navigate to specific nodes:
```typescript ```typescript
const searchNodes = useCallback(( const searchNodes = useCallback((nodes: Node[], query: string) => {
nodes: Node[],
query: string
) => {
if (!query.trim()) return []; if (!query.trim()) return [];
const lowerQuery = query.toLowerCase(); 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) => { const navigateToSearchResult = (nodeId: string) => {
// Expand parent nodes // Expand parent nodes
const nodePath = calculateBreadcrumbPath(nodeId, allNodes); 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); setSelectedNodeId(nodeId);
// Fit view to node // Fit view to node
@@ -359,11 +369,11 @@ class GraphAnalyzer {
edgeCount: this.countEdges(content), edgeCount: this.countEdges(content),
renderTime: this.estimateRenderTime(content), renderTime: this.estimateRenderTime(content),
memoryUsage: this.estimateMemoryUsage(content), memoryUsage: this.estimateMemoryUsage(content),
complexity: this.calculateComplexity(content) complexity: this.calculateComplexity(content),
}, },
issues: [], issues: [],
optimizations: [], optimizations: [],
patterns: this.detectPatterns(content) patterns: this.detectPatterns(content),
}; };
// Detect performance issues // Detect performance issues
@@ -378,14 +388,14 @@ class GraphAnalyzer {
countNodes(content) { countNodes(content) {
const nodePatterns = [ const nodePatterns = [
/nodes:\s*\[.*?\]/gs, /nodes:\s*\[.*?\]/gs,
/const\s+\w+\s*=\s*\[.*?id:.*?position:/gs /const\s+\w+\s*=\s*\[.*?id:.*?position:/gs,
]; ];
let totalCount = 0; let totalCount = 0;
nodePatterns.forEach(pattern => { nodePatterns.forEach((pattern) => {
const matches = content.match(pattern); const matches = content.match(pattern);
if (matches) { if (matches) {
matches.forEach(match => { matches.forEach((match) => {
const nodeMatches = match.match(/id:\s*['"`][^'"`]+['"`]/g); const nodeMatches = match.match(/id:\s*['"`][^'"`]+['"`]/g);
if (nodeMatches) { if (nodeMatches) {
totalCount += nodeMatches.length; totalCount += nodeMatches.length;
@@ -414,19 +424,19 @@ class GraphAnalyzer {
if (metrics.nodeCount > 500) { if (metrics.nodeCount > 500) {
analysis.issues.push({ analysis.issues.push({
type: 'HIGH_NODE_COUNT', type: "HIGH_NODE_COUNT",
severity: 'high', severity: "high",
message: `Too many nodes (${metrics.nodeCount}). Consider virtualization.`, 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) { if (metrics.renderTime > 16) {
analysis.issues.push({ analysis.issues.push({
type: 'SLOW_RENDER', type: "SLOW_RENDER",
severity: 'high', severity: "high",
message: `Render time (${metrics.renderTime.toFixed(2)}ms) exceeds 60fps.`, 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 ```typescript
// Use Map for O(1) lookups instead of array.find // 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 // Cache layout results

View File

@@ -4427,6 +4427,24 @@
"risk": "unknown", "risk": "unknown",
"source": "vibeship-spawner-skills (Apache 2.0)" "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", "id": "last30days",
"path": "skills/last30days", "path": "skills/last30days",
@@ -5768,6 +5786,15 @@
"risk": "unknown", "risk": "unknown",
"source": "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", "id": "react-flow-node-ts",
"path": "skills/react-flow-node-ts", "path": "skills/react-flow-node-ts",