Add 71 new skills: Spark Intelligence, SupaRalph, PayloadCMS, Frontend-Design, Ralph, and Vibeship ecosystem integration
This commit is contained in:
AI Agent
208
skills/README.md
208
skills/README.md
@@ -1,96 +1,172 @@
|
||||
# QwenClaw Skills
|
||||
|
||||
Skills are specialized capabilities that enhance QwenClaw's ability to help with specific tasks. These skills are adapted from:
|
||||
- [awesome-claude-skills](https://github.com/ComposioHQ/awesome-claude-skills) (25 skills)
|
||||
- [awesome-openclaw-skills](https://github.com/VoltAgent/awesome-openclaw-skills) (10 selected high-value skills)
|
||||
Skills are specialized capabilities that enhance QwenClaw's ability to help with specific tasks.
|
||||
|
||||
## Available Skills (35 Total)
|
||||
## 📊 Overview
|
||||
|
||||
### From awesome-claude-skills
|
||||
| Total Skills | Sources | Categories |
|
||||
|--------------|---------|------------|
|
||||
| **150+** | **15** | **15** |
|
||||
|
||||
### Document Processing
|
||||
- **Document Skills** - Process, analyze, and extract information from documents
|
||||
- **File Organizer** - Organize and structure files systematically
|
||||
---
|
||||
|
||||
### Development & Code Tools
|
||||
- **Developer Growth Analysis** - Analyze and improve development practices
|
||||
- **Web App Testing** - Test and validate web applications
|
||||
- **MCP Builder** - Build Model Context Protocol integrations
|
||||
## 📚 Skill Sources
|
||||
|
||||
### Content & Research
|
||||
- **Content Research Writer** - Research, write, and cite high-quality content
|
||||
- **Competitive Ads Extractor** - Analyze competitor advertising strategies
|
||||
- **Lead Research Assistant** - Research and qualify leads
|
||||
| Source | Skills | Description |
|
||||
|--------|--------|-------------|
|
||||
| [awesome-claude-skills](https://github.com/ComposioHQ/awesome-claude-skills) | 25 | Comprehensive Claude skills collection |
|
||||
| [awesome-openclaw-skills](https://github.com/VoltAgent/awesome-openclaw-skills) | 10 | OpenClaw community skills |
|
||||
| [ui-ux-pro-max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) | 1 | Professional UI/UX with 100+ rules, 67 styles |
|
||||
| [claude-codex-settings](https://github.com/fcakyon/claude-codex-settings) | 15 | Claude Codex plugins (Azure, GitHub, Linear, Supabase) |
|
||||
| [superpowers](https://github.com/obra/superpowers) | 15 | Complete software development workflow |
|
||||
| [spawner](https://spawner.vibeship.co/) | 9 | 50+ specialist agents via MCP |
|
||||
| [skills.sh](https://skills.sh) | 50+ | Vercel Skills platform (200+ community skills) |
|
||||
| [anthropic-frontend-design](https://github.com/anthropics/claude-code) | 1 | Anthropic's official frontend design skill |
|
||||
| [awesome-ralph](https://github.com/snwfdhmp/awesome-ralph) | 15 | Ralph Wiggum autonomous agent loops |
|
||||
| [payloadcms-cms](https://github.com/payloadcms/payload) | 1 | PayloadCMS project development |
|
||||
| [qwenbot-integration](https://platform.qwen.ai/) | 1 | QwenBot AI assistant |
|
||||
| [qwenclaw-integration](https://github.rommark.dev/admin/QwenClaw-with-Auth) | 1 | QwenClaw daemon integration |
|
||||
| [gui-automation](https://playwright.dev/) | 1 | Playwright browser automation |
|
||||
| [agents-council-integration](https://github.com/MrLesk/agents-council) | 1 | Multi-agent orchestration with RAG |
|
||||
| [clawwork-integration](https://github.com/HKUDS/ClawWork) | 1 | Economic AI agent platform (220 GDP tasks) |
|
||||
|
||||
### Business & Productivity
|
||||
- **Internal Comms** - Improve internal communications
|
||||
- **Meeting Insights Analyzer** - Extract insights from meeting notes
|
||||
- **Invoice Organizer** - Organize and categorize invoices
|
||||
---
|
||||
|
||||
### Creative & Media
|
||||
- **Image Enhancer** - Enhance and optimize images
|
||||
- **Video Downloader** - Download and process video content
|
||||
- **Theme Factory** - Generate themes and design concepts
|
||||
- **Canvas Design** - Create canvas designs and layouts
|
||||
## 🏷️ Categories
|
||||
|
||||
### Writing & Communication
|
||||
- **Tailored Resume Generator** - Create customized resumes
|
||||
- **Changelog Generator** - Generate project changelogs
|
||||
- **Brand Guidelines** - Maintain and apply brand guidelines
|
||||
- **Twitter Algorithm Optimizer** - Optimize social media content
|
||||
|
||||
### Tools & Utilities
|
||||
- **Domain Name Brainstormer** - Generate domain name ideas
|
||||
- **Raffle Winner Picker** - Select random winners fairly
|
||||
- **Slack GIF Creator** - Create GIFs for Slack
|
||||
- **LangSmith Fetch** - Fetch and analyze LangSmith data
|
||||
|
||||
### Composio Integrations
|
||||
- **Connect Apps** - Connect to 500+ apps via Composio
|
||||
- **Composio Skills** - Access Composio-powered capabilities
|
||||
|
||||
### From awesome-openclaw-skills
|
||||
|
||||
- **achurch** - 24/7 digital sanctuary for AI agents and humans
|
||||
- **agent-council** - Complete toolkit for creating autonomous AI agents
|
||||
- **agent-identity-kit** - Portable identity system for AI agents
|
||||
- **mcp-builder** - Create high-quality MCP (Model Context Protocol) servers
|
||||
- **coder-workspaces** - Manage Coder workspaces and AI coding tasks
|
||||
- **backend-patterns** - Backend architecture patterns and API design
|
||||
### Development & Code (50+ skills)
|
||||
- **superpowers** - Brainstorming, planning, TDD, code review, subagent-driven development
|
||||
- **claude-codex-settings** - Azure, GitHub, Linear, Supabase plugins
|
||||
- **payloadcms-cms** - PayloadCMS project creation and configuration
|
||||
- **mcp-builder** - Build Model Context Protocol integrations
|
||||
- **webapp-testing** - Test and validate web applications
|
||||
- **backend-patterns** - Backend architecture, API design, database optimization
|
||||
- **code-mentor** - Comprehensive AI programming tutor
|
||||
- **coding-agent** - Run Codex CLI, Claude Code, OpenCode, or Pi Coding Agent
|
||||
- **coding-agent** - Run Codex CLI, Claude Code, OpenCode, Pi Coding Agent
|
||||
|
||||
### Design & UI/UX (20+ skills)
|
||||
- **ui-ux-pro-max** - 100+ reasoning rules, 67 UI styles, design system generation
|
||||
- **frontend-design** - Anthropic's official skill for distinctive, production-grade interfaces
|
||||
- **shadcn-ui-design** - shadcn/ui patterns with React, Tailwind, Radix UI
|
||||
- **canvas-design** - Create canvas designs and visual layouts
|
||||
- **theme-factory** - Generate themes and design concepts
|
||||
|
||||
### Automation & Agents (25+ skills)
|
||||
- **spawner-mcp** - Auto-spawn 50+ specialist agents (frontend, backend, devops, etc.)
|
||||
- **ralph-autonomous-agent** - PRD-driven autonomous loops with test-driven validation
|
||||
- **agents-council-integration** - Multi-agent orchestration with full RAG
|
||||
- **agent-council** - Complete toolkit for autonomous AI agents
|
||||
- **ec-task-orchestrator** - Autonomous multi-agent task orchestration
|
||||
- **essence-distiller** - Find what actually matters in content
|
||||
- **gui-automation** - Playwright browser control and web scraping
|
||||
|
||||
## Using Skills
|
||||
### Business & Productivity (20+ skills)
|
||||
- **clawwork-integration** - 220+ professional tasks across 44 GDP sectors
|
||||
- **content-research-writer** - Research, write, and cite high-quality content
|
||||
- **developer-growth-analysis** - Analyze and improve development practices
|
||||
- **meeting-insights-analyzer** - Extract insights from meeting notes
|
||||
- **internal-comms** - Improve internal communications
|
||||
- **brand-guidelines** - Maintain and apply brand guidelines
|
||||
|
||||
Skills are automatically available when you run QwenClaw. To use a specific skill:
|
||||
### Content & Media (15+ skills)
|
||||
- **document-skills** - Process, analyze, and extract information from documents
|
||||
- **image-enhancer** - Enhance and optimize images
|
||||
- **video-downloader** - Download and process video content
|
||||
- **changelog-generator** - Generate project changelogs
|
||||
|
||||
### Tools & Utilities (15+ skills)
|
||||
- **file-organizer** - Organize and structure files systematically
|
||||
- **domain-name-brainstormer** - Generate creative domain name ideas
|
||||
- **skill-creator** - Create new custom skills
|
||||
- **raffle-winner-picker** - Select random winners fairly
|
||||
- **slack-gif-creator** - Create GIFs for Slack
|
||||
- **langsmith-fetch** - Fetch and analyze LangSmith data
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Using Skills
|
||||
|
||||
### Start QwenClaw with a Skill
|
||||
|
||||
```bash
|
||||
# Start QwenClaw with a skill-focused prompt
|
||||
bun run start --prompt "Use the content-research-writer skill to help me write an article about AI"
|
||||
# Start daemon
|
||||
qwenclaw start
|
||||
|
||||
# Send task with specific skill
|
||||
qwenclaw send "Use the frontend-design skill to create a landing page"
|
||||
qwenclaw send "Use the payloadcms-cms skill to build a VPS hosting site"
|
||||
qwenclaw send "Use the ralph-autonomous-agent skill to implement this feature"
|
||||
```
|
||||
|
||||
Or send to a running daemon:
|
||||
### Available Commands
|
||||
|
||||
```bash
|
||||
bun run send "Use the file-organizer skill to organize my downloads folder"
|
||||
qwenclaw start # Start daemon
|
||||
qwenclaw status # Check status
|
||||
qwenclaw send "task" # Send task
|
||||
qwenclaw skills # List all skills
|
||||
qwenclaw help # Show help
|
||||
```
|
||||
|
||||
## Skill Structure
|
||||
---
|
||||
|
||||
Each skill consists of:
|
||||
## 📁 Skill Structure
|
||||
|
||||
Each skill directory contains:
|
||||
- **SKILL.md** - Skill definition and instructions
|
||||
- **prompts/** - Pre-built prompts for the skill
|
||||
- **examples/** - Usage examples
|
||||
- **prompts/** - Pre-built prompts (optional)
|
||||
- **examples/** - Usage examples (optional)
|
||||
- **src/** - Implementation files (optional)
|
||||
|
||||
## Creating Custom Skills
|
||||
---
|
||||
|
||||
1. Create a new directory in `skills/`
|
||||
## 🛠️ Creating Custom Skills
|
||||
|
||||
1. Create directory: `skills/your-skill-name/`
|
||||
2. Add `SKILL.md` with skill definition
|
||||
3. Add any supporting files (prompts, examples)
|
||||
3. Add supporting files (prompts, examples)
|
||||
4. Update `skills-index.json`
|
||||
|
||||
## Skills Index
|
||||
### SKILL.md Template
|
||||
|
||||
See `skills-index.json` for the complete list of available skills and their locations.
|
||||
```markdown
|
||||
# Skill Name
|
||||
|
||||
## Overview
|
||||
Description of what this skill does.
|
||||
|
||||
## Usage
|
||||
How to use this skill.
|
||||
|
||||
## Examples
|
||||
Usage examples.
|
||||
|
||||
## Skill Metadata
|
||||
```yaml
|
||||
name: skill-name
|
||||
version: 1.0.0
|
||||
category: category
|
||||
description: Description
|
||||
tags:
|
||||
- tag1
|
||||
- tag2
|
||||
```
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 Complete Skills Index
|
||||
|
||||
See `skills-index.json` for the complete list of all 150+ skills with descriptions and features.
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Resources
|
||||
|
||||
- [QwenClaw Documentation](https://github.rommark.dev/admin/QwenClaw-with-Auth)
|
||||
- [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills)
|
||||
- [Skills.sh Platform](https://skills.sh)
|
||||
- [Ralph Wiggum Loop](https://github.com/snwfdhmp/awesome-ralph)
|
||||
|
||||
---
|
||||
|
||||
**Happy Building!** 🚀
|
||||
|
||||
252
skills/frontend-design/SKILL.md
Normal file
252
skills/frontend-design/SKILL.md
Normal file
@@ -0,0 +1,252 @@
|
||||
# Frontend-Design Skill for QwenClaw
|
||||
|
||||
## Overview
|
||||
|
||||
**Name:** frontend-design
|
||||
**Source:** https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
|
||||
|
||||
This skill provides **exceptional frontend design capabilities** to QwenClaw, enabling it to create distinctive, production-grade frontend interfaces with high design quality that avoid generic "AI slop" aesthetics.
|
||||
|
||||
---
|
||||
|
||||
## Design Thinking
|
||||
|
||||
Before coding, understand the context and commit to a **BOLD aesthetic direction**:
|
||||
|
||||
### Purpose Analysis
|
||||
- What problem does this interface solve?
|
||||
- Who uses it?
|
||||
- What is the user's goal?
|
||||
|
||||
### Tone Selection
|
||||
Pick an extreme aesthetic direction:
|
||||
- Brutally minimal
|
||||
- Maximalist chaos
|
||||
- Retro-futuristic
|
||||
- Organic/natural
|
||||
- Luxury/refined
|
||||
- Playful/toy-like
|
||||
- Editorial/magazine
|
||||
- Brutalist/raw
|
||||
- Art deco/geometric
|
||||
- Soft/pastel
|
||||
- Industrial/utilitarian
|
||||
|
||||
### Constraints
|
||||
- Technical requirements (framework, performance, accessibility)
|
||||
- Browser support
|
||||
- Device targets
|
||||
|
||||
### Differentiation
|
||||
What makes this **UNFORGETTABLE**? What's the one thing someone will remember?
|
||||
|
||||
---
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
|
||||
### Typography
|
||||
- Choose fonts that are beautiful, unique, and interesting
|
||||
- Avoid generic fonts (Arial, Inter, Roboto, system fonts)
|
||||
- Opt for distinctive choices that elevate aesthetics
|
||||
- Pair a distinctive display font with a refined body font
|
||||
|
||||
### Color & Theme
|
||||
- Commit to a cohesive aesthetic
|
||||
- Use CSS variables for consistency
|
||||
- Dominant colors with sharp accents outperform timid palettes
|
||||
- Avoid purple gradients on white backgrounds (cliché)
|
||||
|
||||
### Motion & Animation
|
||||
- Use animations for effects and micro-interactions
|
||||
- Prioritize CSS-only solutions
|
||||
- One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions
|
||||
- Use scroll-triggering and hover states that surprise
|
||||
|
||||
### Spatial Composition
|
||||
- Unexpected layouts
|
||||
- Asymmetry
|
||||
- Overlap
|
||||
- Diagonal flow
|
||||
- Grid-breaking elements
|
||||
- Generous negative space OR controlled density
|
||||
|
||||
### Backgrounds & Visual Details
|
||||
Create atmosphere and depth:
|
||||
- Gradient meshes
|
||||
- Noise textures
|
||||
- Geometric patterns
|
||||
- Layered transparencies
|
||||
- Dramatic shadows
|
||||
- Decorative borders
|
||||
- Custom cursors
|
||||
- Grain overlays
|
||||
|
||||
---
|
||||
|
||||
## What to NEVER Use
|
||||
|
||||
NEVER use generic AI-generated aesthetics:
|
||||
- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
|
||||
- ❌ Clichéd color schemes (purple gradients on white)
|
||||
- ❌ Predictable layouts and component patterns
|
||||
- ❌ Cookie-cutter design that lacks context-specific character
|
||||
- ❌ Space Grotesq (overused by AI)
|
||||
- ❌ Generic Tailwind default styling
|
||||
|
||||
---
|
||||
|
||||
## Implementation Principle
|
||||
|
||||
**Match implementation complexity to the aesthetic vision:**
|
||||
|
||||
### Maximalist Designs
|
||||
Need elaborate code with:
|
||||
- Extensive animations
|
||||
- Multiple effects
|
||||
- Layered visual elements
|
||||
- Complex compositions
|
||||
|
||||
### Minimalist Designs
|
||||
Need restraint and precision:
|
||||
- Careful attention to spacing
|
||||
- Refined typography
|
||||
- Subtle details
|
||||
- Perfect proportions
|
||||
|
||||
---
|
||||
|
||||
## Usage in QwenClaw
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```
|
||||
Use the frontend-design skill to create a landing page for a SaaS product
|
||||
```
|
||||
|
||||
### With Style Direction
|
||||
|
||||
```
|
||||
Use frontend-design skill to build a dashboard with a brutalist aesthetic
|
||||
```
|
||||
|
||||
### Complex UI
|
||||
|
||||
```
|
||||
Use frontend-design skill to create an e-commerce product page with:
|
||||
- Hero section with bold typography
|
||||
- Product gallery with unique layout
|
||||
- Add to cart with micro-interactions
|
||||
- Related products section
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Choose a Clear Direction
|
||||
Pick one aesthetic and commit fully. Bold maximalism and refined minimalism both work—the key is intentionality.
|
||||
|
||||
### 2. Be Memorable
|
||||
What's the one thing someone will remember? A unique animation? An unexpected color? A distinctive layout?
|
||||
|
||||
### 3. Polish Every Detail
|
||||
- Perfect spacing
|
||||
- Thoughtful transitions
|
||||
- Considered typography
|
||||
- Cohesive color system
|
||||
|
||||
### 4. Avoid Convergence
|
||||
Never converge on common AI choices. Vary between:
|
||||
- Light and dark themes
|
||||
- Different fonts
|
||||
- Different aesthetics
|
||||
- Different layouts
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Minimalist Landing Page
|
||||
|
||||
```tsx
|
||||
// Clean, refined, with perfect typography
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<main className="min-h-screen bg-stone-50 text-stone-900">
|
||||
<header className="py-8 px-12">
|
||||
<nav className="flex justify-between items-center">
|
||||
<Logo />
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section className="py-32 px-12 max-w-4xl mx-auto">
|
||||
<h1 className="text-7xl font-light tracking-tight mb-8 font-serif">
|
||||
Design that speaks
|
||||
<span className="italic text-stone-500"> quietly</span>
|
||||
</h1>
|
||||
<p className="text-xl text-stone-600 leading-relaxed">
|
||||
We craft digital experiences with intention and precision.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Maximalist Portfolio
|
||||
|
||||
```tsx
|
||||
// Bold, chaotic, memorable
|
||||
export default function Portfolio() {
|
||||
return (
|
||||
<main className="min-h-screen bg-black text-lime-400 overflow-hidden">
|
||||
<div className="fixed inset-0 opacity-20">
|
||||
<div className="absolute inset-0 bg-[url('/noise.png')] animate-noise" />
|
||||
<div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-gradient-radial from-lime-500/30 to-transparent" />
|
||||
</div>
|
||||
|
||||
<header className="relative z-10 py-8 px-12 flex justify-between items-center mix-blend-difference">
|
||||
<Logo className="text-4xl font-black tracking-tighter" />
|
||||
<Menu className="text-6xl hover:rotate-45 transition-transform duration-500" />
|
||||
</header>
|
||||
|
||||
<section className="relative z-10 py-32 px-12">
|
||||
<h1 className="text-[12vw] leading-[0.8] font-black tracking-tighter">
|
||||
DIGITAL
|
||||
<br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 via-cyan-400 to-lime-400 animate-gradient">
|
||||
ALCHEMIST
|
||||
</span>
|
||||
</h1>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
```yaml
|
||||
name: frontend-design
|
||||
version: 1.0.0
|
||||
category: design
|
||||
description: Create distinctive, production-grade frontend interfaces with exceptional design quality
|
||||
author: Anthropic (https://github.com/anthropics/claude-code)
|
||||
license: MIT
|
||||
tags:
|
||||
- frontend
|
||||
- design
|
||||
- ui
|
||||
- css
|
||||
- react
|
||||
- animation
|
||||
- typography
|
||||
- color
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Skill ready for QwenClaw integration!** 🎨
|
||||
790
skills/payloadcms-cms/SKILL.md
Normal file
790
skills/payloadcms-cms/SKILL.md
Normal file
@@ -0,0 +1,790 @@
|
||||
# PayloadCMS Skill for QwenClaw
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides **PayloadCMS expertise** to QwenClaw, enabling it to build, configure, and extend Payload CMS projects. Payload is an open-source, fullstack Next.js framework that gives you instant backend superpowers.
|
||||
|
||||
**Source:** https://github.com/payloadcms/payload
|
||||
|
||||
---
|
||||
|
||||
## What is PayloadCMS?
|
||||
|
||||
**Payload** is a Next.js native CMS that can be installed directly in your existing `/app` folder. It provides:
|
||||
- Full TypeScript backend and admin panel instantly
|
||||
- Server components to extend Payload UI
|
||||
- Direct database queries in server components (no REST/GraphQL needed)
|
||||
- Automatic TypeScript types for your data
|
||||
|
||||
### Key Features
|
||||
- **Next.js Native** - Runs inside your `/app` folder
|
||||
- **TypeScript First** - Automatic type generation
|
||||
- **Authentication** - Built-in auth out of the box
|
||||
- **Versions & Drafts** - Content versioning support
|
||||
- **Localization** - Multi-language content
|
||||
- **Block-Based Layout** - Visual page builder
|
||||
- **Customizable Admin** - React-based admin panel
|
||||
- **Lexical Editor** - Modern rich text editor
|
||||
- **Access Control** - Granular permissions
|
||||
- **Hooks** - Document and field-level hooks
|
||||
- **High Performance** - Optimized API
|
||||
- **Security** - HTTP-only cookies, CSRF protection
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Create New Project
|
||||
|
||||
```bash
|
||||
# Basic installation
|
||||
pnpx create-payload-app@latest
|
||||
|
||||
# With website template (recommended)
|
||||
pnpx create-payload-app@latest -t website
|
||||
|
||||
# From example
|
||||
npx create-payload-app --example example_name
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
my-payload-app/
|
||||
├── app/
|
||||
│ ├── (payload)/
|
||||
│ │ ├── admin/
|
||||
│ │ ├── api/
|
||||
│ │ └── layout.tsx
|
||||
│ └── (frontend)/
|
||||
│ ├── page.tsx
|
||||
│ └── layout.tsx
|
||||
├── collections/
|
||||
│ ├── Users.ts
|
||||
│ └── Posts.ts
|
||||
├── payload.config.ts
|
||||
├── payload-types.ts
|
||||
└── package.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Collections & Schemas
|
||||
|
||||
### Basic Collection
|
||||
|
||||
```typescript
|
||||
// collections/Posts.ts
|
||||
import type { CollectionConfig } from 'payload';
|
||||
|
||||
export const Posts: CollectionConfig = {
|
||||
slug: 'posts',
|
||||
admin: {
|
||||
useAsTitle: 'title',
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
type: 'richText',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'publishedAt',
|
||||
type: 'date',
|
||||
admin: {
|
||||
date: {
|
||||
pickerAppearance: 'dayAndTime',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: 'Draft', value: 'draft' },
|
||||
{ label: 'Published', value: 'published' },
|
||||
],
|
||||
defaultValue: 'draft',
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Collection with Relationships
|
||||
|
||||
```typescript
|
||||
// collections/Authors.ts
|
||||
export const Authors: CollectionConfig = {
|
||||
slug: 'authors',
|
||||
admin: {
|
||||
useAsTitle: 'name',
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
type: 'email',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// In Posts collection
|
||||
{
|
||||
name: 'author',
|
||||
type: 'relationship',
|
||||
relationTo: 'authors',
|
||||
}
|
||||
```
|
||||
|
||||
### Blocks Field (Page Builder)
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: 'layout',
|
||||
type: 'blocks',
|
||||
blocks: [
|
||||
{
|
||||
slug: 'hero',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'backgroundImage',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'content',
|
||||
fields: [
|
||||
{
|
||||
name: 'content',
|
||||
type: 'richText',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'cta',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'buttonText',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'buttonUrl',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Access Control
|
||||
|
||||
### Field-Level Access
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: 'isFeatured',
|
||||
type: 'checkbox',
|
||||
access: {
|
||||
read: () => true,
|
||||
update: ({ req }) => req.user?.role === 'admin',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Collection Access
|
||||
|
||||
```typescript
|
||||
access: {
|
||||
read: () => true,
|
||||
create: ({ req }) => req.user?.role === 'admin',
|
||||
update: ({ req }) => req.user?.role === 'admin',
|
||||
delete: ({ req }) => req.user?.role === 'admin',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Hooks
|
||||
|
||||
### Before Change Hook
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: 'slug',
|
||||
type: 'text',
|
||||
hooks: {
|
||||
beforeChange: [
|
||||
({ value, data }) => {
|
||||
if (!value && data.title) {
|
||||
return data.title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '');
|
||||
}
|
||||
return value;
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### After Change Hook
|
||||
|
||||
```typescript
|
||||
hooks: {
|
||||
afterChange: [
|
||||
async ({ doc, req, operation }) => {
|
||||
if (operation === 'create') {
|
||||
// Send welcome email
|
||||
await sendWelcomeEmail(doc.email);
|
||||
}
|
||||
return doc;
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Localization
|
||||
|
||||
```typescript
|
||||
const config: Config = {
|
||||
localization: {
|
||||
locales: [
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'es', label: 'Spanish' },
|
||||
{ code: 'fr', label: 'French' },
|
||||
],
|
||||
defaultLocale: 'en',
|
||||
},
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Using Payload in Server Components
|
||||
|
||||
### Query Collection
|
||||
|
||||
```typescript
|
||||
import { getPayload } from 'payload';
|
||||
import config from '@payload-config';
|
||||
|
||||
export default async function PostsPage() {
|
||||
const payload = await getPayload({ config });
|
||||
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
where: {
|
||||
status: { equals: 'published' },
|
||||
},
|
||||
sort: '-publishedAt',
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{posts.docs.map(post => (
|
||||
<article key={post.id}>
|
||||
<h2>{post.title}</h2>
|
||||
<p>{post.content}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Query by ID
|
||||
|
||||
```typescript
|
||||
const post = await payload.findByID({
|
||||
collection: 'posts',
|
||||
id: postId,
|
||||
depth: 2, // Populate relationships
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## VPS Landing Page with PayloadCMS
|
||||
|
||||
### Collections for VPS Site
|
||||
|
||||
```typescript
|
||||
// collections/VpsPlans.ts
|
||||
export const VpsPlans: CollectionConfig = {
|
||||
slug: 'vps-plans',
|
||||
admin: {
|
||||
useAsTitle: 'name',
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
type: 'number',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'billingPeriod',
|
||||
type: 'select',
|
||||
options: ['monthly', 'yearly'],
|
||||
defaultValue: 'monthly',
|
||||
},
|
||||
{
|
||||
name: 'vcpuCores',
|
||||
type: 'number',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'ram',
|
||||
type: 'number',
|
||||
label: 'RAM (GB)',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'storage',
|
||||
type: 'number',
|
||||
label: 'Storage (GB)',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'bandwidth',
|
||||
type: 'text',
|
||||
label: 'Bandwidth',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'features',
|
||||
type: 'array',
|
||||
fields: [
|
||||
{
|
||||
name: 'feature',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'isPopular',
|
||||
type: 'checkbox',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
name: 'ctaText',
|
||||
type: 'text',
|
||||
defaultValue: 'Get Started',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// collections/Features.ts
|
||||
export const Features: CollectionConfig = {
|
||||
slug: 'features',
|
||||
admin: {
|
||||
useAsTitle: 'title',
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
type: 'richText',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'icon',
|
||||
type: 'text',
|
||||
label: 'Icon Name (Bootstrap Icons)',
|
||||
},
|
||||
{
|
||||
name: 'order',
|
||||
type: 'number',
|
||||
admin: {
|
||||
position: 'sidebar',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// collections/Testimonials.ts
|
||||
export const Testimonials: CollectionConfig = {
|
||||
slug: 'testimonials',
|
||||
admin: {
|
||||
useAsTitle: 'authorName',
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'authorName',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'authorTitle',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'company',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'quote',
|
||||
type: 'richText',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
{
|
||||
name: 'rating',
|
||||
type: 'number',
|
||||
min: 1,
|
||||
max: 5,
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Frontend Page Component
|
||||
|
||||
```typescript
|
||||
// app/(frontend)/page.tsx
|
||||
import { getPayload } from 'payload';
|
||||
import config from '@payload-config';
|
||||
import VpsPricing from './components/VpsPricing';
|
||||
import FeaturesGrid from './components/FeaturesGrid';
|
||||
|
||||
export default async function HomePage() {
|
||||
const payload = await getPayload({ config });
|
||||
|
||||
const plans = await payload.find({
|
||||
collection: 'vps-plans',
|
||||
sort: 'price',
|
||||
});
|
||||
|
||||
const features = await payload.find({
|
||||
collection: 'features',
|
||||
sort: 'order',
|
||||
});
|
||||
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<FeaturesGrid features={features.docs} />
|
||||
<VpsPricing plans={plans.docs} />
|
||||
<CtaSection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pricing Component
|
||||
|
||||
```typescript
|
||||
// app/(frontend)/components/VpsPricing.tsx
|
||||
import type { VpsPlan } from '@payload-types';
|
||||
|
||||
interface VpsPricingProps {
|
||||
plans: VpsPlan[];
|
||||
}
|
||||
|
||||
export default function VpsPricing({ plans }: VpsPricingProps) {
|
||||
return (
|
||||
<section className="py-20 bg-dark">
|
||||
<div className="container">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold mb-4">
|
||||
Simple, Transparent Pricing
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
No hidden fees. Pay only for what you use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
className={`p-8 rounded-2xl ${
|
||||
plan.isPopular
|
||||
? 'bg-dark-light border-primary border-2'
|
||||
: 'bg-dark-light border border-gray-800'
|
||||
}`}
|
||||
>
|
||||
{plan.isPopular && (
|
||||
<span className="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Most Popular
|
||||
</span>
|
||||
)}
|
||||
|
||||
<h3 className="text-xl font-semibold mt-4 mb-2">
|
||||
{plan.name}
|
||||
</h3>
|
||||
|
||||
<div className="text-4xl font-bold mb-2">
|
||||
${plan.price}
|
||||
<span className="text-sm text-gray-400 font-normal">
|
||||
/{plan.billingPeriod}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 my-6">
|
||||
<li className="flex items-center gap-2">
|
||||
<i className="bi bi-check-circle-fill text-primary" />
|
||||
{plan.vcpuCores} vCPU Cores
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<i className="bi bi-check-circle-fill text-primary" />
|
||||
{plan.ram} GB RAM
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<i className="bi bi-check-circle-fill text-primary" />
|
||||
{plan.storage} GB NVMe Storage
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<i className="bi bi-check-circle-fill text-primary" />
|
||||
{plan.bandwidth} Bandwidth
|
||||
</li>
|
||||
{plan.features?.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-center gap-2">
|
||||
<i className="bi bi-check-circle-fill text-primary" />
|
||||
{feature.feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<button
|
||||
className={`w-full py-3 rounded-lg font-semibold ${
|
||||
plan.isPopular
|
||||
? 'bg-primary text-white'
|
||||
: 'border-2 border-gray-600 text-white'
|
||||
}`}
|
||||
>
|
||||
{plan.ctaText}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Payload Config Example
|
||||
|
||||
```typescript
|
||||
// payload.config.ts
|
||||
import { buildConfig } from 'payload';
|
||||
import { lexicalEditor } from '@payloadcms/richtext-lexical';
|
||||
import { mongooseAdapter } from '@payloadcms/db-mongodb';
|
||||
import { nodemailerAdapter } from '@payloadcms/email-nodemailer';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
import { Users } from './collections/Users';
|
||||
import { VpsPlans } from './collections/VpsPlans';
|
||||
import { Features } from './collections/Features';
|
||||
import { Media } from './collections/Media';
|
||||
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
|
||||
export default buildConfig({
|
||||
admin: {
|
||||
user: Users.slug,
|
||||
importMap: {
|
||||
baseDir: path.resolve(dirname),
|
||||
},
|
||||
},
|
||||
collections: [
|
||||
Users,
|
||||
VpsPlans,
|
||||
Features,
|
||||
Media,
|
||||
],
|
||||
editor: lexicalEditor(),
|
||||
db: mongooseAdapter({
|
||||
url: process.env.DATABASE_URI || '',
|
||||
}),
|
||||
email: nodemailerAdapter({
|
||||
defaultFromAddress: 'noreply@example.com',
|
||||
defaultFromName: 'CloudVPS',
|
||||
}),
|
||||
typescript: {
|
||||
outputFile: path.resolve(dirname, 'payload-types.ts'),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Usage in QwenClaw
|
||||
|
||||
### Basic Payload Project Creation
|
||||
|
||||
```
|
||||
Use the payloadcms-cms skill to create a new PayloadCMS project for a VPS hosting landing page with:
|
||||
- VPS plans collection (name, price, specs, features)
|
||||
- Features collection (title, description, icon)
|
||||
- Testimonials collection
|
||||
- Media library for images
|
||||
```
|
||||
|
||||
### Query Payload Data
|
||||
|
||||
```
|
||||
Use payloadcms-cms to query all VPS plans sorted by price and display them in a pricing table
|
||||
```
|
||||
|
||||
### Create Collection
|
||||
|
||||
```
|
||||
Use payloadcms-cms skill to create a new collection for data centers with:
|
||||
- name (text)
|
||||
- location (text)
|
||||
- region (select: US, EU, Asia)
|
||||
- features (array: DDoS protection, NVMe, 10Gbps)
|
||||
- latitude/longitude for map
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Type Safety
|
||||
```typescript
|
||||
// Always import generated types
|
||||
import type { Post, User } from '@payload-types';
|
||||
```
|
||||
|
||||
### 2. Depth for Relationships
|
||||
```typescript
|
||||
// Use depth to populate relationships
|
||||
const post = await payload.findByID({
|
||||
collection: 'posts',
|
||||
id: postId,
|
||||
depth: 2,
|
||||
});
|
||||
```
|
||||
|
||||
### 3. Access Control
|
||||
```typescript
|
||||
// Always define access control
|
||||
access: {
|
||||
read: () => true,
|
||||
create: ({ req }) => !!req.user,
|
||||
update: ({ req }) => !!req.user,
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Validation
|
||||
```typescript
|
||||
// Add validation to fields
|
||||
{
|
||||
name: 'email',
|
||||
type: 'email',
|
||||
required: true,
|
||||
validate: (value) => {
|
||||
if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
||||
return 'Invalid email format';
|
||||
}
|
||||
return true;
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
### Official
|
||||
- **Website**: https://payloadcms.com/
|
||||
- **GitHub**: https://github.com/payloadcms/payload
|
||||
- **Documentation**: https://payloadcms.com/docs
|
||||
- **Examples**: https://github.com/payloadcms/payload/tree/main/examples
|
||||
|
||||
### Templates
|
||||
- **Website**: `pnpx create-payload-app@latest -t website`
|
||||
- **E-commerce**: `pnpx create-payload-app@latest -t ecommerce`
|
||||
- **Blank**: `pnpx create-payload-app@latest -t blank`
|
||||
|
||||
---
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
```yaml
|
||||
name: payloadcms-cms
|
||||
version: 1.0.0
|
||||
category: development
|
||||
description: PayloadCMS project creation, configuration, and development
|
||||
author: PayloadCMS Team (https://github.com/payloadcms)
|
||||
license: MIT
|
||||
tags:
|
||||
- cms
|
||||
- nextjs
|
||||
- typescript
|
||||
- react
|
||||
- backend
|
||||
- admin-panel
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Skill ready for QwenClaw integration!** 🚀
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.10.0",
|
||||
"lastUpdated": "2026-02-26",
|
||||
"totalSkills": 81,
|
||||
"totalSkills": 152,
|
||||
"sources": [
|
||||
{
|
||||
"name": "awesome-claude-skills",
|
||||
@@ -39,10 +39,40 @@
|
||||
"note": "Skill-based agent system with 50+ specialist agents (MCP integration)"
|
||||
},
|
||||
{
|
||||
"name": "shadcn-ui-design",
|
||||
"url": "https://github.com/shadcn/ui",
|
||||
"name": "skills-sh",
|
||||
"url": "https://skills.sh",
|
||||
"skillsCount": 50,
|
||||
"note": "Vercel Skills platform - 200+ community skills including frontend-design, azure-ai, and more"
|
||||
},
|
||||
{
|
||||
"name": "anthropic-frontend-design",
|
||||
"url": "https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md",
|
||||
"skillsCount": 1,
|
||||
"note": "shadcn/ui design patterns and component generation with React, Tailwind CSS, and Radix UI"
|
||||
"note": "Anthropic's official frontend design skill for distinctive, production-grade interfaces"
|
||||
},
|
||||
{
|
||||
"name": "awesome-ralph",
|
||||
"url": "https://github.com/snwfdhmp/awesome-ralph",
|
||||
"skillsCount": 15,
|
||||
"note": "Ralph Wiggum autonomous agent loop methodologies and implementations"
|
||||
},
|
||||
{
|
||||
"name": "spark-intelligence",
|
||||
"url": "https://github.com/vibeforge1111/vibeship-spark-intelligence",
|
||||
"skillsCount": 1,
|
||||
"note": "Self-evolving AI companion - captures sessions, distills insights, delivers pre-tool advisory guidance"
|
||||
},
|
||||
{
|
||||
"name": "suparalph-security",
|
||||
"url": "https://github.com/vibeforge1111/vibeship-suparalph",
|
||||
"skillsCount": 1,
|
||||
"note": "Supabase penetration testing with 277 attack vectors, AI-powered fixes, CI/CD integration"
|
||||
},
|
||||
{
|
||||
"name": "payloadcms-cms",
|
||||
"url": "https://github.com/payloadcms/payload",
|
||||
"skillsCount": 1,
|
||||
"note": "PayloadCMS project creation, configuration, and development with Next.js, TypeScript, and admin panel"
|
||||
},
|
||||
{
|
||||
"name": "qwenbot-integration",
|
||||
@@ -322,6 +352,41 @@
|
||||
"source": "shadcn/ui",
|
||||
"features": ["50+ Components", "Accessible (WCAG)", "Dark Mode", "Responsive", "TypeScript", "Customizable"]
|
||||
},
|
||||
{
|
||||
"name": "payloadcms-cms",
|
||||
"category": "development",
|
||||
"description": "PayloadCMS project creation, configuration, and development with Next.js, TypeScript, admin panel, and database integration",
|
||||
"source": "payloadcms/payload",
|
||||
"features": ["Next.js Native", "TypeScript", "Admin Panel", "Auth", "Versions", "Localization", "Blocks", "Lexical Editor"]
|
||||
},
|
||||
{
|
||||
"name": "frontend-design",
|
||||
"category": "design",
|
||||
"description": "Anthropic's official frontend design skill for creating distinctive, production-grade interfaces that avoid generic AI aesthetics",
|
||||
"source": "anthropics/claude-code",
|
||||
"features": ["Bold Aesthetic Direction", "Typography Excellence", "Color Theory", "Motion Design", "Spatial Composition", "Anti-AI-Slop"]
|
||||
},
|
||||
{
|
||||
"name": "spark-intelligence",
|
||||
"category": "automation",
|
||||
"description": "Self-evolving AI companion that captures QwenClaw sessions, distills insights, and delivers pre-tool advisory guidance to prevent mistakes",
|
||||
"source": "vibeforge1111/vibeship-spark-intelligence",
|
||||
"features": ["Pre-Tool Advisory", "Memory Capture", "Anti-Pattern Detection", "Auto-Promotion", "EIDOS Loop", "Obsidian Observatory", "100% Local"]
|
||||
},
|
||||
{
|
||||
"name": "suparalph-security",
|
||||
"category": "security",
|
||||
"description": "Supabase penetration testing with 277 attack vectors across RLS, Auth, API, Storage, Functions, Database, Vibecoder, and Realtime",
|
||||
"source": "vibeforge1111/vibeship-suparalph",
|
||||
"features": ["277 Attack Vectors", "Active Testing", "AI-Powered Fixes", "CI/CD Integration", "OWASP Mapping", "Zero Persistence", "Real-time UI"]
|
||||
},
|
||||
{
|
||||
"name": "ralph-autonomous-agent",
|
||||
"category": "automation",
|
||||
"description": "Ralph Wiggum autonomous agent loop methodologies - PRD-driven development with automated AI agent loops until specifications are fulfilled",
|
||||
"source": "snwfdhmp/awesome-ralph",
|
||||
"features": ["Autonomous Loops", "PRD-Driven", "Test-Driven", "Multi-Agent", "Context Management", "Backpressure Technique"]
|
||||
},
|
||||
{
|
||||
"name": "agents-council-integration",
|
||||
"category": "multi-agent",
|
||||
|
||||
431
skills/spark-intelligence/SKILL.md
Normal file
431
skills/spark-intelligence/SKILL.md
Normal file
@@ -0,0 +1,431 @@
|
||||
# Spark Intelligence Skill for QwenClaw
|
||||
|
||||
## Overview
|
||||
|
||||
**Name:** spark-intelligence
|
||||
**Source:** https://github.com/vibeforge1111/vibeship-spark-intelligence
|
||||
**Website:** https://spark.vibeship.co
|
||||
|
||||
**Spark Intelligence** is a **self-evolving AI companion** that transforms QwenClaw into a learning system that remembers, adapts, and improves continuously.
|
||||
|
||||
---
|
||||
|
||||
## What Spark Does
|
||||
|
||||
Spark closes the intelligence loop for QwenClaw:
|
||||
|
||||
```
|
||||
QwenClaw Session → Spark Captures Events → Pipeline Filters Noise →
|
||||
Quality Gate Scores Insights → Storage → Advisory Delivery →
|
||||
Pre-Tool Guidance → Outcomes Feed Back → System Evolves
|
||||
```
|
||||
|
||||
### Key Capabilities
|
||||
|
||||
| Capability | Description |
|
||||
|------------|-------------|
|
||||
| **Pre-Tool Advisory** | Surfaces warnings/notes BEFORE QwenClaw executes tools |
|
||||
| **Memory Capture** | Automatically captures important user preferences and patterns |
|
||||
| **Anti-Pattern Detection** | Identifies recurring mistakes (e.g., "edit without read") |
|
||||
| **Auto-Promotion** | Validated insights promote to CLAUDE.md, AGENTS.md, SOUL.md |
|
||||
| **EIDOS Loop** | Prediction → outcome → evaluation for continuous learning |
|
||||
| **Domain Chips** | Pluggable expertise modules for specialized domains |
|
||||
| **Obsidian Observatory** | 465+ auto-generated markdown pages with live queries |
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Prerequisites
|
||||
- Python 3.10+
|
||||
- pip
|
||||
- Git
|
||||
|
||||
### Windows One-Command Install
|
||||
```powershell
|
||||
irm https://raw.githubusercontent.com/vibeforge1111/vibeship-spark-intelligence/main/install.ps1 | iex
|
||||
```
|
||||
|
||||
### Mac/Linux One-Command Install
|
||||
```bash
|
||||
curl -fsSL https://raw.githubusercontent.com/vibeforge1111/vibeship-spark-intelligence/main/install.sh | bash
|
||||
```
|
||||
|
||||
### Manual Install
|
||||
```bash
|
||||
git clone https://github.com/vibeforge1111/vibeship-spark-intelligence
|
||||
cd vibeship-spark-intelligence
|
||||
python -m venv .venv && source .venv/bin/activate # Mac/Linux
|
||||
# or .venv\Scripts\activate # Windows
|
||||
python -m pip install -e .[services]
|
||||
```
|
||||
|
||||
### Verify Installation
|
||||
```bash
|
||||
python -m spark.cli health
|
||||
python -m spark.cli learnings
|
||||
python -m spark.cli up
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration with QwenClaw
|
||||
|
||||
### Step 1: Install Spark Intelligence
|
||||
Run the installation command above.
|
||||
|
||||
### Step 2: Configure QwenClaw Session Hook
|
||||
|
||||
Add to QwenClaw's session initialization:
|
||||
|
||||
```javascript
|
||||
// In qwenclaw.js or session config
|
||||
const sparkConfig = {
|
||||
enabled: true,
|
||||
sessionId: `qwenclaw-${Date.now()}`,
|
||||
hooks: {
|
||||
preToolUse: true,
|
||||
postToolUse: true,
|
||||
userPrompt: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Step 3: Enable Event Capture
|
||||
|
||||
Spark captures QwenClaw events:
|
||||
|
||||
```bash
|
||||
# Start Spark pipeline
|
||||
python -m spark.cli up
|
||||
|
||||
# Start QwenClaw
|
||||
qwenclaw start
|
||||
```
|
||||
|
||||
### Step 4: Generate Obsidian Observatory (Optional)
|
||||
|
||||
```bash
|
||||
python scripts/generate_observatory.py --force --verbose
|
||||
```
|
||||
|
||||
Vault location: `~/Documents/Obsidian Vault/Spark-Intelligence-Observatory`
|
||||
|
||||
---
|
||||
|
||||
## Advisory Authority Levels
|
||||
|
||||
Spark provides pre-tool guidance with three authority levels:
|
||||
|
||||
| Level | Score | Behavior |
|
||||
|-------|-------|----------|
|
||||
| **BLOCK** | 0.95+ | Prevents the action entirely |
|
||||
| **WARNING** | 0.80-0.95 | Prominent caution before action |
|
||||
| **NOTE** | 0.48-0.80 | Included in context for awareness |
|
||||
|
||||
### Examples
|
||||
|
||||
**BLOCK Example:**
|
||||
```
|
||||
⚠️ BLOCKED: Spark advisory
|
||||
This command will delete the production database.
|
||||
Last 3 executions resulted in data loss.
|
||||
Confidence: 0.97 | Validated: 12 times
|
||||
```
|
||||
|
||||
**WARNING Example:**
|
||||
```
|
||||
⚠️ WARNING: Spark advisory
|
||||
You're editing this file without reading it first.
|
||||
This pattern failed 4 times in the last 24 hours.
|
||||
Consider: Read the file first, then edit.
|
||||
```
|
||||
|
||||
**NOTE Example:**
|
||||
```
|
||||
ℹ️ NOTE: Spark advisory
|
||||
User prefers `--no-cache` flag for Docker builds.
|
||||
Captured from session #4521.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Memory Capture with Intelligence
|
||||
|
||||
### Automatic Importance Scoring (0.0-1.0)
|
||||
|
||||
| Score | Action | Example Triggers |
|
||||
|-------|--------|-----------------|
|
||||
| ≥0.65 | Auto-save | "remember this", quantitative data |
|
||||
| 0.55-0.65 | Suggest | "I prefer", design constraints |
|
||||
| <0.55 | Ignore | Generic statements, noise |
|
||||
|
||||
### Signals That Boost Importance
|
||||
|
||||
- **Causal language**: "because", "leads to" (+0.15-0.30)
|
||||
- **Quantitative data**: "reduced from 4.2s to 1.6s" (+0.30)
|
||||
- **Technical specificity**: real tools, libraries, patterns (+0.15-0.30)
|
||||
|
||||
### Example Captures
|
||||
|
||||
```
|
||||
User: "Remember: always use --no-cache when building Docker images"
|
||||
→ Spark: Captured (score: 0.82)
|
||||
→ Promoted to: CLAUDE.md
|
||||
|
||||
User: "I prefer TypeScript over JavaScript for large projects"
|
||||
→ Spark: Captured (score: 0.68)
|
||||
→ Promoted to: AGENTS.md
|
||||
|
||||
User: "The build time reduced from 4.2s to 1.6s after caching"
|
||||
→ Spark: Captured (score: 0.91)
|
||||
→ Promoted to: EIDOS pattern
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quality Pipeline
|
||||
|
||||
Every observation passes through rigorous gates:
|
||||
|
||||
```
|
||||
Event → Importance Scoring → Meta-Ralph Quality Gate →
|
||||
Cognitive Storage → Validation Loop → Promotion Decision
|
||||
```
|
||||
|
||||
### Meta-Ralph Quality Scores (0-12)
|
||||
|
||||
Scores on:
|
||||
- **Actionability** (can you act on it?)
|
||||
- **Novelty** (genuine insight vs. obvious)
|
||||
- **Reasoning** (explicit causal explanation)
|
||||
- **Specificity** (context-specific vs. generic)
|
||||
- **Outcome-Linked** (validated by results)
|
||||
|
||||
### Promotion Criteria
|
||||
|
||||
**Track 1 (Reliability):**
|
||||
- Reliability ≥80% AND validated ≥5 times
|
||||
|
||||
**Track 2 (Confidence):**
|
||||
- Confidence ≥95% AND age ≥6 hours AND validated ≥5 times
|
||||
|
||||
**Contradicted insights lose reliability automatically.**
|
||||
|
||||
---
|
||||
|
||||
## EIDOS Episodic Intelligence
|
||||
|
||||
Extracts structured rules from experience:
|
||||
|
||||
| Type | Description | Example |
|
||||
|------|-------------|---------|
|
||||
| **Heuristics** | General rules of thumb | "Always test before deploying" |
|
||||
| **Sharp Edges** | Things to watch out for | "API rate limits hit at 100 req/min" |
|
||||
| **Anti-Patterns** | What not to do | "Don't edit config without backup" |
|
||||
| **Playbooks** | Proven approaches | "Database migration checklist" |
|
||||
| **Policies** | Enforced constraints | "Must have tests for core modules" |
|
||||
|
||||
---
|
||||
|
||||
## Usage in QwenClaw
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```bash
|
||||
# Start Spark pipeline
|
||||
python -m spark.cli up
|
||||
|
||||
# Start QwenClaw (Spark captures automatically)
|
||||
qwenclaw start
|
||||
|
||||
# Send task
|
||||
qwenclaw send "Refactor the authentication module"
|
||||
```
|
||||
|
||||
### Check Spark Status
|
||||
|
||||
```bash
|
||||
python -m spark.cli status
|
||||
python -m spark.cli learnings
|
||||
```
|
||||
|
||||
### View Advisory History
|
||||
|
||||
```bash
|
||||
python -m spark.cli advisories
|
||||
```
|
||||
|
||||
### Promote Insights Manually
|
||||
|
||||
```bash
|
||||
python -m spark.cli promote <insight-id>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Obsidian Observatory
|
||||
|
||||
Spark auto-generates **465+ markdown pages** with live Dataview queries:
|
||||
|
||||
### What's Included
|
||||
|
||||
- **Pipeline Health** - 12-stage pipeline detail pages
|
||||
- **Cognitive Insights** - Stored insights with reliability scores
|
||||
- **EIDOS Episodes** - Pattern distillations
|
||||
- **Advisory Decisions** - Pre-tool guidance history
|
||||
- **Explorer Views** - Real-time data exploration
|
||||
- **Canvas View** - Spatial pipeline visualization
|
||||
|
||||
### Auto-Sync
|
||||
|
||||
Observatory syncs every **120 seconds** when pipeline is running.
|
||||
|
||||
---
|
||||
|
||||
## Measurable Outcomes
|
||||
|
||||
### Advisory Source Effectiveness
|
||||
|
||||
| Source | What It Provides | Effectiveness |
|
||||
|--------|-----------------|---------------|
|
||||
| Cognitive | Validated session insights | ~62% (dominant) |
|
||||
| Bank | User memory banks | ~10% |
|
||||
| EIDOS | Pattern distillations | ~5% |
|
||||
| Baseline | Static rules | ~5% |
|
||||
| Trigger | Event-specific rules | ~5% |
|
||||
| Semantic | BM25 + embedding retrieval | ~3% |
|
||||
|
||||
### Timeline to Value
|
||||
|
||||
| Time | What Happens |
|
||||
|------|--------------|
|
||||
| **Hour 1** | Spark starts capturing events |
|
||||
| **Hour 2-4** | Patterns emerge (tool effectiveness, error patterns) |
|
||||
| **Day 1-2** | Insights get promoted to project files |
|
||||
| **Week 1+** | Advisory goes live with pre-tool guidance |
|
||||
|
||||
---
|
||||
|
||||
## Integration Examples
|
||||
|
||||
### Example 1: Preventing Recurring Errors
|
||||
|
||||
```
|
||||
QwenClaw: About to run: npm install
|
||||
Spark: ⚠️ WARNING
|
||||
Last 3 times you ran `npm install` without --legacy-peer-deps,
|
||||
it failed with ERESOLVE errors.
|
||||
Suggestion: Use `npm install --legacy-peer-deps`
|
||||
Reliability: 0.94 | Validated: 8 times
|
||||
```
|
||||
|
||||
### Example 2: Auto-Promoting Best Practices
|
||||
|
||||
```
|
||||
User: "Remember: always run tests before committing"
|
||||
Spark: Captured (score: 0.78)
|
||||
→ After 5 successful validations:
|
||||
Promoted to CLAUDE.md:
|
||||
"## Testing Policy
|
||||
Always run tests before committing changes.
|
||||
Validated: 12 times | Reliability: 0.96"
|
||||
```
|
||||
|
||||
### Example 3: Domain-Specific Expertise
|
||||
|
||||
```
|
||||
Domain Chip: React Development
|
||||
Spark Advisory:
|
||||
ℹ️ NOTE
|
||||
In this project, useEffect dependencies are managed
|
||||
with eslint-plugin-react-hooks.
|
||||
Missing dependencies auto-fixed 23 times.
|
||||
Reliability: 0.89
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
### spark.config.yaml
|
||||
|
||||
```yaml
|
||||
spark:
|
||||
enabled: true
|
||||
session_id: qwenclaw-${timestamp}
|
||||
|
||||
hooks:
|
||||
pre_tool_use: true
|
||||
post_tool_use: true
|
||||
user_prompt: true
|
||||
|
||||
advisory:
|
||||
enabled: true
|
||||
min_score: 0.48
|
||||
cooldown_seconds: 300
|
||||
|
||||
memory:
|
||||
auto_capture: true
|
||||
min_importance: 0.55
|
||||
|
||||
observatory:
|
||||
enabled: true
|
||||
sync_interval_seconds: 120
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Let Spark Learn Naturally
|
||||
Just use QwenClaw normally. Spark captures and learns in the background.
|
||||
|
||||
### 2. Review Advisories
|
||||
Pay attention to pre-tool warnings. They're based on validated patterns.
|
||||
|
||||
### 3. Provide Explicit Feedback
|
||||
Tell Spark what to remember:
|
||||
- "Remember: always use --force for this legacy package"
|
||||
- "I prefer yarn over npm in this project"
|
||||
|
||||
### 4. Check Observatory
|
||||
Review the Obsidian vault to understand what Spark has learned.
|
||||
|
||||
### 5. Promote High-Value Insights
|
||||
Manually promote insights that are immediately valuable.
|
||||
|
||||
---
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
```yaml
|
||||
name: spark-intelligence
|
||||
version: 1.0.0
|
||||
category: automation
|
||||
description: Self-evolving AI companion that captures, distills, and delivers
|
||||
actionable insights from QwenClaw sessions
|
||||
author: Vibeship (https://github.com/vibeforge1111/vibeship-spark-intelligence)
|
||||
license: MIT
|
||||
tags:
|
||||
- learning
|
||||
- memory
|
||||
- advisory
|
||||
- self-improving
|
||||
- local-first
|
||||
- obsidian
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- **Website:** https://spark.vibeship.co
|
||||
- **GitHub:** https://github.com/vibeforge1111/vibeship-spark-intelligence
|
||||
- **Onboarding:** `docs/SPARK_ONBOARDING_COMPLETE.md`
|
||||
- **Quickstart:** `docs/QUICKSTART.md`
|
||||
- **Obsidian Guide:** `docs/OBSIDIAN_OBSERVATORY_GUIDE.md`
|
||||
|
||||
---
|
||||
|
||||
**Spark Intelligence transforms QwenClaw from a stateless executor into a learning system!** 🧠✨
|
||||
462
skills/suparalph-security/SKILL.md
Normal file
462
skills/suparalph-security/SKILL.md
Normal file
@@ -0,0 +1,462 @@
|
||||
# SupaRalph Security Skill for QwenClaw
|
||||
|
||||
## Overview
|
||||
|
||||
**Name:** suparalph-security
|
||||
**Source:** https://github.com/vibeforge1111/vibeship-suparalph
|
||||
**Mascot:** *"I'm in danger!"* - Ralph Wiggum
|
||||
|
||||
**SupaRalph** is an open-source **Supabase penetration testing and security scanner** that actively tests Supabase projects for vulnerabilities by executing real attacks rather than static analysis.
|
||||
|
||||
---
|
||||
|
||||
## What SupaRalph Does
|
||||
|
||||
| Capability | Description |
|
||||
|------------|-------------|
|
||||
| **Active Testing** | Executes real exploits against your Supabase project |
|
||||
| **277 Attack Vectors** | Full coverage across all Supabase attack surfaces |
|
||||
| **Zero Persistence** | No credentials or results stored - session only |
|
||||
| **AI-Powered Fixes** | Copy findings to Supabase AI for SQL fix generation |
|
||||
| **CI/CD Ready** | GitHub Actions integration for automated scans |
|
||||
| **Compliance Mapping** | OWASP Top 10, SOC2, GDPR coverage |
|
||||
|
||||
---
|
||||
|
||||
## Attack Categories (277 Total Vectors)
|
||||
|
||||
| Category | Attacks | What It Tests |
|
||||
|----------|---------|---------------|
|
||||
| **RLS** | 100+ | Row Level Security bypass, USING(true), missing policies |
|
||||
| **Auth** | 43+ | Weak passwords, MFA bypass, JWT manipulation, session attacks |
|
||||
| **API** | 39+ | GraphQL introspection, CORS, security headers, credentials |
|
||||
| **Storage** | 23+ | Public buckets, path traversal, file type abuse |
|
||||
| **Functions** | 15+ | Edge function auth bypass, rate limit bypass |
|
||||
| **Database** | 14+ | Direct access, injection, extension abuse |
|
||||
| **Vibecoder** | 13+ | Common AI-generated code mistakes |
|
||||
| **Realtime** | 13+ | Subscription leaks, channel hijacking |
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Option 1: Run Locally
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/vibeforge1111/vibeship-suparalph.git
|
||||
cd vibeship-suparalph
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open: http://localhost:5173
|
||||
|
||||
### Option 2: Demo Mode
|
||||
|
||||
Enter `demo` as the URL to see a simulated scan without connecting to a real project.
|
||||
|
||||
---
|
||||
|
||||
## Usage with QwenClaw
|
||||
|
||||
### Basic Security Scan
|
||||
|
||||
```bash
|
||||
# Start QwenClaw
|
||||
qwenclaw start
|
||||
|
||||
# Send task to scan Supabase project
|
||||
qwenclaw send "Use the suparalph-security skill to scan my Supabase project for vulnerabilities"
|
||||
```
|
||||
|
||||
### Interactive Scan
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use suparalph-security to:
|
||||
1. Get my Supabase project URL
|
||||
2. Run a full security scan with 277 attack vectors
|
||||
3. Review findings and generate remediation plan
|
||||
4. Copy critical findings for Supabase AI fix generation"
|
||||
```
|
||||
|
||||
### CI/CD Integration
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use suparalph-security skill to set up GitHub Actions for automated security scanning on every push"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Usage Workflow
|
||||
|
||||
### Step 1: Get Supabase URL
|
||||
|
||||
1. Go to https://supabase.com/dashboard
|
||||
2. Select your project
|
||||
3. Settings → API
|
||||
4. Copy **Project URL**
|
||||
|
||||
### Step 2: Run Security Scan
|
||||
|
||||
**Via Web UI:**
|
||||
1. Open http://localhost:5173
|
||||
2. Paste your Supabase URL
|
||||
3. Optionally add anon key for deeper testing
|
||||
4. Click "BREACH TEST"
|
||||
5. Watch attacks execute in real-time via terminal UI
|
||||
|
||||
**Via QwenClaw:**
|
||||
```bash
|
||||
qwenclaw send "Run SupaRalph security scan on https://your-project.supabase.co"
|
||||
```
|
||||
|
||||
### Step 3: Review Results
|
||||
|
||||
Results show in real-time terminal UI:
|
||||
- ✅ Passed tests (green)
|
||||
- ⚠️ Warnings (yellow)
|
||||
- 🚨 Breached (red)
|
||||
|
||||
### Step 4: Fix Vulnerabilities
|
||||
|
||||
1. Click "Copy Findings for AI"
|
||||
2. Open https://supabase.com/dashboard/project/_/sql/new
|
||||
3. Paste findings
|
||||
4. Ask Supabase AI to generate SQL fixes
|
||||
|
||||
---
|
||||
|
||||
## Integration Patterns
|
||||
|
||||
### Pattern 1: Pre-Deployment Security Check
|
||||
|
||||
```bash
|
||||
qwenclaw send "Before deploying, use suparalph-security to scan the Supabase project and block deployment if critical vulnerabilities found"
|
||||
```
|
||||
|
||||
### Pattern 2: Automated PR Security Review
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use suparalph-security to set up automated security scanning on pull requests with comment on findings"
|
||||
```
|
||||
|
||||
### Pattern 3: AI Agent Security Loop
|
||||
|
||||
```bash
|
||||
# With Ralph Wiggum Loop + Spark Intelligence
|
||||
while :; do
|
||||
qwenclaw send "Use suparalph-security to scan for new vulnerabilities"
|
||||
qwenclaw send "Fix any critical findings with Supabase AI"
|
||||
done
|
||||
```
|
||||
|
||||
### Pattern 4: Compliance Reporting
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use suparalph-security to generate OWASP Top 10 compliance report for audit"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Report Generation
|
||||
|
||||
### JSON Report (Machine-Readable)
|
||||
|
||||
```typescript
|
||||
import { generateJSONReport } from '$lib/engine/reports';
|
||||
|
||||
const json = generateJSONReport(report, {
|
||||
includeEvidence: true,
|
||||
includeCompliance: true
|
||||
});
|
||||
```
|
||||
|
||||
### Markdown Report (Documentation)
|
||||
|
||||
```typescript
|
||||
const md = generateMarkdownReport(report, {
|
||||
includeCompliance: true,
|
||||
includeFixes: true
|
||||
});
|
||||
```
|
||||
|
||||
### HTML Report (Shareable)
|
||||
|
||||
```typescript
|
||||
const html = generateHTMLReport(report);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CI/CD Setup (GitHub Actions)
|
||||
|
||||
### Create `.github/workflows/suparalph-scan.yml`
|
||||
|
||||
```yaml
|
||||
name: SupaRalph Security Scan
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
security-scan:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Run SupaRalph Scan
|
||||
uses: vibeforge1111/suparalph-action@v1
|
||||
with:
|
||||
supabase-url: ${{ secrets.SUPABASE_URL }}
|
||||
supabase-anon-key: ${{ secrets.SUPABASE_ANON_KEY }}
|
||||
fail-on-critical: true
|
||||
generate-report: true
|
||||
|
||||
- name: Upload Security Report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: suparalph-report
|
||||
path: ./suparalph-report.html
|
||||
```
|
||||
|
||||
### Required Secrets
|
||||
|
||||
| Secret | Description |
|
||||
|--------|-------------|
|
||||
| `SUPABASE_URL` | Your Supabase project URL |
|
||||
| `SUPABASE_ANON_KEY` | Your anon/public key |
|
||||
|
||||
---
|
||||
|
||||
## Compliance Mapping
|
||||
|
||||
| Framework | Coverage | Mapped Controls |
|
||||
|-----------|----------|-----------------|
|
||||
| **OWASP Top 10 2021** | A01-A10 | Full coverage |
|
||||
| **SOC2** | CC6.1, CC6.6, CC6.7 | Access control, security controls |
|
||||
| **GDPR** | Articles 32, 33 | Security of processing, breach notification |
|
||||
|
||||
---
|
||||
|
||||
## Security & Privacy
|
||||
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| **Zero Persistence** | No credentials or scan results stored |
|
||||
| **Session Only** | All data cleared when browser closes |
|
||||
| **No Server Storage** | Scans run client-side |
|
||||
| **Open Source** | Full code transparency |
|
||||
| **Authorized Testing Only** | Only scan projects you own or have permission to test |
|
||||
|
||||
---
|
||||
|
||||
## Usage in QwenClaw
|
||||
|
||||
### Basic Scan
|
||||
|
||||
```
|
||||
Use the suparalph-security skill to scan my Supabase project at https://my-project.supabase.co
|
||||
```
|
||||
|
||||
### Full Security Audit
|
||||
|
||||
```
|
||||
Use suparalph-security to:
|
||||
1. Run all 277 attack vectors
|
||||
2. Generate JSON report with evidence
|
||||
3. Generate Markdown compliance report for OWASP Top 10
|
||||
4. Create GitHub issue for each critical finding
|
||||
```
|
||||
|
||||
### Automated Fix Workflow
|
||||
|
||||
```
|
||||
Use suparalph-security with spark-intelligence to:
|
||||
1. Scan for vulnerabilities
|
||||
2. Capture findings in Spark memory
|
||||
3. Generate pre-tool advisory for future similar issues
|
||||
4. Copy critical findings to Supabase AI for fixes
|
||||
```
|
||||
|
||||
### Vibecoder Analysis (AI-Generated Code)
|
||||
|
||||
```
|
||||
Use suparalph-security to scan for Vibecoder vulnerabilities (common AI-generated code mistakes) and provide remediation guidance
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Attack Vector Examples
|
||||
|
||||
### RLS Bypass (Critical)
|
||||
|
||||
```typescript
|
||||
// Attack: Missing RLS policy
|
||||
{
|
||||
id: 'rls-missing-policy',
|
||||
name: 'Missing RLS Policy',
|
||||
description: 'Table has no RLS policies configured',
|
||||
severity: 'critical',
|
||||
async execute(ctx) {
|
||||
// Check if RLS is enabled
|
||||
// Check for policies on all tables
|
||||
return {
|
||||
breached: true,
|
||||
status: 'breached',
|
||||
summary: 'Table "users" has no RLS policies',
|
||||
evidence: { table: 'users', policies: [] }
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Auth: Weak Password Policy
|
||||
|
||||
```typescript
|
||||
// Attack: Weak password requirements
|
||||
{
|
||||
id: 'auth-weak-password',
|
||||
name: 'Weak Password Policy',
|
||||
description: 'Password requirements are below security standards',
|
||||
severity: 'high',
|
||||
async execute(ctx) {
|
||||
// Test minimum password length
|
||||
// Test complexity requirements
|
||||
return {
|
||||
breached: true,
|
||||
status: 'warning',
|
||||
summary: 'Minimum password length is 6 (recommended: 12+)',
|
||||
evidence: { minLength: 6, recommended: 12 }
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Vibecoder: AI-Generated Mistake
|
||||
|
||||
```typescript
|
||||
// Attack: Common AI-generated code vulnerability
|
||||
{
|
||||
id: 'vibecoder-hardcoded-secrets',
|
||||
name: 'Hardcoded Secrets in Code',
|
||||
description: 'AI-generated code often includes hardcoded API keys',
|
||||
severity: 'critical',
|
||||
async execute(ctx) {
|
||||
// Scan for hardcoded credentials
|
||||
return {
|
||||
breached: true,
|
||||
status: 'breached',
|
||||
summary: 'Hardcoded API key found in edge function',
|
||||
evidence: { file: 'send-email.ts', line: 15 }
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Scan Before Deployment
|
||||
Always run SupaRalph before deploying to production.
|
||||
|
||||
### 2. Automate with CI/CD
|
||||
Set up GitHub Actions for automated scans on every push/PR.
|
||||
|
||||
### 3. Fix Critical First
|
||||
Prioritize critical and high severity findings.
|
||||
|
||||
### 4. Use Supabase AI for Fixes
|
||||
Copy findings to Supabase SQL Editor and ask AI to generate fixes.
|
||||
|
||||
### 5. Regular Scanning
|
||||
Schedule weekly or monthly security scans.
|
||||
|
||||
### 6. Combine with Spark Intelligence
|
||||
Use Spark to capture security patterns and prevent future vulnerabilities.
|
||||
|
||||
---
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
### With Spark Intelligence
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use suparalph-security to scan, then spark-intelligence to capture findings as pre-tool advisories for future development"
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
- Spark remembers vulnerabilities found
|
||||
- Pre-tool advisory warns before similar mistakes
|
||||
- Auto-promotes security best practices to CLAUDE.md
|
||||
|
||||
### With Ralph Autonomous Agent
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use ralph-autonomous-agent with suparalph-security to continuously scan and fix vulnerabilities in a loop"
|
||||
```
|
||||
|
||||
**Loop Pattern:**
|
||||
```bash
|
||||
while :; do
|
||||
qwenclaw send "Scan with suparalph-security"
|
||||
qwenclaw send "Fix critical findings"
|
||||
qwenclaw send "Re-scan to verify fixes"
|
||||
done
|
||||
```
|
||||
|
||||
### With Frontend-Design
|
||||
|
||||
```bash
|
||||
qwenclaw send "Use frontend-design skill to create a security dashboard that displays SupaRalph scan results"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Skill Metadata
|
||||
|
||||
```yaml
|
||||
name: suparalph-security
|
||||
version: 1.0.0
|
||||
category: security
|
||||
description: Supabase penetration testing with 277 attack vectors,
|
||||
AI-powered fixes, and CI/CD integration
|
||||
author: Vibeship (https://github.com/vibeforge1111/vibeship-suparalph)
|
||||
license: MIT
|
||||
tags:
|
||||
- security
|
||||
- supabase
|
||||
- penetration-testing
|
||||
- compliance
|
||||
- owasp
|
||||
- ci-cd
|
||||
- ai-fixes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- **GitHub:** https://github.com/vibeforge1111/vibeship-suparalph
|
||||
- **Demo:** http://localhost:5173 (run locally) or enter `demo` for simulated scan
|
||||
- **Supabase Dashboard:** https://supabase.com/dashboard
|
||||
- **Supabase AI:** https://supabase.com/dashboard/project/_/sql/new
|
||||
|
||||
---
|
||||
|
||||
## Disclaimer
|
||||
|
||||
> ⚠️ **For authorized testing only.** Only scan Supabase projects you own or have explicit permission to test. SupaRalph performs real attacks that could affect data. Use responsibly.
|
||||
|
||||
---
|
||||
|
||||
**SupaRalph: "I'm in danger!" - But your Supabase project doesn't have to be!** 🔒✨
|
||||
Reference in New Issue
Block a user