Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
db3e262df3 | ||
|
|
d280ad1c3a | ||
|
|
b2aa003d57 | ||
|
|
3c3280d9ac | ||
|
|
58f8d654ef | ||
|
|
5593cad434 | ||
|
|
59151b3671 | ||
|
|
1dc10ee3a0 | ||
|
|
4c400ca121 | ||
|
|
4310ca4922 | ||
|
|
9f6d75245f | ||
|
|
1974e62ec1 | ||
|
|
9dd8fd6b51 | ||
|
|
b082ba9c42 | ||
|
|
90b4d5adb3 | ||
|
|
d3883ffaf9 |
10
.github/MAINTENANCE.md
vendored
10
.github/MAINTENANCE.md
vendored
@@ -41,7 +41,7 @@ it means you **did not run or commit** the Validation Chain correctly.
|
||||
|
||||
### 3. 📝 EVIDENCE OF WORK
|
||||
|
||||
- You must create/update `walkthrough.md` or `RELEASE_NOTES.md` to document what changed.
|
||||
- You must create/update `walkthrough.md` or `CHANGELOG.md` to document what changed.
|
||||
- If you made something new, **link it** in the artifacts.
|
||||
|
||||
### 4. 🚫 NO BRANCHES
|
||||
@@ -172,7 +172,7 @@ Reject any PR that fails this:
|
||||
When cutting a new version (e.g., V4):
|
||||
|
||||
1. **Run Full Validation**: `python3 scripts/validate_skills.py --strict`
|
||||
2. **Update Changelog**: Create `RELEASE_NOTES.md`.
|
||||
2. **Update Changelog**: Add the new release section to `CHANGELOG.md`.
|
||||
3. **Bump Version**: Update header in `README.md`.
|
||||
4. **Tag Release**:
|
||||
```bash
|
||||
@@ -180,12 +180,12 @@ When cutting a new version (e.g., V4):
|
||||
git push origin v4.0.0
|
||||
```
|
||||
|
||||
### 📋 Release Note Template
|
||||
### 📋 Changelog Entry Template
|
||||
|
||||
All changeslogs/release notes MUST follow this structure to ensure professionalism and quality:
|
||||
Each new release section in `CHANGELOG.md` should follow [Keep a Changelog](https://keepachangelog.com/) and this structure:
|
||||
|
||||
```markdown
|
||||
# Release vX.Y.Z: [Theme Name]
|
||||
## [X.Y.Z] - YYYY-MM-DD - "[Theme Name]"
|
||||
|
||||
> **[One-line catchy summary of the release]**
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
# Skill Catalog
|
||||
|
||||
Generated at: 2026-01-31T07:34:21.497Z
|
||||
Generated at: 2026-02-01T07:22:00.871Z
|
||||
|
||||
Total skills: 618
|
||||
Total skills: 619
|
||||
|
||||
## architecture (58)
|
||||
## architecture (59)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -53,6 +53,7 @@ Total skills: 618
|
||||
| `production-code-audit` | Autonomously deep-scan entire codebase line-by-line, understand architecture and patterns, then systematically transform it to production-grade, corporate-le... | production, code, audit | production, code, audit, autonomously, deep, scan, entire, codebase, line, understand, architecture, then |
|
||||
| `projection-patterns` | Build read models and projections from event streams. Use when implementing CQRS read sides, building materialized views, or optimizing query performance in ... | projection | projection, read, models, projections, event, streams, implementing, cqrs, sides, building, materialized, views |
|
||||
| `prompt-engineering` | Expert guide on prompt engineering patterns, best practices, and optimization techniques. Use when user wants to improve prompts, learn prompting strategies,... | prompt, engineering | prompt, engineering, optimization, techniques, user, wants, improve, prompts, learn, prompting, debug, agent |
|
||||
| `radix-ui-design-system` | Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for productio... | radix, ui | radix, ui, accessible, primitives, headless, component, customization, theming, compound, grade, libraries |
|
||||
| `saga-orchestration` | Implement saga patterns for distributed transactions and cross-aggregate workflows. Use when coordinating multi-step business processes, handling compensatin... | saga | saga, orchestration, distributed, transactions, cross, aggregate, coordinating, multi, step, business, processes, handling |
|
||||
| `salesforce-development` | Expert patterns for Salesforce platform development including Lightning Web Components (LWC), Apex triggers and classes, REST/Bulk APIs, Connected Apps, and ... | salesforce | salesforce, development, platform, including, lightning, web, components, lwc, apex, triggers, classes, rest |
|
||||
| `skill-developer` | Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patt... | skill | skill, developer, claude, code, skills, following, anthropic, creating, new, modifying, rules, json |
|
||||
|
||||
73
CHANGELOG.md
73
CHANGELOG.md
@@ -7,8 +7,79 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
---
|
||||
|
||||
## [4.6.0] - 2026-02-01 - "SPDD & Radix UI Design System"
|
||||
|
||||
> Agent workflow docs (SPDD) and Radix UI design system skill.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skill**: `radix-ui-design-system` – Build accessible design systems with Radix UI primitives (headless, theming, WCAG, examples).
|
||||
- **Docs**: `skills/SPDD/` – Research, spec, and implementation workflow docs (1-research.md, 2-spec.md, 3-implementation.md).
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 626 (from 625). Catalog regenerated.
|
||||
|
||||
---
|
||||
|
||||
## [4.5.0] - 2026-01-31 - "Stitch UI Design"
|
||||
|
||||
> Expert prompting guide for Google Stitch AI-powered UI design tool.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skill**: `stitch-ui-design` – Expert guide for creating effective prompts for Google Stitch AI UI design tool (Gemini 2.5 Flash). Covers prompt structure, specificity techniques, iteration strategies, design-to-code workflows, and 10+ examples for landing pages, mobile apps, and dashboards.
|
||||
|
||||
### Changed
|
||||
|
||||
- **Documentation**: Clarified in README.md and GETTING_STARTED.md that installation means cloning the full repo once; Starter Packs are curated lists to discover skills by role, not a different installation method (fixes [#44](https://github.com/sickn33/antigravity-awesome-skills/issues/44)).
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 625 (from 624). Catalog regenerated.
|
||||
|
||||
### Credits
|
||||
|
||||
- [@ALEKGG1](https://github.com/ALEKGG1) – stitch-ui-design (PR #45)
|
||||
- [@CypherPoet](https://github.com/CypherPoet) – Documentation clarity (#44)
|
||||
|
||||
---
|
||||
|
||||
## [4.4.0] - 2026-01-30 - "fp-ts skills for TypeScript"
|
||||
|
||||
> Three practical fp-ts skills for TypeScript functional programming.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skills** (from [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills)):
|
||||
- `fp-ts-pragmatic` – Pipe, Option, Either, TaskEither without academic jargon.
|
||||
- `fp-ts-react` – Patterns for fp-ts with React 18/19 and Next.js 14/15 (state, forms, data fetching).
|
||||
- `fp-ts-errors` – Type-safe error handling with Either and TaskEither.
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 624 (from 621). Catalog regenerated.
|
||||
|
||||
---
|
||||
|
||||
## [4.3.0] - 2026-01-29 - "VoltAgent Integration & Context Engineering Suite"
|
||||
|
||||
> 61 new skills from VoltAgent/awesome-agent-skills: official team skills and context engineering suite.
|
||||
|
||||
### Added
|
||||
|
||||
- **61 new skills** from [VoltAgent/awesome-agent-skills](https://github.com/VoltAgent/awesome-agent-skills):
|
||||
- **Official (27)**: Sentry (commit, create-pr, find-bugs, iterate-pr), Trail of Bits (culture-index, fix-review, sharp-edges), Expo (expo-deployment, upgrading-expo), Hugging Face (hugging-face-cli, hugging-face-jobs), Vercel, Google Stitch (design-md), Neon (using-neon), n8n (n8n-code-python, n8n-mcp-tools-expert, n8n-node-configuration), SwiftUI, fal.ai (fal-audio, fal-generate, fal-image-edit, fal-platform, fal-upscale, fal-workflow), deep-research, imagen, readme.
|
||||
- **Community (34)**: Context suite (context-fundamentals, context-degradation, context-compression, context-optimization, multi-agent-patterns, memory-systems, evaluation), frontend-slides, linear-claude-skill, skill-rails-upgrade, terraform-skill, tool-design, screenshots, automate-whatsapp, observe-whatsapp, aws-skills, ui-skills, vexor, pypict-skill, makepad-skills, threejs-skills, claude-scientific-skills, claude-win11-speckit-update-skill, security-bluebook-builder, claude-ally-health, clarity-gate, beautiful-prose, claude-speed-reader, skill-seekers, varlock-claude-skill, superpowers-lab, nanobanana-ppt-skills, x-article-publisher-skill, ffuf-claude-skill.
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 614 (from 553). Catalog and SOURCES.md updated.
|
||||
|
||||
### Credits
|
||||
|
||||
- VoltAgent/awesome-agent-skills and official teams (Sentry, Trail of Bits, Expo, Hugging Face, Vercel Labs, Google Labs, Neon, fal.ai).
|
||||
|
||||
---
|
||||
|
||||
## [4.0.0] - 2026-01-28 - "The Enterprise Era"
|
||||
@@ -120,7 +191,7 @@ The following skills are now correctly indexed and visible in the registry:
|
||||
- **Documentation**:
|
||||
- `docs/EXAMPLES.md`: Cookbook with 3 real-world scenarios.
|
||||
- `docs/SOURCES.md`: Legal ledger for attributions and licenses.
|
||||
- `RELEASE_NOTES.md`: Generated release announcement (archived).
|
||||
- Release announcements are documented in this CHANGELOG.
|
||||
|
||||
### Changed
|
||||
|
||||
|
||||
10
README.md
10
README.md
@@ -1,6 +1,6 @@
|
||||
# 🌌 Antigravity Awesome Skills: 625+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
# 🌌 Antigravity Awesome Skills: 626+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
|
||||
> **The Ultimate Collection of 625+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode**
|
||||
> **The Ultimate Collection of 626+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode**
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://claude.ai)
|
||||
@@ -11,7 +11,7 @@
|
||||
[](https://github.com/opencode-ai/opencode)
|
||||
[](https://github.com/sickn33/antigravity-awesome-skills)
|
||||
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **624 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **626 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
|
||||
- 🟣 **Claude Code** (Anthropic CLI)
|
||||
- 🔵 **Gemini CLI** (Google DeepMind)
|
||||
@@ -29,7 +29,7 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
- [🔌 Compatibility & Invocation](#compatibility--invocation)
|
||||
- [📦 Features & Categories](#features--categories)
|
||||
- [🎁 Curated Collections (Bundles)](#curated-collections)
|
||||
- [📚 Browse 625+ Skills](#browse-625-skills)
|
||||
- [📚 Browse 626+ Skills](#browse-626-skills)
|
||||
- [🛠️ Installation](#installation)
|
||||
- [🤝 How to Contribute](#how-to-contribute)
|
||||
- [👥 Contributors & Credits](#credits--sources)
|
||||
@@ -124,7 +124,7 @@ The repository is organized into specialized domains to transform your AI into a
|
||||
|
||||
[Check out our Starter Packs in docs/BUNDLES.md](docs/BUNDLES.md) to find the perfect toolkit for your role.
|
||||
|
||||
## Browse 625+ Skills
|
||||
## Browse 626+ Skills
|
||||
|
||||
We have moved the full skill registry to a dedicated catalog to keep this README clean.
|
||||
|
||||
|
||||
183
RELEASE_NOTES.md
183
RELEASE_NOTES.md
@@ -1,183 +0,0 @@
|
||||
# Release v4.5.0: Stitch UI Design
|
||||
|
||||
> **Expert prompting guide for Google Stitch AI-powered UI design tool**
|
||||
|
||||
This release adds the stitch-ui-design skill and clarifies documentation around Starter Packs vs full repo installation, bringing the total to 625 skills. The new skill provides comprehensive guidance for creating effective prompts in Google Stitch (Gemini 2.5 Flash) to generate high-quality UI designs for web and mobile applications.
|
||||
|
||||
## New Skills (1)
|
||||
|
||||
- **[stitch-ui-design](skills/stitch-ui-design/)** – Expert guide for creating effective prompts for Google Stitch AI UI design tool. Covers prompt structure, specificity techniques, iteration strategies, design-to-code workflows, and 10+ practical examples for landing pages, mobile apps, and dashboards.
|
||||
|
||||
> **Try it:** `Use @stitch-ui-design to help me create a prompt for a mobile fitness app dashboard`
|
||||
|
||||
## Documentation Improvements
|
||||
|
||||
- **Clarified Starter Packs**: Updated README.md and GETTING_STARTED.md to explicitly state that installation means cloning the full repo once; Starter Packs are curated lists to help discover which skills to use by role, not a different installation method (fixes [#44](https://github.com/sickn33/antigravity-awesome-skills/issues/44))
|
||||
|
||||
## Registry Update
|
||||
|
||||
- **Total Skills**: 625 (from 624)
|
||||
- **New Skills Added**: 1
|
||||
- **Catalog**: Regenerated with all skills
|
||||
|
||||
## Credits
|
||||
|
||||
A huge shoutout to our community contributors:
|
||||
|
||||
- **[@CypherPoet](https://github.com/CypherPoet)** for raising the documentation clarity issue (#44)
|
||||
|
||||
---
|
||||
|
||||
# Release v4.4.0: fp-ts skills for TypeScript
|
||||
|
||||
> **Three practical fp-ts skills for TypeScript functional programming**
|
||||
|
||||
This release adds 3 fp-ts skills sourced from [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills), bringing the total to 624 skills. These skills focus on practical, jargon-free patterns for pipe, Option, Either, TaskEither, React integration, and type-safe error handling.
|
||||
|
||||
## New Skills (3)
|
||||
|
||||
- **[fp-ts-pragmatic](skills/fp-ts-pragmatic/)** – The 80/20 of functional programming: pipe, Option, Either, TaskEither without academic jargon
|
||||
- **[fp-ts-react](skills/fp-ts-react/)** – Patterns for using fp-ts with React 18/19 and Next.js 14/15 (state, forms, data fetching)
|
||||
- **[fp-ts-errors](skills/fp-ts-errors/)** – Type-safe error handling with Either and TaskEither; no more try/catch spaghetti
|
||||
|
||||
## Registry Update
|
||||
|
||||
- **Total Skills**: 624 (from 621)
|
||||
- **New Skills Added**: 3
|
||||
- **Catalog**: Regenerated with all skills
|
||||
|
||||
---
|
||||
|
||||
# Release v4.3.0: VoltAgent Integration & Context Engineering Suite
|
||||
|
||||
> **Massive expansion with 61 new skills from VoltAgent repository, including official team skills and comprehensive context engineering capabilities**
|
||||
|
||||
This release adds 61 high-quality skills sourced from the VoltAgent/awesome-agent-skills curated collection, bringing the total to 614 skills. Highlights include official skills from Sentry, Trail of Bits, Expo, Hugging Face, and a complete context engineering suite for building sophisticated AI agents.
|
||||
|
||||
## 🚀 New Skills
|
||||
|
||||
### Official Team Skills (27)
|
||||
|
||||
#### Sentry (4)
|
||||
- **[commit](skills/commit/)** – Create commits with best practices following Sentry conventions
|
||||
- **[create-pr](skills/create-pr/)** – Create pull requests with proper descriptions and review guidelines
|
||||
- **[find-bugs](skills/find-bugs/)** – Find and identify bugs in code systematically
|
||||
- **[iterate-pr](skills/iterate-pr/)** – Iterate on pull request feedback efficiently
|
||||
|
||||
#### Trail of Bits (3)
|
||||
- **[culture-index](skills/culture-index/)** – Index and search culture documentation
|
||||
- **[fix-review](skills/fix-review/)** – Verify fix commits address audit findings without new bugs
|
||||
- **[sharp-edges](skills/sharp-edges/)** – Identify error-prone APIs and dangerous configurations
|
||||
|
||||
#### Expo (2)
|
||||
- **[expo-deployment](skills/expo-deployment/)** – Deploy Expo apps to production
|
||||
- **[upgrading-expo](skills/upgrading-expo/)** – Upgrade Expo SDK versions safely
|
||||
|
||||
#### Hugging Face (2)
|
||||
- **[hugging-face-cli](skills/hugging-face-cli/)** – HF Hub CLI for models, datasets, repos, and compute jobs
|
||||
- **[hugging-face-jobs](skills/hugging-face-jobs/)** – Run compute jobs and Python scripts on HF infrastructure
|
||||
|
||||
#### Other Official (16)
|
||||
- **[vercel-deploy-claimable](skills/vercel-deploy-claimable/)** – Deploy projects to Vercel
|
||||
- **[design-md](skills/design-md/)** – Create and manage DESIGN.md files (Google Stitch)
|
||||
- **[using-neon](skills/using-neon/)** – Best practices for Neon Serverless Postgres
|
||||
- **[n8n-code-python](skills/n8n-code-python/)** – Python in n8n Code nodes
|
||||
- **[n8n-mcp-tools-expert](skills/n8n-mcp-tools-expert/)** – n8n MCP tools guide
|
||||
- **[n8n-node-configuration](skills/n8n-node-configuration/)** – n8n node configuration
|
||||
- **[swiftui-expert-skill](skills/swiftui-expert-skill/)** – SwiftUI best practices
|
||||
- **[fal-audio](skills/fal-audio/)** – Text-to-speech and speech-to-text using fal.ai
|
||||
- **[fal-generate](skills/fal-generate/)** – Generate images and videos using fal.ai AI models
|
||||
- **[fal-image-edit](skills/fal-image-edit/)** – AI-powered image editing with style transfer
|
||||
- **[fal-platform](skills/fal-platform/)** – Platform APIs for model management and usage tracking
|
||||
- **[fal-upscale](skills/fal-upscale/)** – Upscale and enhance image/video resolution using AI
|
||||
- **[fal-workflow](skills/fal-workflow/)** – Generate workflow JSON files for chaining AI models
|
||||
- **[deep-research](skills/deep-research/)** – Gemini Deep Research Agent for autonomous research
|
||||
- **[imagen](skills/imagen/)** – Generate images using Google Gemini
|
||||
- **[readme](skills/readme/)** – Generate comprehensive project documentation
|
||||
|
||||
### Community Skills (34)
|
||||
|
||||
#### Context Engineering Suite (7)
|
||||
A complete suite for building sophisticated AI agents with advanced context management:
|
||||
|
||||
- **[context-fundamentals](skills/context-fundamentals/)** – Understand what context is, why it matters, and the anatomy of context in agent systems
|
||||
- **[context-degradation](skills/context-degradation/)** – Recognize patterns of context failure: lost-in-middle, poisoning, distraction, and clash
|
||||
- **[context-compression](skills/context-compression/)** – Design and evaluate compression strategies for long-running sessions
|
||||
- **[context-optimization](skills/context-optimization/)** – Apply compaction, masking, and caching strategies
|
||||
- **[multi-agent-patterns](skills/multi-agent-patterns/)** – Master orchestrator, peer-to-peer, and hierarchical multi-agent architectures
|
||||
- **[memory-systems](skills/memory-systems/)** – Design short-term, long-term, and graph-based memory architectures
|
||||
- **[evaluation](skills/evaluation/)** – Build evaluation frameworks for agent systems
|
||||
|
||||
#### Development Tools (8)
|
||||
- **[frontend-slides](skills/frontend-slides/)** – Generate animation-rich HTML presentations with visual style previews
|
||||
- **[linear-claude-skill](skills/linear-claude-skill/)** – Manage Linear issues, projects, and teams
|
||||
- **[skill-rails-upgrade](skills/skill-rails-upgrade/)** – Analyze Rails apps and provide upgrade assessments
|
||||
- **[terraform-skill](skills/terraform-skill/)** – Terraform infrastructure as code best practices
|
||||
- **[tool-design](skills/tool-design/)** – Build tools that agents can use effectively, including architectural reduction patterns
|
||||
- **[screenshots](skills/screenshots/)** – Generate marketing screenshots with Playwright
|
||||
- **[automate-whatsapp](skills/automate-whatsapp/)** – Build WhatsApp automations with workflows and agents
|
||||
- **[observe-whatsapp](skills/observe-whatsapp/)** – Debug WhatsApp delivery issues and run health checks
|
||||
|
||||
#### Platform & Framework Skills (19)
|
||||
- **[aws-skills](skills/aws-skills/)** – AWS development with infrastructure automation
|
||||
- **[ui-skills](skills/ui-skills/)** – Opinionated constraints for building interfaces
|
||||
- **[vexor](skills/vexor/)** – Vector-powered CLI for semantic file search
|
||||
- **[pypict-skill](skills/pypict-skill/)** – Pairwise test generation
|
||||
- **[makepad-skills](skills/makepad-skills/)** – Makepad UI development for Rust apps
|
||||
- **[threejs-skills](skills/threejs-skills/)** – Three.js 3D experiences
|
||||
- **[claude-scientific-skills](skills/claude-scientific-skills/)** – Scientific research skills
|
||||
- **[claude-win11-speckit-update-skill](skills/claude-win11-speckit-update-skill/)** – Windows 11 management
|
||||
- **[security-bluebook-builder](skills/security-bluebook-builder/)** – Security documentation
|
||||
- **[claude-ally-health](skills/claude-ally-health/)** – Health assistant
|
||||
- **[clarity-gate](skills/clarity-gate/)** – RAG quality verification
|
||||
- **[beautiful-prose](skills/beautiful-prose/)** – Writing style guide
|
||||
- **[claude-speed-reader](skills/claude-speed-reader/)** – Speed reading tool
|
||||
- **[skill-seekers](skills/skill-seekers/)** – Skill conversion tool
|
||||
- **[varlock-claude-skill](skills/varlock-claude-skill/)** – Secure environment variable management
|
||||
- **[superpowers-lab](skills/superpowers-lab/)** – Superpowers Lab integration
|
||||
- **[nanobanana-ppt-skills](skills/nanobanana-ppt-skills/)** – PowerPoint presentation skills
|
||||
- **[x-article-publisher-skill](skills/x-article-publisher-skill/)** – X/Twitter article publishing
|
||||
- **[ffuf-claude-skill](skills/ffuf-claude-skill/)** – Web fuzzing with ffuf
|
||||
|
||||
---
|
||||
|
||||
## 📦 Registry Update
|
||||
|
||||
- **Total Skills**: 614 (from 553)
|
||||
- **New Skills Added**: 61
|
||||
- **Catalog**: Fully regenerated with all new skills
|
||||
- **Sources**: All skills properly attributed in `docs/SOURCES.md`
|
||||
|
||||
## 🔧 Improvements
|
||||
|
||||
### Quality Assurance
|
||||
- All new skills validated for frontmatter compliance
|
||||
- "When to Use" sections added where missing
|
||||
- Source attribution maintained for all skills
|
||||
- Risk labels properly set
|
||||
|
||||
### Documentation
|
||||
- Updated README.md with correct skill count (614)
|
||||
- Updated package.json version to 4.3.0
|
||||
- Comprehensive release notes created
|
||||
|
||||
## 📊 Statistics
|
||||
|
||||
- **Skills from VoltAgent Repository**: 61
|
||||
- Official Team Skills: 27
|
||||
- Community Skills: 34
|
||||
- **Skills Analyzed**: 174 total from VoltAgent
|
||||
- **Skills Already Present**: 32 (skipped as duplicates)
|
||||
- **Skills with Similar Names**: 89 (analyzed, 12 implemented as complementary)
|
||||
|
||||
## 👥 Credits
|
||||
|
||||
A huge shoutout to our community contributors and the VoltAgent team:
|
||||
|
||||
- **VoltAgent/awesome-agent-skills** for curating an excellent collection
|
||||
- **Official Teams**: Sentry, Trail of Bits, Expo, Hugging Face, Vercel Labs, Google Labs, Neon, fal.ai
|
||||
- **Community Contributors**: zarazhangrui, wrsmith108, robzolkos, muratcankoylan, antonbabenko, and all other skill authors
|
||||
|
||||
---
|
||||
|
||||
_Upgrade now: `git pull origin main` to fetch the latest skills._
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 53 KiB |
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"generatedAt": "2026-01-31T07:34:21.497Z",
|
||||
"generatedAt": "2026-02-01T07:22:00.871Z",
|
||||
"aliases": {
|
||||
"accessibility-compliance-audit": "accessibility-compliance-accessibility-audit",
|
||||
"active directory attacks": "active-directory-attacks",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"generatedAt": "2026-01-31T07:34:21.497Z",
|
||||
"generatedAt": "2026-02-01T07:22:00.871Z",
|
||||
"bundles": {
|
||||
"core-dev": {
|
||||
"description": "Core development skills across languages, frameworks, and backend/frontend fundamentals.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"generatedAt": "2026-01-31T07:34:21.497Z",
|
||||
"total": 618,
|
||||
"generatedAt": "2026-02-01T07:22:00.871Z",
|
||||
"total": 619,
|
||||
"skills": [
|
||||
{
|
||||
"id": "3d-web-experience",
|
||||
@@ -10670,6 +10670,30 @@
|
||||
],
|
||||
"path": "skills/quant-analyst/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "radix-ui-design-system",
|
||||
"name": "radix-ui-design-system",
|
||||
"description": "Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.",
|
||||
"category": "architecture",
|
||||
"tags": [
|
||||
"radix",
|
||||
"ui"
|
||||
],
|
||||
"triggers": [
|
||||
"radix",
|
||||
"ui",
|
||||
"accessible",
|
||||
"primitives",
|
||||
"headless",
|
||||
"component",
|
||||
"customization",
|
||||
"theming",
|
||||
"compound",
|
||||
"grade",
|
||||
"libraries"
|
||||
],
|
||||
"path": "skills/radix-ui-design-system/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "rag-engineer",
|
||||
"name": "rag-engineer",
|
||||
|
||||
@@ -15,7 +15,7 @@ AI Agents (like **Claude Code**, **Gemini**, **Cursor**) are smart, but they lac
|
||||
|
||||
## ⚡️ Quick Start: The "Starter Packs"
|
||||
|
||||
Don't panic about the 624+ skills. You don't need them all at once.
|
||||
Don't panic about the 626+ skills. You don't need them all at once.
|
||||
We have curated **Starter Packs** to get you running immediately.
|
||||
|
||||
You **install the full repo once** (npx or clone); Starter Packs are curated lists to help you **pick which skills to use** by role (e.g. Web Wizard, Hacker Pack)—they are not a different way to install.
|
||||
|
||||
@@ -149,7 +149,13 @@ function readSkill(skillDir, skillId) {
|
||||
|
||||
function listSkillIds(skillsDir) {
|
||||
return fs.readdirSync(skillsDir)
|
||||
.filter(entry => !entry.startsWith('.') && fs.statSync(path.join(skillsDir, entry)).isDirectory())
|
||||
.filter(entry => {
|
||||
if (entry.startsWith('.')) return false;
|
||||
const dirPath = path.join(skillsDir, entry);
|
||||
if (!fs.statSync(dirPath).isDirectory()) return false;
|
||||
const skillPath = path.join(dirPath, 'SKILL.md');
|
||||
return fs.existsSync(skillPath);
|
||||
})
|
||||
.sort();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "4.5.0",
|
||||
"description": "624+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
||||
"version": "4.6.0",
|
||||
"description": "626+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"validate": "python3 scripts/validate_skills.py",
|
||||
|
||||
22
skills/SPDD/1-research.md
Normal file
22
skills/SPDD/1-research.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# ROLE: Codebase Research Agent
|
||||
Sua única missão é documentar e explicar a base de código como ela existe hoje.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- NÃO sugira melhorias, refatorações ou mudanças arquiteturais.
|
||||
- NÃO realize análise de causa raiz ou proponha melhorias futuras.
|
||||
- APENAS descreva o que existe, onde existe e como os componentes interagem.
|
||||
- Você é um cartógrafo técnico criando um mapa do sistema atual.
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Initial Analysis:** Leia os arquivos mencionados pelo usuário integralmente (SEM limit/offset).
|
||||
2. **Decomposition:** Decompunha a dúvida do usuário em áreas de pesquisa (ex: Rotas, Banco, UI).
|
||||
3. **Execution:** - Localize onde os arquivos e componentes vivem.
|
||||
- Analise COMO o código atual funciona (sem criticar).
|
||||
- Encontre exemplos de padrões existentes para referência.
|
||||
4. **Project State:**
|
||||
- Se projeto NOVO: Pesquise e liste a melhor estrutura de pastas e bibliotecas padrão de mercado para a stack.
|
||||
- Se projeto EXISTENTE: Identifique dívidas técnicas ou padrões que devem ser respeitados.
|
||||
|
||||
## OUTPUT:
|
||||
- Gere o arquivo `docs/prds/prd_current_task.md` com YAML frontmatter (date, topic, tags, status).
|
||||
- **Ação Obrigatória:** Termine com: "Pesquisa concluída. Por favor, dê um `/clear` e carregue `.agente/2-spec.md` para o planejamento."
|
||||
20
skills/SPDD/2-spec.md
Normal file
20
skills/SPDD/2-spec.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# ROLE: Implementation Planning Agent
|
||||
Você deve criar planos de implementação detalhados e ser cético quanto a requisitos vagos.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- Não escreva o plano de uma vez; valide a estrutura das fases com o usuário.
|
||||
- Cada decisão técnica deve ser tomada antes de finalizar o plano.
|
||||
- O plano deve ser acionável e completo, sem "perguntas abertas".
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Context Check:** Leia o `docs/prds/prd_current_task.md` gerado anteriormente.
|
||||
2. **Phasing:** Divida o trabalho em fases incrementais e testáveis.
|
||||
3. **Detailing:** Para cada arquivo afetado, defina:
|
||||
- **Path exato.**
|
||||
- **Ação:** (CRIAR | MODIFICAR | DELETAR).
|
||||
- **Lógica:** Snippets de pseudocódigo ou referências de implementação.
|
||||
4. **Success Criteria:** Defina "Automated Verification" (scripts/testes) e "Manual Verification" (UI/UX).
|
||||
|
||||
## OUTPUT:
|
||||
- Gere o arquivo `docs/specs/spec_current_task.md` seguindo o template de fases.
|
||||
- **Ação Obrigatória:** Termine com: "Spec finalizada. Por favor, dê um `/clear` e carregue `.agente/3-implementation.md` para execução."
|
||||
20
skills/SPDD/3-implementation.md
Normal file
20
skills/SPDD/3-implementation.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# ROLE: Implementation Execution Agent
|
||||
Você deve implementar um plano técnico aprovado com precisão cirúrgica.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- Siga a intenção do plano enquanto se adapta à realidade encontrada.
|
||||
- Implemente uma fase COMPLETAMENTE antes de passar para a próxima.
|
||||
- **STOP & THINK:** Se encontrar um erro na Spec ou um mismatch no código, PARE e reporte. Não tente adivinhar.
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Sanity Check:** Leia a Spec e o Ticket original. Verifique se o ambiente está limpo.
|
||||
2. **Execution:** Codifique seguindo os padrões de Clean Code e os snippets da Spec.
|
||||
3. **Verification:**
|
||||
- Após cada fase, execute os comandos de "Automated Verification" descritos na Spec.
|
||||
- PAUSE para confirmação manual do usuário após cada fase concluída.
|
||||
4. **Progress:** Atualize os checkboxes (- [x]) no arquivo de Spec conforme avança.
|
||||
|
||||
## OUTPUT:
|
||||
- Código fonte implementado.
|
||||
- Relatório de conclusão de fase com resultados de testes.
|
||||
- **Ação Final:** Pergunte se o usuário deseja realizar testes de regressão ou seguir para a próxima task.
|
||||
@@ -292,7 +292,7 @@ jobs:
|
||||
uses: softprops/action-gh-release@v1
|
||||
with:
|
||||
tag_name: ${{ steps.version.outputs.tag }}
|
||||
body_path: RELEASE_NOTES.md
|
||||
body_path: CHANGELOG.md
|
||||
generate_release_notes: true
|
||||
```
|
||||
|
||||
@@ -368,7 +368,7 @@ repo = "repo"
|
||||
git cliff -o CHANGELOG.md
|
||||
|
||||
# Generate for specific range
|
||||
git cliff v1.0.0..v2.0.0 -o RELEASE_NOTES.md
|
||||
git cliff v1.0.0..v2.0.0 -o CHANGELOG.md
|
||||
|
||||
# Preview without writing
|
||||
git cliff --unreleased --dry-run
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
|
||||
|
||||
name: frontend-slides
|
||||
description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
|
||||
source: https://github.com/zarazhangrui/frontend-slides
|
||||
|
||||
847
skills/radix-ui-design-system/SKILL.md
Normal file
847
skills/radix-ui-design-system/SKILL.md
Normal file
@@ -0,0 +1,847 @@
|
||||
---
|
||||
name: radix-ui-design-system
|
||||
description: Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Radix UI Design System
|
||||
|
||||
Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.
|
||||
|
||||
## Overview
|
||||
|
||||
Radix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.
|
||||
|
||||
**Key Strengths:**
|
||||
- **Headless by design**: Full styling control without fighting defaults
|
||||
- **Accessibility built-in**: WAI-ARIA compliant, keyboard navigation, screen reader support
|
||||
- **Composable primitives**: Build complex components from simple building blocks
|
||||
- **Framework agnostic**: Works with React, but styles work anywhere
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Creating a custom design system from scratch
|
||||
- Building accessible UI component libraries
|
||||
- Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.)
|
||||
- Migrating from styled component libraries to unstyled primitives
|
||||
- Setting up theming systems with CSS variables or Tailwind
|
||||
- Need full control over component behavior and styling
|
||||
- Building applications requiring WCAG 2.1 AA/AAA compliance
|
||||
|
||||
## Do not use this skill when
|
||||
|
||||
- You need pre-styled components out of the box (use shadcn/ui, Mantine, etc.)
|
||||
- Building simple static pages without interactivity
|
||||
- The project doesn't use React 16.8+ (Radix requires hooks)
|
||||
- You need components for frameworks other than React
|
||||
|
||||
---
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Accessibility First
|
||||
|
||||
Every Radix primitive is built with accessibility as the foundation:
|
||||
|
||||
- **Keyboard Navigation**: Full keyboard support (Tab, Arrow keys, Enter, Escape)
|
||||
- **Screen Readers**: Proper ARIA attributes and live regions
|
||||
- **Focus Management**: Automatic focus trapping and restoration
|
||||
- **Disabled States**: Proper handling of disabled and aria-disabled
|
||||
|
||||
**Rule**: Never override accessibility features. Enhance, don't replace.
|
||||
|
||||
### 2. Headless Architecture
|
||||
|
||||
Radix provides **behavior**, you provide **appearance**:
|
||||
|
||||
```tsx
|
||||
// ❌ Don't fight pre-styled components
|
||||
<Button className="override-everything" />
|
||||
|
||||
// ✅ Radix gives you behavior, you add styling
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger className="your-button-styles" />
|
||||
<Dialog.Content className="your-modal-styles" />
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### 3. Composition Over Configuration
|
||||
|
||||
Build complex components from simple primitives:
|
||||
|
||||
```tsx
|
||||
// Primitive components compose naturally
|
||||
<Tabs.Root>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="tab1">Content 1</Tabs.Content>
|
||||
<Tabs.Content value="tab2">Content 2</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# Install individual primitives (recommended)
|
||||
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
|
||||
|
||||
# Or install multiple at once
|
||||
npm install @radix-ui/react-{dialog,dropdown-menu,tabs,tooltip}
|
||||
|
||||
# For styling (optional but common)
|
||||
npm install clsx tailwind-merge class-variance-authority
|
||||
```
|
||||
|
||||
### Basic Component Pattern
|
||||
|
||||
Every Radix component follows this pattern:
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
export function MyDialog() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
{/* Trigger the dialog */}
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="trigger-styles">Open</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
{/* Portal renders outside DOM hierarchy */}
|
||||
<Dialog.Portal>
|
||||
{/* Overlay (backdrop) */}
|
||||
<Dialog.Overlay className="overlay-styles" />
|
||||
|
||||
{/* Content (modal) */}
|
||||
<Dialog.Content className="content-styles">
|
||||
<Dialog.Title>Title</Dialog.Title>
|
||||
<Dialog.Description>Description</Dialog.Description>
|
||||
|
||||
{/* Your content here */}
|
||||
|
||||
<Dialog.Close asChild>
|
||||
<button>Close</button>
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Theming Strategies
|
||||
|
||||
### Strategy 1: CSS Variables (Framework-Agnostic)
|
||||
|
||||
**Best for**: Maximum portability, SSR-friendly
|
||||
|
||||
```css
|
||||
/* globals.css */
|
||||
:root {
|
||||
--color-primary: 220 90% 56%;
|
||||
--color-surface: 0 0% 100%;
|
||||
--radius-base: 0.5rem;
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-primary: 220 90% 66%;
|
||||
--color-surface: 222 47% 11%;
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// Component.tsx
|
||||
<Dialog.Content
|
||||
className="
|
||||
bg-[hsl(var(--color-surface))]
|
||||
rounded-[var(--radius-base)]
|
||||
shadow-[var(--shadow-lg)]
|
||||
"
|
||||
/>
|
||||
```
|
||||
|
||||
### Strategy 2: Tailwind + CVA (Class Variance Authority)
|
||||
|
||||
**Best for**: Tailwind projects, variant-heavy components
|
||||
|
||||
```tsx
|
||||
// button.tsx
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
// Base styles
|
||||
"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
interface ButtonProps extends VariantProps<typeof buttonVariants> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Button({ variant, size, children }: ButtonProps) {
|
||||
return (
|
||||
<button className={cn(buttonVariants({ variant, size }))}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Strategy 3: Stitches (CSS-in-JS)
|
||||
|
||||
**Best for**: Runtime theming, scoped styles
|
||||
|
||||
```tsx
|
||||
import { styled } from '@stitches/react';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
const StyledContent = styled(Dialog.Content, {
|
||||
backgroundColor: '$surface',
|
||||
borderRadius: '$md',
|
||||
padding: '$6',
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
small: { width: '300px' },
|
||||
medium: { width: '500px' },
|
||||
large: { width: '700px' },
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
size: 'medium',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Pattern 1: Compound Components with Context
|
||||
|
||||
**Use case**: Share state between primitive parts
|
||||
|
||||
```tsx
|
||||
// Select.tsx
|
||||
import * as Select from '@radix-ui/react-select';
|
||||
import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
|
||||
|
||||
export function CustomSelect({ items, placeholder, onValueChange }) {
|
||||
return (
|
||||
<Select.Root onValueChange={onValueChange}>
|
||||
<Select.Trigger className="select-trigger">
|
||||
<Select.Value placeholder={placeholder} />
|
||||
<Select.Icon>
|
||||
<ChevronDownIcon />
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
|
||||
<Select.Portal>
|
||||
<Select.Content className="select-content">
|
||||
<Select.Viewport>
|
||||
{items.map((item) => (
|
||||
<Select.Item
|
||||
key={item.value}
|
||||
value={item.value}
|
||||
className="select-item"
|
||||
>
|
||||
<Select.ItemText>{item.label}</Select.ItemText>
|
||||
<Select.ItemIndicator>
|
||||
<CheckIcon />
|
||||
</Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 2: Polymorphic Components with `asChild`
|
||||
|
||||
**Use case**: Render as different elements without losing behavior
|
||||
|
||||
```tsx
|
||||
// ✅ Render as Next.js Link but keep Radix behavior
|
||||
<Dialog.Trigger asChild>
|
||||
<Link href="/settings">Open Settings</Link>
|
||||
</Dialog.Trigger>
|
||||
|
||||
// ✅ Render as custom component
|
||||
<DropdownMenu.Item asChild>
|
||||
<YourCustomButton icon={<Icon />}>Action</YourCustomButton>
|
||||
</DropdownMenu.Item>
|
||||
```
|
||||
|
||||
**Why `asChild` matters**: Prevents nested button/link issues in accessibility tree.
|
||||
|
||||
### Pattern 3: Controlled vs Uncontrolled
|
||||
|
||||
```tsx
|
||||
// Uncontrolled (Radix manages state)
|
||||
<Tabs.Root defaultValue="tab1">
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
</Tabs.Root>
|
||||
|
||||
// Controlled (You manage state)
|
||||
const [activeTab, setActiveTab] = useState('tab1');
|
||||
|
||||
<Tabs.Root value={activeTab} onValueChange={setActiveTab}>
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
**Rule**: Use controlled when you need to sync with external state (URL, Redux, etc.).
|
||||
|
||||
### Pattern 4: Animation with Framer Motion
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
export function AnimatedDialog({ open, onOpenChange }) {
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
||||
<Dialog.Portal forceMount>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<>
|
||||
<Dialog.Overlay asChild>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="dialog-overlay"
|
||||
/>
|
||||
</Dialog.Overlay>
|
||||
|
||||
<Dialog.Content asChild>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="dialog-content"
|
||||
>
|
||||
{/* Content */}
|
||||
</motion.div>
|
||||
</Dialog.Content>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Primitives Reference
|
||||
|
||||
### Dialog (Modal)
|
||||
|
||||
```tsx
|
||||
<Dialog.Root> {/* State container */}
|
||||
<Dialog.Trigger /> {/* Opens dialog */}
|
||||
<Dialog.Portal> {/* Renders in portal */}
|
||||
<Dialog.Overlay /> {/* Backdrop */}
|
||||
<Dialog.Content> {/* Modal content */}
|
||||
<Dialog.Title /> {/* Required for a11y */}
|
||||
<Dialog.Description /> {/* Required for a11y */}
|
||||
<Dialog.Close /> {/* Closes dialog */}
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### Dropdown Menu
|
||||
|
||||
```tsx
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger />
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item />
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.CheckboxItem />
|
||||
<DropdownMenu.RadioGroup>
|
||||
<DropdownMenu.RadioItem />
|
||||
</DropdownMenu.RadioGroup>
|
||||
<DropdownMenu.Sub> {/* Nested menus */}
|
||||
<DropdownMenu.SubTrigger />
|
||||
<DropdownMenu.SubContent />
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
```
|
||||
|
||||
### Tabs
|
||||
|
||||
```tsx
|
||||
<Tabs.Root defaultValue="tab1">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="tab1" />
|
||||
<Tabs.Trigger value="tab2" />
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="tab1" />
|
||||
<Tabs.Content value="tab2" />
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
### Tooltip
|
||||
|
||||
```tsx
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger />
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content side="top" align="center">
|
||||
Tooltip text
|
||||
<Tooltip.Arrow />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
```
|
||||
|
||||
### Popover
|
||||
|
||||
```tsx
|
||||
<Popover.Root>
|
||||
<Popover.Trigger />
|
||||
<Popover.Portal>
|
||||
<Popover.Content side="bottom" align="start">
|
||||
Content
|
||||
<Popover.Arrow />
|
||||
<Popover.Close />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Checklist
|
||||
|
||||
### Every Component Must Have:
|
||||
|
||||
- [ ] **Focus Management**: Visible focus indicators on all interactive elements
|
||||
- [ ] **Keyboard Navigation**: Full keyboard support (Tab, Arrows, Enter, Esc)
|
||||
- [ ] **ARIA Labels**: Meaningful labels for screen readers
|
||||
- [ ] **Color Contrast**: WCAG AA minimum (4.5:1 for text, 3:1 for UI)
|
||||
- [ ] **Error States**: Clear error messages with `aria-invalid` and `aria-describedby`
|
||||
- [ ] **Loading States**: Proper `aria-busy` during async operations
|
||||
|
||||
### Dialog-Specific:
|
||||
- [ ] `Dialog.Title` is present (required for screen readers)
|
||||
- [ ] `Dialog.Description` provides context
|
||||
- [ ] Focus trapped inside modal when open
|
||||
- [ ] Escape key closes dialog
|
||||
- [ ] Focus returns to trigger on close
|
||||
|
||||
### Dropdown-Specific:
|
||||
- [ ] Arrow keys navigate items
|
||||
- [ ] Type-ahead search works
|
||||
- [ ] First/last item wrapping behavior
|
||||
- [ ] Selected state indicated visually and with ARIA
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### ✅ Do This
|
||||
|
||||
1. **Always use `asChild` to avoid wrapper divs**
|
||||
```tsx
|
||||
<Dialog.Trigger asChild>
|
||||
<button>Open</button>
|
||||
</Dialog.Trigger>
|
||||
```
|
||||
|
||||
2. **Provide semantic HTML**
|
||||
```tsx
|
||||
<Dialog.Content asChild>
|
||||
<article role="dialog" aria-labelledby="title">
|
||||
{/* content */}
|
||||
</article>
|
||||
</Dialog.Content>
|
||||
```
|
||||
|
||||
3. **Use CSS variables for theming**
|
||||
```css
|
||||
.dialog-content {
|
||||
background: hsl(var(--surface));
|
||||
color: hsl(var(--on-surface));
|
||||
}
|
||||
```
|
||||
|
||||
4. **Compose primitives for complex components**
|
||||
```tsx
|
||||
function CommandPalette() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Content>
|
||||
<Combobox /> {/* Radix Combobox inside Dialog */}
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### ❌ Don't Do This
|
||||
|
||||
1. **Don't skip accessibility parts**
|
||||
```tsx
|
||||
// ❌ Missing Title and Description
|
||||
<Dialog.Content>
|
||||
<div>Content</div>
|
||||
</Dialog.Content>
|
||||
```
|
||||
|
||||
2. **Don't fight the primitives**
|
||||
```tsx
|
||||
// ❌ Overriding internal behavior
|
||||
<Dialog.Content onClick={(e) => e.stopPropagation()}>
|
||||
```
|
||||
|
||||
3. **Don't mix controlled and uncontrolled**
|
||||
```tsx
|
||||
// ❌ Inconsistent state management
|
||||
<Tabs.Root defaultValue="tab1" value={activeTab}>
|
||||
```
|
||||
|
||||
4. **Don't ignore keyboard navigation**
|
||||
```tsx
|
||||
// ❌ Disabling keyboard behavior
|
||||
<DropdownMenu.Item onKeyDown={(e) => e.preventDefault()}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Real-World Examples
|
||||
|
||||
### Example 1: Command Palette (Combo Dialog)
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
export function CommandPalette() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
setOpen((open) => !open);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', down);
|
||||
return () => document.removeEventListener('keydown', down);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50" />
|
||||
<Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<Command>
|
||||
<Command.Input placeholder="Type a command..." />
|
||||
<Command.List>
|
||||
<Command.Empty>No results found.</Command.Empty>
|
||||
<Command.Group heading="Suggestions">
|
||||
<Command.Item>Calendar</Command.Item>
|
||||
<Command.Item>Search Emoji</Command.Item>
|
||||
</Command.Group>
|
||||
</Command.List>
|
||||
</Command>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Example 2: Dropdown Menu with Icons
|
||||
|
||||
```tsx
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
||||
|
||||
export function ActionsMenu() {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Actions">
|
||||
<DotsHorizontalIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" align="end">
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Edit
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Duplicate
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item className="dropdown-item text-red-500">
|
||||
Delete
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Example 3: Form with Radix Select + React Hook Form
|
||||
|
||||
```tsx
|
||||
import * as Select from '@radix-ui/react-select';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
|
||||
interface FormData {
|
||||
country: string;
|
||||
}
|
||||
|
||||
export function CountryForm() {
|
||||
const { control, handleSubmit } = useForm<FormData>();
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit((data) => console.log(data))}>
|
||||
<Controller
|
||||
name="country"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select.Root onValueChange={field.onChange} value={field.value}>
|
||||
<Select.Trigger className="select-trigger">
|
||||
<Select.Value placeholder="Select a country" />
|
||||
<Select.Icon />
|
||||
</Select.Trigger>
|
||||
|
||||
<Select.Portal>
|
||||
<Select.Content className="select-content">
|
||||
<Select.Viewport>
|
||||
<Select.Item value="us">United States</Select.Item>
|
||||
<Select.Item value="ca">Canada</Select.Item>
|
||||
<Select.Item value="uk">United Kingdom</Select.Item>
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
)}
|
||||
/>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Problem: Dialog doesn't close on Escape key
|
||||
|
||||
**Cause**: `onEscapeKeyDown` event prevented or `open` state not synced
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
{/* Don't prevent default on escape */}
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### Problem: Dropdown menu positioning is off
|
||||
|
||||
**Cause**: Parent container has `overflow: hidden` or transform
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Use Portal to render outside overflow container
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content />
|
||||
</DropdownMenu.Portal>
|
||||
```
|
||||
|
||||
### Problem: Animations don't work
|
||||
|
||||
**Cause**: Portal content unmounts immediately
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Use forceMount + AnimatePresence
|
||||
<Dialog.Portal forceMount>
|
||||
<AnimatePresence>
|
||||
{open && <Dialog.Content />}
|
||||
</AnimatePresence>
|
||||
</Dialog.Portal>
|
||||
```
|
||||
|
||||
### Problem: TypeScript errors with `asChild`
|
||||
|
||||
**Cause**: Type inference issues with polymorphic components
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Explicitly type your component
|
||||
<Dialog.Trigger asChild>
|
||||
<button type="button">Open</button>
|
||||
</Dialog.Trigger>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### 1. Code Splitting
|
||||
|
||||
```tsx
|
||||
// Lazy load heavy primitives
|
||||
const Dialog = lazy(() => import('@radix-ui/react-dialog'));
|
||||
const DropdownMenu = lazy(() => import('@radix-ui/react-dropdown-menu'));
|
||||
```
|
||||
|
||||
### 2. Portal Container Reuse
|
||||
|
||||
```tsx
|
||||
// Create portal container once
|
||||
<Tooltip.Provider>
|
||||
{/* All tooltips share portal container */}
|
||||
<Tooltip.Root>...</Tooltip.Root>
|
||||
<Tooltip.Root>...</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
```
|
||||
|
||||
### 3. Memoization
|
||||
|
||||
```tsx
|
||||
// Memoize expensive render functions
|
||||
const SelectItems = memo(({ items }) => (
|
||||
items.map((item) => <Select.Item key={item.value} value={item.value} />)
|
||||
));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration with Popular Tools
|
||||
|
||||
### shadcn/ui (Built on Radix)
|
||||
|
||||
shadcn/ui is a collection of copy-paste components built with Radix + Tailwind.
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest init
|
||||
npx shadcn-ui@latest add dialog
|
||||
```
|
||||
|
||||
**When to use shadcn vs raw Radix**:
|
||||
- Use shadcn: Quick prototyping, standard designs
|
||||
- Use raw Radix: Full customization, unique designs
|
||||
|
||||
### Radix Themes (Official Styled System)
|
||||
|
||||
```tsx
|
||||
import { Theme, Button, Dialog } from '@radix-ui/themes';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Theme accentColor="crimson" grayColor="sand">
|
||||
<Button>Click me</Button>
|
||||
</Theme>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `@tailwind-design-system` - Tailwind + Radix integration patterns
|
||||
- `@react-patterns` - React composition patterns
|
||||
- `@frontend-design` - Overall frontend architecture
|
||||
- `@accessibility-compliance` - WCAG compliance testing
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
### Official Documentation
|
||||
- [Radix UI Docs](https://www.radix-ui.com/primitives)
|
||||
- [Radix Colors](https://www.radix-ui.com/colors) - Accessible color system
|
||||
- [Radix Icons](https://www.radix-ui.com/icons) - Icon library
|
||||
|
||||
### Community Resources
|
||||
- [shadcn/ui](https://ui.shadcn.com) - Component collection
|
||||
- [Radix UI Discord](https://discord.com/invite/7Xb99uG) - Community support
|
||||
- [CVA Documentation](https://cva.style/docs) - Variant management
|
||||
|
||||
### Examples
|
||||
- [Radix Playground](https://www.radix-ui.com/primitives/docs/overview/introduction#try-it-out)
|
||||
- [shadcn/ui Source](https://github.com/shadcn-ui/ui) - Production examples
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Installation
|
||||
```bash
|
||||
npm install @radix-ui/react-{primitive-name}
|
||||
```
|
||||
|
||||
### Basic Pattern
|
||||
```tsx
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger />
|
||||
<Primitive.Portal>
|
||||
<Primitive.Content />
|
||||
</Primitive.Portal>
|
||||
</Primitive.Root>
|
||||
```
|
||||
|
||||
### Key Props
|
||||
- `asChild` - Render as child element
|
||||
- `defaultValue` - Uncontrolled default
|
||||
- `value` / `onValueChange` - Controlled state
|
||||
- `open` / `onOpenChange` - Open state
|
||||
- `side` / `align` - Positioning
|
||||
|
||||
---
|
||||
|
||||
**Remember**: Radix gives you **behavior**, you give it **beauty**. Accessibility is built-in, customization is unlimited.
|
||||
63
skills/radix-ui-design-system/examples/README.md
Normal file
63
skills/radix-ui-design-system/examples/README.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# Radix UI Design System - Skill Examples
|
||||
|
||||
This folder contains practical examples demonstrating how to use Radix UI primitives to build accessible, customizable components.
|
||||
|
||||
## Examples
|
||||
|
||||
### `dialog-example.tsx`
|
||||
|
||||
Demonstrates Dialog (Modal) component patterns:
|
||||
- **BasicDialog**: Standard modal with form
|
||||
- **ControlledDialog**: Externally controlled modal state
|
||||
|
||||
**Key Concepts**:
|
||||
- Portal rendering outside DOM hierarchy
|
||||
- Overlay (backdrop) handling
|
||||
- Accessibility requirements (Title, Description)
|
||||
- Custom styling with CSS
|
||||
|
||||
### `dropdown-example.tsx`
|
||||
|
||||
Complete dropdown menu implementation:
|
||||
- **CompleteDropdown**: Full-featured menu with all Radix primitives
|
||||
- Regular items
|
||||
- Separators and labels
|
||||
- Checkbox items
|
||||
- Radio groups
|
||||
- Sub-menus
|
||||
- **ActionsMenu**: Simple actions menu for data tables/cards
|
||||
|
||||
**Key Concepts**:
|
||||
- Compound component architecture
|
||||
- Keyboard navigation
|
||||
- Item indicators (checkboxes, radio buttons)
|
||||
- Nested sub-menus
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { BasicDialog } from './examples/dialog-example';
|
||||
import { CompleteDropdown } from './examples/dropdown-example';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<BasicDialog />
|
||||
<CompleteDropdown />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
These examples use CSS classes. You can:
|
||||
1. Copy the CSS from each file
|
||||
2. Replace with Tailwind classes
|
||||
3. Use CSS-in-JS (Stitches, Emotion, etc.)
|
||||
|
||||
## Learn More
|
||||
|
||||
- [Main SKILL.md](../SKILL.md) - Complete guide
|
||||
- [Component Template](../templates/component-template.tsx) - Boilerplate
|
||||
- [Radix UI Docs](https://www.radix-ui.com/primitives)
|
||||
128
skills/radix-ui-design-system/examples/dialog-example.tsx
Normal file
128
skills/radix-ui-design-system/examples/dialog-example.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { Cross2Icon } from '@radix-ui/react-icons';
|
||||
import './dialog.css';
|
||||
|
||||
/**
|
||||
* Example: Basic Dialog Component
|
||||
*
|
||||
* Demonstrates:
|
||||
* - Compound component pattern
|
||||
* - Portal rendering
|
||||
* - Accessibility features (Title, Description)
|
||||
* - Custom styling with CSS
|
||||
*/
|
||||
export function BasicDialog() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="button-primary">
|
||||
Open Dialog
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Portal>
|
||||
{/* Overlay (backdrop) */}
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
|
||||
{/* Content (modal) */}
|
||||
<Dialog.Content className="dialog-content">
|
||||
{/* Title - Required for accessibility */}
|
||||
<Dialog.Title className="dialog-title">
|
||||
Edit Profile
|
||||
</Dialog.Title>
|
||||
|
||||
{/* Description - Recommended for accessibility */}
|
||||
<Dialog.Description className="dialog-description">
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</Dialog.Description>
|
||||
|
||||
{/* Form Content */}
|
||||
<form className="dialog-form">
|
||||
<fieldset className="fieldset">
|
||||
<label className="label" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="input"
|
||||
id="name"
|
||||
defaultValue="John Doe"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="fieldset">
|
||||
<label className="label" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
className="input"
|
||||
id="email"
|
||||
type="email"
|
||||
defaultValue="john@example.com"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div className="dialog-actions">
|
||||
<Dialog.Close asChild>
|
||||
<button className="button-secondary" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
<button className="button-primary" type="submit">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Close button */}
|
||||
<Dialog.Close asChild>
|
||||
<button className="icon-button" aria-label="Close">
|
||||
<Cross2Icon />
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Example: Controlled Dialog
|
||||
*
|
||||
* Use when you need to:
|
||||
* - Sync dialog state with external state
|
||||
* - Programmatically open/close dialog
|
||||
* - Track dialog open state
|
||||
*/
|
||||
export function ControlledDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleSave = () => {
|
||||
// Your save logic here
|
||||
console.log('Saving...');
|
||||
setOpen(false); // Close after save
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="button-primary">
|
||||
Open Controlled Dialog
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<Dialog.Title>Controlled Dialog</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
This dialog's state is managed externally.
|
||||
</Dialog.Description>
|
||||
|
||||
<p>Dialog is {open ? 'open' : 'closed'}</p>
|
||||
|
||||
<button onClick={handleSave}>Save and Close</button>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
162
skills/radix-ui-design-system/examples/dropdown-example.tsx
Normal file
162
skills/radix-ui-design-system/examples/dropdown-example.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import {
|
||||
HamburgerMenuIcon,
|
||||
DotFilledIcon,
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import './dropdown.css';
|
||||
|
||||
/**
|
||||
* Example: Complete Dropdown Menu
|
||||
*
|
||||
* Features:
|
||||
* - Items, separators, labels
|
||||
* - Checkbox items
|
||||
* - Radio group items
|
||||
* - Sub-menus
|
||||
* - Keyboard navigation
|
||||
*/
|
||||
export function CompleteDropdown() {
|
||||
const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
|
||||
const [urlsChecked, setUrlsChecked] = React.useState(false);
|
||||
const [person, setPerson] = React.useState('pedro');
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Customise options">
|
||||
<HamburgerMenuIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" sideOffset={5}>
|
||||
{/* Regular items */}
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
New Tab <div className="right-slot">⌘+T</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
New Window <div className="right-slot">⌘+N</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item" disabled>
|
||||
New Private Window <div className="right-slot">⇧+⌘+N</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
{/* Sub-menu */}
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger className="dropdown-subtrigger">
|
||||
More Tools
|
||||
<div className="right-slot">
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.SubContent
|
||||
className="dropdown-subcontent"
|
||||
sideOffset={2}
|
||||
alignOffset={-5}
|
||||
>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Save Page As… <div className="right-slot">⌘+S</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Create Shortcut…
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Name Window…
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Developer Tools
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
|
||||
{/* Checkbox items */}
|
||||
<DropdownMenu.CheckboxItem
|
||||
className="dropdown-checkbox-item"
|
||||
checked={bookmarksChecked}
|
||||
onCheckedChange={setBookmarksChecked}
|
||||
>
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Show Bookmarks <div className="right-slot">⌘+B</div>
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
className="dropdown-checkbox-item"
|
||||
checked={urlsChecked}
|
||||
onCheckedChange={setUrlsChecked}
|
||||
>
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Show Full URLs
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
|
||||
{/* Radio group */}
|
||||
<DropdownMenu.Label className="dropdown-label">
|
||||
People
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
||||
<DropdownMenu.RadioItem className="dropdown-radio-item" value="pedro">
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<DotFilledIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Pedro Duarte
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem className="dropdown-radio-item" value="colm">
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<DotFilledIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Colm Tuite
|
||||
</DropdownMenu.RadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
|
||||
<DropdownMenu.Arrow className="dropdown-arrow" />
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Example: Simple Actions Menu
|
||||
*
|
||||
* Common use case for data tables, cards, etc.
|
||||
*/
|
||||
export function ActionsMenu({ onEdit, onDuplicate, onDelete }) {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Actions">
|
||||
<DotsHorizontalIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" align="end">
|
||||
<DropdownMenu.Item className="dropdown-item" onSelect={onEdit}>
|
||||
Edit
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item" onSelect={onDuplicate}>
|
||||
Duplicate
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item
|
||||
className="dropdown-item dropdown-item-danger"
|
||||
onSelect={onDelete}
|
||||
>
|
||||
Delete
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
148
skills/radix-ui-design-system/templates/component-template.tsx
Normal file
148
skills/radix-ui-design-system/templates/component-template.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Radix UI Component Template
|
||||
*
|
||||
* This template provides a starting point for creating
|
||||
* custom components with Radix UI primitives.
|
||||
*
|
||||
* Replace [PRIMITIVE] with actual primitive name:
|
||||
* Dialog, DropdownMenu, Select, Tabs, Tooltip, etc.
|
||||
*/
|
||||
|
||||
import * as [PRIMITIVE] from '@radix-ui/react-[primitive]';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ============================================================================
|
||||
// Variants Definition (using CVA)
|
||||
// ============================================================================
|
||||
|
||||
const [component]Variants = cva(
|
||||
// Base styles (always applied)
|
||||
"base-styles-here",
|
||||
{
|
||||
variants: {
|
||||
// Define your variants
|
||||
variant: {
|
||||
default: "default-styles",
|
||||
secondary: "secondary-styles",
|
||||
destructive: "destructive-styles",
|
||||
},
|
||||
size: {
|
||||
sm: "small-size-styles",
|
||||
md: "medium-size-styles",
|
||||
lg: "large-size-styles",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "md",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// TypeScript Interfaces
|
||||
// ============================================================================
|
||||
|
||||
interface [Component]Props
|
||||
extends React.ComponentPropsWithoutRef<typeof [PRIMITIVE].Root>,
|
||||
VariantProps<typeof [component]Variants> {
|
||||
// Add custom props here
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component Implementation
|
||||
// ============================================================================
|
||||
|
||||
export function [Component]({
|
||||
variant,
|
||||
size,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: [Component]Props) {
|
||||
return (
|
||||
<[PRIMITIVE].Root {...props}>
|
||||
{/* Trigger */}
|
||||
<[PRIMITIVE].Trigger asChild>
|
||||
<button className={cn([component]Variants({ variant, size }), className)}>
|
||||
{children}
|
||||
</button>
|
||||
</[PRIMITIVE].Trigger>
|
||||
|
||||
{/* Portal (if needed) */}
|
||||
<[PRIMITIVE].Portal>
|
||||
{/* Overlay (for Dialog, etc.) */}
|
||||
<[PRIMITIVE].Overlay className="overlay-styles" />
|
||||
|
||||
{/* Content */}
|
||||
<[PRIMITIVE].Content className="content-styles">
|
||||
{/* Required accessibility parts */}
|
||||
<[PRIMITIVE].Title className="title-styles">
|
||||
Title
|
||||
</[PRIMITIVE].Title>
|
||||
|
||||
<[PRIMITIVE].Description className="description-styles">
|
||||
Description
|
||||
</[PRIMITIVE].Description>
|
||||
|
||||
{/* Your content */}
|
||||
<div className="content-body">
|
||||
{/* ... */}
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<[PRIMITIVE].Close asChild>
|
||||
<button className="close-button">Close</button>
|
||||
</[PRIMITIVE].Close>
|
||||
</[PRIMITIVE].Content>
|
||||
</[PRIMITIVE].Portal>
|
||||
</[PRIMITIVE].Root>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Sub-components (if needed)
|
||||
// ============================================================================
|
||||
|
||||
[Component].[SubComponent] = function [SubComponent]({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof [PRIMITIVE].[SubComponent]>) {
|
||||
return (
|
||||
<[PRIMITIVE].[SubComponent]
|
||||
className={cn("subcomponent-styles", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Usage Example
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
import { [Component] } from './[component]';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<[Component] variant="default" size="md">
|
||||
Trigger Content
|
||||
</[Component]
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// Accessibility Checklist
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
[ ] Keyboard navigation works (Tab, Arrow keys, Enter, Esc)
|
||||
[ ] Focus visible on all interactive elements
|
||||
[ ] Screen reader announces all states
|
||||
[ ] ARIA attributes are correct
|
||||
[ ] Color contrast meets WCAG AA (4.5:1 for text)
|
||||
[ ] Focus trapped when needed (modals)
|
||||
[ ] Focus restored after close
|
||||
*/
|
||||
@@ -2249,15 +2249,6 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-slides",
|
||||
"path": "skills/frontend-slides",
|
||||
"category": "uncategorized",
|
||||
"name": "Frontend Slides",
|
||||
"description": "Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration (\"show, don't tell\"), then generates production-quality slide dec",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-design",
|
||||
"path": "skills/frontend-design",
|
||||
@@ -2321,6 +2312,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-slides",
|
||||
"path": "skills/frontend-slides",
|
||||
"category": "uncategorized",
|
||||
"name": "frontend-slides",
|
||||
"description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/zarazhangrui/frontend-slides"
|
||||
},
|
||||
{
|
||||
"id": "full-stack-orchestration-full-stack-feature",
|
||||
"path": "skills/full-stack-orchestration-full-stack-feature",
|
||||
@@ -3977,6 +3977,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "radix-ui-design-system",
|
||||
"path": "skills/radix-ui-design-system",
|
||||
"category": "uncategorized",
|
||||
"name": "radix-ui-design-system",
|
||||
"description": "Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "rag-engineer",
|
||||
"path": "skills/rag-engineer",
|
||||
|
||||
Reference in New Issue
Block a user