opencode-skills-collection 2.0.37 → 2.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundled-skills/.antigravity-install-manifest.json +4 -1
- package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
- package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
- package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
- package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
- package/bundled-skills/docs/users/bundles.md +1 -1
- package/bundled-skills/docs/users/claude-code-skills.md +1 -1
- package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
- package/bundled-skills/docs/users/kiro-integration.md +1 -1
- package/bundled-skills/docs/users/usage.md +4 -4
- package/bundled-skills/docs/users/visual-guide.md +4 -4
- package/bundled-skills/puzzle-activity-planner/SKILL.md +71 -0
- package/bundled-skills/rayden-code/SKILL.md +104 -0
- package/bundled-skills/rayden-use/SKILL.md +107 -0
- package/bundled-skills/sales-automator/SKILL.md +1 -7
- package/package.json +1 -1
- package/skills_index.json +67 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
|
-
"updatedAt": "2026-04-
|
|
3
|
+
"updatedAt": "2026-04-11T18:48:47.035Z",
|
|
4
4
|
"entries": [
|
|
5
5
|
"00-andruia-consultant",
|
|
6
6
|
"007",
|
|
@@ -1008,6 +1008,7 @@
|
|
|
1008
1008
|
"protect-mcp-governance",
|
|
1009
1009
|
"protocol-reverse-engineering",
|
|
1010
1010
|
"pubmed-database",
|
|
1011
|
+
"puzzle-activity-planner",
|
|
1011
1012
|
"pydantic-ai",
|
|
1012
1013
|
"pydantic-models-py",
|
|
1013
1014
|
"pypict-skill",
|
|
@@ -1025,6 +1026,8 @@
|
|
|
1025
1026
|
"radix-ui-design-system",
|
|
1026
1027
|
"rag-engineer",
|
|
1027
1028
|
"rag-implementation",
|
|
1029
|
+
"rayden-code",
|
|
1030
|
+
"rayden-use",
|
|
1028
1031
|
"react-best-practices",
|
|
1029
1032
|
"react-component-performance",
|
|
1030
1033
|
"react-flow-architect",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Jetski/Cortex + Gemini Integration Guide
|
|
3
|
-
description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.
|
|
3
|
+
description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.400+ skills."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Jetski/Cortex + Gemini: safe integration with 1,1.
|
|
6
|
+
# Jetski/Cortex + Gemini: safe integration with 1,1.400+ skills
|
|
7
7
|
|
|
8
8
|
This guide shows how to integrate the `antigravity-awesome-skills` repository with an agent based on **Jetski/Cortex + Gemini** (or similar frameworks) **without exceeding the model context window**.
|
|
9
9
|
|
|
@@ -23,7 +23,7 @@ Never do:
|
|
|
23
23
|
- concatenate all `SKILL.md` content into a single system prompt;
|
|
24
24
|
- re-inject the entire library for **every** request.
|
|
25
25
|
|
|
26
|
-
With over 1,1.
|
|
26
|
+
With over 1,1.400 skills, this approach fills the context window before user messages are even added, causing truncation.
|
|
27
27
|
|
|
28
28
|
---
|
|
29
29
|
|
|
@@ -20,7 +20,7 @@ This example shows one way to integrate **antigravity-awesome-skills** with a Je
|
|
|
20
20
|
- How to enforce a **maximum number of skills per turn** via `maxSkillsPerTurn`.
|
|
21
21
|
- How to choose whether to **truncate or error** when too many skills are requested via `overflowBehavior`.
|
|
22
22
|
|
|
23
|
-
This pattern avoids context overflow when you have 1,
|
|
23
|
+
This pattern avoids context overflow when you have 1,400+ skills installed.
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
@@ -6,7 +6,7 @@ This document keeps the repository's GitHub-facing discovery copy aligned with t
|
|
|
6
6
|
|
|
7
7
|
Preferred positioning:
|
|
8
8
|
|
|
9
|
-
> Installable GitHub library of 1,
|
|
9
|
+
> Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.
|
|
10
10
|
|
|
11
11
|
Key framing:
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@ Key framing:
|
|
|
20
20
|
|
|
21
21
|
Preferred description:
|
|
22
22
|
|
|
23
|
-
> Installable GitHub library of 1,
|
|
23
|
+
> Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
|
|
24
24
|
|
|
25
25
|
Preferred homepage:
|
|
26
26
|
|
|
@@ -28,7 +28,7 @@ Preferred homepage:
|
|
|
28
28
|
|
|
29
29
|
Preferred social preview:
|
|
30
30
|
|
|
31
|
-
- use a clean preview image that says `1,
|
|
31
|
+
- use a clean preview image that says `1,400+ Agentic Skills`;
|
|
32
32
|
- mention Claude Code, Cursor, Codex CLI, and Gemini CLI;
|
|
33
33
|
- avoid dense text and tiny logos that disappear in social cards.
|
|
34
34
|
|
|
@@ -69,7 +69,7 @@ For manual updates, you need:
|
|
|
69
69
|
The update process refreshes:
|
|
70
70
|
- Skills index (`skills_index.json`)
|
|
71
71
|
- Web app skills data (`apps\web-app\public\skills.json`)
|
|
72
|
-
- All 1,
|
|
72
|
+
- All 1,400+ skills from the skills directory
|
|
73
73
|
|
|
74
74
|
## When to Update
|
|
75
75
|
|
|
@@ -12,7 +12,7 @@ Install the library into Claude Code, then invoke focused skills directly in the
|
|
|
12
12
|
|
|
13
13
|
## Why use this repo for Claude Code
|
|
14
14
|
|
|
15
|
-
- It includes 1,
|
|
15
|
+
- It includes 1,400+ skills instead of a narrow single-domain starter pack.
|
|
16
16
|
- It supports the standard `.claude/skills/` path and the Claude Code plugin marketplace flow.
|
|
17
17
|
- It also ships generated bundle plugins so teams can install focused packs like `Essentials` or `Security Developer` from the marketplace metadata.
|
|
18
18
|
- It includes onboarding docs, bundles, and workflows so new users do not need to guess where to begin.
|
|
@@ -12,7 +12,7 @@ Install into the Gemini skills path, then ask Gemini to apply one skill at a tim
|
|
|
12
12
|
|
|
13
13
|
- It installs directly into the expected Gemini skills path.
|
|
14
14
|
- It includes both core software engineering skills and deeper agent/LLM-oriented skills.
|
|
15
|
-
- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,
|
|
15
|
+
- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,400+ files.
|
|
16
16
|
- It is useful whether you want a broad internal skill library or a single repo to test many workflows quickly.
|
|
17
17
|
|
|
18
18
|
## Install Gemini CLI Skills
|
|
@@ -18,7 +18,7 @@ Kiro is AWS's agentic AI IDE that combines:
|
|
|
18
18
|
|
|
19
19
|
Kiro's agentic capabilities are enhanced by skills that provide:
|
|
20
20
|
|
|
21
|
-
- **Domain expertise** across 1,
|
|
21
|
+
- **Domain expertise** across 1,400+ specialized areas
|
|
22
22
|
- **Best practices** from Anthropic, OpenAI, Google, Microsoft, and AWS
|
|
23
23
|
- **Workflow automation** for common development tasks
|
|
24
24
|
- **AWS-specific patterns** for serverless, infrastructure, and cloud architecture
|
|
@@ -14,7 +14,7 @@ If you came in through a **Claude Code** or **Codex** plugin instead of a full l
|
|
|
14
14
|
|
|
15
15
|
When you ran `npx antigravity-awesome-skills` or cloned the repository, you:
|
|
16
16
|
|
|
17
|
-
✅ **Downloaded 1,
|
|
17
|
+
✅ **Downloaded 1,400+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`)
|
|
18
18
|
✅ **Made them available** to your AI assistant
|
|
19
19
|
❌ **Did NOT enable them all automatically** (they're just sitting there, waiting)
|
|
20
20
|
|
|
@@ -34,7 +34,7 @@ Bundles are **curated groups** of skills organized by role. They help you decide
|
|
|
34
34
|
|
|
35
35
|
**Analogy:**
|
|
36
36
|
|
|
37
|
-
- You installed a toolbox with 1,
|
|
37
|
+
- You installed a toolbox with 1,400+ tools (✅ done)
|
|
38
38
|
- Bundles are like **labeled organizer trays** saying: "If you're a carpenter, start with these 10 tools"
|
|
39
39
|
- You can either **pick skills from the tray** or install that tray as a focused marketplace bundle plugin
|
|
40
40
|
|
|
@@ -212,7 +212,7 @@ Let's actually use a skill right now. Follow these steps:
|
|
|
212
212
|
|
|
213
213
|
## Step 5: Picking Your First Skills (Practical Advice)
|
|
214
214
|
|
|
215
|
-
Don't try to use all 1,
|
|
215
|
+
Don't try to use all 1,400+ skills at once. Here's a sensible approach:
|
|
216
216
|
|
|
217
217
|
If you want a tool-specific starting point before choosing skills, use:
|
|
218
218
|
|
|
@@ -343,7 +343,7 @@ Usually no, but if your AI doesn't recognize a skill:
|
|
|
343
343
|
|
|
344
344
|
### "Can I load all skills into the model at once?"
|
|
345
345
|
|
|
346
|
-
No. Even though you have 1,
|
|
346
|
+
No. Even though you have 1,400+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block.
|
|
347
347
|
|
|
348
348
|
The intended pattern is:
|
|
349
349
|
|
|
@@ -34,7 +34,7 @@ antigravity-awesome-skills/
|
|
|
34
34
|
├── 📄 CONTRIBUTING.md ← Contributor workflow
|
|
35
35
|
├── 📄 CATALOG.md ← Full generated catalog
|
|
36
36
|
│
|
|
37
|
-
├── 📁 skills/ ← 1,
|
|
37
|
+
├── 📁 skills/ ← 1,400+ skills live here
|
|
38
38
|
│ │
|
|
39
39
|
│ ├── 📁 brainstorming/
|
|
40
40
|
│ │ └── 📄 SKILL.md ← Skill definition
|
|
@@ -47,7 +47,7 @@ antigravity-awesome-skills/
|
|
|
47
47
|
│ │ └── 📁 2d-games/
|
|
48
48
|
│ │ └── 📄 SKILL.md ← Nested skills also supported
|
|
49
49
|
│ │
|
|
50
|
-
│ └── ... (1,
|
|
50
|
+
│ └── ... (1,400+ total)
|
|
51
51
|
│
|
|
52
52
|
├── 📁 apps/
|
|
53
53
|
│ └── 📁 web-app/ ← Interactive browser
|
|
@@ -100,7 +100,7 @@ antigravity-awesome-skills/
|
|
|
100
100
|
|
|
101
101
|
```
|
|
102
102
|
┌─────────────────────────┐
|
|
103
|
-
│ 1,
|
|
103
|
+
│ 1,400+ SKILLS │
|
|
104
104
|
└────────────┬────────────┘
|
|
105
105
|
│
|
|
106
106
|
┌────────────────────────┼────────────────────────┐
|
|
@@ -201,7 +201,7 @@ If you want a workspace-style manual install instead, cloning into `.agent/skill
|
|
|
201
201
|
│ ├── 📁 brainstorming/ │
|
|
202
202
|
│ ├── 📁 stripe-integration/ │
|
|
203
203
|
│ ├── 📁 react-best-practices/ │
|
|
204
|
-
│ └── ... (1,
|
|
204
|
+
│ └── ... (1,400+ total) │
|
|
205
205
|
└─────────────────────────────────────────┘
|
|
206
206
|
```
|
|
207
207
|
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: puzzle-activity-planner
|
|
3
|
+
description: "Plan puzzle-based activities for classrooms, parties, and events with pre-configured generator links"
|
|
4
|
+
category: education
|
|
5
|
+
risk: safe
|
|
6
|
+
source: community
|
|
7
|
+
source_repo: fruitwyatt/puzzle-activity-planner
|
|
8
|
+
source_type: community
|
|
9
|
+
date_added: "2026-04-11"
|
|
10
|
+
author: fruitwyatt
|
|
11
|
+
tags: [education, puzzle, classroom, activity-planning, event]
|
|
12
|
+
tools: [claude, cursor, gemini, codex]
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Puzzle Activity Planner
|
|
16
|
+
|
|
17
|
+
## Overview
|
|
18
|
+
|
|
19
|
+
Plans engaging puzzle-based activities for classrooms, parties, team-building sessions, and events. Given an event description, audience, and goal, produces a structured activity plan with pre-configured generator links that include URL parameters for one-click ready-to-use puzzles.
|
|
20
|
+
|
|
21
|
+
## When to Use This Skill
|
|
22
|
+
|
|
23
|
+
- Planning a classroom lesson with puzzle activities
|
|
24
|
+
- Organizing party games involving puzzles
|
|
25
|
+
- Creating team-building sessions with multiple puzzle types
|
|
26
|
+
- Preparing educational activities for kids, students, or adults
|
|
27
|
+
|
|
28
|
+
## Process
|
|
29
|
+
|
|
30
|
+
1. **Understand the event** - audience, group size, duration, theme
|
|
31
|
+
2. **Select puzzle types** - match difficulty and format to the audience
|
|
32
|
+
3. **Build timeline** - minute-by-minute flow with transitions
|
|
33
|
+
4. **Generate links** - pre-configured URLs with theme content baked in
|
|
34
|
+
5. **Create prep checklist** - print quantities and materials needed
|
|
35
|
+
|
|
36
|
+
## Puzzle Types Supported
|
|
37
|
+
|
|
38
|
+
- **Word Search** - vocabulary building, warm-ups, brain training
|
|
39
|
+
- **Crossword** - vocabulary review, test prep, party games
|
|
40
|
+
- **Sudoku** - math warm-ups, logic training, focus time
|
|
41
|
+
- **Bingo** - group games, classroom review, holiday celebrations
|
|
42
|
+
- **Jigsaw** - ice-breakers, collaborative activities, crafts
|
|
43
|
+
|
|
44
|
+
## URL Parameters
|
|
45
|
+
|
|
46
|
+
All generator links include pre-filled parameters so users get ready-to-use puzzles in one click. The skill generates theme-appropriate content (words, clues, items) and embeds them directly in the URL.
|
|
47
|
+
|
|
48
|
+
Example:
|
|
49
|
+
```
|
|
50
|
+
https://jigsawmake.com/word-search-maker?title=Ocean%20Animals&words=DOLPHIN,OCTOPUS,SEAHORSE&gridSize=12
|
|
51
|
+
https://jigsawmake.com/crossword-puzzle-maker?title=Science&clues=GRAVITY:Force%20pulling%20down|OXYGEN:Gas%20we%20breathe
|
|
52
|
+
https://jigsawmake.com/bingo-card-generator?title=Party%20Bingo&items=Dance,Laugh,Sing&cardCount=25
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Output Format
|
|
56
|
+
|
|
57
|
+
Each plan includes:
|
|
58
|
+
- Activity header (occasion, audience, duration, difficulty)
|
|
59
|
+
- Objectives (2-3 learning or engagement goals)
|
|
60
|
+
- Puzzle menu table with generator links
|
|
61
|
+
- Minute-by-minute timeline
|
|
62
|
+
- Materials and prep checklist with print quantities
|
|
63
|
+
- Differentiation tips (easier/harder adaptations)
|
|
64
|
+
|
|
65
|
+
## Rules
|
|
66
|
+
|
|
67
|
+
- Match puzzle difficulty to the audience
|
|
68
|
+
- Suggest 2-3 puzzle types per activity for variety
|
|
69
|
+
- Include timing buffers for transitions
|
|
70
|
+
- Apply the user's theme consistently across all puzzles
|
|
71
|
+
- Always use URL parameters with pre-filled content
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: rayden-code
|
|
3
|
+
description: Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
|
|
4
|
+
category: development
|
|
5
|
+
risk: safe
|
|
6
|
+
source: https://github.com/playbookTV/rayden-ui-design-skill
|
|
7
|
+
source_type: community
|
|
8
|
+
date_added: 2026-04-10
|
|
9
|
+
author: Leslie Williams
|
|
10
|
+
tags: react, tailwind, design-system, ui, components, vibe-coding, rayden, rayna-ui, code-generation
|
|
11
|
+
tools: Read, Write, Edit, Bash, Glob, Grep
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# Rayden Code Skill
|
|
15
|
+
|
|
16
|
+
## Overview
|
|
17
|
+
|
|
18
|
+
Generate production-quality React + Tailwind CSS code using the Rayden UI component library (34 components). The skill loads a complete API reference with every component, every prop, design tokens, layout patterns, and an explicit anti-pattern ban list — preventing hallucinated components and generic AI output. Built on the Rayna UI design system.
|
|
19
|
+
|
|
20
|
+
## When to Use This Skill
|
|
21
|
+
|
|
22
|
+
- You're building a new page or feature using Rayden UI components
|
|
23
|
+
- You want to scaffold a dashboard, landing page, auth screen, settings page, or data table
|
|
24
|
+
- You need to generate React code that follows a specific design system precisely
|
|
25
|
+
- You want to prototype UI quickly with correct component usage and premium aesthetics
|
|
26
|
+
- You're vibe coding and want design-system-compliant output
|
|
27
|
+
|
|
28
|
+
## How It Works
|
|
29
|
+
|
|
30
|
+
1. **Parses the request** — Identifies page type, required components, and data model
|
|
31
|
+
2. **Loads RAYDEN_RULES.md** — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules
|
|
32
|
+
3. **Plans the layout** — Decides page structure, component selection, spacing, color, and elevation strategy
|
|
33
|
+
4. **Generates code** — Writes React + Tailwind CSS using only documented components and token classes
|
|
34
|
+
5. **Self-validates** — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)
|
|
35
|
+
|
|
36
|
+
## Examples
|
|
37
|
+
|
|
38
|
+
### Vibe code a SaaS dashboard
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Use case:** You're building an internal analytics tool and need a full dashboard page with MetricsCard grid, sortable Table, and ActivityFeed sidebar — all with correct Rayden imports and token classes.
|
|
45
|
+
|
|
46
|
+
### Scaffold a login page
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
/rayden-code login page with email and password
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
**Use case:** You need a centered auth form with Input components, a primary Button, and proper visual hierarchy — following Rayden's "Auth / Focused Form" pattern.
|
|
53
|
+
|
|
54
|
+
### Build an admin settings page
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
/rayden-code settings page with profile section, notification toggles, and danger zone
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**Use case:** You're adding a settings area to your app and need form sections with Toggle components, a destructive action zone, and a single-column constrained layout.
|
|
61
|
+
|
|
62
|
+
### Create a pricing page
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
/rayden-code pricing page with 3 tiers and a feature comparison table
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**Use case:** You need a marketing pricing section with Card components for each tier, Badge for the recommended plan, and a Table for feature comparison.
|
|
69
|
+
|
|
70
|
+
### Build an e-commerce product grid
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
/rayden-code product catalog with filters, search, and a card grid
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Use case:** You're building a storefront and need a responsive product grid with Chip filters, Input search, Pagination, and Cards with images — all using Rayden's layout and spacing rules.
|
|
77
|
+
|
|
78
|
+
## Best Practices
|
|
79
|
+
|
|
80
|
+
- Describe what you want in plain language — the skill maps your request to the right components
|
|
81
|
+
- Install `@raydenui/ui` in your project first (`npm install @raydenui/ui`)
|
|
82
|
+
- Import `@raydenui/ui/styles.css` in your app entry point for design tokens to work
|
|
83
|
+
- Review generated code for business logic — the skill handles UI, not data fetching
|
|
84
|
+
- Use alongside `/rayden-use` if you also want the same design built in Figma
|
|
85
|
+
|
|
86
|
+
## Security & Safety Notes
|
|
87
|
+
|
|
88
|
+
- This skill only reads its bundled rules file and writes code to your project
|
|
89
|
+
- No external network requests
|
|
90
|
+
- No secrets or credentials involved
|
|
91
|
+
- Generated code uses standard React patterns with no eval or dynamic code execution
|
|
92
|
+
|
|
93
|
+
## Common Pitfalls
|
|
94
|
+
|
|
95
|
+
| Problem | Solution |
|
|
96
|
+
|---------|----------|
|
|
97
|
+
| Components not rendering correctly | Ensure `@raydenui/ui/styles.css` is imported in your app entry |
|
|
98
|
+
| "Component doesn't exist" error | The skill only uses documented components — check if you're asking for something Rayden doesn't have |
|
|
99
|
+
| Colors look wrong | Use token classes (`bg-primary-500`) not hex values. Ensure the Rayden CSS is loaded |
|
|
100
|
+
| Layout not responsive | The skill generates responsive code by default — check that your viewport meta tag is set |
|
|
101
|
+
|
|
102
|
+
## Related Skills
|
|
103
|
+
|
|
104
|
+
- `rayden-use` — Build Rayden UI components and screens in Figma via MCP (included in the same package)
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: rayden-use
|
|
3
|
+
description: Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
|
|
4
|
+
category: design
|
|
5
|
+
risk: safe
|
|
6
|
+
source: https://github.com/playbookTV/rayden-ui-design-skill
|
|
7
|
+
source_type: community
|
|
8
|
+
date_added: 2026-04-10
|
|
9
|
+
author: Leslie Williams
|
|
10
|
+
tags: figma, design-system, ui, components, mcp, rayden, rayna-ui
|
|
11
|
+
tools: mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# Rayden UI Design Skill
|
|
15
|
+
|
|
16
|
+
## Overview
|
|
17
|
+
|
|
18
|
+
Build and maintain Rayden UI components and screens directly in Figma using the Figma MCP. The skill enforces the Rayna UI design system — resolved design tokens, craft rules, anti-pattern detection, and visual validation — so every output is mechanically correct and visually premium. Supports three style modes (conservative, balanced, expressive) and includes a dedicated subagent for full-page screen composition.
|
|
19
|
+
|
|
20
|
+
## When to Use This Skill
|
|
21
|
+
|
|
22
|
+
- You need to build a new Rayden UI component with all its variants in Figma
|
|
23
|
+
- You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns
|
|
24
|
+
- You want to audit an existing Figma file for design system compliance
|
|
25
|
+
- You need to add new variants to an existing Figma component
|
|
26
|
+
- You're syncing React component updates back to Figma
|
|
27
|
+
|
|
28
|
+
## How It Works
|
|
29
|
+
|
|
30
|
+
1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami`
|
|
31
|
+
2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui/ai` MCP server or installed package
|
|
32
|
+
3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
|
|
33
|
+
4. **Identifies task type** — Determines if building a single component, composing a screen, auditing, or adding variants
|
|
34
|
+
5. **Applies style mode** — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
|
|
35
|
+
6. **Builds with helpers** — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
|
|
36
|
+
7. **Visual validation** — Takes screenshots after each build stage and validates against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count)
|
|
37
|
+
|
|
38
|
+
## Examples
|
|
39
|
+
|
|
40
|
+
### Build a component with all variants
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
/rayden-use Button https://figma.com/file/abc123
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Use case:** You're starting a new design system file and need the Button component with all variants (primary, secondary, grey, destructive) in solid and outlined appearances across SM and LG sizes.
|
|
47
|
+
|
|
48
|
+
### Design a SaaS dashboard
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
/rayden-use dashboard-screen balanced https://figma.com/file/abc123
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Use case:** You're designing an analytics dashboard and need a sidebar layout with KPI cards, a data table, and an activity feed — all using consistent Rayden tokens and spacing.
|
|
55
|
+
|
|
56
|
+
### Build a marketing landing page
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
/rayden-compose landing expressive https://figma.com/file/abc123
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic "AI-generated" look.
|
|
63
|
+
|
|
64
|
+
### Audit an existing design for compliance
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
/rayden-use audit https://figma.com/file/abc123
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Use case:** You have an existing Figma file and want to check that all colors match Rayden tokens, spacing is on the 4px grid, and radius is concentric.
|
|
71
|
+
|
|
72
|
+
### Add variants to an existing component
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
/rayden-use add-variants Input https://figma.com/file/abc123
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**Use case:** The Input component exists in your Figma file but is missing error and success states — the skill reads the existing structure and extends it.
|
|
79
|
+
|
|
80
|
+
## Best Practices
|
|
81
|
+
|
|
82
|
+
- Always provide a Figma file URL as the last argument
|
|
83
|
+
- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages
|
|
84
|
+
- Let the skill take screenshots between build stages — this is how it validates output quality
|
|
85
|
+
- Install `@raydenui/ai` as an MCP server for the richest component data access
|
|
86
|
+
- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable
|
|
87
|
+
|
|
88
|
+
## Security & Safety Notes
|
|
89
|
+
|
|
90
|
+
- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API
|
|
91
|
+
- Requires Figma Dev or Full seat with write access to the target file
|
|
92
|
+
- Does not modify files outside of the target Figma document
|
|
93
|
+
- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved
|
|
94
|
+
|
|
95
|
+
## Common Pitfalls
|
|
96
|
+
|
|
97
|
+
| Problem | Solution |
|
|
98
|
+
|---------|----------|
|
|
99
|
+
| "Font not found" error | The skill falls back to Roboto if Inter is unavailable — ensure Inter is loaded in your Figma file for best results |
|
|
100
|
+
| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |
|
|
101
|
+
| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |
|
|
102
|
+
| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |
|
|
103
|
+
|
|
104
|
+
## Related Skills
|
|
105
|
+
|
|
106
|
+
- `rayden-code` — Generate React code with Rayden UI components (included in the same package)
|
|
107
|
+
- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: sales-automator
|
|
3
|
-
description: 'Draft cold emails, follow-ups, and proposal templates. Creates
|
|
4
|
-
|
|
5
|
-
pricing pages, case studies, and sales scripts. Use PROACTIVELY for sales
|
|
6
|
-
|
|
7
|
-
outreach or lead nurturing.
|
|
8
|
-
|
|
9
|
-
'
|
|
3
|
+
description: 'Draft cold emails, follow-ups, and proposal templates. Creates pricing pages, case studies, and sales scripts. Use PROACTIVELY for sales outreach or lead nurturing. '
|
|
10
4
|
risk: unknown
|
|
11
5
|
source: community
|
|
12
6
|
date_added: '2026-02-27'
|
package/package.json
CHANGED
package/skills_index.json
CHANGED
|
@@ -22158,6 +22158,28 @@
|
|
|
22158
22158
|
"reasons": []
|
|
22159
22159
|
}
|
|
22160
22160
|
},
|
|
22161
|
+
{
|
|
22162
|
+
"id": "puzzle-activity-planner",
|
|
22163
|
+
"path": "skills/puzzle-activity-planner",
|
|
22164
|
+
"category": "education",
|
|
22165
|
+
"name": "puzzle-activity-planner",
|
|
22166
|
+
"description": "Plan puzzle-based activities for classrooms, parties, and events with pre-configured generator links",
|
|
22167
|
+
"risk": "safe",
|
|
22168
|
+
"source": "community",
|
|
22169
|
+
"date_added": "2026-04-11",
|
|
22170
|
+
"plugin": {
|
|
22171
|
+
"targets": {
|
|
22172
|
+
"codex": "supported",
|
|
22173
|
+
"claude": "supported"
|
|
22174
|
+
},
|
|
22175
|
+
"setup": {
|
|
22176
|
+
"type": "none",
|
|
22177
|
+
"summary": "",
|
|
22178
|
+
"docs": null
|
|
22179
|
+
},
|
|
22180
|
+
"reasons": []
|
|
22181
|
+
}
|
|
22182
|
+
},
|
|
22161
22183
|
{
|
|
22162
22184
|
"id": "pydantic-ai",
|
|
22163
22185
|
"path": "skills/pydantic-ai",
|
|
@@ -22532,6 +22554,50 @@
|
|
|
22532
22554
|
"reasons": []
|
|
22533
22555
|
}
|
|
22534
22556
|
},
|
|
22557
|
+
{
|
|
22558
|
+
"id": "rayden-code",
|
|
22559
|
+
"path": "skills/rayden-code",
|
|
22560
|
+
"category": "development",
|
|
22561
|
+
"name": "rayden-code",
|
|
22562
|
+
"description": "Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns",
|
|
22563
|
+
"risk": "safe",
|
|
22564
|
+
"source": "https://github.com/playbookTV/rayden-ui-design-skill",
|
|
22565
|
+
"date_added": "2026-04-10",
|
|
22566
|
+
"plugin": {
|
|
22567
|
+
"targets": {
|
|
22568
|
+
"codex": "supported",
|
|
22569
|
+
"claude": "supported"
|
|
22570
|
+
},
|
|
22571
|
+
"setup": {
|
|
22572
|
+
"type": "none",
|
|
22573
|
+
"summary": "",
|
|
22574
|
+
"docs": null
|
|
22575
|
+
},
|
|
22576
|
+
"reasons": []
|
|
22577
|
+
}
|
|
22578
|
+
},
|
|
22579
|
+
{
|
|
22580
|
+
"id": "rayden-use",
|
|
22581
|
+
"path": "skills/rayden-use",
|
|
22582
|
+
"category": "design",
|
|
22583
|
+
"name": "rayden-use",
|
|
22584
|
+
"description": "Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement",
|
|
22585
|
+
"risk": "safe",
|
|
22586
|
+
"source": "https://github.com/playbookTV/rayden-ui-design-skill",
|
|
22587
|
+
"date_added": "2026-04-10",
|
|
22588
|
+
"plugin": {
|
|
22589
|
+
"targets": {
|
|
22590
|
+
"codex": "supported",
|
|
22591
|
+
"claude": "supported"
|
|
22592
|
+
},
|
|
22593
|
+
"setup": {
|
|
22594
|
+
"type": "none",
|
|
22595
|
+
"summary": "",
|
|
22596
|
+
"docs": null
|
|
22597
|
+
},
|
|
22598
|
+
"reasons": []
|
|
22599
|
+
}
|
|
22600
|
+
},
|
|
22535
22601
|
{
|
|
22536
22602
|
"id": "react-best-practices",
|
|
22537
22603
|
"path": "skills/react-best-practices",
|
|
@@ -23395,7 +23461,7 @@
|
|
|
23395
23461
|
"path": "skills/sales-automator",
|
|
23396
23462
|
"category": "business",
|
|
23397
23463
|
"name": "sales-automator",
|
|
23398
|
-
"description": "Draft cold emails, follow-ups, and proposal templates. Creates
|
|
23464
|
+
"description": "Draft cold emails, follow-ups, and proposal templates. Creates pricing pages, case studies, and sales scripts. Use PROACTIVELY for sales outreach or lead nurturing. ",
|
|
23399
23465
|
"risk": "unknown",
|
|
23400
23466
|
"source": "community",
|
|
23401
23467
|
"date_added": "2026-02-27",
|