mirror of
https://github.com/sickn33/antigravity-awesome-skills.git
synced 2026-04-25 17:25:12 +02:00
chore: sync repo state [ci skip]
This commit is contained in:
github-actions[bot]
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "9.11.0",
|
||||
"description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,382 supported skills.",
|
||||
"description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,384 supported skills.",
|
||||
"author": {
|
||||
"name": "sickn33 and contributors",
|
||||
"url": "https://github.com/sickn33/antigravity-awesome-skills"
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
name: rayden-code
|
||||
description: Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
|
||||
category: development
|
||||
risk: safe
|
||||
source: https://github.com/playbookTV/rayden-ui-design-skill
|
||||
source_type: community
|
||||
date_added: 2026-04-10
|
||||
author: Leslie Williams
|
||||
tags: react, tailwind, design-system, ui, components, vibe-coding, rayden, rayna-ui, code-generation
|
||||
tools: Read, Write, Edit, Bash, Glob, Grep
|
||||
---
|
||||
|
||||
# Rayden Code Skill
|
||||
|
||||
## Overview
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- You're building a new page or feature using Rayden UI components
|
||||
- You want to scaffold a dashboard, landing page, auth screen, settings page, or data table
|
||||
- You need to generate React code that follows a specific design system precisely
|
||||
- You want to prototype UI quickly with correct component usage and premium aesthetics
|
||||
- You're vibe coding and want design-system-compliant output
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Parses the request** — Identifies page type, required components, and data model
|
||||
2. **Loads RAYDEN_RULES.md** — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules
|
||||
3. **Plans the layout** — Decides page structure, component selection, spacing, color, and elevation strategy
|
||||
4. **Generates code** — Writes React + Tailwind CSS using only documented components and token classes
|
||||
5. **Self-validates** — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)
|
||||
|
||||
## Examples
|
||||
|
||||
### Vibe code a SaaS dashboard
|
||||
|
||||
```
|
||||
/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Scaffold a login page
|
||||
|
||||
```
|
||||
/rayden-code login page with email and password
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build an admin settings page
|
||||
|
||||
```
|
||||
/rayden-code settings page with profile section, notification toggles, and danger zone
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Create a pricing page
|
||||
|
||||
```
|
||||
/rayden-code pricing page with 3 tiers and a feature comparison table
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build an e-commerce product grid
|
||||
|
||||
```
|
||||
/rayden-code product catalog with filters, search, and a card grid
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Describe what you want in plain language — the skill maps your request to the right components
|
||||
- Install `@raydenui/ui` in your project first (`npm install @raydenui/ui`)
|
||||
- Import `@raydenui/ui/styles.css` in your app entry point for design tokens to work
|
||||
- Review generated code for business logic — the skill handles UI, not data fetching
|
||||
- Use alongside `/rayden-use` if you also want the same design built in Figma
|
||||
|
||||
## Security & Safety Notes
|
||||
|
||||
- This skill only reads its bundled rules file and writes code to your project
|
||||
- No external network requests
|
||||
- No secrets or credentials involved
|
||||
- Generated code uses standard React patterns with no eval or dynamic code execution
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
| Problem | Solution |
|
||||
|---------|----------|
|
||||
| Components not rendering correctly | Ensure `@raydenui/ui/styles.css` is imported in your app entry |
|
||||
| "Component doesn't exist" error | The skill only uses documented components — check if you're asking for something Rayden doesn't have |
|
||||
| Colors look wrong | Use token classes (`bg-primary-500`) not hex values. Ensure the Rayden CSS is loaded |
|
||||
| Layout not responsive | The skill generates responsive code by default — check that your viewport meta tag is set |
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `rayden-use` — Build Rayden UI components and screens in Figma via MCP (included in the same package)
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
name: rayden-use
|
||||
description: Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
|
||||
category: design
|
||||
risk: safe
|
||||
source: https://github.com/playbookTV/rayden-ui-design-skill
|
||||
source_type: community
|
||||
date_added: 2026-04-10
|
||||
author: Leslie Williams
|
||||
tags: figma, design-system, ui, components, mcp, rayden, rayna-ui
|
||||
tools: mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read
|
||||
---
|
||||
|
||||
# Rayden UI Design Skill
|
||||
|
||||
## Overview
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- You need to build a new Rayden UI component with all its variants in Figma
|
||||
- You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns
|
||||
- You want to audit an existing Figma file for design system compliance
|
||||
- You need to add new variants to an existing Figma component
|
||||
- You're syncing React component updates back to Figma
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami`
|
||||
2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui/ai` MCP server or installed package
|
||||
3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
|
||||
4. **Identifies task type** — Determines if building a single component, composing a screen, auditing, or adding variants
|
||||
5. **Applies style mode** — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
|
||||
6. **Builds with helpers** — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
|
||||
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)
|
||||
|
||||
## Examples
|
||||
|
||||
### Build a component with all variants
|
||||
|
||||
```
|
||||
/rayden-use Button https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Design a SaaS dashboard
|
||||
|
||||
```
|
||||
/rayden-use dashboard-screen balanced https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build a marketing landing page
|
||||
|
||||
```
|
||||
/rayden-compose landing expressive https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic "AI-generated" look.
|
||||
|
||||
### Audit an existing design for compliance
|
||||
|
||||
```
|
||||
/rayden-use audit https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Add variants to an existing component
|
||||
|
||||
```
|
||||
/rayden-use add-variants Input https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Always provide a Figma file URL as the last argument
|
||||
- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages
|
||||
- Let the skill take screenshots between build stages — this is how it validates output quality
|
||||
- Install `@raydenui/ai` as an MCP server for the richest component data access
|
||||
- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable
|
||||
|
||||
## Security & Safety Notes
|
||||
|
||||
- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API
|
||||
- Requires Figma Dev or Full seat with write access to the target file
|
||||
- Does not modify files outside of the target Figma document
|
||||
- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
| Problem | Solution |
|
||||
|---------|----------|
|
||||
| "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 |
|
||||
| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |
|
||||
| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |
|
||||
| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `rayden-code` — Generate React code with Rayden UI components (included in the same package)
|
||||
- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)
|
||||
@@ -19,7 +19,7 @@
|
||||
"skills": "./skills/",
|
||||
"interface": {
|
||||
"displayName": "Antigravity Awesome Skills",
|
||||
"shortDescription": "1,367 plugin-safe skills for coding, security, product, and ops workflows.",
|
||||
"shortDescription": "1,369 plugin-safe skills for coding, security, product, and ops workflows.",
|
||||
"longDescription": "Install a plugin-safe Codex distribution of Antigravity Awesome Skills. Skills that still need hardening or target-specific setup remain available in the repo but are excluded from this plugin.",
|
||||
"developerName": "sickn33 and contributors",
|
||||
"category": "Productivity",
|
||||
|
||||
104
plugins/antigravity-awesome-skills/skills/rayden-code/SKILL.md
Normal file
104
plugins/antigravity-awesome-skills/skills/rayden-code/SKILL.md
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
name: rayden-code
|
||||
description: Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
|
||||
category: development
|
||||
risk: safe
|
||||
source: https://github.com/playbookTV/rayden-ui-design-skill
|
||||
source_type: community
|
||||
date_added: 2026-04-10
|
||||
author: Leslie Williams
|
||||
tags: react, tailwind, design-system, ui, components, vibe-coding, rayden, rayna-ui, code-generation
|
||||
tools: Read, Write, Edit, Bash, Glob, Grep
|
||||
---
|
||||
|
||||
# Rayden Code Skill
|
||||
|
||||
## Overview
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- You're building a new page or feature using Rayden UI components
|
||||
- You want to scaffold a dashboard, landing page, auth screen, settings page, or data table
|
||||
- You need to generate React code that follows a specific design system precisely
|
||||
- You want to prototype UI quickly with correct component usage and premium aesthetics
|
||||
- You're vibe coding and want design-system-compliant output
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Parses the request** — Identifies page type, required components, and data model
|
||||
2. **Loads RAYDEN_RULES.md** — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules
|
||||
3. **Plans the layout** — Decides page structure, component selection, spacing, color, and elevation strategy
|
||||
4. **Generates code** — Writes React + Tailwind CSS using only documented components and token classes
|
||||
5. **Self-validates** — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)
|
||||
|
||||
## Examples
|
||||
|
||||
### Vibe code a SaaS dashboard
|
||||
|
||||
```
|
||||
/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Scaffold a login page
|
||||
|
||||
```
|
||||
/rayden-code login page with email and password
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build an admin settings page
|
||||
|
||||
```
|
||||
/rayden-code settings page with profile section, notification toggles, and danger zone
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Create a pricing page
|
||||
|
||||
```
|
||||
/rayden-code pricing page with 3 tiers and a feature comparison table
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build an e-commerce product grid
|
||||
|
||||
```
|
||||
/rayden-code product catalog with filters, search, and a card grid
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Describe what you want in plain language — the skill maps your request to the right components
|
||||
- Install `@raydenui/ui` in your project first (`npm install @raydenui/ui`)
|
||||
- Import `@raydenui/ui/styles.css` in your app entry point for design tokens to work
|
||||
- Review generated code for business logic — the skill handles UI, not data fetching
|
||||
- Use alongside `/rayden-use` if you also want the same design built in Figma
|
||||
|
||||
## Security & Safety Notes
|
||||
|
||||
- This skill only reads its bundled rules file and writes code to your project
|
||||
- No external network requests
|
||||
- No secrets or credentials involved
|
||||
- Generated code uses standard React patterns with no eval or dynamic code execution
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
| Problem | Solution |
|
||||
|---------|----------|
|
||||
| Components not rendering correctly | Ensure `@raydenui/ui/styles.css` is imported in your app entry |
|
||||
| "Component doesn't exist" error | The skill only uses documented components — check if you're asking for something Rayden doesn't have |
|
||||
| Colors look wrong | Use token classes (`bg-primary-500`) not hex values. Ensure the Rayden CSS is loaded |
|
||||
| Layout not responsive | The skill generates responsive code by default — check that your viewport meta tag is set |
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `rayden-use` — Build Rayden UI components and screens in Figma via MCP (included in the same package)
|
||||
107
plugins/antigravity-awesome-skills/skills/rayden-use/SKILL.md
Normal file
107
plugins/antigravity-awesome-skills/skills/rayden-use/SKILL.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
name: rayden-use
|
||||
description: Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
|
||||
category: design
|
||||
risk: safe
|
||||
source: https://github.com/playbookTV/rayden-ui-design-skill
|
||||
source_type: community
|
||||
date_added: 2026-04-10
|
||||
author: Leslie Williams
|
||||
tags: figma, design-system, ui, components, mcp, rayden, rayna-ui
|
||||
tools: mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read
|
||||
---
|
||||
|
||||
# Rayden UI Design Skill
|
||||
|
||||
## Overview
|
||||
|
||||
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.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- You need to build a new Rayden UI component with all its variants in Figma
|
||||
- You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns
|
||||
- You want to audit an existing Figma file for design system compliance
|
||||
- You need to add new variants to an existing Figma component
|
||||
- You're syncing React component updates back to Figma
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami`
|
||||
2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui/ai` MCP server or installed package
|
||||
3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
|
||||
4. **Identifies task type** — Determines if building a single component, composing a screen, auditing, or adding variants
|
||||
5. **Applies style mode** — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
|
||||
6. **Builds with helpers** — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
|
||||
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)
|
||||
|
||||
## Examples
|
||||
|
||||
### Build a component with all variants
|
||||
|
||||
```
|
||||
/rayden-use Button https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Design a SaaS dashboard
|
||||
|
||||
```
|
||||
/rayden-use dashboard-screen balanced https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Build a marketing landing page
|
||||
|
||||
```
|
||||
/rayden-compose landing expressive https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic "AI-generated" look.
|
||||
|
||||
### Audit an existing design for compliance
|
||||
|
||||
```
|
||||
/rayden-use audit https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
### Add variants to an existing component
|
||||
|
||||
```
|
||||
/rayden-use add-variants Input https://figma.com/file/abc123
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Always provide a Figma file URL as the last argument
|
||||
- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages
|
||||
- Let the skill take screenshots between build stages — this is how it validates output quality
|
||||
- Install `@raydenui/ai` as an MCP server for the richest component data access
|
||||
- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable
|
||||
|
||||
## Security & Safety Notes
|
||||
|
||||
- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API
|
||||
- Requires Figma Dev or Full seat with write access to the target file
|
||||
- Does not modify files outside of the target Figma document
|
||||
- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
| Problem | Solution |
|
||||
|---------|----------|
|
||||
| "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 |
|
||||
| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |
|
||||
| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |
|
||||
| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `rayden-code` — Generate React code with Rayden UI components (included in the same package)
|
||||
- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)
|
||||
Reference in New Issue
Block a user