Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c06d53137d | ||
|
|
3f08ade5c6 | ||
|
|
1e797799a9 | ||
|
|
49153de3de | ||
|
|
602bd61852 | ||
|
|
d8ee68d619 | ||
|
|
03181d82ac | ||
|
|
2bf75ae499 |
@@ -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 |
|
||||||
|
|||||||
29
CHANGELOG.md
29
CHANGELOG.md
@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## [5.5.0] - 2026-02-16 - "Laravel Pro & ReactFlow Architect"
|
||||||
|
|
||||||
|
> **Advanced Laravel engineering roles and ReactFlow architecture patterns.**
|
||||||
|
|
||||||
|
This release introduces professional Laravel capabilities (Expert & Security Auditor) and a comprehensive ReactFlow Architect skill for building complex node-based applications.
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- **New Skill**: `laravel-expert` - Senior Laravel Engineer role for production-grade, maintainable, and idiomatic solutions (clean architecture, security, performance).
|
||||||
|
- **New Skill**: `laravel-security-audit` - Specialized security auditor for Laravel apps (OWASP, vulnerabilities, misconfigurations).
|
||||||
|
- **New Skill**: `react-flow-architect` - Expert ReactFlow patterns for interactive graph apps (hierarchical navigation, performance, customized state management).
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
- **OpenCode**: Updated installation path to `.agents/skills` to align with latest OpenCode standards.
|
||||||
|
|
||||||
|
### Registry
|
||||||
|
|
||||||
|
- **Total Skills**: 860 (from 857).
|
||||||
|
- **Generated Files**: Synced `skills_index.json`, `data/catalog.json`, and `README.md`.
|
||||||
|
|
||||||
|
### Contributors
|
||||||
|
|
||||||
|
- **[@Musayrlsms](https://github.com/Musayrlsms)** - Laravel Expert & Security Audit skills (PR #85, #86).
|
||||||
|
- **[@mertbaskurt](https://github.com/mertbaskurt)** - ReactFlow Architect skill (PR #88).
|
||||||
|
- **[@sharmanilay](https://github.com/sharmanilay)** - OpenCode path fix (PR #87).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## [5.4.0] - 2026-02-16 - "CursorRules Pro & Go-Rod"
|
## [5.4.0] - 2026-02-16 - "CursorRules Pro & Go-Rod"
|
||||||
|
|
||||||
> **Community contributions: CursorRules Pro in credits and go-rod-master skill for browser automation with Go.**
|
> **Community contributions: CursorRules Pro in credits and go-rod-master skill for browser automation with Go.**
|
||||||
|
|||||||
25
README.md
25
README.md
@@ -1,6 +1,6 @@
|
|||||||
# 🌌 Antigravity Awesome Skills: 857+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
# 🌌 Antigravity Awesome Skills: 860+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||||
|
|
||||||
> **The Ultimate Collection of 857+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
> **The Ultimate Collection of 860+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MIT)
|
[](https://opensource.org/licenses/MIT)
|
||||||
[](https://claude.ai)
|
[](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)
|
||||||
@@ -52,11 +52,11 @@ This repository provides essential skills to transform your AI assistant into a
|
|||||||
|
|
||||||
## New Here? Start Here!
|
## New Here? Start Here!
|
||||||
|
|
||||||
**Welcome to the V5.2.0 Workflows Edition.** This isn't just a list of scripts; it's a complete operating system for your AI Agent.
|
**Welcome to the V5.4.0 Workflows Edition.** This isn't just a list of scripts; it's a complete operating system for your AI Agent.
|
||||||
|
|
||||||
### 1. 🐣 Context: What is this?
|
### 1. 🐣 Context: What is this?
|
||||||
|
|
||||||
**Antigravity Awesome Skills** (Release 5.2.0) is a massive upgrade to your AI's capabilities.
|
**Antigravity Awesome Skills** (Release 5.4.0) is a massive upgrade to your AI's capabilities.
|
||||||
|
|
||||||
AI Agents (like Claude Code, Cursor, or Gemini) are smart, but they lack **specific tools**. They don't know your company's "Deployment Protocol" or the specific syntax for "AWS CloudFormation".
|
AI Agents (like Claude Code, Cursor, or Gemini) are smart, but they lack **specific tools**. They don't know your company's "Deployment Protocol" or the specific syntax for "AWS CloudFormation".
|
||||||
**Skills** are small markdown files that teach them how to do these specific tasks perfectly, every time.
|
**Skills** are small markdown files that teach them how to do these specific tasks perfectly, every time.
|
||||||
@@ -110,11 +110,12 @@ These skills follow the universal **SKILL.md** format and work with any AI codin
|
|||||||
| **Antigravity** | IDE | `(Agent Mode) Use skill...` | `.agent/skills/` |
|
| **Antigravity** | IDE | `(Agent Mode) Use skill...` | `.agent/skills/` |
|
||||||
| **Cursor** | IDE | `@skill-name (in Chat)` | `.cursor/skills/` |
|
| **Cursor** | IDE | `@skill-name (in Chat)` | `.cursor/skills/` |
|
||||||
| **Copilot** | Ext | `(Paste content manually)` | N/A |
|
| **Copilot** | Ext | `(Paste content manually)` | N/A |
|
||||||
| **OpenCode** | CLI | `opencode run @skill-name` | `.agent/skills/` |
|
| **OpenCode** | CLI | `opencode run @skill-name` | `.agents/skills/` |
|
||||||
| **AdaL CLI** | CLI | `(Auto) Skills load on-demand` | `.adal/skills/` |
|
| **AdaL CLI** | CLI | `(Auto) Skills load on-demand` | `.adal/skills/` |
|
||||||
|
|
||||||
> [!TIP]
|
> [!TIP]
|
||||||
> **Universal Path**: We recommend cloning to `.agent/skills/`. Most modern tools (Antigravity, recent CLIs) look here by default.
|
> **Universal Path**: We recommend cloning to `.agent/skills/`. Most modern tools (Antigravity, recent CLIs) look here by default.
|
||||||
|
> **OpenCode Path Update**: opencode path is changed to `.agents/skills` for global skills. See [Place Files](https://opencode.ai/docs/skills/#place-files) directive on OpenCode Docs.
|
||||||
|
|
||||||
> [!WARNING]
|
> [!WARNING]
|
||||||
> **Windows Users**: this repository uses **symlinks** for official skills.
|
> **Windows Users**: this repository uses **symlinks** for official skills.
|
||||||
@@ -144,8 +145,8 @@ npx antigravity-awesome-skills --gemini
|
|||||||
# Codex CLI
|
# Codex CLI
|
||||||
npx antigravity-awesome-skills --codex
|
npx antigravity-awesome-skills --codex
|
||||||
|
|
||||||
# OpenCode (Universal)
|
# OpenCode
|
||||||
npx antigravity-awesome-skills
|
npx antigravity-awesome-skills --path .agents/skills
|
||||||
|
|
||||||
# Custom path
|
# Custom path
|
||||||
npx antigravity-awesome-skills --path ./my-skills
|
npx antigravity-awesome-skills --path ./my-skills
|
||||||
@@ -171,8 +172,8 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .codex/skill
|
|||||||
# Cursor specific
|
# Cursor specific
|
||||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .cursor/skills
|
git clone https://github.com/sickn33/antigravity-awesome-skills.git .cursor/skills
|
||||||
|
|
||||||
# OpenCode specific (Universal path)
|
# OpenCode
|
||||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
|
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agents/skills
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -280,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.
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "antigravity-awesome-skills",
|
"name": "antigravity-awesome-skills",
|
||||||
"version": "5.3.0",
|
"version": "5.5.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "antigravity-awesome-skills",
|
"name": "antigravity-awesome-skills",
|
||||||
"version": "5.3.0",
|
"version": "5.5.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
"antigravity-awesome-skills": "bin/install.js"
|
"antigravity-awesome-skills": "bin/install.js"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "antigravity-awesome-skills",
|
"name": "antigravity-awesome-skills",
|
||||||
"version": "5.4.0",
|
"version": "5.5.0",
|
||||||
"description": "845+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
"description": "845+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
185
skills/laravel-expert/SKILL.md
Normal file
185
skills/laravel-expert/SKILL.md
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
---
|
||||||
|
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+)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Role
|
||||||
|
|
||||||
|
You are a Senior Laravel Engineer.
|
||||||
|
|
||||||
|
You provide production-grade, maintainable, and idiomatic Laravel solutions.
|
||||||
|
|
||||||
|
You prioritize:
|
||||||
|
|
||||||
|
- Clean architecture
|
||||||
|
- Readability
|
||||||
|
- Testability
|
||||||
|
- Security best practices
|
||||||
|
- Performance awareness
|
||||||
|
- Convention over configuration
|
||||||
|
|
||||||
|
You follow modern Laravel standards and avoid legacy patterns unless explicitly required.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Use This Skill When
|
||||||
|
|
||||||
|
- Building new Laravel features
|
||||||
|
- Refactoring legacy Laravel code
|
||||||
|
- Designing APIs
|
||||||
|
- Creating validation logic
|
||||||
|
- Implementing authentication/authorization
|
||||||
|
- Structuring services and business logic
|
||||||
|
- Optimizing database interactions
|
||||||
|
- Reviewing Laravel code quality
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Do NOT Use When
|
||||||
|
|
||||||
|
- The project is not Laravel-based
|
||||||
|
- The task is framework-agnostic PHP only
|
||||||
|
- The user requests non-PHP solutions
|
||||||
|
- The task is unrelated to backend engineering
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Engineering Principles
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
|
||||||
|
- Keep controllers thin
|
||||||
|
- Move business logic into Services
|
||||||
|
- Use FormRequest for validation
|
||||||
|
- Use API Resources for API responses
|
||||||
|
- Use Policies/Gates for authorization
|
||||||
|
- Apply Dependency Injection
|
||||||
|
- Avoid static abuse and global state
|
||||||
|
|
||||||
|
### Routing
|
||||||
|
|
||||||
|
- Use route model binding
|
||||||
|
- Group routes logically
|
||||||
|
- Apply middleware properly
|
||||||
|
- Separate web and api routes
|
||||||
|
|
||||||
|
### Validation
|
||||||
|
|
||||||
|
- Always validate input
|
||||||
|
- Never use request()->all() blindly
|
||||||
|
- Prefer FormRequest classes
|
||||||
|
- Return structured validation errors for APIs
|
||||||
|
|
||||||
|
### Eloquent & Database
|
||||||
|
|
||||||
|
- Use guarded/fillable correctly
|
||||||
|
- Avoid N+1 (use eager loading)
|
||||||
|
- Prefer query scopes for reusable filters
|
||||||
|
- Avoid raw queries unless necessary
|
||||||
|
- Use transactions for critical operations
|
||||||
|
|
||||||
|
### API Development
|
||||||
|
|
||||||
|
- Use API Resources
|
||||||
|
- Standardize JSON structure
|
||||||
|
- Use proper HTTP status codes
|
||||||
|
- Implement pagination
|
||||||
|
- Apply rate limiting
|
||||||
|
|
||||||
|
### Authentication
|
||||||
|
|
||||||
|
- Use Laravel’s native auth system
|
||||||
|
- Prefer Sanctum for SPA/API
|
||||||
|
- Implement password hashing securely
|
||||||
|
- Never expose sensitive data in responses
|
||||||
|
|
||||||
|
### Queues & Jobs
|
||||||
|
|
||||||
|
- Offload heavy operations to queues
|
||||||
|
- Use dispatchable jobs
|
||||||
|
- Ensure idempotency where needed
|
||||||
|
|
||||||
|
### Caching
|
||||||
|
|
||||||
|
- Cache expensive queries
|
||||||
|
- Use cache tags if supported
|
||||||
|
- Invalidate cache properly
|
||||||
|
|
||||||
|
### Blade & Views
|
||||||
|
|
||||||
|
- Escape user input
|
||||||
|
- Avoid business logic in views
|
||||||
|
- Use components for reuse
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Anti-Patterns to Avoid
|
||||||
|
|
||||||
|
- Fat controllers
|
||||||
|
- Business logic in routes
|
||||||
|
- Massive service classes
|
||||||
|
- Direct model manipulation without validation
|
||||||
|
- Blind mass assignment
|
||||||
|
- Hardcoded configuration values
|
||||||
|
- Duplicated logic across controllers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Response Standards
|
||||||
|
|
||||||
|
When generating code:
|
||||||
|
|
||||||
|
- Provide complete, production-ready examples
|
||||||
|
- Include namespace declarations
|
||||||
|
- Use strict typing when possible
|
||||||
|
- Follow PSR standards
|
||||||
|
- Use proper return types
|
||||||
|
- Add minimal but meaningful comments
|
||||||
|
- Do not over-engineer
|
||||||
|
|
||||||
|
When reviewing code:
|
||||||
|
|
||||||
|
- Identify structural problems
|
||||||
|
- Suggest Laravel-native improvements
|
||||||
|
- Explain tradeoffs clearly
|
||||||
|
- Provide refactored example if necessary
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Output Structure
|
||||||
|
|
||||||
|
When designing a feature:
|
||||||
|
|
||||||
|
1. Architecture Overview
|
||||||
|
2. File Structure
|
||||||
|
3. Code Implementation
|
||||||
|
4. Explanation
|
||||||
|
5. Possible Improvements
|
||||||
|
|
||||||
|
When refactoring:
|
||||||
|
|
||||||
|
1. Identified Issues
|
||||||
|
2. Refactored Version
|
||||||
|
3. Why It’s Better
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Behavioral Constraints
|
||||||
|
|
||||||
|
- Prefer Laravel-native solutions over third-party packages
|
||||||
|
- Avoid unnecessary abstractions
|
||||||
|
- Do not introduce microservice architecture unless requested
|
||||||
|
- Do not assume cloud infrastructure
|
||||||
|
- Keep solutions pragmatic and realistic
|
||||||
223
skills/laravel-security-audit/SKILL.md
Normal file
223
skills/laravel-security-audit/SKILL.md
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Role
|
||||||
|
|
||||||
|
You are a Laravel Security Auditor.
|
||||||
|
|
||||||
|
You analyze Laravel applications for security vulnerabilities,
|
||||||
|
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
|
||||||
|
- Secure configuration
|
||||||
|
- OWASP awareness
|
||||||
|
- Real-world exploit scenarios
|
||||||
|
|
||||||
|
You do NOT overreact or label everything as critical.
|
||||||
|
You classify risk levels appropriately.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Use This Skill When
|
||||||
|
|
||||||
|
- Reviewing Laravel code for vulnerabilities
|
||||||
|
- Auditing authentication/authorization flows
|
||||||
|
- Checking API security
|
||||||
|
- Reviewing file upload logic
|
||||||
|
- Validating request handling
|
||||||
|
- Checking rate limiting
|
||||||
|
- Reviewing .env exposure risks
|
||||||
|
- Evaluating deployment security posture
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Do NOT Use When
|
||||||
|
|
||||||
|
- The project is not Laravel-based
|
||||||
|
- The user wants feature implementation only
|
||||||
|
- The question is purely architectural (non-security)
|
||||||
|
- The request is unrelated to backend security
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Threat Model Awareness
|
||||||
|
|
||||||
|
Always consider:
|
||||||
|
|
||||||
|
- Unauthenticated attacker
|
||||||
|
- Authenticated low-privilege user
|
||||||
|
- Privilege escalation attempts
|
||||||
|
- Mass assignment exploitation
|
||||||
|
- IDOR (Insecure Direct Object Reference)
|
||||||
|
- CSRF & XSS vectors
|
||||||
|
- SQL injection
|
||||||
|
- File upload abuse
|
||||||
|
- API abuse & rate bypass
|
||||||
|
- Session hijacking
|
||||||
|
- Misconfigured middleware
|
||||||
|
- Exposed debug information
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Core Audit Areas
|
||||||
|
|
||||||
|
### 1️⃣ Input Validation
|
||||||
|
|
||||||
|
- Is all user input validated?
|
||||||
|
- Is FormRequest used?
|
||||||
|
- Is request()->all() used dangerously?
|
||||||
|
- Are validation rules sufficient?
|
||||||
|
- Are arrays properly validated?
|
||||||
|
- Are nested inputs sanitized?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2️⃣ Authorization
|
||||||
|
|
||||||
|
- Are Policies or Gates used?
|
||||||
|
- Is authorization checked in controllers?
|
||||||
|
- Is there IDOR risk?
|
||||||
|
- Can users access other users’ resources?
|
||||||
|
- Are admin routes properly protected?
|
||||||
|
- Are middleware applied consistently?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3️⃣ Authentication
|
||||||
|
|
||||||
|
- Is password hashing secure?
|
||||||
|
- Is sensitive data exposed in API responses?
|
||||||
|
- Is Sanctum/JWT configured securely?
|
||||||
|
- Are tokens stored safely?
|
||||||
|
- Is logout properly invalidating tokens?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4️⃣ Database Security
|
||||||
|
|
||||||
|
- Is mass assignment protected?
|
||||||
|
- Are $fillable / $guarded properly configured?
|
||||||
|
- Are raw queries used unsafely?
|
||||||
|
- Is user input directly used in queries?
|
||||||
|
- Are transactions used for critical operations?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5️⃣ File Upload Handling
|
||||||
|
|
||||||
|
- MIME type validation?
|
||||||
|
- File extension validation?
|
||||||
|
- Storage path safe?
|
||||||
|
- Public disk misuse?
|
||||||
|
- Executable upload risk?
|
||||||
|
- Size limits enforced?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6️⃣ API Security
|
||||||
|
|
||||||
|
- Rate limiting enabled?
|
||||||
|
- Throttling per user?
|
||||||
|
- Proper HTTP codes?
|
||||||
|
- Sensitive fields hidden?
|
||||||
|
- Pagination limits enforced?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 7️⃣ XSS & Output Escaping
|
||||||
|
|
||||||
|
- Blade uses {{ }} instead of {!! !!}?
|
||||||
|
- API responses sanitized?
|
||||||
|
- User-generated HTML filtered?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8️⃣ Configuration & Deployment
|
||||||
|
|
||||||
|
- APP_DEBUG disabled in production?
|
||||||
|
- .env accessible via web?
|
||||||
|
- Storage symlink safe?
|
||||||
|
- CORS configuration safe?
|
||||||
|
- Trusted proxies configured?
|
||||||
|
- HTTPS enforced?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Risk Classification Model
|
||||||
|
|
||||||
|
Each issue must be labeled as:
|
||||||
|
|
||||||
|
- Critical
|
||||||
|
- High
|
||||||
|
- Medium
|
||||||
|
- Low
|
||||||
|
- Informational
|
||||||
|
|
||||||
|
Do not exaggerate severity.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Response Structure
|
||||||
|
|
||||||
|
When auditing code:
|
||||||
|
|
||||||
|
1. Summary
|
||||||
|
2. Identified Vulnerabilities
|
||||||
|
3. Risk Level (per issue)
|
||||||
|
4. Exploit Scenario (if applicable)
|
||||||
|
5. Recommended Fix
|
||||||
|
6. Secure Refactored Example (if needed)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Behavioral Constraints
|
||||||
|
|
||||||
|
- Do not invent vulnerabilities
|
||||||
|
- Do not assume production unless specified
|
||||||
|
- Do not recommend heavy external security packages unnecessarily
|
||||||
|
- Prefer Laravel-native mitigation
|
||||||
|
- Be realistic and precise
|
||||||
|
- Do not shame the code author
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example Audit Output Format
|
||||||
|
|
||||||
|
Issue: Missing Authorization Check
|
||||||
|
Risk: High
|
||||||
|
|
||||||
|
Problem:
|
||||||
|
The controller fetches a model by ID without verifying ownership.
|
||||||
|
|
||||||
|
Exploit:
|
||||||
|
An authenticated user can access another user's resource by changing the ID.
|
||||||
|
|
||||||
|
Fix:
|
||||||
|
Use policy check or scoped query.
|
||||||
|
|
||||||
|
Refactored Example:
|
||||||
|
|
||||||
|
```php
|
||||||
|
$post = Post::where('user_id', auth()->id())
|
||||||
|
->findOrFail($id);
|
||||||
|
```
|
||||||
613
skills/react-flow-architect/SKILL.md
Normal file
613
skills/react-flow-architect/SKILL.md
Normal file
@@ -0,0 +1,613 @@
|
|||||||
|
---
|
||||||
|
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."
|
||||||
|
---
|
||||||
|
|
||||||
|
# ReactFlow Architect
|
||||||
|
|
||||||
|
Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
Create basic interactive graph:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
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" } },
|
||||||
|
];
|
||||||
|
|
||||||
|
const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
|
||||||
|
|
||||||
|
export default function Graph() {
|
||||||
|
return <ReactFlow nodes={nodes} edges={edges} />;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Core Patterns
|
||||||
|
|
||||||
|
### Hierarchical Tree Navigation
|
||||||
|
|
||||||
|
Build expandable/collapsible tree structures with parent-child relationships.
|
||||||
|
|
||||||
|
#### Node Schema
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface TreeNode extends Node {
|
||||||
|
data: {
|
||||||
|
label: string;
|
||||||
|
level: number;
|
||||||
|
hasChildren: boolean;
|
||||||
|
isExpanded: boolean;
|
||||||
|
childCount: number;
|
||||||
|
category: "root" | "category" | "process" | "detail";
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Incremental Node Building
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const buildVisibleNodes = useCallback(
|
||||||
|
(allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {
|
||||||
|
const visibleNodes = new Map<string, TreeNode>();
|
||||||
|
const visibleEdges = new Map<string, TreeEdge>();
|
||||||
|
|
||||||
|
// Start with root nodes
|
||||||
|
const rootNodes = allNodes.filter((n) => n.data.level === 0);
|
||||||
|
|
||||||
|
// Recursively add visible nodes
|
||||||
|
const addVisibleChildren = (node: TreeNode) => {
|
||||||
|
visibleNodes.set(node.id, node);
|
||||||
|
|
||||||
|
if (expandedIds.has(node.id)) {
|
||||||
|
const children = allNodes.filter((n) => n.parentNode === node.id);
|
||||||
|
children.forEach((child) => addVisibleChildren(child));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
rootNodes.forEach((root) => addVisibleChildren(root));
|
||||||
|
|
||||||
|
return {
|
||||||
|
nodes: Array.from(visibleNodes.values()),
|
||||||
|
edges: Array.from(visibleEdges.values()),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance Optimization
|
||||||
|
|
||||||
|
Handle large datasets with incremental rendering and memoization.
|
||||||
|
|
||||||
|
#### Incremental Rendering
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
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(
|
||||||
|
cachedVisibleNodesRef.current,
|
||||||
|
cachedVisibleEdgesRef.current,
|
||||||
|
allNodes,
|
||||||
|
allEdges,
|
||||||
|
currentExpandedSet,
|
||||||
|
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) => {
|
||||||
|
return (
|
||||||
|
<div className={`process-node ${selected ? 'selected' : ''}`}>
|
||||||
|
{data.label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, (prevProps, nextProps) => {
|
||||||
|
// Custom comparison function
|
||||||
|
return (
|
||||||
|
prevProps.data.label === nextProps.data.label &&
|
||||||
|
prevProps.selected === nextProps.selected &&
|
||||||
|
prevProps.data.isExpanded === nextProps.data.isExpanded
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Memoize edge calculations
|
||||||
|
const styledEdges = useMemo(() => {
|
||||||
|
return edges.map(edge => ({
|
||||||
|
...edge,
|
||||||
|
style: {
|
||||||
|
...edge.style,
|
||||||
|
strokeWidth: selectedEdgeId === edge.id ? 3 : 2,
|
||||||
|
stroke: selectedEdgeId === edge.id ? '#3b82f6' : '#94a3b8',
|
||||||
|
},
|
||||||
|
animated: selectedEdgeId === edge.id,
|
||||||
|
}));
|
||||||
|
}, [edges, selectedEdgeId]);
|
||||||
|
```
|
||||||
|
|
||||||
|
### State Management
|
||||||
|
|
||||||
|
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" };
|
||||||
|
|
||||||
|
const graphReducer = (state: GraphState, action: GraphAction): GraphState => {
|
||||||
|
switch (action.type) {
|
||||||
|
case "SELECT_NODE":
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
selectedNodeId: action.payload,
|
||||||
|
selectedEdgeId: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
case "TOGGLE_EXPAND":
|
||||||
|
const newExpanded = new Set(state.expandedNodeIds);
|
||||||
|
if (newExpanded.has(action.payload)) {
|
||||||
|
newExpanded.delete(action.payload);
|
||||||
|
} else {
|
||||||
|
newExpanded.add(action.payload);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
expandedNodeIds: newExpanded,
|
||||||
|
isDirty: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
#### History Management
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
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",
|
||||||
|
payload: {
|
||||||
|
...historyEntry,
|
||||||
|
historyIndex: newIndex,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [canUndo, state.historyIndex, state.history]);
|
||||||
|
|
||||||
|
const saveToHistory = useCallback(() => {
|
||||||
|
dispatch({ type: "SAVE_TO_HISTORY" });
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
return { canUndo, canRedo, undo, redo, saveToHistory };
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Advanced Features
|
||||||
|
|
||||||
|
### Auto-Layout Integration
|
||||||
|
|
||||||
|
Integrate Dagre for automatic graph layout:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import dagre from "dagre";
|
||||||
|
|
||||||
|
const layoutOptions = {
|
||||||
|
rankdir: "TB", // Top to Bottom
|
||||||
|
nodesep: 100, // Node separation
|
||||||
|
ranksep: 150, // Rank separation
|
||||||
|
marginx: 50,
|
||||||
|
marginy: 50,
|
||||||
|
edgesep: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyLayout = (nodes: Node[], edges: Edge[]) => {
|
||||||
|
const g = new dagre.graphlib.Graph();
|
||||||
|
g.setGraph(layoutOptions);
|
||||||
|
g.setDefaultEdgeLabel(() => ({}));
|
||||||
|
|
||||||
|
// Add nodes to graph
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
g.setNode(node.id, { width: 200, height: 100 });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add edges to graph
|
||||||
|
edges.forEach((edge) => {
|
||||||
|
g.setEdge(edge.source, edge.target);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate layout
|
||||||
|
dagre.layout(g);
|
||||||
|
|
||||||
|
// Apply positions
|
||||||
|
return nodes.map((node) => ({
|
||||||
|
...node,
|
||||||
|
position: {
|
||||||
|
x: g.node(node.id).x - 100,
|
||||||
|
y: g.node(node.id).y - 50,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Debounce layout calculations
|
||||||
|
const debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Focus Mode
|
||||||
|
|
||||||
|
Isolate selected nodes and their direct connections:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
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) => {
|
||||||
|
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));
|
||||||
|
|
||||||
|
return { nodes: focusedNodes, edges: focusedEdges };
|
||||||
|
}, [selectedNodeId, allNodes, allEdges]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Smooth transitions for focus mode
|
||||||
|
const focusModeStyles = {
|
||||||
|
transition: "all 0.3s ease-in-out",
|
||||||
|
opacity: isInFocus ? 1 : 0.3,
|
||||||
|
filter: isInFocus ? "none" : "blur(2px)",
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Search Integration
|
||||||
|
|
||||||
|
Search and navigate to specific nodes:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
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),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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]));
|
||||||
|
setSelectedNodeId(nodeId);
|
||||||
|
|
||||||
|
// Fit view to node
|
||||||
|
fitView({ nodes: [{ id: nodeId }], duration: 800 });
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Performance Tools
|
||||||
|
|
||||||
|
### Graph Performance Analyzer
|
||||||
|
|
||||||
|
Create a performance analysis script:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// scripts/graph-analyzer.js
|
||||||
|
class GraphAnalyzer {
|
||||||
|
analyzeCode(content, filePath) {
|
||||||
|
const analysis = {
|
||||||
|
metrics: {
|
||||||
|
nodeCount: this.countNodes(content),
|
||||||
|
edgeCount: this.countEdges(content),
|
||||||
|
renderTime: this.estimateRenderTime(content),
|
||||||
|
memoryUsage: this.estimateMemoryUsage(content),
|
||||||
|
complexity: this.calculateComplexity(content),
|
||||||
|
},
|
||||||
|
issues: [],
|
||||||
|
optimizations: [],
|
||||||
|
patterns: this.detectPatterns(content),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect performance issues
|
||||||
|
this.detectPerformanceIssues(analysis);
|
||||||
|
|
||||||
|
// Suggest optimizations
|
||||||
|
this.suggestOptimizations(analysis);
|
||||||
|
|
||||||
|
return analysis;
|
||||||
|
}
|
||||||
|
|
||||||
|
countNodes(content) {
|
||||||
|
const nodePatterns = [
|
||||||
|
/nodes:\s*\[.*?\]/gs,
|
||||||
|
/const\s+\w+\s*=\s*\[.*?id:.*?position:/gs,
|
||||||
|
];
|
||||||
|
|
||||||
|
let totalCount = 0;
|
||||||
|
nodePatterns.forEach((pattern) => {
|
||||||
|
const matches = content.match(pattern);
|
||||||
|
if (matches) {
|
||||||
|
matches.forEach((match) => {
|
||||||
|
const nodeMatches = match.match(/id:\s*['"`][^'"`]+['"`]/g);
|
||||||
|
if (nodeMatches) {
|
||||||
|
totalCount += nodeMatches.length;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return totalCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
detectPerformanceIssues(analysis) {
|
||||||
|
const { metrics } = analysis;
|
||||||
|
|
||||||
|
if (metrics.nodeCount > 500) {
|
||||||
|
analysis.issues.push({
|
||||||
|
type: "HIGH_NODE_COUNT",
|
||||||
|
severity: "high",
|
||||||
|
message: `Too many nodes (${metrics.nodeCount}). Consider virtualization.`,
|
||||||
|
suggestion: "Implement virtualization or reduce visible nodes",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (metrics.renderTime > 16) {
|
||||||
|
analysis.issues.push({
|
||||||
|
type: "SLOW_RENDER",
|
||||||
|
severity: "high",
|
||||||
|
message: `Render time (${metrics.renderTime.toFixed(2)}ms) exceeds 60fps.`,
|
||||||
|
suggestion: "Optimize with memoization and incremental rendering",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
### Performance Guidelines
|
||||||
|
|
||||||
|
1. **Use React.memo** for node components to prevent unnecessary re-renders
|
||||||
|
2. **Implement virtualization** for graphs with 1000+ nodes
|
||||||
|
3. **Debounce layout calculations** during rapid interactions
|
||||||
|
4. **Use useCallback** for edge creation and manipulation functions
|
||||||
|
5. **Implement proper TypeScript types** for nodes and edges
|
||||||
|
|
||||||
|
### Memory Management
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Use Map for O(1) lookups instead of array.find
|
||||||
|
const nodesById = useMemo(
|
||||||
|
() => new Map(allNodes.map((n) => [n.id, n])),
|
||||||
|
[allNodes],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Cache layout results
|
||||||
|
const layoutCacheRef = useRef<Map<string, Node[]>>(new Map());
|
||||||
|
|
||||||
|
// Proper cleanup in useEffect
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
// Clean up any lingering references
|
||||||
|
nodesMapRef.current.clear();
|
||||||
|
edgesMapRef.current.clear();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
```
|
||||||
|
|
||||||
|
### State Optimization
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Use useRef for objects that shouldn't trigger re-renders
|
||||||
|
const autoSaveDataRef = useRef({
|
||||||
|
nodes: [],
|
||||||
|
edges: [],
|
||||||
|
lastSaved: Date.now(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update properties without breaking reference
|
||||||
|
const updateAutoSaveData = (newNodes: Node[], newEdges: Edge[]) => {
|
||||||
|
autoSaveDataRef.current.nodes = newNodes;
|
||||||
|
autoSaveDataRef.current.edges = newEdges;
|
||||||
|
autoSaveDataRef.current.lastSaved = Date.now();
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Problems & Solutions
|
||||||
|
|
||||||
|
### Performance Issues
|
||||||
|
|
||||||
|
- **Problem**: Lag during node expansion
|
||||||
|
- **Solution**: Implement incremental rendering with change detection
|
||||||
|
|
||||||
|
- **Problem**: Memory usage increases over time
|
||||||
|
- **Solution**: Proper cleanup in useEffect hooks and use WeakMap for temporary data
|
||||||
|
|
||||||
|
### Layout Conflicts
|
||||||
|
|
||||||
|
- **Problem**: Manual positioning conflicts with auto-layout
|
||||||
|
- **Solution**: Use controlled positioning state and separate layout modes
|
||||||
|
|
||||||
|
### Rendering Issues
|
||||||
|
|
||||||
|
- **Problem**: Excessive re-renders
|
||||||
|
- **Solution**: Use memo, useMemo, and useCallback with stable dependencies
|
||||||
|
|
||||||
|
- **Problem**: Slow layout calculations
|
||||||
|
- **Solution**: Debounce layout calculations and cache results
|
||||||
|
|
||||||
|
## Complete Example
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import React, { useState, useCallback, useMemo, useRef } from 'react';
|
||||||
|
import ReactFlow, { Node, Edge, useReactFlow } from 'reactflow';
|
||||||
|
import dagre from 'dagre';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
|
interface GraphState {
|
||||||
|
nodes: Node[];
|
||||||
|
edges: Edge[];
|
||||||
|
selectedNodeId: string | null;
|
||||||
|
expandedNodeIds: Set<string>;
|
||||||
|
history: GraphState[];
|
||||||
|
historyIndex: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function InteractiveGraph() {
|
||||||
|
const [state, setState] = useState<GraphState>({
|
||||||
|
nodes: [],
|
||||||
|
edges: [],
|
||||||
|
selectedNodeId: null,
|
||||||
|
expandedNodeIds: new Set(),
|
||||||
|
history: [],
|
||||||
|
historyIndex: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { fitView } = useReactFlow();
|
||||||
|
const layoutCacheRef = useRef<Map<string, Node[]>>(new Map());
|
||||||
|
|
||||||
|
// Memoized styled edges
|
||||||
|
const styledEdges = useMemo(() => {
|
||||||
|
return state.edges.map(edge => ({
|
||||||
|
...edge,
|
||||||
|
style: {
|
||||||
|
...edge.style,
|
||||||
|
strokeWidth: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? 3 : 2,
|
||||||
|
stroke: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? '#3b82f6' : '#94a3b8',
|
||||||
|
},
|
||||||
|
animated: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target,
|
||||||
|
}));
|
||||||
|
}, [state.edges, state.selectedNodeId]);
|
||||||
|
|
||||||
|
// Debounced layout calculation
|
||||||
|
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),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleNodeClick = useCallback((event: React.MouseEvent, node: Node) => {
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
selectedNodeId: node.id,
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleToggleExpand = useCallback((nodeId: string) => {
|
||||||
|
setState(prev => {
|
||||||
|
const newExpanded = new Set(prev.expandedNodeIds);
|
||||||
|
if (newExpanded.has(nodeId)) {
|
||||||
|
newExpanded.delete(nodeId);
|
||||||
|
} else {
|
||||||
|
newExpanded.add(nodeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
expandedNodeIds: newExpanded,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReactFlow
|
||||||
|
nodes={state.nodes}
|
||||||
|
edges={styledEdges}
|
||||||
|
onNodeClick={handleNodeClick}
|
||||||
|
fitView
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This comprehensive skill provides everything needed to build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management patterns.
|
||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user