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
|
||||
|
||||
Total skills: 857
|
||||
Total skills: 860
|
||||
|
||||
## architecture (64)
|
||||
|
||||
@@ -300,7 +300,7 @@ Use when creating container-based agents that run custom code in Azure ... | hos
|
||||
| `xlsx-official` | Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work ... | xlsx, official | xlsx, official, spreadsheet, creation, editing, analysis, formulas, formatting, data, visualization, claude, work |
|
||||
| `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search |
|
||||
|
||||
## development (128)
|
||||
## development (129)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -420,6 +420,7 @@ Triggers: "queue storage", "QueueServic... | azure, storage, queue, py | azure,
|
||||
| `python-performance-optimization` | Profile and optimize Python code using cProfile, memory profilers, and performance best practices. Use when debugging slow Python code, optimizing bottleneck... | python, performance, optimization | python, performance, optimization, profile, optimize, code, cprofile, memory, profilers, debugging, slow, optimizing |
|
||||
| `python-pro` | Master Python 3.12+ with modern features, async programming, performance optimization, and production-ready practices. Expert in the latest Python ecosystem ... | python | python, pro, 12, features, async, programming, performance, optimization, latest, ecosystem, including, uv |
|
||||
| `python-testing-patterns` | Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development. Use when writing Python tests, setting up test suites... | python | python, testing, pytest, fixtures, mocking, test, driven, development, writing, tests, setting, up |
|
||||
| `react-flow-architect` | Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integra... | react, flow | react, flow, architect, reactflow, building, interactive, graph, applications, hierarchical, node, edge, performance |
|
||||
| `react-flow-node-ts` | Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating vis... | react, flow, node, ts | react, flow, node, ts, components, typescript, types, zustand, integration, building, custom, nodes |
|
||||
| `react-modernization` | Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, m... | react, modernization | react, modernization, upgrade, applications, latest, versions, migrate, class, components, hooks, adopt, concurrent |
|
||||
| `react-native-architecture` | Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, impleme... | react, native, architecture | react, native, architecture, apps, expo, navigation, modules, offline, sync, cross, platform, developing |
|
||||
@@ -705,7 +706,7 @@ Triggers: "azure-storage-file-share", "Share... | azure, storage, file, share, p
|
||||
| `wireshark-analysis` | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow... | wireshark | wireshark, network, traffic, analysis, skill, should, used, user, asks, analyze, capture, packets |
|
||||
| `workflow-automation` | Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost... | | automation, infrastructure, makes, ai, agents, reliable, without, durable, execution, network, hiccup, during |
|
||||
|
||||
## security (126)
|
||||
## security (128)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -775,6 +776,8 @@ Triggers: "keyvault secrets rust", "SecretClient rust"... | azure, keyvault, sec
|
||||
| `k8s-manifest-generator` | Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when gen... | k8s, manifest, generator | k8s, manifest, generator, kubernetes, manifests, deployments, configmaps, secrets, following, security, standards, generating |
|
||||
| `k8s-security-policies` | Implement Kubernetes security policies including NetworkPolicy, PodSecurityPolicy, and RBAC for production-grade security. Use when securing Kubernetes clust... | k8s, security, policies | k8s, security, policies, kubernetes, including, networkpolicy, podsecuritypolicy, rbac, grade, securing, clusters, implementing |
|
||||
| `kubernetes-architect` | Expert Kubernetes architect specializing in cloud-native infrastructure, advanced GitOps workflows (ArgoCD/Flux), and enterprise container orchestration. Mas... | kubernetes | kubernetes, architect, specializing, cloud, native, infrastructure, gitops, argocd, flux, enterprise, container, orchestration |
|
||||
| `laravel-expert` | Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and m... | laravel | laravel, senior, engineer, role, grade, maintainable, idiomatic, solutions, clean, architecture, security, performance |
|
||||
| `laravel-security-audit` | Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel sec... | laravel, security, audit | laravel, security, audit, auditor, applications, analyzes, code, vulnerabilities, misconfigurations, insecure, owasp, standards |
|
||||
| `legal-advisor` | Draft privacy policies, terms of service, disclaimers, and legal notices. Creates GDPR-compliant texts, cookie policies, and data processing agreements. Use ... | legal, advisor | legal, advisor, draft, privacy, policies, terms, disclaimers, notices, creates, gdpr, compliant, texts |
|
||||
| `linkerd-patterns` | Implement Linkerd service mesh patterns for lightweight, security-focused service mesh deployments. Use when setting up Linkerd, configuring traffic policies... | linkerd | linkerd, mesh, lightweight, security, deployments, setting, up, configuring, traffic, policies, implementing, zero |
|
||||
| `loki-mode` | Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security... | loki, mode | loki, mode, multi, agent, autonomous, startup, claude, code, triggers, orchestrates, 100, specialized |
|
||||
|
||||
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"
|
||||
|
||||
> **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://claude.ai)
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
If this project helps you, you can [support it here](https://buymeacoffee.com/sickn33) or simply ⭐ the repo.
|
||||
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **857 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **860 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
|
||||
- 🟣 **Claude Code** (Anthropic CLI)
|
||||
- 🔵 **Gemini CLI** (Google DeepMind)
|
||||
@@ -38,7 +38,7 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
- [🎁 Curated Collections (Bundles)](#curated-collections)
|
||||
- [🧭 Antigravity Workflows](#antigravity-workflows)
|
||||
- [📦 Features & Categories](#features--categories)
|
||||
- [📚 Browse 857+ Skills](#browse-857-skills)
|
||||
- [📚 Browse 860+ Skills](#browse-860-skills)
|
||||
- [🤝 How to Contribute](#how-to-contribute)
|
||||
- [🤝 Community](#community)
|
||||
- [☕ Support the Project](#support-the-project)
|
||||
@@ -52,11 +52,11 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
|
||||
## 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?
|
||||
|
||||
**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".
|
||||
**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/` |
|
||||
| **Cursor** | IDE | `@skill-name (in Chat)` | `.cursor/skills/` |
|
||||
| **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/` |
|
||||
|
||||
> [!TIP]
|
||||
> **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]
|
||||
> **Windows Users**: this repository uses **symlinks** for official skills.
|
||||
@@ -144,8 +145,8 @@ npx antigravity-awesome-skills --gemini
|
||||
# Codex CLI
|
||||
npx antigravity-awesome-skills --codex
|
||||
|
||||
# OpenCode (Universal)
|
||||
npx antigravity-awesome-skills
|
||||
# OpenCode
|
||||
npx antigravity-awesome-skills --path .agents/skills
|
||||
|
||||
# Custom path
|
||||
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
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .cursor/skills
|
||||
|
||||
# OpenCode specific (Universal path)
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
|
||||
# OpenCode
|
||||
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).
|
||||
|
||||
## Browse 857+ Skills
|
||||
## Browse 860+ Skills
|
||||
|
||||
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-testing-patterns",
|
||||
"react-best-practices",
|
||||
"react-flow-architect",
|
||||
"react-flow-node-ts",
|
||||
"react-modernization",
|
||||
"react-native-architecture",
|
||||
@@ -290,6 +291,8 @@
|
||||
"k8s-manifest-generator",
|
||||
"k8s-security-policies",
|
||||
"kubernetes-architect",
|
||||
"laravel-expert",
|
||||
"laravel-security-audit",
|
||||
"legal-advisor",
|
||||
"linkerd-patterns",
|
||||
"loki-mode",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"generatedAt": "2026-02-08T00:00:00.000Z",
|
||||
"total": 857,
|
||||
"total": 860,
|
||||
"skills": [
|
||||
{
|
||||
"id": "3d-web-experience",
|
||||
@@ -12407,6 +12407,56 @@
|
||||
],
|
||||
"path": "skills/langgraph/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "laravel-expert",
|
||||
"name": "laravel-expert",
|
||||
"description": "Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"laravel"
|
||||
],
|
||||
"triggers": [
|
||||
"laravel",
|
||||
"senior",
|
||||
"engineer",
|
||||
"role",
|
||||
"grade",
|
||||
"maintainable",
|
||||
"idiomatic",
|
||||
"solutions",
|
||||
"clean",
|
||||
"architecture",
|
||||
"security",
|
||||
"performance"
|
||||
],
|
||||
"path": "skills/laravel-expert/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "laravel-security-audit",
|
||||
"name": "laravel-security-audit",
|
||||
"description": "Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel security best practices.",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"laravel",
|
||||
"security",
|
||||
"audit"
|
||||
],
|
||||
"triggers": [
|
||||
"laravel",
|
||||
"security",
|
||||
"audit",
|
||||
"auditor",
|
||||
"applications",
|
||||
"analyzes",
|
||||
"code",
|
||||
"vulnerabilities",
|
||||
"misconfigurations",
|
||||
"insecure",
|
||||
"owasp",
|
||||
"standards"
|
||||
],
|
||||
"path": "skills/laravel-security-audit/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "last30days",
|
||||
"name": "last30days",
|
||||
@@ -16057,6 +16107,31 @@
|
||||
],
|
||||
"path": "skills/react-best-practices/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-architect",
|
||||
"name": "react-flow-architect",
|
||||
"description": "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.",
|
||||
"category": "development",
|
||||
"tags": [
|
||||
"react",
|
||||
"flow"
|
||||
],
|
||||
"triggers": [
|
||||
"react",
|
||||
"flow",
|
||||
"architect",
|
||||
"reactflow",
|
||||
"building",
|
||||
"interactive",
|
||||
"graph",
|
||||
"applications",
|
||||
"hierarchical",
|
||||
"node",
|
||||
"edge",
|
||||
"performance"
|
||||
],
|
||||
"path": "skills/react-flow-architect/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-node-ts",
|
||||
"name": "react-flow-node-ts",
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "5.3.0",
|
||||
"version": "5.5.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "5.3.0",
|
||||
"version": "5.5.0",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"antigravity-awesome-skills": "bin/install.js"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"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.",
|
||||
"license": "MIT",
|
||||
"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",
|
||||
"source": "vibeship-spawner-skills (Apache 2.0)"
|
||||
},
|
||||
{
|
||||
"id": "laravel-expert",
|
||||
"path": "skills/laravel-expert",
|
||||
"category": "uncategorized",
|
||||
"name": "laravel-expert",
|
||||
"description": "Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).",
|
||||
"risk": "safe",
|
||||
"source": "community"
|
||||
},
|
||||
{
|
||||
"id": "laravel-security-audit",
|
||||
"path": "skills/laravel-security-audit",
|
||||
"category": "uncategorized",
|
||||
"name": "laravel-security-audit",
|
||||
"description": "Security auditor for Laravel applications. Analyzes code for vulnerabilities, misconfigurations, and insecure practices using OWASP standards and Laravel security best practices.",
|
||||
"risk": "safe",
|
||||
"source": "community"
|
||||
},
|
||||
{
|
||||
"id": "last30days",
|
||||
"path": "skills/last30days",
|
||||
@@ -5768,6 +5786,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-architect",
|
||||
"path": "skills/react-flow-architect",
|
||||
"category": "uncategorized",
|
||||
"name": "react-flow-architect",
|
||||
"description": "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "react-flow-node-ts",
|
||||
"path": "skills/react-flow-node-ts",
|
||||
|
||||
Reference in New Issue
Block a user