Compare commits

...

8 Commits

Author SHA1 Message Date
sck_0
c06d53137d chore: release v5.5.0 2026-02-16 13:28:18 +01:00
sck_0
3f08ade5c6 chore: sync generated files and fix frontmatter 2026-02-16 13:28:04 +01:00
Mert Başkurt
1e797799a9 feat: add react-flow-architect skill (#88)
- Expert ReactFlow architect for interactive graph applications
- Hierarchical navigation with expand/collapse patterns
- Performance optimization with incremental rendering
- State management with reducer and history
- Auto-layout integration with Dagre
- Focus mode and search functionality
- Complete production-ready examples
2026-02-16 13:26:18 +01:00
Nilay Sharma
49153de3de Fix OpenCode path in README.md (#87)
Updated the OpenCode path to reflect changes in the documentation and usage instructions.
2026-02-16 13:26:15 +01:00
Musa Yerleşmiş
602bd61852 feat: add laravel-security-audit skill (#86)
Co-authored-by: KOZUVA <kozuva@KZV-MacBook-Pro.local>
2026-02-16 13:26:12 +01:00
Musa Yerleşmiş
d8ee68d619 feat: add laravel-expert skill (#85)
Co-authored-by: KOZUVA <kozuva@KZV-MacBook-Pro.local>
2026-02-16 13:26:09 +01:00
github-actions[bot]
03181d82ac chore: update star history chart 2026-02-16 06:59:53 +00:00
sck_0
2bf75ae499 docs: update welcome and release to V5.4.0
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-16 07:31:44 +01:00
12 changed files with 1178 additions and 19 deletions

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
# 🌌 Antigravity Awesome Skills: 857+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
# 🌌 Antigravity Awesome Skills: 860+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
> **The Ultimate Collection of 857+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
> **The Ultimate Collection of 860+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](https://claude.ai)
@@ -16,7 +16,7 @@
If this project helps you, you can [support it here](https://buymeacoffee.com/sickn33) or simply ⭐ the repo.
**Antigravity Awesome Skills** is a curated, battle-tested library of **857 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
**Antigravity Awesome Skills** is a curated, battle-tested library of **860 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
- 🟣 **Claude Code** (Anthropic CLI)
- 🔵 **Gemini CLI** (Google DeepMind)
@@ -38,7 +38,7 @@ This repository provides essential skills to transform your AI assistant into a
- [🎁 Curated Collections (Bundles)](#curated-collections)
- [🧭 Antigravity Workflows](#antigravity-workflows)
- [📦 Features & Categories](#features--categories)
- [📚 Browse 857+ Skills](#browse-857-skills)
- [📚 Browse 860+ Skills](#browse-860-skills)
- [🤝 How to Contribute](#how-to-contribute)
- [🤝 Community](#community)
- [☕ Support the Project](#support-the-project)
@@ -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

View File

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

View File

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

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

View File

@@ -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": {

View 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 Laravels 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 Its 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

View 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);
```

View 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.

View File

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