chore(release): 4.6.0 - SPDD & Radix UI Design System

- Bump version to 4.6.0, update CHANGELOG and README counts to 626 - Fix listSkillIds to only include dirs with SKILL.md (SPDD excluded from catalog) - Regenerate catalog and index after PR 47/48 merge
Merge pull request #47 from c1c3ru/main
2026-02-01 08:23:00 +01:00 · 2026-02-01 08:21:30 +01:00 · 2026-02-01 08:21:26 +01:00 · 2026-02-01 06:44:42 +00:00 · 2026-02-01 11:36:47 +09:00 · 2026-01-31 22:25:14 -03:00
29 changed files with 3292 additions and 196 deletions
--- a/.github/MAINTENANCE.md
+++ b/.github/MAINTENANCE.md
@@ -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]**

--- a/CATALOG.md
+++ b/CATALOG.md
@@ -1,10 +1,10 @@
 # Skill Catalog

-Generated at: 2026-01-30T19:29:11.960Z
+Generated at: 2026-02-01T07:22:00.871Z

-Total skills: 617
+Total skills: 619

-## architecture (58)
+## architecture (59)

 | Skill | Description | Tags | Triggers |
 | --- | --- | --- | --- |
@@ -53,6 +53,7 @@ Total skills: 617
 | `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 |
@@ -109,7 +110,7 @@ Total skills: 617
 | `startup-financial-modeling` | This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estima... | startup, financial, modeling | startup, financial, modeling, skill, should, used, user, asks, projections, model, forecast, revenue |
 | `team-composition-analysis` | This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity a... | team, composition | team, composition, analysis, skill, should, used, user, asks, plan, structure, determine, hiring |

-## data-ai (92)
+## data-ai (93)

 | Skill | Description | Tags | Triggers |
 | --- | --- | --- | --- |
@@ -192,6 +193,7 @@ Total skills: 617
 | `spark-optimization` | Optimize Apache Spark jobs with partitioning, caching, shuffle optimization, and memory tuning. Use when improving Spark performance, debugging slow jobs, or... | spark, optimization | spark, optimization, optimize, apache, jobs, partitioning, caching, shuffle, memory, tuning, improving, performance |
 | `sql-optimization-patterns` | Master SQL query optimization, indexing strategies, and EXPLAIN analysis to dramatically improve database performance and eliminate slow queries. Use when de... | sql, optimization | sql, optimization, query, indexing, explain, analysis, dramatically, improve, database, performance, eliminate, slow |
 | `sqlmap-database-pentesting` | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap,... | sqlmap, database, pentesting | sqlmap, database, pentesting, penetration, testing, skill, should, used, user, asks, automate, sql |
+| `stitch-ui-design` | Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, genera... | stitch, ui | stitch, ui, creating, effective, prompts, google, ai, user, wants, ux, app, interfaces |
 | `tdd-orchestrator` | Master TDD orchestrator specializing in red-green-refactor discipline, multi-agent workflow coordination, and comprehensive test-driven development practices... | tdd, orchestrator | tdd, orchestrator, specializing, red, green, refactor, discipline, multi, agent, coordination, test, driven |
 | `team-collaboration-standup-notes` | You are an expert team communication specialist focused on async-first standup practices, AI-assisted note generation from commit history, and effective remo... | team, collaboration, standup, notes | team, collaboration, standup, notes, communication, async, first, ai, assisted, note, generation, commit |
 | `telegram-bot-builder` | Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API,... | telegram, bot, builder | telegram, bot, builder, building, bots, solve, real, problems, simple, automation, complex, ai |
--- a/CHANGELOG.md
+++ b/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

--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# 🌌 Antigravity Awesome Skills: 624+ 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 624+ 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**

 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](https://claude.ai)
@@ -11,7 +11,7 @@
 [![OpenCode](https://img.shields.io/badge/OpenCode-CLI-gray)](https://github.com/opencode-ai/opencode)
 [![Antigravity](https://img.shields.io/badge/Antigravity-DeepMind-red)](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 624+ Skills](#browse-624-skills)
+- [📚 Browse 626+ Skills](#browse-626-skills)
 - [🛠️ Installation](#installation)
 - [🤝 How to Contribute](#how-to-contribute)
 - [👥 Contributors & Credits](#credits--sources)
@@ -52,7 +52,7 @@ AI Agents (like Claude Code, Cursor, or Gemini) are smart, but they lack **speci

 ### 2. ⚡️ Quick Start (The "Bundle" Way)

-Don't install 624+ skills manually. Use our **Starter Packs**:
+Install once (clone or npx); then use our **Starter Packs** in [docs/BUNDLES.md](docs/BUNDLES.md) to see which skills fit your role. You get the full repo; Starter Packs are curated lists, not a separate install.

 1.  **Install** (pick one):
    ```bash
@@ -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 624+ Skills
+## Browse 626+ Skills

 We have moved the full skill registry to a dedicated catalog to keep this README clean.

@@ -229,6 +229,7 @@ This collection would not be possible without the incredible work of the Claude
 - **[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills)**: Marketing skills for CRO, copywriting, SEO, paid ads, and growth (23 skills, MIT).
 - **[vudovn/antigravity-kit](https://github.com/vudovn/antigravity-kit)**: AI Agent templates with Skills, Agents, and Workflows (33 skills, MIT).
 - **[affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code)**: Complete Claude Code configuration collection from Anthropic hackathon winner - skills only (8 skills, MIT).
+- **[whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills)**: Practical fp-ts skills for TypeScript – fp-ts-pragmatic, fp-ts-react, fp-ts-errors (v4.4.0).
 - **[webzler/agentMemory](https://github.com/webzler/agentMemory)**: Source for the agent-memory-mcp skill.
 - **[sstklen/claude-api-cost-optimization](https://github.com/sstklen/claude-api-cost-optimization)**: Save 50-90% on Claude API costs with smart optimization strategies (MIT).

@@ -293,6 +294,7 @@ We officially thank the following contributors for their help in making this rep
 - [taksrules](https://github.com/taksrules)
 - [zebbern](https://github.com/zebbern)
 - [vuth-dogo](https://github.com/vuth-dogo)
+- [whatiskadudoing](https://github.com/whatiskadudoing)

 ## Star History

--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -1,153 +0,0 @@
-# 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._
--- a/assets/star-history.png
+++ b/assets/star-history.png
--- a/data/aliases.json
+++ b/data/aliases.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-30T19:29:11.960Z",
+  "generatedAt": "2026-02-01T07:22:00.871Z",
  "aliases": {
    "accessibility-compliance-audit": "accessibility-compliance-accessibility-audit",
    "active directory attacks": "active-directory-attacks",
--- a/data/bundles.json
+++ b/data/bundles.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-30T19:29:11.960Z",
+  "generatedAt": "2026-02-01T07:22:00.871Z",
  "bundles": {
    "core-dev": {
      "description": "Core development skills across languages, frameworks, and backend/frontend fundamentals.",
@@ -112,6 +112,7 @@
        "shopify-apps",
        "shopify-development",
        "slack-bot-builder",
+        "stitch-ui-design",
        "swiftui-expert-skill",
        "systems-programming-rust-project",
        "tavily-web",
--- a/data/catalog.json
+++ b/data/catalog.json
@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-01-30T19:29:11.960Z",
-  "total": 617,
+  "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",
@@ -12900,6 +12924,31 @@
      ],
      "path": "skills/startup-metrics-framework/SKILL.md"
    },
+    {
+      "id": "stitch-ui-design",
+      "name": "stitch-ui-design",
+      "description": "Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.",
+      "category": "data-ai",
+      "tags": [
+        "stitch",
+        "ui"
+      ],
+      "triggers": [
+        "stitch",
+        "ui",
+        "creating",
+        "effective",
+        "prompts",
+        "google",
+        "ai",
+        "user",
+        "wants",
+        "ux",
+        "app",
+        "interfaces"
+      ],
+      "path": "skills/stitch-ui-design/SKILL.md"
+    },
    {
      "id": "stride-analysis-patterns",
      "name": "stride-analysis-patterns",
--- a/docs/FAQ.md
+++ b/docs/FAQ.md
@@ -11,7 +11,7 @@
 Skills are specialized instruction files that teach AI assistants how to handle specific tasks. Think of them as expert knowledge modules that your AI can load on-demand.
 **Simple analogy:** Just like you might consult different experts (a lawyer, a doctor, a mechanic), these skills let your AI become an expert in different areas when you need them.

-### Do I need to install all 560+ skills?
+### Do I need to install all 624+ skills?

 **No!** When you clone the repository, all skills are available, but your AI only loads them when you explicitly invoke them with `@skill-name`.
 It's like having a library - all books are there, but you only read the ones you need.
--- a/docs/GETTING_STARTED.md
+++ b/docs/GETTING_STARTED.md
@@ -15,9 +15,11 @@ AI Agents (like **Claude Code**, **Gemini**, **Cursor**) are smart, but they lac

 ## ⚡️ Quick Start: The "Starter Packs"

-Don't panic about the 560+ 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.
+
 ### 1. Install the Repo

 **Option A — npx (easiest):**
@@ -98,8 +100,8 @@ _Check the [Skill Catalog](../CATALOG.md) for the full list._

 ## ❓ FAQ

-**Q: Do I need to install all 560 skills?**
-A: You clone the whole repo, but your AI only _reads_ the ones you ask for (or that are relevant). It's lightweight!
+**Q: Do I need to install all 624 skills?**
+A: You clone the whole repo once; your AI only _reads_ the skills you invoke (or that are relevant), so it stays lightweight. **Starter Packs** in [BUNDLES.md](BUNDLES.md) are curated lists to help you discover the right skills for your role—they don't change how you install.

 **Q: Can I make my own skills?**
 A: Yes! Use the **@skill-creator** skill to build your own.
--- a/docs/SOURCES.md
+++ b/docs/SOURCES.md
@@ -72,6 +72,14 @@ The following skills were added from the curated collection at [VoltAgent/awesom
 - **memory-systems** - [muratcankoylan](https://github.com/muratcankoylan/Agent-Skills-for-Context-Engineering)
 - **terraform-skill** - [antonbabenko](https://github.com/antonbabenko/terraform-skill)

+## Skills from whatiskadudoing/fp-ts-skills (v4.4.0)
+
+| Skill | Original Source | License | Notes |
+| :---- | :-------------- | :------ | :---- |
+| `fp-ts-pragmatic` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | Pragmatic fp-ts guide – pipe, Option, Either, TaskEither |
+| `fp-ts-react` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | fp-ts with React 18/19 and Next.js |
+| `fp-ts-errors` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | Type-safe error handling with Either and TaskEither |
+
 ## License Policy

 - **Code**: All original code in this repository is **MIT**.
--- a/lib/skill-utils.js
+++ b/lib/skill-utils.js
@@ -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();
 }

--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "antigravity-awesome-skills",
-  "version": "4.4.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",
--- a/skills/SPDD/1-research.md
+++ b/skills/SPDD/1-research.md
@@ -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."
--- a/skills/SPDD/2-spec.md
+++ b/skills/SPDD/2-spec.md
@@ -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."
--- a/skills/SPDD/3-implementation.md
+++ b/skills/SPDD/3-implementation.md
@@ -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.
--- a/skills/changelog-automation/resources/implementation-playbook.md
+++ b/skills/changelog-automation/resources/implementation-playbook.md
@@ -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
--- a/skills/frontend-slides/SKILL.md
+++ b/skills/frontend-slides/SKILL.md
@@ -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
--- a/skills/radix-ui-design-system/SKILL.md
+++ b/skills/radix-ui-design-system/SKILL.md
@@ -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.
--- a/skills/radix-ui-design-system/examples/README.md
+++ b/skills/radix-ui-design-system/examples/README.md
@@ -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)
--- a/skills/radix-ui-design-system/examples/dialog-example.tsx
+++ b/skills/radix-ui-design-system/examples/dialog-example.tsx
@@ -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>
+  );
+}
--- a/skills/radix-ui-design-system/examples/dropdown-example.tsx
+++ b/skills/radix-ui-design-system/examples/dropdown-example.tsx
@@ -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>
+  );
+}
--- a/skills/radix-ui-design-system/templates/component-template.tsx
+++ b/skills/radix-ui-design-system/templates/component-template.tsx
@@ -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
+*/
--- a/skills/stitch-ui-design/README.md
+++ b/skills/stitch-ui-design/README.md
@@ -0,0 +1,165 @@
+# Stitch UI Design Skill
+
+Expert guidance for creating effective prompts in Google Stitch, the AI-powered UI design tool.
+
+## Overview
+
+This skill provides comprehensive guidance for crafting precise, actionable prompts that generate high-quality UI designs in Google Stitch. It covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows.
+
+## What's Included
+
+### SKILL.md
+Core prompting principles and techniques:
+- Specificity and detail requirements
+- Visual style definition
+- Multi-screen flow structuring
+- Platform and responsive specifications
+- Functional requirements
+- Prompt templates
+- Iteration strategies
+- Common use cases
+- Anti-patterns to avoid
+
+### References
+
+#### prompt-examples.md
+Comprehensive library of effective Stitch prompts organized by category:
+- Landing pages
+- Mobile apps
+- Dashboards
+- E-commerce
+- Forms & authentication
+- Content platforms
+- SaaS applications
+
+Each example includes detailed component breakdowns, style specifications, and platform requirements.
+
+#### advanced-techniques.md
+Advanced strategies for production-ready designs:
+- Image-to-UI workflows
+- Design system integration
+- Responsive design strategies
+- Accessibility considerations
+- Performance optimization
+- Component reusability
+- Atomic design methodology
+- Export and handoff best practices
+
+## When to Use This Skill
+
+Use this skill when:
+- Creating UI designs in Google Stitch
+- Generating mobile or web app interfaces
+- Crafting effective Stitch prompts
+- Converting sketches or wireframes to digital UI
+- Building design systems
+- Creating responsive layouts
+- Ensuring accessibility compliance
+- Optimizing design-to-code workflows
+
+## Key Principles
+
+1. **Be Specific** - Generic prompts yield generic results
+2. **Define Visual Style** - Always include colors, aesthetics, and design direction
+3. **Structure Clearly** - List components and sections explicitly
+4. **Specify Platform** - Indicate mobile, tablet, desktop, or responsive
+5. **Include Functionality** - Describe interactions, states, and user flows
+6. **Iterate Incrementally** - Make focused changes rather than complete redesigns
+
+## Quick Start
+
+### Basic Prompt Template
+
+```
+[Screen/Component Type] for [User/Context]
+
+Key Features:
+- [Feature 1 with specific details]
+- [Feature 2 with specific details]
+- [Feature 3 with specific details]
+
+Visual Style:
+- [Color scheme]
+- [Design aesthetic]
+- [Layout approach]
+
+Platform: [Mobile/Web/Responsive]
+```
+
+### Example Usage
+
+```
+Dashboard for SaaS analytics platform
+
+Key Features:
+- Top metrics cards showing MRR, active users, churn rate
+- Line chart for revenue trends (last 30 days)
+- Recent activity feed with user actions
+- Quick action buttons for reports and exports
+
+Visual Style:
+- Dark mode with blue/purple gradient accents
+- Modern glassmorphic cards with subtle shadows
+- Clean data visualization with accessible colors
+
+Platform: Responsive web (desktop-first)
+```
+
+## Best Practices
+
+### Do's ✅
+- Provide specific component details
+- Define clear visual direction
+- Specify responsive behavior
+- Include interaction states
+- Use design terminology
+- Reference existing designs when helpful
+- Iterate with annotations
+- Consider accessibility from the start
+
+### Don'ts ❌
+- Use vague descriptions ("nice website")
+- Omit visual style guidance
+- Forget platform specifications
+- Ignore responsive requirements
+- Skip accessibility considerations
+- Make complete redesigns instead of incremental changes
+
+## Integration with Development
+
+### Stitch → Figma → Code
+1. Generate UI in Stitch with detailed prompts
+2. Export to Figma for design system integration
+3. Hand off to developers with design specs
+4. Implement with production-ready code
+
+### Stitch → HTML → Framework
+1. Generate and refine UI in Stitch
+2. Export HTML/CSS code
+3. Convert to React/Vue/Svelte components
+4. Integrate into application codebase
+
+## Resources
+
+- **SKILL.md** - Core prompting guide
+- **prompt-examples.md** - 30+ detailed prompt examples
+- **advanced-techniques.md** - Production-ready design strategies
+
+## Tips for Success
+
+1. Start with clear requirements and context
+2. Use the prompt template for consistency
+3. Reference examples for similar use cases
+4. Iterate incrementally with annotations
+5. Generate variants to explore options
+6. Always specify visual style and platform
+7. Consider accessibility in every prompt
+8. Refine exports before production use
+
+## About Google Stitch
+
+Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs. It supports text-to-UI generation, image-to-UI conversion, multi-screen flows, and exports to HTML/CSS, Figma, and code.
+
+---
+
+**Note:** This skill is designed to help you create effective prompts for Stitch. The quality of your output depends on the specificity and clarity of your prompts. Use the templates and examples as starting points, then customize for your unique requirements.
--- a/skills/stitch-ui-design/SKILL.md
+++ b/skills/stitch-ui-design/SKILL.md
@@ -0,0 +1,378 @@
+---
+name: stitch-ui-design
+description: Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.
+risk: safe
+source: "self"
+---
+
+# Stitch UI Design Prompting
+
+Expert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This skill helps create precise, actionable prompts that generate high-quality UI designs for web and mobile applications.
+
+## What is Google Stitch?
+
+Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs. It supports:
+
+- Text-to-UI generation from natural language prompts
+- Image-to-UI conversion from sketches, wireframes, or screenshots
+- Multi-screen app flows and responsive layouts
+- Export to HTML/CSS, Figma, and code
+- Iterative refinement with variants and annotations
+
+## Core Prompting Principles
+
+### 1. Be Specific and Detailed
+
+Generic prompts yield generic results. Specific prompts with clear requirements produce tailored, professional designs.
+
+**Poor prompt:**
+```
+Create a dashboard
+```
+
+**Effective prompt:**
+```
+Member dashboard with course modules grid, progress tracking bar, 
+and community feed sidebar using purple theme and card-based layout
+```
+
+**Why it works:** Specifies components (modules, progress, feed), layout structure (grid, sidebar), visual style (purple theme, cards), and context (member dashboard).
+
+### 2. Define Visual Style and Theme
+
+Always include color schemes, design aesthetics, and visual direction to avoid generic AI outputs.
+
+**Components to specify:**
+- Color palette (primary colors, accent colors)
+- Design style (minimalist, modern, playful, professional, glassmorphic)
+- Typography preferences (if any)
+- Spacing and density (compact, spacious, balanced)
+
+**Example:**
+```
+E-commerce product page with hero image gallery, add-to-cart CTA, 
+reviews section, and related products carousel. Use clean minimalist 
+design with sage green accents and generous white space.
+```
+
+### 3. Structure Multi-Screen Flows Clearly
+
+For apps with multiple screens, list each screen as bullet points before generation.
+
+**Approach:**
+```
+Fitness tracking app with:
+- Onboarding screen with goal selection
+- Home dashboard with daily stats and activity rings
+- Workout library with category filters
+- Profile screen with achievements and settings
+```
+
+Stitch will ask for confirmation before generating multiple screens, ensuring alignment with your vision.
+
+### 4. Specify Platform and Responsive Behavior
+
+Indicate whether the design is for mobile, tablet, desktop, or responsive web.
+
+**Examples:**
+```
+Mobile app login screen (iOS style) with email/password fields and social auth buttons
+
+Responsive landing page that adapts from mobile (320px) to desktop (1440px) 
+with collapsible navigation
+```
+
+### 5. Include Functional Requirements
+
+Describe interactive elements, states, and user flows to generate more complete designs.
+
+**Elements to specify:**
+- Button actions and CTAs
+- Form fields and validation
+- Navigation patterns
+- Loading states
+- Empty states
+- Error handling
+
+**Example:**
+```
+Checkout flow with:
+- Cart summary with quantity adjusters
+- Shipping address form with validation
+- Payment method selection (cards, PayPal, Apple Pay)
+- Order confirmation with tracking number
+```
+
+## Prompt Structure Template
+
+Use this template for comprehensive prompts:
+
+```
+[Screen/Component Type] for [User/Context]
+
+Key Features:
+- [Feature 1 with specific details]
+- [Feature 2 with specific details]
+- [Feature 3 with specific details]
+
+Visual Style:
+- [Color scheme]
+- [Design aesthetic]
+- [Layout approach]
+
+Platform: [Mobile/Web/Responsive]
+```
+
+**Example:**
+```
+Dashboard for SaaS analytics platform
+
+Key Features:
+- Top metrics cards showing MRR, active users, churn rate
+- Line chart for revenue trends (last 30 days)
+- Recent activity feed with user actions
+- Quick action buttons for reports and exports
+
+Visual Style:
+- Dark mode with blue/purple gradient accents
+- Modern glassmorphic cards with subtle shadows
+- Clean data visualization with accessible colors
+
+Platform: Responsive web (desktop-first)
+```
+
+## Iteration Strategies
+
+### Refine with Annotations
+
+Use Stitch's "annotate to edit" feature to make targeted changes without rewriting the entire prompt.
+
+**Workflow:**
+1. Generate initial design from prompt
+2. Annotate specific elements that need changes
+3. Describe modifications in natural language
+4. Stitch updates only the annotated areas
+
+**Example annotations:**
+- "Make this button larger and use primary color"
+- "Add more spacing between these cards"
+- "Change this to a horizontal layout"
+
+### Generate Variants
+
+Request multiple variations to explore different design directions:
+
+```
+Generate 3 variants of this hero section:
+1. Image-focused with minimal text
+2. Text-heavy with supporting graphics
+3. Video background with overlay content
+```
+
+### Progressive Refinement
+
+Start broad, then add specificity in follow-up prompts:
+
+**Initial:**
+```
+E-commerce homepage
+```
+
+**Refinement 1:**
+```
+Add featured products section with 4-column grid and hover effects
+```
+
+**Refinement 2:**
+```
+Update color scheme to earth tones (terracotta, sage, cream) 
+and add promotional banner at top
+```
+
+## Common Use Cases
+
+### Landing Pages
+
+```
+SaaS landing page for [product name]
+
+Sections:
+- Hero with headline, subheadline, CTA, and product screenshot
+- Social proof with customer logos
+- Features grid (3 columns) with icons
+- Testimonials carousel
+- Pricing table (3 tiers)
+- FAQ accordion
+- Footer with links and newsletter signup
+
+Style: Modern, professional, trust-building
+Colors: Navy blue primary, light blue accents, white background
+```
+
+### Mobile Apps
+
+```
+Food delivery app home screen
+
+Components:
+- Search bar with location selector
+- Category chips (Pizza, Burgers, Sushi, etc.)
+- Restaurant cards with image, name, rating, delivery time, and price range
+- Bottom navigation (Home, Search, Orders, Profile)
+
+Style: Vibrant, appetite-appealing, easy to scan
+Colors: Orange primary, white background, food photography
+Platform: iOS mobile (375px width)
+```
+
+### Dashboards
+
+```
+Admin dashboard for content management system
+
+Layout:
+- Left sidebar navigation with collapsible menu
+- Top bar with search, notifications, and user profile
+- Main content area with:
+  - Stats overview (4 metric cards)
+  - Recent posts table with actions
+  - Activity timeline
+  - Quick actions panel
+
+Style: Clean, data-focused, professional
+Colors: Neutral grays with blue accents
+Platform: Desktop web (1440px)
+```
+
+### Forms and Inputs
+
+```
+Multi-step signup form for B2B platform
+
+Steps:
+1. Account details (company name, email, password)
+2. Company information (industry, size, role)
+3. Team setup (invite members)
+4. Confirmation with success message
+
+Features:
+- Progress indicator at top
+- Field validation with inline errors
+- Back/Next navigation
+- Skip option for step 3
+
+Style: Minimal, focused, low-friction
+Colors: White background, green for success states
+```
+
+## Design-to-Code Workflow
+
+### Export Options
+
+Stitch provides multiple export formats:
+
+1. **HTML/CSS** - Clean, semantic markup for web projects
+2. **Figma** - "Paste to Figma" for design system integration
+3. **Code snippets** - Component-level exports for frameworks
+
+### Best Practices for Export
+
+**Before exporting:**
+- Verify responsive breakpoints
+- Check color contrast for accessibility
+- Ensure interactive states are defined
+- Review component naming and structure
+
+**After export:**
+- Refactor generated code for production standards
+- Add proper semantic HTML tags
+- Implement accessibility attributes (ARIA labels, alt text)
+- Optimize images and assets
+- Add animations and micro-interactions
+
+## Anti-Patterns to Avoid
+
+### ❌ Vague Prompts
+```
+Make a nice website
+```
+
+### ✅ Specific Prompts
+```
+Portfolio website for photographer with full-screen image gallery, 
+project case studies, and contact form. Minimalist black and white 
+aesthetic with serif typography.
+```
+
+---
+
+### ❌ Missing Context
+```
+Create a login page
+```
+
+### ✅ Context-Rich Prompts
+```
+Login page for healthcare portal with email/password fields, 
+"Remember me" checkbox, "Forgot password" link, and SSO options 
+(Google, Microsoft). Professional, trustworthy design with 
+blue medical theme.
+```
+
+---
+
+### ❌ No Visual Direction
+```
+Design an app for task management
+```
+
+### ✅ Clear Visual Direction
+```
+Task management app with kanban board layout, drag-and-drop cards, 
+priority labels, and due date indicators. Modern, productivity-focused 
+design with purple/teal gradient accents and dark mode support.
+```
+
+## Tips for Better Results
+
+1. **Reference existing designs** - Upload screenshots or sketches as visual references alongside text prompts
+
+2. **Use design terminology** - Terms like "hero section," "card layout," "glassmorphic," "bento grid" help Stitch understand your intent
+
+3. **Specify interactions** - Describe hover states, click actions, and transitions for more complete designs
+
+4. **Think in components** - Break complex screens into reusable components (header, card, form, etc.)
+
+5. **Iterate incrementally** - Make small, focused changes rather than complete redesigns
+
+6. **Test responsiveness** - Always verify designs at multiple breakpoints (mobile, tablet, desktop)
+
+7. **Consider accessibility** - Mention color contrast, font sizes, and touch target sizes in prompts
+
+8. **Leverage variants** - Generate multiple options to explore different design directions quickly
+
+## Integration with Development Workflow
+
+### Stitch → Figma → Code
+1. Generate UI in Stitch with detailed prompts
+2. Export to Figma for design system integration
+3. Hand off to developers with design specs
+4. Implement with production-ready code
+
+### Stitch → HTML → Framework
+1. Generate and refine UI in Stitch
+2. Export HTML/CSS code
+3. Convert to React/Vue/Svelte components
+4. Integrate into application codebase
+
+### Rapid Prototyping
+1. Create multiple screen variations quickly
+2. Test with users or stakeholders
+3. Iterate based on feedback
+4. Finalize design for development
+
+## Conclusion
+
+Effective Stitch prompts are specific, context-rich, and visually descriptive. By following these principles and templates, you can generate professional UI designs that serve as strong foundations for production applications.
+
+**Remember:** Stitch is a starting point, not a final product. Use it to accelerate the design process, explore ideas quickly, and establish visual direction—then refine with human judgment and production standards.
--- a/skills/stitch-ui-design/references/advanced-techniques.md
+++ b/skills/stitch-ui-design/references/advanced-techniques.md
@@ -0,0 +1,541 @@
+# Advanced Stitch Techniques
+
+Advanced strategies for maximizing Stitch's capabilities and creating production-ready designs.
+
+## Table of Contents
+
+1. [Image-to-UI Workflows](#image-to-ui-workflows)
+2. [Design System Integration](#design-system-integration)
+3. [Responsive Design Strategies](#responsive-design-strategies)
+4. [Accessibility Considerations](#accessibility-considerations)
+5. [Performance Optimization](#performance-optimization)
+6. [Component Reusability](#component-reusability)
+
+---
+
+## Image-to-UI Workflows
+
+### Converting Sketches to Digital UI
+
+Stitch can interpret hand-drawn sketches, wireframes, and rough mockups.
+
+**Best practices:**
+
+1. **Clear structure** - Draw distinct boxes for components
+2. **Label elements** - Annotate buttons, inputs, sections
+3. **Show hierarchy** - Use size and position to indicate importance
+4. **Include notes** - Add text describing interactions or states
+
+**Example workflow:**
+```
+1. Sketch wireframe on paper or tablet
+2. Take clear photo or scan
+3. Upload to Stitch with prompt:
+   "Convert this wireframe to a modern web interface with 
+   glassmorphic design and purple gradient accents"
+4. Refine generated design with annotations
+```
+
+### Reference-Based Design
+
+Upload screenshots of existing designs to create similar layouts with your own branding.
+
+**Prompt structure:**
+```
+Create a [type] similar to this reference image, but with:
+- [Your color scheme]
+- [Your content/copy]
+- [Your brand style]
+- [Specific modifications]
+```
+
+**Example:**
+```
+Create a pricing page similar to this reference, but with:
+- Navy blue and gold color scheme
+- 4 pricing tiers instead of 3
+- Annual/monthly toggle
+- Feature comparison table below
+- Testimonials section at bottom
+```
+
+---
+
+## Design System Integration
+
+### Establishing Design Tokens
+
+Define reusable design tokens in your initial prompt for consistency across screens.
+
+**Token categories:**
+- Colors (primary, secondary, accent, neutral, semantic)
+- Typography (font families, sizes, weights, line heights)
+- Spacing (scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px)
+- Border radius (none, sm, md, lg, full)
+- Shadows (elevation levels)
+
+**Example prompt:**
+```
+Dashboard using this design system:
+
+Colors:
+- Primary: #2563EB (blue)
+- Secondary: #7C3AED (purple)
+- Success: #10B981 (green)
+- Warning: #F59E0B (amber)
+- Error: #EF4444 (red)
+- Neutral: #6B7280 (gray)
+
+Typography:
+- Headings: Inter Bold
+- Body: Inter Regular
+- Code: JetBrains Mono
+
+Spacing: 8px base unit
+Border radius: 8px for cards, 4px for buttons
+Shadows: Subtle elevation with 0 4px 6px rgba(0,0,0,0.1)
+```
+
+### Component Library Approach
+
+Create a component library by generating individual components first, then composing them into full screens.
+
+**Workflow:**
+```
+1. Generate base components:
+   - Button variants (primary, secondary, outline, ghost)
+   - Input fields (text, email, password, search)
+   - Cards (basic, with image, with actions)
+   - Navigation (header, sidebar, tabs)
+
+2. Document component specs:
+   - States (default, hover, active, disabled)
+   - Sizes (sm, md, lg)
+   - Variants
+
+3. Compose screens using established components:
+   "Create a settings page using the button and input 
+   components from previous generations"
+```
+
+---
+
+## Responsive Design Strategies
+
+### Mobile-First Approach
+
+Start with mobile design, then scale up to tablet and desktop.
+
+**Prompt sequence:**
+
+**Step 1 - Mobile (375px):**
+```
+Mobile app home screen for recipe platform
+
+Layout:
+- Stacked vertical sections
+- Full-width cards
+- Bottom navigation
+- Hamburger menu
+
+Content:
+- Search bar at top
+- Featured recipe hero card
+- Category chips (horizontal scroll)
+- Recipe grid (1 column)
+```
+
+**Step 2 - Tablet (768px):**
+```
+Adapt the mobile recipe home screen for tablet:
+- 2-column recipe grid
+- Persistent sidebar navigation (replaces hamburger)
+- Larger featured hero with side-by-side layout
+- Category chips remain scrollable
+```
+
+**Step 3 - Desktop (1440px):**
+```
+Adapt for desktop:
+- 3-column recipe grid
+- Full sidebar with categories expanded
+- Hero section with 3 featured recipes
+- Top navigation bar with search and user menu
+```
+
+### Breakpoint-Specific Prompts
+
+Specify exact breakpoints and layout changes.
+
+**Example:**
+```
+Responsive product grid:
+
+Mobile (< 640px):
+- 1 column
+- Full-width cards
+- Vertical image orientation
+
+Tablet (640px - 1024px):
+- 2 columns
+- Square images
+- Compact card layout
+
+Desktop (> 1024px):
+- 4 columns
+- Hover effects with overlay
+- Quick view button
+```
+
+---
+
+## Accessibility Considerations
+
+### WCAG Compliance Prompts
+
+Include accessibility requirements directly in prompts.
+
+**Key areas to specify:**
+
+1. **Color Contrast**
+```
+Ensure all text meets WCAG AA standards:
+- Normal text: 4.5:1 contrast ratio minimum
+- Large text (18pt+): 3:1 contrast ratio minimum
+- Interactive elements: clear focus states with 3:1 contrast
+```
+
+2. **Touch Targets**
+```
+All interactive elements minimum 44x44px touch target size
+Adequate spacing between clickable elements (8px minimum)
+```
+
+3. **Keyboard Navigation**
+```
+Clear focus indicators on all interactive elements
+Logical tab order following visual flow
+Skip navigation link for keyboard users
+```
+
+4. **Screen Reader Support**
+```
+Descriptive button labels (not just "Click here")
+Alt text for all meaningful images
+Form labels properly associated with inputs
+Heading hierarchy (H1 → H2 → H3)
+```
+
+**Comprehensive accessibility prompt:**
+```
+Create an accessible contact form:
+
+Fields:
+- Name (required, with aria-required)
+- Email (required, with validation and error message)
+- Subject (dropdown with clear labels)
+- Message (textarea with character count)
+
+Accessibility features:
+- All inputs have visible labels
+- Required fields marked with asterisk and aria-required
+- Error messages with role="alert"
+- Submit button with descriptive text
+- Focus indicators with 3px blue outline
+- Color contrast meets WCAG AA
+- Touch targets 44x44px minimum
+
+Style: Clean, form-focused, high contrast
+Colors: Dark text on light background, red for errors
+```
+
+### Inclusive Design Patterns
+
+**Consider diverse users:**
+
+```
+Design a video player interface that supports:
+- Captions/subtitles toggle
+- Audio description option
+- Keyboard shortcuts (space to play/pause, arrows to seek)
+- Playback speed control
+- High contrast mode
+- Reduced motion option (disable animations)
+```
+
+---
+
+## Performance Optimization
+
+### Optimized Asset Prompts
+
+Request performance-conscious designs from the start.
+
+**Image optimization:**
+```
+E-commerce product gallery with performance optimization:
+- Lazy loading for images below fold
+- Thumbnail images (200x200px) for grid
+- Full-size images (1200x1200px) only on click
+- WebP format with JPEG fallback
+- Blur placeholder while loading
+```
+
+**Code efficiency:**
+```
+Generate lightweight HTML/CSS without:
+- Unnecessary wrapper divs
+- Inline styles (use classes)
+- Large external dependencies
+- Redundant CSS rules
+```
+
+### Progressive Enhancement
+
+Design for core functionality first, then enhance.
+
+**Example:**
+```
+Create a filterable product list with progressive enhancement:
+
+Base (no JavaScript):
+- Server-rendered product grid
+- Form-based filters with submit button
+- Pagination links
+
+Enhanced (with JavaScript):
+- AJAX filter updates without page reload
+- Infinite scroll
+- Smooth animations
+- Real-time search
+```
+
+---
+
+## Component Reusability
+
+### Atomic Design Methodology
+
+Build from atoms → molecules → organisms → templates → pages.
+
+**Atoms (basic elements):**
+```
+Generate design system atoms:
+- Button (primary, secondary, outline, ghost, danger)
+- Input field (text, email, password, search, textarea)
+- Label, Badge, Tag
+- Icon set (24x24px, consistent style)
+- Avatar (circle, square, with status indicator)
+```
+
+**Molecules (simple combinations):**
+```
+Create molecules using atoms:
+- Search bar (input + button + icon)
+- Form field (label + input + error message)
+- Card header (avatar + name + timestamp + menu)
+- Stat card (icon + label + value + trend)
+```
+
+**Organisms (complex components):**
+```
+Build organisms from molecules:
+- Navigation bar (logo + search bar + user menu)
+- Product card (image + title + price + rating + button)
+- Comment thread (avatar + name + timestamp + text + actions)
+- Data table (headers + rows + pagination + filters)
+```
+
+**Templates (page layouts):**
+```
+Compose templates from organisms:
+- Dashboard layout (sidebar + header + content grid)
+- Article layout (header + hero + content + sidebar)
+- Checkout flow (progress + form + summary)
+```
+
+### Variant Generation
+
+Create systematic variations of components.
+
+**Button variants prompt:**
+```
+Generate button component with all variants:
+
+Sizes: Small (32px), Medium (40px), Large (48px)
+
+Types:
+- Primary (filled, brand color)
+- Secondary (filled, gray)
+- Outline (border only)
+- Ghost (transparent, hover background)
+- Danger (filled, red)
+
+States for each:
+- Default
+- Hover
+- Active (pressed)
+- Disabled
+- Loading (with spinner)
+
+Include: Icon support (left/right), full-width option
+```
+
+---
+
+## Advanced Iteration Techniques
+
+### Conditional Variations
+
+Generate multiple versions based on different conditions.
+
+**Example:**
+```
+Create 3 hero section variants for A/B testing:
+
+Variant A - Image-focused:
+- Large background image
+- Minimal text overlay
+- Single CTA button
+
+Variant B - Text-focused:
+- Solid color background
+- Detailed copy with bullet points
+- Two CTA buttons (primary + secondary)
+
+Variant C - Video-focused:
+- Background video
+- Minimal text
+- Play button + CTA
+
+All variants use same brand colors and maintain mobile responsiveness
+```
+
+### State-Based Design
+
+Design for all possible states, not just the happy path.
+
+**Comprehensive state prompt:**
+```
+Design a data table with all states:
+
+Default state:
+- 10 rows of data
+- Sortable columns
+- Pagination
+
+Loading state:
+- Skeleton loaders for rows
+- Disabled controls
+
+Empty state:
+- Illustration
+- "No data found" message
+- "Add new" CTA button
+
+Error state:
+- Error icon
+- Error message
+- "Retry" button
+
+Search/Filter active:
+- Applied filters shown as chips
+- Clear filters option
+- Result count
+
+Selected rows:
+- Checkbox selection
+- Bulk action toolbar
+- Select all option
+```
+
+---
+
+## Export and Handoff Best Practices
+
+### Preparing for Development
+
+Before exporting, ensure designs are developer-ready.
+
+**Pre-export checklist:**
+
+1. **Naming conventions**
+   - Use semantic class names
+   - Follow BEM or consistent methodology
+   - Name components clearly
+
+2. **Documentation**
+   - Add comments for complex interactions
+   - Document responsive breakpoints
+   - Note any required JavaScript behavior
+
+3. **Asset organization**
+   - Export images at correct sizes
+   - Provide SVG for icons
+   - Include font files or CDN links
+
+4. **Specifications**
+   - Document spacing values
+   - List color hex codes
+   - Specify font sizes and weights
+
+### Figma Integration
+
+Optimize Stitch → Figma workflow.
+
+**Steps:**
+```
+1. Generate design in Stitch with detailed specifications
+2. Use "Paste to Figma" export
+3. In Figma:
+   - Organize layers with clear naming
+   - Create components from repeated elements
+   - Set up auto-layout for responsive behavior
+   - Define color and text styles
+   - Add design system documentation
+4. Share with developers using Figma's inspect mode
+```
+
+### Code Export Refinement
+
+Improve exported HTML/CSS for production.
+
+**Post-export tasks:**
+
+1. **Semantic HTML**
+   - Replace divs with semantic tags (header, nav, main, article, section, footer)
+   - Add ARIA labels where needed
+   - Ensure proper heading hierarchy
+
+2. **CSS optimization**
+   - Extract repeated styles into utility classes
+   - Use CSS custom properties for theme values
+   - Organize with methodology (BEM, SMACSS, etc.)
+   - Add responsive media queries if missing
+
+3. **Accessibility**
+   - Add alt text to images
+   - Ensure form labels are associated
+   - Add focus styles
+   - Test with screen reader
+
+4. **Performance**
+   - Optimize images
+   - Minify CSS
+   - Remove unused styles
+   - Add loading strategies
+
+---
+
+## Conclusion
+
+These advanced techniques help you move beyond basic Stitch usage to create production-ready, accessible, and performant designs. Combine these strategies with the core prompting principles to maximize your efficiency and output quality.
+
+**Key takeaways:**
+- Use images and references to accelerate design
+- Establish design systems early for consistency
+- Design responsively from the start
+- Prioritize accessibility in every prompt
+- Think in reusable components
+- Plan for all states, not just happy paths
+- Refine exports before production use
--- a/skills/stitch-ui-design/references/prompt-examples.md
+++ b/skills/stitch-ui-design/references/prompt-examples.md
@@ -0,0 +1,601 @@
+# Stitch Prompt Examples Library
+
+Comprehensive collection of effective Stitch prompts organized by use case and complexity level.
+
+## Table of Contents
+
+1. [Landing Pages](#landing-pages)
+2. [Mobile Apps](#mobile-apps)
+3. [Dashboards](#dashboards)
+4. [E-commerce](#e-commerce)
+5. [Forms & Authentication](#forms--authentication)
+6. [Content Platforms](#content-platforms)
+7. [SaaS Applications](#saas-applications)
+
+---
+
+## Landing Pages
+
+### Startup Landing Page
+
+```
+Landing page for AI writing assistant startup
+
+Hero Section:
+- Bold headline: "Write Better, Faster with AI"
+- Subheadline explaining value proposition
+- Primary CTA button "Start Free Trial"
+- Secondary CTA "Watch Demo"
+- Hero illustration showing product interface
+
+Features Section:
+- 3-column grid with icons
+- Feature 1: AI-powered suggestions
+- Feature 2: Multi-language support
+- Feature 3: Team collaboration
+
+Social Proof:
+- Customer logos (6 companies)
+- Testimonial cards with photos and quotes
+
+Pricing:
+- 3-tier pricing table (Free, Pro, Enterprise)
+- Feature comparison
+- Annual/Monthly toggle
+
+Style: Modern, tech-forward, trustworthy
+Colors: Deep purple primary, cyan accents, white background
+Typography: Sans-serif, clean and readable
+Platform: Responsive web
+```
+
+### Service Business Landing
+
+```
+Landing page for boutique yoga studio
+
+Above Fold:
+- Full-width hero image of studio space
+- Centered headline: "Find Your Balance"
+- Class schedule CTA button
+- Location and hours overlay
+
+Class Offerings:
+- Card grid (2x3) with class types
+- Each card: class name, duration, difficulty level, instructor photo
+- Hover effect reveals class description
+
+Instructor Profiles:
+- Horizontal scrolling carousel
+- Circular photos with names and specialties
+
+Testimonials:
+- Large quote format with student photos
+- 5-star ratings
+
+Call-to-Action:
+- "Book Your First Class Free" banner
+- Contact form with name, email, phone
+
+Style: Calm, organic, welcoming
+Colors: Sage green, warm beige, soft white
+Typography: Serif headings, sans-serif body
+Platform: Responsive web with mobile-first approach
+```
+
+---
+
+## Mobile Apps
+
+### Fitness Tracking App
+
+```
+Fitness tracking app - Home screen (iOS)
+
+Top Section:
+- Greeting with user name and current date
+- Daily goal progress ring (calories, steps, active minutes)
+- Motivational message based on progress
+
+Quick Stats Cards:
+- Today's steps with trend arrow
+- Active calories burned
+- Distance covered
+- Active time
+
+Recent Workouts:
+- List of last 3 workouts with type, duration, calories
+- Thumbnail icons for workout type
+- Swipe actions for details/delete
+
+Bottom Section:
+- "Start Workout" prominent button
+- Quick access to workout types (Run, Cycle, Strength, Yoga)
+
+Bottom Navigation:
+- Home (active), Workouts, Progress, Profile
+
+Style: Energetic, motivating, data-focused
+Colors: Vibrant orange primary, dark mode background, neon accents
+Typography: Bold headings, clear metrics
+Platform: iOS mobile (375x812px)
+```
+
+### Food Delivery App
+
+```
+Restaurant detail screen for food delivery app
+
+Header:
+- Restaurant cover photo
+- Back button and favorite icon
+- Restaurant name, rating (4.5 stars), delivery time (25-35 min)
+- Cuisine tags (Italian, Pizza, Pasta)
+
+Info Bar:
+- Delivery fee, minimum order, distance
+- Promo badge if applicable
+
+Menu Categories:
+- Sticky horizontal scroll tabs (Popular, Pizza, Pasta, Salads, Drinks)
+
+Menu Items:
+- Card layout with food photo, name, description, price
+- Add button with quantity selector
+- Dietary icons (vegetarian, spicy, etc.)
+
+Floating Cart:
+- Bottom sheet showing cart summary
+- Item count and total price
+- "View Cart" button
+
+Style: Appetite-appealing, easy to scan, vibrant
+Colors: Red primary (hunger-inducing), white background, food photography
+Typography: Friendly sans-serif
+Platform: Android mobile (360x800px)
+```
+
+---
+
+## Dashboards
+
+### Analytics Dashboard
+
+```
+Web analytics dashboard for marketing team
+
+Top Bar:
+- Date range selector (last 7 days, 30 days, custom)
+- Export button
+- Notification bell
+- User profile dropdown
+
+Key Metrics Row:
+- 4 metric cards in a row
+- Card 1: Total visitors (with % change)
+- Card 2: Conversion rate (with trend sparkline)
+- Card 3: Bounce rate (with comparison to previous period)
+- Card 4: Average session duration
+
+Main Chart:
+- Line chart showing traffic over time
+- Multiple lines for different sources (Organic, Paid, Social, Direct)
+- Interactive legend to toggle lines
+- Hover tooltips with exact values
+
+Secondary Panels:
+- Left: Top pages table (page, views, avg time, bounce rate)
+- Right: Traffic sources pie chart with percentages
+
+Bottom Section:
+- Recent conversions table with user, source, value, timestamp
+
+Style: Clean, data-focused, professional
+Colors: Navy blue sidebar, white main area, colorful chart lines
+Typography: Monospace for numbers, sans-serif for labels
+Platform: Desktop web (1440px+)
+```
+
+### Project Management Dashboard
+
+```
+Project management dashboard - Team view
+
+Sidebar:
+- Workspace selector dropdown
+- Navigation: Dashboard, Projects, Tasks, Team, Reports
+- Create new project button
+
+Header:
+- Project name and status badge
+- Team member avatars (max 5, then +N)
+- Search bar
+- View options (Board, List, Calendar)
+
+Kanban Board:
+- 4 columns: To Do, In Progress, Review, Done
+- Drag-and-drop cards
+- Each card shows: title, assignee avatar, due date, priority label, comment count
+- Add card button at bottom of each column
+
+Right Panel:
+- Task details when card is selected
+- Description, attachments, comments, activity log
+
+Quick Stats:
+- Progress bar showing completion percentage
+- Tasks by status mini chart
+- Upcoming deadlines list
+
+Style: Modern, organized, collaborative
+Colors: Purple primary, light gray background, status color coding
+Typography: Clear sans-serif, readable at all sizes
+Platform: Desktop web (1280px+)
+```
+
+---
+
+## E-commerce
+
+### Product Detail Page
+
+```
+Product detail page for fashion e-commerce
+
+Image Gallery:
+- Main product image (large, zoomable)
+- Thumbnail strip below (5-6 images)
+- 360° view option
+- Video thumbnail if available
+
+Product Info:
+- Brand name
+- Product title
+- Star rating (4.8) with review count (234 reviews)
+- Price with original price struck through if on sale
+- Sale badge if applicable
+
+Options:
+- Size selector (XS, S, M, L, XL) with availability indicators
+- Color swatches with product image preview on hover
+- Quantity selector
+
+Actions:
+- Add to Cart button (prominent)
+- Add to Wishlist button (outline)
+- Size guide link
+- Shipping calculator
+
+Product Details:
+- Tabbed interface (Description, Specifications, Reviews, Shipping)
+- Expandable sections on mobile
+
+Recommendations:
+- "You May Also Like" carousel
+- "Complete the Look" suggestions
+
+Style: Clean, product-focused, trustworthy
+Colors: Black and white with brand accent color (burgundy)
+Typography: Elegant serif for headings, sans-serif for body
+Platform: Responsive web
+```
+
+### Shopping Cart
+
+```
+Shopping cart page with checkout flow
+
+Cart Items:
+- List of products with thumbnail, name, size/color, price
+- Quantity adjuster (+/- buttons)
+- Remove item link
+- Save for later option
+
+Order Summary:
+- Sticky sidebar on desktop, bottom sheet on mobile
+- Subtotal
+- Shipping (calculated or "Free over $50")
+- Tax (estimated)
+- Discount code input field
+- Total (prominent)
+- Checkout button (large, primary color)
+
+Trust Signals:
+- Secure checkout badge
+- Free returns policy
+- Customer service contact
+
+Recommendations:
+- "Frequently Bought Together" section
+- Promotional banner for free shipping threshold
+
+Empty State:
+- Illustration
+- "Your cart is empty" message
+- "Continue Shopping" button
+- Recently viewed items
+
+Style: Clean, conversion-focused, reassuring
+Colors: Green for checkout CTA, neutral grays, trust badges
+Typography: Clear pricing, readable product names
+Platform: Responsive web
+```
+
+---
+
+## Forms & Authentication
+
+### Multi-Step Signup Form
+
+```
+B2B SaaS signup flow - 3 steps
+
+Progress Indicator:
+- Step 1: Account (active)
+- Step 2: Company
+- Step 3: Team
+
+Step 1 - Account Details:
+- Email input with validation
+- Password input with strength indicator
+- Confirm password
+- Terms and conditions checkbox
+- "Continue" button
+- "Already have an account? Sign in" link
+
+Step 2 - Company Information:
+- Company name
+- Industry dropdown
+- Company size radio buttons (1-10, 11-50, 51-200, 201+)
+- Role/Title input
+- "Back" and "Continue" buttons
+
+Step 3 - Invite Team:
+- Email input fields (dynamic, add more)
+- Role selector for each invite
+- "Skip for now" option
+- "Finish Setup" button
+
+Success State:
+- Checkmark animation
+- "Welcome to [Product]!" message
+- "Go to Dashboard" button
+
+Style: Minimal, focused, low-friction
+Colors: Blue primary, white background, green success states
+Typography: Clear labels, helpful microcopy
+Platform: Responsive web, mobile-optimized
+```
+
+### Login Page
+
+```
+Login page for enterprise software
+
+Left Panel (Desktop):
+- Brand logo
+- Hero image or illustration
+- Value proposition headline
+- Key benefits (3 bullet points)
+
+Right Panel (Form):
+- "Welcome back" heading
+- Email input field
+- Password input field with show/hide toggle
+- "Remember me" checkbox
+- "Forgot password?" link
+- "Sign In" button (full width)
+- Divider with "OR"
+- SSO options (Google, Microsoft, Okta) as buttons with logos
+- "Don't have an account? Sign up" link at bottom
+
+Security Indicators:
+- SSL badge
+- "Your data is secure" message
+
+Style: Professional, trustworthy, enterprise-grade
+Colors: Corporate blue, white, subtle grays
+Typography: Professional sans-serif
+Platform: Responsive (left panel hidden on mobile)
+```
+
+---
+
+## Content Platforms
+
+### Blog Post Layout
+
+```
+Blog article page for tech publication
+
+Header:
+- Site navigation (logo, categories, search, subscribe)
+
+Article Header:
+- Category tag
+- Article title (large, bold)
+- Subtitle/excerpt
+- Author info (photo, name, bio link, publish date)
+- Social share buttons
+- Reading time estimate
+
+Article Body:
+- Readable column width (max 680px)
+- Paragraph text with proper line height
+- H2 and H3 subheadings
+- Pull quotes (styled distinctly)
+- Inline images with captions
+- Code blocks with syntax highlighting
+- Embedded videos
+- Table of contents (sticky sidebar on desktop)
+
+Article Footer:
+- Tags
+- Share buttons
+- Author card (expanded)
+- Related articles (3 cards)
+- Comments section
+
+Sidebar (Desktop):
+- Newsletter signup
+- Popular posts
+- Ad placement
+
+Style: Editorial, readable, content-first
+Colors: Black text on white, accent color for links
+Typography: Serif for body text, sans-serif for UI
+Platform: Responsive web
+```
+
+### Video Platform Interface
+
+```
+Video streaming platform - Watch page
+
+Video Player:
+- Full-width video player with controls
+- Quality selector, playback speed, captions, fullscreen
+- Progress bar with thumbnail preview on hover
+
+Video Info:
+- Video title
+- View count and upload date
+- Like/Dislike buttons
+- Share button
+- Save to playlist button
+
+Channel Info:
+- Channel avatar and name
+- Subscriber count
+- Subscribe button (prominent if not subscribed)
+
+Description:
+- Expandable description text
+- Show more/less toggle
+- Hashtags and links
+
+Comments Section:
+- Sort options (Top, Newest)
+- Comment input with user avatar
+- Comment cards with avatar, name, timestamp, text
+- Like/Reply buttons
+- Nested replies (indented)
+
+Sidebar:
+- Up next autoplay preview
+- Recommended videos list (thumbnail, title, channel, views)
+
+Style: Dark mode, video-focused, minimal distractions
+Colors: Dark gray background, white text, red accent for CTAs
+Typography: Sans-serif, readable at distance
+Platform: Responsive web
+```
+
+---
+
+## SaaS Applications
+
+### Email Client Interface
+
+```
+Email client - Inbox view
+
+Left Sidebar:
+- Compose button (prominent)
+- Folder list (Inbox, Sent, Drafts, Spam, Trash)
+- Labels/Tags with color coding
+- Storage usage indicator
+
+Email List (Center):
+- Search bar with filters
+- Sort and view options
+- Email rows showing:
+  - Sender avatar/initial
+  - Sender name (bold if unread)
+  - Subject line
+  - Preview text (truncated)
+  - Timestamp
+  - Attachment icon if present
+  - Star/flag icons
+- Checkbox for bulk actions
+- Pagination or infinite scroll
+
+Email Detail (Right):
+- Email header (from, to, cc, timestamp)
+- Subject line
+- Email body with formatting preserved
+- Attachments section
+- Action buttons (Reply, Reply All, Forward, Archive, Delete)
+- Previous emails in thread (collapsed)
+
+Top Bar:
+- Refresh button
+- Settings icon
+- User profile dropdown
+
+Style: Clean, productivity-focused, organized
+Colors: Blue accents, white background, gray dividers
+Typography: Sans-serif, scannable
+Platform: Desktop web (1280px+)
+```
+
+### CRM Contact Detail
+
+```
+CRM contact detail page
+
+Header:
+- Contact name and company
+- Contact photo/avatar
+- Status badge (Lead, Customer, Inactive)
+- Quick actions (Email, Call, Schedule Meeting, Edit)
+
+Info Tabs:
+- Overview (active), Activity, Deals, Notes, Files
+
+Overview Tab:
+- Contact information card (email, phone, address, social links)
+- Company information card
+- Tags and custom fields
+- Assigned to (team member)
+
+Activity Timeline:
+- Chronological list of interactions
+- Icons for type (email, call, meeting, note)
+- Timestamp and description
+- Filter by activity type
+
+Deals Section:
+- Active deals table (deal name, value, stage, close date)
+- Won/Lost deals summary
+
+Notes Section:
+- Add note input with rich text editor
+- Note cards with author, timestamp, content
+- Pin important notes
+
+Right Sidebar:
+- Next scheduled activity
+- Recent emails
+- Related contacts
+- Deal pipeline stage
+
+Style: Professional, data-rich, organized
+Colors: Navy blue, white, status color coding
+Typography: Clear hierarchy, readable data
+Platform: Desktop web (1440px+)
+```
+
+---
+
+## Tips for Using These Examples
+
+1. **Customize for your needs** - Replace placeholder content with your specific requirements
+2. **Combine elements** - Mix and match components from different examples
+3. **Adjust complexity** - Simplify or expand based on your project scope
+4. **Specify your brand** - Add your color palette, fonts, and visual style
+5. **Consider platform** - Adapt layouts for your target device (mobile/desktop)
+6. **Add context** - Include user personas or use cases for better results
+7. **Iterate** - Start with a basic prompt, then refine with annotations
+
+Remember: These are starting points. Stitch works best when you provide specific details relevant to your unique project.
--- a/skills_index.json
+++ b/skills_index.json
@@ -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",
@@ -4787,6 +4796,15 @@
    "risk": "unknown",
    "source": "unknown"
  },
+  {
+    "id": "stitch-ui-design",
+    "path": "skills/stitch-ui-design",
+    "category": "uncategorized",
+    "name": "stitch-ui-design",
+    "description": "Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.",
+    "risk": "safe",
+    "source": "self"
+  },
  {
    "id": "stride-analysis-patterns",
    "path": "skills/stride-analysis-patterns",
Author	SHA1	Message	Date
sck_0	db3e262df3	chore(release): 4.6.0 - SPDD & Radix UI Design System - Bump version to 4.6.0, update CHANGELOG and README counts to 626 - Fix listSkillIds to only include dirs with SKILL.md (SPDD excluded from catalog) - Regenerate catalog and index after PR 47/48 merge	2026-02-01 08:23:00 +01:00
sickn33	d280ad1c3a	Merge pull request #47 from c1c3ru/main feat: Adiciona novas habilidades de agente para pesquisa de base de código, planejamento de implementação e execução.	2026-02-01 08:21:30 +01:00
sickn33	b2aa003d57	Merge pull request #48 from ckdwns9121/feat/redix-ui-design-system-skills feat: add radix UI design system skill	2026-02-01 08:21:26 +01:00
github-actions[bot]	3c3280d9ac	chore: update star history chart	2026-02-01 06:44:42 +00:00
devchangjun	58f8d654ef	feat: introduce Radix UI design system skill with a component template and examples.	2026-02-01 11:36:47 +09:00
c1c3ru	5593cad434	feat: Adiciona novas habilidades de agente para pesquisa de base de código, planejamento de implementação e execução.	2026-01-31 22:25:14 -03:00
github-actions[bot]	59151b3671	chore: sync generated registry files [ci skip]	2026-01-31 22:04:25 +00:00
sck_0	1dc10ee3a0	fix(frontend-slides): correct YAML frontmatter syntax (fixes #46 ) Remove Markdown content from frontmatter block; keep only valid YAML keys (name, description, source, risk) to resolve 'mapping values are not allowed in this context at line 5 column 5'.	2026-01-31 23:04:09 +01:00
github-actions[bot]	4c400ca121	chore: sync generated registry files [ci skip]	2026-01-31 07:45:51 +00:00
sck_0	4310ca4922	docs: merge RELEASE_NOTES into CHANGELOG, single source for releases	2026-01-31 08:45:34 +01:00
github-actions[bot]	9f6d75245f	chore: sync generated registry files [ci skip]	2026-01-31 07:40:22 +00:00
sck_0	1974e62ec1	docs: add @ALEKGG1 credit for stitch-ui-design skill (PR #45 )	2026-01-31 08:40:11 +01:00
github-actions[bot]	9dd8fd6b51	chore: sync generated registry files [ci skip]	2026-01-31 07:36:24 +00:00
sck_0	b082ba9c42	chore: regenerate files after merge	2026-01-31 08:36:01 +01:00
sck_0	90b4d5adb3	Merge branch 'main' of https://github.com/sickn33/antigravity-awesome-skills # Conflicts: # CATALOG.md # data/aliases.json # data/bundles.json # data/catalog.json # skills_index.json	2026-01-31 08:35:45 +01:00
sck_0	87989fecf6	chore: release 4.5.0 - stitch-ui-design skill	2026-01-31 08:35:02 +01:00
sck_0	f41aad3556	feat: add stitch-ui-design skill and sync generated files	2026-01-31 08:34:33 +01:00
github-actions[bot]	d3883ffaf9	chore: sync generated registry files [ci skip]	2026-01-31 07:34:11 +00:00
@ALEKGG	cf8b63cd15	feat: add stitch-ui-design skill for Google Stitch prompting (#45 ) Add comprehensive skill for creating effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs (Gemini 2.5 Flash). Includes: - Core prompting principles and templates - 10+ practical examples (landing pages, mobile apps, dashboards) - Iteration strategies and anti-patterns - Design-to-code workflows - 44KB of reference documentation Category: Data & AI / General Risk: Low (design guidance, no executable commands)	2026-01-31 08:33:51 +01:00
sck_0	bb0886a594	docs: clarify Starter Packs vs full clone (fixes #44 )	2026-01-31 08:33:37 +01:00
github-actions[bot]	d2f3423a13	chore: update star history chart	2026-01-31 06:35:01 +00:00
github-actions[bot]	a7c8432a47	chore: sync generated registry files [ci skip]	2026-01-30 19:35:13 +00:00
sck_0	bedac72820	docs: sync Repo Contributors, Credits, SOURCES, and skill count (624) post v4.4.0	2026-01-30 20:34:57 +01:00
github-actions[bot]	fc45245400	chore: sync generated registry files [ci skip]	2026-01-30 19:30:23 +00:00