firefrost-gaming/antigravity-skills-reference
3
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: add Antigravity premium design and AI integration skills (#224)

Browse Source
This commit is contained in:
sck_0
2026-03-07 10:21:41 +01:00
parent 89e2b4eba2
commit e00397cb5c
23 changed files with 2367 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
CATALOG.md
View File

@@ -2,7 +2,7 @@
Generated at: 2026-02-08T00:00:00.000Z
Total skills: 1260
Total skills: 1270
## architecture (78)
@@ -165,7 +165,7 @@ calculations | startup, business, analyst, market, opportunity | startup, busine
| `warren-buffett` | Agente que simula Warren Buffett — o maior investidor do seculo XX e XXI, CEO da Berkshire Hathaway, discipulo de Benjamin Graham e socio intelectual de Char... | persona, investing, value-investing, business | persona, investing, value-investing, business, warren, buffett, agente, que, simula, maior, investidor, do |
| `whatsapp-automation` | Automate WhatsApp Business tasks via Rube MCP (Composio): send messages, manage templates, upload media, and handle contacts. Always search tools first for c... | whatsapp | whatsapp, automation, automate, business, tasks, via, rube, mcp, composio, send, messages, upload |
## data-ai (222)
## data-ai (226)
| Skill | Description | Tags | Triggers |
| --- | --- | --- | --- |
@@ -312,6 +312,7 @@ search for spreadsheets, and view metadata. Use wh... | google, sheets | google,
| `hugging-face-datasets` | Create and manage datasets on Hugging Face Hub. Supports initializing repos, defining configs/system prompts, streaming row updates, and SQL-based dataset qu... | hugging, face, datasets | hugging, face, datasets, hub, supports, initializing, repos, defining, configs, prompts, streaming, row |
| `hugging-face-tool-builder` | Use this skill when the user wants to build tool/scripts or achieve a task where using data from the Hugging Face API would help. This is especially useful w... | hugging, face, builder | hugging, face, builder, skill, user, wants, scripts, achieve, task, where, data, api |
| `hybrid-search-implementation` | Combine vector and keyword search for improved retrieval. Use when implementing RAG systems, building search engines, or when neither approach alone provides... | hybrid, search | hybrid, search, combine, vector, keyword, improved, retrieval, implementing, rag, building, engines, neither |
| `iconsax-library` | Extensive icon library and AI-driven icon generation skill for premium UI/UX design. | iconsax, library | iconsax, library, extensive, icon, ai, driven, generation, skill, premium, ui, ux |
| `image-studio` | Studio de geracao de imagens inteligente — roteamento automatico entre ai-studio-image (fotos humanizadas/influencer) e stability-ai (arte/ ilustracao/edicao... | image-generation, routing, ai-art, photography | image-generation, routing, ai-art, photography, image, studio, de, geracao, imagens, inteligente, roteamento, automatico |
| `imagen` | AI image generation skill powered by Google Gemini, enabling seamless visual content creation for UI placeholders, documentation, and design assets. | imagen | imagen, ai, image, generation, skill, powered, google, gemini, enabling, seamless, visual, content |
| `instagram` | Integracao completa com Instagram via Graph API. Publicacao, analytics, comentarios, DMs, hashtags, agendamento, templates e gestao de contas Business/Creator. | social-media, instagram, graph-api, content | social-media, instagram, graph-api, content, integracao, completa, com, via, graph, api, publicacao, analytics |
@@ -327,6 +328,7 @@ search for spreadsheets, and view metadata. Use wh... | google, sheets | google,
| `llm-evaluation` | Implement comprehensive evaluation strategies for LLM applications using automated metrics, human feedback, and benchmarking. Use when testing LLM performanc... | llm, evaluation | llm, evaluation, applications, automated, metrics, human, feedback, benchmarking, testing, performance, measuring, ai |
| `llm-ops` | LLM Operations -- RAG, embeddings, vector databases, fine-tuning, prompt engineering avancado, custos de LLM, evals de qualidade e arquiteturas de IA para pr... | llm, rag, embeddings, vector-db, fine-tuning | llm, rag, embeddings, vector-db, fine-tuning, ops, operations, vector, databases, fine, tuning, prompt |
| `llm-prompt-optimizer` | Use when improving prompts for any LLM. Applies proven prompt engineering techniques to boost output quality, reduce hallucinations, and cut token usage. | llm, prompt, optimizer | llm, prompt, optimizer, improving, prompts, any, applies, proven, engineering, techniques, boost, output |
| `magic-animator` | AI-powered animation tool for creating motion in logos, UI, icons, and social media assets. | magic, animator | magic, animator, ai, powered, animation, creating, motion, logos, ui, icons, social, media |
| `mailchimp-automation` | Automate Mailchimp email marketing including campaigns, audiences, subscribers, segments, and analytics via Rube MCP (Composio). Always search tools first fo... | mailchimp | mailchimp, automation, automate, email, marketing, including, campaigns, audiences, subscribers, segments, analytics, via |
| `makepad-splash` | CRITICAL: Use for Makepad Splash scripting language. Triggers on:
splash language, makepad script, makepad scripting, script!, cx.eval,
@@ -374,6 +376,7 @@ Scope::with_data, save state, load state, serde,
| `skill-seekers` | -Automatically convert documentation websites, GitHub repositories, and PDFs into Claude AI skills in minutes. | skill, seekers | skill, seekers, automatically, convert, documentation, websites, github, repositories, pdfs, claude, ai, skills |
| `skin-health-analyzer` | Analyze skin health data, identify skin problem patterns, assess skin health status. Supports correlation analysis with nutrition, chronic diseases, and medi... | skin, health, analyzer | skin, health, analyzer, analyze, data, identify, problem, assess, status, supports, correlation, analysis |
| `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 |
| `spline-3d-integration` | Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API. | spline, 3d, integration | spline, 3d, integration, adding, interactive, scenes, web, including, react, embedding, runtime, control |
| `sql-injection-testing` | This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection"... | sql, injection | sql, injection, testing, skill, should, used, user, asks, test, vulnerabilities, perform, sqli |
| `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, skill, should, used, user, asks, automate, sql, injection, testing |
@@ -393,6 +396,7 @@ Scope::with_data, save state, load state, serde,
| `vexor` | Vector-powered CLI for semantic file search with a Claude/Codex skill | vexor | vexor, vector, powered, cli, semantic, file, search, claude, codex, skill |
| `vibe-code-auditor` | Audit rapidly generated or AI-produced code for structural flaws, fragility, and production risks. | vibe, code, auditor | vibe, code, auditor, audit, rapidly, generated, ai, produced, structural, flaws, fragility, risks |
| `videodb-skills` | Upload, stream, search, edit, transcribe, and generate AI video and audio using the VideoDB SDK. | [video, editing, transcription, subtitles, search, streaming, ai-generation, media] | [video, editing, transcription, subtitles, search, streaming, ai-generation, media], videodb, skills, upload, stream |
| `vizcom` | AI-powered product design tool for transforming sketches into full-fidelity 3D renders. | vizcom | vizcom, ai, powered, product, transforming, sketches, full, fidelity, 3d, renders |
| `voice-agents` | Voice agents represent the frontier of AI interaction - humans speaking naturally with AI systems. The challenge isn't just speech recognition and synthesis,... | voice, agents | voice, agents, represent, frontier, ai, interaction, humans, speaking, naturally, challenge, isn, just |
| `voice-ai-development` | Expert in building voice AI applications - from real-time voice agents to voice-enabled apps. Covers OpenAI Realtime API, Vapi for voice agents, Deepgram for... | voice, ai | voice, ai, development, building, applications, real, time, agents, enabled, apps, covers, openai |
| `voice-ai-engine-development` | Build real-time conversational AI voice engines using async worker pipelines, streaming transcription, LLM agents, and TTS synthesis with interrupt handling ... | voice, ai, engine | voice, ai, engine, development, real, time, conversational, engines, async, worker, pipelines, streaming |
@@ -402,7 +406,7 @@ Scope::with_data, save state, load state, serde,
| `yann-lecun` | Agente que simula Yann LeCun — inventor das Convolutional Neural Networks, Chief AI Scientist da Meta, Prêmio Turing 2018. Use quando quiser: perspectivas so... | persona, cnn, meta, ai-safety-critic, open-source | persona, cnn, meta, ai-safety-critic, open-source, yann, lecun, agente, que, simula, inventor, das |
| `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search |
## development (174)
## development (175)
| Skill | Description | Tags | Triggers |
| --- | --- | --- | --- |
@@ -410,6 +414,7 @@ Scope::with_data, save state, load state, serde,
| `algolia-search` | Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instan... | algolia, search | algolia, search, indexing, react, instantsearch, relevance, tuning, adding, api, functionality |
| `android-jetpack-compose-expert` | Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3. | android, jetpack, compose | android, jetpack, compose, guidance, building, uis, covering, state, navigation, performance, material |
| `android_ui_verification` | Automated end-to-end UI testing and verification on an Android Emulator using ADB. | android_ui_verification | android_ui_verification, android, ui, verification, automated, testing, emulator, adb |
| `animejs-animation` | Advanced JavaScript animation library skill for creating complex, high-performance web animations. | animejs, animation | animejs, animation, javascript, library, skill, creating, complex, high, performance, web, animations |
| `api-design-principles` | Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, revie... | api, principles | api, principles, rest, graphql, intuitive, scalable, maintainable, apis, delight, developers, designing, new |
| `api-documentation` | API documentation workflow for generating OpenAPI specs, creating developer guides, and maintaining comprehensive API documentation. | api, documentation | api, documentation, generating, openapi, specs, creating, developer, guides, maintaining |
| `api-documentation-generator` | Generate comprehensive, developer-friendly API documentation from code, including endpoints, parameters, examples, and best practices | api, documentation, generator | api, documentation, generator, generate, developer, friendly, code, including, endpoints, parameters, examples |
@@ -585,7 +590,7 @@ no matching field, parse error, widget... | makepad, reference | makepad, refere
| `zod-validation-expert` | Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js... | zod, validation | zod, validation, typescript, first, schema, covers, parsing, custom, errors, refinements, type, inference |
| `zustand-store-ts` | Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creati... | zustand, store, ts | zustand, store, ts, stores, typescript, subscribewithselector, middleware, proper, state, action, separation, building |
## general (318)
## general (323)
| Skill | Description | Tags | Triggers |
| --- | --- | --- | --- |
@@ -600,6 +605,7 @@ no matching field, parse error, widget... | makepad, reference | makepad, refere
| `angular-best-practices` | Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and... | angular, best, practices | angular, best, practices, performance, optimization, writing, reviewing, refactoring, code, optimal, bundle, size |
| `angular-migration` | Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applicat... | angular, migration | angular, migration, migrate, angularjs, hybrid, mode, incremental, component, rewriting, dependency, injection, updates |
| `anti-reversing-techniques` | Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use when analyzing protected binaries, bypassing anti... | anti, reversing, techniques | anti, reversing, techniques, understand, obfuscation, protection, encountered, during, software, analysis, analyzing, protected |
| `antigravity-design-expert` | Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS. | antigravity | antigravity, core, ui, ux, engineering, skill, building, highly, interactive, spatial, weightless, glassmorphism |
| `apify-lead-generation` | Generates B2B/B2C leads by scraping Google Maps, websites, Instagram, TikTok, Facebook, LinkedIn, YouTube, and Google Search. Use when user asks to find lead... | apify, lead, generation | apify, lead, generation, generates, b2b, b2c, leads, scraping, google, maps, websites, instagram |
| `apify-trend-analysis` | Discover and track emerging trends across Google Trends, Instagram, Facebook, YouTube, and TikTok to inform content strategy. | apify, trend | apify, trend, analysis, discover, track, emerging, trends, google, instagram, facebook, youtube, tiktok |
| `app-builder` | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordina... | app, builder | app, builder, main, application, building, orchestrator, creates, full, stack, applications, natural, language |
@@ -663,10 +669,12 @@ no matching field, parse error, widget... | makepad, reference | makepad, refere
| `cpp-pro` | Write idiomatic C++ code with modern features, RAII, smart pointers, and STL algorithms. Handles templates, move semantics, and performance optimization. | cpp | cpp, pro, write, idiomatic, code, features, raii, smart, pointers, stl, algorithms, move |
| `create-branch` | Create a git branch following Sentry naming conventions. Use when asked to "create a branch", "new branch", "start a branch", "make a branch", "switch to a n... | create, branch | create, branch, git, following, sentry, naming, conventions, asked, new, start, switch, starting |
| `culture-index` | Culture Index | culture, index | culture, index |
| `daily` | Documentation and capabilities reference for Daily | daily | daily, documentation, capabilities, reference |
| `daily-news-report` | Scrapes content based on a preset URL list, filters high-quality technical information, and generates daily Markdown reports. | daily, news, report | daily, news, report, scrapes, content, preset, url, list, filters, high, quality, technical |
| `debugging-strategies` | Master systematic debugging techniques, profiling tools, and root cause analysis to efficiently track down bugs across any codebase or technology stack. Use ... | debugging, strategies | debugging, strategies, systematic, techniques, profiling, root, cause, analysis, efficiently, track, down, bugs |
| `debugging-toolkit-smart-debug` | Use when working with debugging toolkit smart debug | debugging, debug | debugging, debug, toolkit, smart, working |
| `design-md` | Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files | md | md, analyze, stitch, synthesize, semantic, files |
| `design-spells` | Curated micro-interactions and design details that add "magic" and personality to websites and apps. | spells | spells, curated, micro, interactions, details, add, magic, personality, websites, apps |
| `dispatching-parallel-agents` | Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies | dispatching, parallel, agents | dispatching, parallel, agents, facing, independent, tasks, worked, without, shared, state, sequential, dependencies |
| `docx-official` | Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude ... | docx, official | docx, official, document, creation, editing, analysis, tracked, changes, comments, formatting, preservation, text |
| `dx-optimizer` | Developer Experience specialist. Improves tooling, setup, and workflows. Use PROACTIVELY when setting up new projects, after team feedback, or when developme... | dx, optimizer | dx, optimizer, developer, experience, improves, tooling, setup, proactively, setting, up, new, after |
@@ -759,6 +767,7 @@ a... | evolution | evolution, critical, makepad, skills, self, contribution, tri
| `linux-shell-scripting` | This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or... | linux, shell, scripting | linux, shell, scripting, skill, should, used, user, asks, bash, scripts, automate, tasks |
| `literature-analysis` | Literature Analysis | literature | literature, analysis |
| `logistics-exception-management` | Codified expertise for handling freight exceptions, shipment delays, damages, losses, and carrier disputes. Informed by logistics professionals with 15+ year... | logistics, exception | logistics, exception, codified, expertise, handling, freight, exceptions, shipment, delays, damages, losses, carrier |
| `magic-ui-generator` | Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations. | magic, ui, generator | magic, ui, generator, utilizes, 21st, dev, generate, compare, integrate, multiple, component, variations |
| `makepad-animation` | CRITICAL: Use for Makepad animation system. Triggers on:
makepad animation, makepad animator, makepad hover, makepad state,
makepad transition, "from: { all:... | makepad, animation | makepad, animation, critical, triggers, animator, hover, state, transition, all, forward, pressed |
@@ -902,6 +911,7 @@ matrix-sdk, matrix client, robrix, mat... | robius, matrix, integration | robius
| `ui-skills` | Opinionated, evolving constraints to guide agents when building interfaces | ui, skills | ui, skills, opinionated, evolving, constraints, agents, building, interfaces |
| `ui-ux-designer` | Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. | ui, ux, designer | ui, ux, designer, interface, designs, wireframes, masters, user, research, accessibility, standards |
| `umap` | Umap | umap | umap |
| `unsplash-integration` | Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash. | unsplash, integration | unsplash, integration, skill, searching, fetching, high, quality, free, professional, photography |
| `upgrading-expo` | Upgrade Expo SDK versions | upgrading, expo | upgrading, expo, upgrade, sdk, versions |
| `upstash-qstash` | Upstash QStash expert for serverless message queues, scheduled jobs, and reliable HTTP-based task delivery without managing infrastructure. Use when: qstash,... | upstash, qstash | upstash, qstash, serverless, message, queues, scheduled, jobs, reliable, http, task, delivery, without |
| `using-git-worktrees` | Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with sma... | using, git, worktrees | using, git, worktrees, starting, feature, work, isolation, current, workspace, before, executing, plans |

10
README.md
View File

@@ -1,7 +1,7 @@
<!-- registry-sync: version=7.0.1; skills=1260; stars=21187; updated_at=2026-03-07T09:11:21+00:00 -->
# 🌌 Antigravity Awesome Skills: 1,260+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
<!-- registry-sync: version=7.0.1; skills=1270; stars=21187; updated_at=2026-03-07T09:21:13+00:00 -->
# 🌌 Antigravity Awesome Skills: 1,270+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
> **The Ultimate Collection of 1,260+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
> **The Ultimate Collection of 1,270+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
[![GitHub stars](https://img.shields.io/badge/⭐%2021%2C000%2B%20Stars-gold?style=for-the-badge)](https://github.com/sickn33/antigravity-awesome-skills/stargazers)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -18,7 +18,7 @@
[![Web App](https://img.shields.io/badge/Web%20App-Browse%20Skills-blue)](apps/web-app)
[![Buy Me a Book](https://img.shields.io/badge/Buy%20me%20a-book-d13610?logo=buymeacoffee&logoColor=white)](https://buymeacoffee.com/sickn33)
**Antigravity Awesome Skills** is a curated, battle-tested library of **1,260+ high-performance agentic skills** designed to work seamlessly across the major AI coding assistants.
**Antigravity Awesome Skills** is a curated, battle-tested library of **1,270+ high-performance agentic skills** designed to work seamlessly across the major AI coding assistants.
**Welcome to the V7.0.1 21k Stars Patch Release!** This repository gives your agent reusable playbooks for planning, coding, debugging, testing, security review, infrastructure work, product thinking, and much more.
@@ -130,7 +130,7 @@ Use @security-auditor to review this API endpoint for auth and validation risks.
Use @doc-coauthoring to rewrite our setup guide for first-time contributors.
```
## Browse 1,260+ Skills
## Browse 1,270+ Skills
- Open the interactive browser in [`apps/web-app`](apps/web-app).
- Read the full catalog in [`CATALOG.md`](CATALOG.md).

2
data/bundles.json
View File

@@ -11,6 +11,7 @@
"alpha-vantage",
"android-jetpack-compose-expert",
"android_ui_verification",
"animejs-animation",
"api-design-principles",
"api-documentation",
"api-documentation-generator",
@@ -272,6 +273,7 @@
"shopify-development",
"slack-automation",
"slack-bot-builder",
"spline-3d-integration",
"sred-work-summary",
"stability-ai",
"statsmodels",

234
data/catalog.json
View File

@@ -1,6 +1,6 @@
{
"generatedAt": "2026-02-08T00:00:00.000Z",
"total": 1260,
"total": 1270,
"skills": [
{
"id": "00-andruia-consultant",
@@ -1307,6 +1307,30 @@
],
"path": "skills/angular-ui-patterns/SKILL.md"
},
{
"id": "animejs-animation",
"name": "animejs-animation",
"description": "Advanced JavaScript animation library skill for creating complex, high-performance web animations.",
"category": "development",
"tags": [
"animejs",
"animation"
],
"triggers": [
"animejs",
"animation",
"javascript",
"library",
"skill",
"creating",
"complex",
"high",
"performance",
"web",
"animations"
],
"path": "skills/animejs-animation/SKILL.md"
},
{
"id": "anti-reversing-techniques",
"name": "anti-reversing-techniques",
@@ -1333,6 +1357,30 @@
],
"path": "skills/anti-reversing-techniques/SKILL.md"
},
{
"id": "antigravity-design-expert",
"name": "antigravity-design-expert",
"description": "Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.",
"category": "general",
"tags": [
"antigravity"
],
"triggers": [
"antigravity",
"core",
"ui",
"ux",
"engineering",
"skill",
"building",
"highly",
"interactive",
"spatial",
"weightless",
"glassmorphism"
],
"path": "skills/antigravity-design-expert/SKILL.md"
},
{
"id": "antigravity-workflows",
"name": "antigravity-workflows",
@@ -9719,6 +9767,22 @@
],
"path": "skills/customs-trade-compliance/SKILL.md"
},
{
"id": "daily",
"name": "daily",
"description": "Documentation and capabilities reference for Daily",
"category": "general",
"tags": [
"daily"
],
"triggers": [
"daily",
"documentation",
"capabilities",
"reference"
],
"path": "skills/daily/SKILL.md"
},
{
"id": "daily-news-report",
"name": "daily-news-report",
@@ -10692,6 +10756,28 @@
],
"path": "skills/design-orchestration/SKILL.md"
},
{
"id": "design-spells",
"name": "design-spells",
"description": "Curated micro-interactions and design details that add \"magic\" and personality to websites and apps.",
"category": "general",
"tags": [
"spells"
],
"triggers": [
"spells",
"curated",
"micro",
"interactions",
"details",
"add",
"magic",
"personality",
"websites",
"apps"
],
"path": "skills/design-spells/SKILL.md"
},
{
"id": "devcontainer-setup",
"name": "devcontainer-setup",
@@ -16011,6 +16097,30 @@
],
"path": "skills/i18n-localization/SKILL.md"
},
{
"id": "iconsax-library",
"name": "iconsax-library",
"description": "Extensive icon library and AI-driven icon generation skill for premium UI/UX design.",
"category": "data-ai",
"tags": [
"iconsax",
"library"
],
"triggers": [
"iconsax",
"library",
"extensive",
"icon",
"ai",
"driven",
"generation",
"skill",
"premium",
"ui",
"ux"
],
"path": "skills/iconsax-library/SKILL.md"
},
{
"id": "idor-testing",
"name": "idor-testing",
@@ -18114,6 +18224,57 @@
],
"path": "skills/machine-learning-ops-ml-pipeline/SKILL.md"
},
{
"id": "magic-animator",
"name": "magic-animator",
"description": "AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.",
"category": "data-ai",
"tags": [
"magic",
"animator"
],
"triggers": [
"magic",
"animator",
"ai",
"powered",
"animation",
"creating",
"motion",
"logos",
"ui",
"icons",
"social",
"media"
],
"path": "skills/magic-animator/SKILL.md"
},
{
"id": "magic-ui-generator",
"name": "magic-ui-generator",
"description": "Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.",
"category": "general",
"tags": [
"magic",
"ui",
"generator"
],
"triggers": [
"magic",
"ui",
"generator",
"utilizes",
"21st",
"dev",
"generate",
"compare",
"integrate",
"multiple",
"component",
"variations"
],
"path": "skills/magic-ui-generator/SKILL.md"
},
{
"id": "mailchimp-automation",
"name": "mailchimp-automation",
@@ -26307,6 +26468,32 @@
],
"path": "skills/speed/SKILL.md"
},
{
"id": "spline-3d-integration",
"name": "spline-3d-integration",
"description": "Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.",
"category": "data-ai",
"tags": [
"spline",
"3d",
"integration"
],
"triggers": [
"spline",
"3d",
"integration",
"adding",
"interactive",
"scenes",
"web",
"including",
"react",
"embedding",
"runtime",
"control"
],
"path": "skills/spline-3d-integration/SKILL.md"
},
{
"id": "sql-injection-testing",
"name": "sql-injection-testing",
@@ -28754,6 +28941,29 @@
],
"path": "skills/unreal-engine-cpp-pro/SKILL.md"
},
{
"id": "unsplash-integration",
"name": "unsplash-integration",
"description": "Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash.",
"category": "general",
"tags": [
"unsplash",
"integration"
],
"triggers": [
"unsplash",
"integration",
"skill",
"searching",
"fetching",
"high",
"quality",
"free",
"professional",
"photography"
],
"path": "skills/unsplash-integration/SKILL.md"
},
{
"id": "upgrading-expo",
"name": "upgrading-expo",
@@ -29275,6 +29485,28 @@
],
"path": "skills/viral-generator-builder/SKILL.md"
},
{
"id": "vizcom",
"name": "vizcom",
"description": "AI-powered product design tool for transforming sketches into full-fidelity 3D renders.",
"category": "data-ai",
"tags": [
"vizcom"
],
"triggers": [
"vizcom",
"ai",
"powered",
"product",
"transforming",
"sketches",
"full",
"fidelity",
"3d",
"renders"
],
"path": "skills/vizcom/SKILL.md"
},
{
"id": "voice-agents",
"name": "voice-agents",

52
skills/animejs-animation/SKILL.md Normal file
View File

@@ -0,0 +1,52 @@
---
name: animejs-animation
description: Advanced JavaScript animation library skill for creating complex, high-performance web animations.
risk: safe
source: community
date_added: "2026-03-07"
---
# Anime.js Animation Skill
[Anime.js](https://animejs.com/) is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs.
## Context
This skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites.
## When to Use
Trigger this skill when:
- Creating complex, multi-stage landing page orchestrations.
- Implementing staggered animations for revealing grids, text, or data visualizations.
- Animating SVG paths (morphing shapes, drawing dynamic lines).
- Building highly interactive, kinetic UI elements that respond fluidly to user input.
## Execution Workflow
1. **Identify Targets**: Select the DOM elements or SVGs to be animated.
2. **Define Properties & Easing**: Specify values to animate. **Crucially**, utilize advanced easing functions (e.g., custom `cubicBezier`, `spring`, or `elastic`) instead of basic `linear` or `ease-in-out` to make the motion feel expensive and natural.
3. **Orchestrate Timelines**: Use `anime.timeline()` to sequence complex choreography. Master the use of timeline offsets (relative `'-=200'` vs absolute) to create seamless overlapping motion.
4. **Implement**:
```javascript
const tl = anime.timeline({
easing: "spring(1, 80, 10, 0)",
duration: 1000,
});
tl.add({
targets: ".hero-text",
translateY: [50, 0],
opacity: [0, 1],
delay: anime.stagger(100),
}).add(
{ targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
"-=800",
);
```
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.
- **Staggering**: Leverage `anime.stagger()` extensively to add organic rhythm to multiple elements.
- **Performance**: Monitor main thread usage; use `will-change: transform, opacity` where appropriate for GPU acceleration.

42
skills/antigravity-design-expert/SKILL.md Normal file
View File

@@ -0,0 +1,42 @@
---
name: antigravity-design-expert
description: Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
risk: safe
source: community
date_added: "2026-03-07"
---
# Antigravity UI & Motion Design Expert
## 🎯 Role Overview
You are a world-class UI/UX Engineer specializing in "Antigravity Design." Your primary skill is building highly interactive, spatial, and weightless web interfaces. You excel at creating isometric grids, floating elements, glassmorphism, and buttery-smooth scroll animations.
## 🛠️ Preferred Tech Stack
When asked to build or generate UI components, default to the following stack unless instructed otherwise:
- **Framework:** React / Next.js
- **Styling:** Tailwind CSS (for layout and utility) + Custom CSS for complex 3D transforms
- **Animation:** GSAP (GreenSock) + ScrollTrigger for scroll-linked motion
- **3D Elements:** React Three Fiber (R3F) or CSS 3D Transforms (`rotateX`, `rotateY`, `perspective`)
## 📐 Design Principles (The "Antigravity" Vibe)
- **Weightlessness:** UI cards and elements should appear to float. Use layered, soft, diffused drop-shadows (e.g., `box-shadow: 0 20px 40px rgba(0,0,0,0.05)`).
- **Spatial Depth:** Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS `perspective`.
- **Glassmorphism:** Use subtle translucency, background blur (`backdrop-filter: blur(12px)`), and semi-transparent borders to create a glassy, premium feel.
- **Isometric Snapping:** When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., `transform: rotateX(60deg) rotateZ(-45deg)`).
## 🎬 Motion & Animation Rules
- **Never snap instantly:** All state changes (hover, focus, active) must have smooth transitions (minimum `0.3s ease-out`).
- **Scroll Hijacking (Tasteful):** Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.
- **Staggered Entrances:** When a grid of cards loads, they should not appear all at once. Stagger their entrance animations by `0.1s` so they drop in like dominoes.
- **Parallax:** Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.
## 🚧 Execution Constraints
- Always write modular, reusable components.
- Ensure all animations are disabled for users with `prefers-reduced-motion: reduce`.
- Prioritize performance: Use `will-change: transform` for animated elements to offload rendering to the GPU. Do not animate expensive properties like `box-shadow` or `filter` continuously.

303
skills/daily/SKILL.md Normal file
View File

@@ -0,0 +1,303 @@
---
name: daily
description: Documentation and capabilities reference for Daily
metadata:
mintlify-proj: daily
version: "1.0"
risk: safe
source: community
date_added: "2026-03-07"
---
## Capabilities
Pipecat enables agents to build production-ready voice and multimodal AI applications with real-time processing. Agents can orchestrate complex AI service pipelines that handle audio, video, and text simultaneously while maintaining ultra-low latency (500-800ms round-trip). The framework abstracts away the complexity of coordinating multiple AI services, network transports, and audio processing, allowing agents to focus on application logic.
Key capabilities include:
- Real-time voice conversations with natural turn-taking and interruption handling
- Multimodal processing combining audio, video, images, and text
- Integration with 50+ AI services (LLMs, speech recognition, text-to-speech, vision models)
- Function calling for external API integration and tool use
- Automatic conversation context management with optional summarization
- Multiple transport options (WebRTC, WebSocket, Daily, Twilio, Telnyx, etc.)
- Production deployment across cloud platforms with built-in scaling
## Skills
### Pipeline Architecture & Frame Processing
Agents can construct pipelines that connect frame processors in sequence to handle real-time data flow:
```python
pipeline = Pipeline([
transport.input(), # Receives user audio
stt, # Speech-to-text conversion
context_aggregator.user(), # Collect user responses
llm, # Language model processing
tts, # Text-to-speech conversion
transport.output(), # Sends audio to user
context_aggregator.assistant(), # Collect assistant responses
])
```
Agents can create custom frame processors to handle specialized logic, work with parallel pipelines for conditional processing, and manage frame types (SystemFrames for immediate processing, DataFrames for ordered queuing).
### Speech Recognition & Audio Input
Agents can integrate 15+ speech-to-text providers including OpenAI, Google Cloud, Deepgram, AssemblyAI, Azure, and Whisper. Services support:
- Real-time streaming transcription via WebSocket connections
- Voice Activity Detection (VAD) for automatic speech detection
- Multiple language support (125+ languages with Google Cloud)
- Word-level confidence scores and automatic punctuation
- Configurable latency tuning for optimal performance
### Text-to-Speech & Audio Output
Agents can choose from 30+ text-to-speech providers including OpenAI, Google Cloud, ElevenLabs, Cartesia, LMNT, and PlayHT. Features include:
- Real-time streaming synthesis with ultra-low latency
- Multiple voice options and speaking styles per provider
- Automatic interruption handling for natural conversations
- Audio format flexibility (WAV, PCM, MP3)
- Word-level output for precise context tracking
### Language Model Integration
Agents can integrate with 20+ LLM providers including OpenAI, Anthropic, Google Gemini, Groq, Perplexity, and open-source models via Ollama. Capabilities include:
- Streaming response generation for real-time output
- Function calling (tool use) for external API integration
- Context management with automatic message history tracking
- Token usage monitoring and cost tracking
- Support for vision models and multimodal inputs
### Function Calling & Tool Integration
Agents can enable LLMs to call external functions and APIs during conversations:
```python
# Define functions using standard schema
weather_function = FunctionSchema(
name="get_current_weather",
description="Get the current weather in a location",
properties={"location": {"type": "string"}},
required=["location"]
)
# Register function handlers
async def fetch_weather(params: FunctionCallParams):
location = params.arguments.get("location")
weather_data = await weather_api.get_weather(location)
await params.result_callback(weather_data)
llm.register_function("get_current_weather", fetch_weather)
```
Function results are automatically stored in conversation context, enabling multi-step interactions and real-time data access.
### Context Management & Conversation History
Agents can manage conversation context automatically or manually:
- Automatic context aggregation from transcriptions and TTS output
- Manual context manipulation via `LLMMessagesAppendFrame` and `LLMMessagesUpdateFrame`
- Automatic context summarization for long conversations to reduce token usage
- Tool definitions and function call results stored in context
- Word-level precision for context accuracy during interruptions
### Voice Activity Detection & Turn Management
Agents can configure sophisticated turn-taking strategies:
- VAD-based turn detection for responsive speech detection
- Transcription-based fallback for edge cases
- Smart Turn Detection using AI to understand conversation completion
- Configurable silence thresholds and minimum word requirements
- Semantic turn detection for advanced models like OpenAI Realtime
- User interruption handling with configurable cancellation behavior
### Transport & Connection Management
Agents can connect users via multiple transport options:
- **WebRTC**: Daily.co, LiveKit, Small WebRTC for low-latency peer connections
- **WebSocket**: FastAPI, generic WebSocket servers for server-to-server communication
- **Telephony**: Twilio (WebSocket and SIP), Telnyx, Plivo, Exotel for phone integration
- **Specialized**: HeyGen for video, Tavus for video synthesis, WhatsApp for messaging
- Session initialization with automatic room/token management
- Event handlers for connection lifecycle (on_client_connected, on_client_disconnected)
### Multimodal Processing
Agents can build applications combining multiple modalities:
- Video input processing with vision models (Moondream)
- Image generation integration (DALL-E, Gemini, Fal)
- Video synthesis (HeyGen, Tavus, Simli)
- Simultaneous audio, video, and text processing
- Screen sharing and video frame analysis
- Gemini Live and OpenAI Realtime for native multimodal speech-to-speech
### Custom Frame Processors
Agents can create specialized processors for application-specific logic:
```python
class CustomProcessor(FrameProcessor):
async def process_frame(self, frame: Frame, direction: FrameDirection):
await super().process_frame(frame, direction)
if isinstance(frame, TranscriptionFrame):
# Custom logic here
pass
await self.push_frame(frame, direction)
```
### Structured Conversations with Pipecat Flows
Agents can build complex conversation flows with state management using Pipecat Flows:
- Dynamic flows for runtime-determined conversation paths
- Static flows for predefined conversation structures
- State management across conversation turns
- Tool and context management as conversation progresses
- Separation of conversation logic from pipeline mechanics
### Metrics & Observability
Agents can monitor pipeline performance and usage:
- Real-time latency metrics (TTFB, round-trip time)
- Token usage tracking for LLM and TTS services
- Frame processing metrics and pipeline throughput
- Custom observer patterns for application-specific monitoring
- OpenTelemetry integration for distributed tracing
- Debug observers for development and troubleshooting
### Client SDKs for Frontend Integration
Agents can build client applications using:
- **JavaScript/TypeScript**: Full-featured SDK with WebSocket and WebRTC transports
- **React**: Hooks and components for easy integration
- **React Native**: Mobile support for iOS and Android
- **iOS (Swift)**: Native iOS applications
- **Android (Kotlin)**: Native Android applications
- **C++**: Low-level integration for specialized applications
All SDKs implement the RTVI (Real-Time Voice and Video Inference) standard for interoperability.
### Deployment & Scaling
Agents can deploy applications to:
- **Pipecat Cloud**: Managed service with built-in scaling, logging, and monitoring
- **Fly.io**: Simple deployment for CPU-based bots
- **Modal**: GPU-accelerated infrastructure for custom models
- **Cerebrium**: Specialized AI infrastructure
- **Self-managed**: Docker containers on any cloud provider (AWS, GCP, Azure)
- Session API for real-time control of active agents
- Automatic scaling based on demand
- Managed API keys and secrets
## Workflows
### Building a Voice Assistant
1. Create transport for user connection (Daily, WebRTC, WebSocket)
2. Initialize STT service (Deepgram, OpenAI, Google Cloud)
3. Create LLM context with system message
4. Initialize LLM service (OpenAI, Anthropic, Gemini)
5. Initialize TTS service (ElevenLabs, Cartesia, OpenAI)
6. Create context aggregators for user and assistant messages
7. Assemble pipeline with all processors in correct order
8. Create PipelineTask with parameters and observers
9. Run with PipelineRunner and handle lifecycle events
### Implementing Function Calling
1. Define function schemas using FunctionSchema or direct functions
2. Create ToolsSchema with function definitions
3. Pass tools to LLMContext during initialization
4. Register function handlers with LLM service
5. Implement handler logic to call external APIs
6. Return results via result_callback
7. LLM automatically incorporates results into conversation
8. Function calls and results stored in context automatically
### Building a Phone Agent with Twilio
1. Set up Twilio account with phone numbers
2. Create DailyTransport with WebRTC configuration
3. Configure Twilio SIP integration with Daily endpoint
4. Handle on_dialin_ready event to forward calls
5. Build standard voice pipeline with STT, LLM, TTS
6. Deploy to cloud with proper scaling configuration
7. Monitor active sessions and call metrics
### Handling Interruptions & Turn-Taking
1. Configure VAD analyzer (Silero recommended for low latency)
2. Set up user turn strategy (VADUserTurnStartStrategy or SmartTurnDetection)
3. Configure silence thresholds and minimum word requirements
4. Enable interruption handling in pipeline
5. Register interrupt event handlers
6. Test with various speech patterns and network conditions
7. Tune VAD parameters based on user experience feedback
### Managing Long Conversations
1. Enable context summarization in assistant aggregator params
2. Configure summarization triggers (token count, message count)
3. Set preserve_recent_messages to keep recent context
4. Monitor token usage with metrics
5. Implement fallback strategies for context window limits
6. Use context.messages to inspect current state
7. Manually append messages when needed with LLMMessagesAppendFrame
### Deploying to Pipecat Cloud
1. Create Dockerfile with bot.py entry point
2. Define bot() async function as entry point
3. Configure environment variables and secrets
4. Push to container registry (AWS ECR, GCP Artifact Registry)
5. Create agent via Pipecat Cloud REST API or CLI
6. Deploy with pipecat cloud deploy command
7. Monitor logs and active sessions
8. Scale based on demand with capacity planning
## Integration
Pipecat integrates with:
- **AI Services**: OpenAI, Anthropic, Google Gemini, Groq, Perplexity, AWS Bedrock, Azure OpenAI, and 15+ other LLM providers
- **Speech Services**: Deepgram, ElevenLabs, Google Cloud, Azure, OpenAI, AssemblyAI, Cartesia, LMNT, and 10+ others
- **Telephony**: Twilio, Telnyx, Plivo, Exotel for phone integration
- **Video/Media**: Daily.co, LiveKit, HeyGen, Tavus, Simli for real-time communication
- **Memory**: Mem0 for persistent conversation history across sessions
- **Monitoring**: Sentry for error tracking, Datadog for observability
- **Frameworks**: RTVI standard for client/server communication, Pipecat Flows for structured conversations
- **Client Platforms**: Web (JavaScript/React), iOS, Android, React Native, C++
## Context
**Real-time Processing**: Pipecat achieves 500-800ms round-trip latency by streaming data through the pipeline rather than waiting for complete responses at each step. This creates natural conversation experiences.
**Frame-based Architecture**: All data moves through pipelines as frames (audio, text, images, control signals). Processors receive frames, perform specialized tasks, and push frames downstream. This modular design enables swapping services without code changes.
**Automatic vs Manual Control**: Context management happens automatically through aggregators, but agents can manually control context with frames for advanced scenarios like bot-initiated conversations or context editing.
**Service Flexibility**: Pipecat abstracts service differences through adapters. Function schemas defined once work across all LLM providers. Context format automatically converts between OpenAI and provider-specific formats.
**Production Considerations**: For production deployments, use WebRTC instead of WebSocket for better media transport. Pre-cache large models in Docker images. Monitor metrics for latency and token usage. Use Pipecat Cloud for managed scaling or self-host with proper resource allocation.
**Turn-Taking Complexity**: Natural conversations require coordinating VAD (detects speech), turn detection (understands completion), and interruption handling. Silero VAD provides low-latency local processing. Smart Turn Detection uses AI to understand conversation context. Tuning these parameters is crucial for user experience.
**Multimodal Challenges**: Combining audio, video, and text requires careful pipeline design. Use ParallelPipeline for independent processing branches. Ensure frame ordering for synchronized output. Test with various network conditions and device capabilities.
---
> For additional documentation and navigation, see: https://docs.pipecat.ai/llms.txt

37
skills/design-spells/SKILL.md Normal file
View File

@@ -0,0 +1,37 @@
---
name: design-spells
description: Curated micro-interactions and design details that add "magic" and personality to websites and apps.
risk: safe
source: community
date_added: "2026-03-07"
---
# Design Spells Skill
[Design Spells](https://www.designspells.com/) is a collection of exceptional design details—micro-interactions, easter eggs, and clever UX patterns—that transform standard interfaces into memorable digital experiences.
## Context
Use this skill specifically to elevate a UI from merely "functional" or "common" into something genuinely "magical." It focuses on the minute details that surprise and delight users, establishing a strong, premium brand personality.
## When to Use
Trigger this skill when:
- Polishing a finished feature to actively add a "wow" factor.
- Designing unique interactions to replace standard web behaviors (e.g., clever hover states, creative loaders, surprising transitions).
- Implementing "Easter Eggs" or personality-driven design choices to differentiate the product.
- Looking to break away from generic, template-driven development.
## Execution Workflow
1. **Identify Opportunity**: Target the "boring" or "standard" parts of the interface (e.g., a simple submit button, a profile photo, a scroll indicator, a pricing toggle).
2. **Research Spells**: Browse Design Spells for highly creative patterns (e.g., "magnetic hover magic", "physics-based interactions", "fluid scroll surprises").
3. **Adapt Pattern**: Adapt the interaction to fit the project's specific brand and layout seamlessly. Use it to enhance the core narrative of the app.
4. **Implement flawlessly**: Use CSS, Anime.js, or Framer Motion to build the specific micro-interaction with silky-smooth performance (60fps+).
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in the common style and ways. Look for every opportunity to inject "magic" into standard components.
- **Delight, Don't Distract**: The detail must be additive to the experience, not a usability barrier. It should feel expensive and highly crafted.
- **Quality Execution**: A broken or janky "spell" is worse than none. Ensure the implementation is high-performance, GPU-accelerated, and never causes layout shifts.

39
skills/iconsax-library/SKILL.md Normal file
View File

@@ -0,0 +1,39 @@
---
name: iconsax-library
description: Extensive icon library and AI-driven icon generation skill for premium UI/UX design.
risk: safe
source: community
date_added: "2026-03-07"
---
# Iconsax Library Skill
[Iconsax](https://iconsax.io/) is an intuitive and comprehensive icon library designed for modern digital products, offering styles far superior to generic default sets.
## Context
Use this skill to maintain visual consistency across an application with highest-tier professional icons. The library is optimized for both designers and developers to create a distinctly premium feel.
## When to Use
Trigger this skill when:
- Designing or building highly crafted navigation menus, toolbars, and action buttons.
- You need an icon that is part of a cohesive, modern design system, moving away from stale, ubiquitous icons.
- Generating a custom, perfectly styled icon using **Iconsax AI** when a unique concept is required.
## Execution Workflow
1. **Identify Need**: Determine the concept the icon needs to represent.
2. **Choose Premium Style**: Select the style that matches the creative direction:
- `Linear`: For ultra-minimalism and clarity.
- `Bold`/`Bulk`: For solid weight and emphasis in premium dark modes.
- `Two-tone`: For highly branded, colorful, and distinct aesthetics.
3. **Search or Generate**: Find the existing icon, or if it doesn't exist, use [Iconsax AI](https://app.iconsax.io/ai) to generate a custom variation that perfectly matches the chosen style.
4. **Integration**: Implementation using SVGs or web components, ensuring precise alignment and sizing.
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT use common, generic, or default browser/framework icons. Every icon must feel intentional and premium.
- **Strict Consistency**: Stick to ONE style (e.g., only "Two-tone") throughout a single project to maintain high-end polish.
- **Sizing & Alignment**: Follow strict, standard grid sizes (24x24) to ensure absolute crispness on high-DPI displays.

37
skills/magic-animator/SKILL.md Normal file
View File

@@ -0,0 +1,37 @@
---
name: magic-animator
description: AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.
risk: safe
source: community
date_added: "2026-03-07"
---
# Magic Animator Skill
[Magic Animator](https://magicanimator.com/) enables designers to add life to static designs in seconds using AI-driven motion, transforming flat UX into premium, dynamic experiences.
## Context
This skill is essential for improving UX and engagement through high-quality motion. It works best for animating brand assets, interface elements, and micro-interactions.
## When to Use
Trigger this skill when:
- Adding life to a static logo or brand mark to make it memorable.
- Enhancing website/app UI with loaders, animated widgets, or smooth transitions.
- Animating icons or micro-interactions to guide user behavior with flair.
## Execution Workflow
1. **Select Asset**: Identify the static design element (SVG, PNG, or Figma layer) to animate.
2. **Choose Preset/Category**: Select the appropriate domain (Logos, UI, Icons, Social Media) to ensure the motion curves match the context.
3. **Animate**: Use the **AI Animation Assistant** via chat-based prompts to request specific, premium motion (e.g., "Make it feel like a high-end luxury brand reveal" or "Give it a kinetic, elastic pop").
4. **Refine**: If available, edit keyframes for further polish, ensuring easing curves feel natural and high-end.
5. **Export & Integrate**: Export the final animation as **Lottie (JSON)** for web/mobile performance, or **GIF/MP4** for social.
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT rely on basic, linear animations. Use motion to create a "wow" factor.
- **Purposeful Motion**: Every animation must feel deliberate and premium. Avoid chaotic or overly fast motion that distracts from the core UX.
- **Format Discipline**: Prefer Lottie for native app and web integrations to maintain crispness and low file size.

42
skills/magic-ui-generator/SKILL.md Normal file
View File

@@ -0,0 +1,42 @@
---
name: magic-ui-generator
description: Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
risk: safe
source: community
date_added: "2026-03-07"
---
# Magic UI Generator
Leverage [Magic by 21st.dev](https://21st.dev/magic) to build modern, responsive UI components using an AI-native workflow that prioritizes choice and design excellence.
## Context
This skill leverages Magic by 21st.dev to build modern, responsive UI components. Instead of generating a single standard solution, it focuses on providing multiple design variations to choose from, drawing inspiration from a curated library of real-world components and premium design patterns (Shadcn UI, Magic UI, Aceternity, etc.).
## When to Use
Trigger this skill whenever:
- A new UI component is requested (e.g., pricing tables, contact forms, hero sections).
- Enhancing an existing UI element with animations, better styling, or advanced features.
- Brainstorming different design directions for a specific feature.
- Professional logos or icons are needed (via the built-in [SVGL](https://svgl.app/) integration).
## Execution Workflow
1. **Analyze Requirements**: Review the component description. Ensure the target output aligns with the project's stack (e.g., Next.js, TypeScript, Tailwind CSS). Define clear constraints for accessibility and responsiveness.
2. **Generate Variations**: Interface with the Magic MCP server or use the `browser_subagent` to explore 21st.dev/magic to generate _several distinct, unconventional styles_ for the requested component.
- **Pro Tip**: Use descriptive prompts pushing for modern aesthetics: "avant-garde SaaS pricing table with glassmorphism and animated borders" or "highly immersive contact form with dynamic floating labels."
3. **Present Options**: Briefly describe the generated variations side-by-side. Highlight stylistic differences, layout approaches, and premium features (sticky headers, hover animations, etc.).
4. **Integrate Selection**: Once a favorite variation is chosen:
- Integrate the fully functional, production-ready TypeScript code.
- Ensure dependencies (`lucide-react`, `framer-motion`) are installed.
- Handle proper props, types, and responsive behaviors.
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in common, generic, or safe styles. Push boundaries.
- **Choice First**: Always offer multiple premium design variations before writing the final code to the project.
- **Clean Code**: Ensure all generated code is clean TypeScript, accessible, and responsive.
- **Full Ownership**: Treat all generated components as fully owned.

80
skills/spline-3d-integration/SKILL.md Normal file
View File

@@ -0,0 +1,80 @@
---
name: spline-3d-integration
description: "Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API."
risk: safe
source: community
date_added: "2026-03-07"
---
# Spline 3D Integration Skill
Master guide for embedding interactive 3D scenes from [Spline.design](https://spline.design) into web projects.
---
## Quick Reference
| Task | Guide |
| --------------------------------- | -------------------------------------------------------------- |
| Vanilla HTML/JS embed | [guides/VANILLA_INTEGRATION.md](guides/VANILLA_INTEGRATION.md) |
| React / Next.js / Vue embed | [guides/REACT_INTEGRATION.md](guides/REACT_INTEGRATION.md) |
| Performance & mobile optimization | [guides/PERFORMANCE.md](guides/PERFORMANCE.md) |
| Debugging & common problems | [guides/COMMON_PROBLEMS.md](guides/COMMON_PROBLEMS.md) |
## Working Examples
| File | What it shows |
| ---------------------------------------------------------------------- | -------------------------------------------------------- |
| [examples/vanilla-embed.html](examples/vanilla-embed.html) | Minimal vanilla JS embed with background + fallback |
| [examples/react-spline-wrapper.tsx](examples/react-spline-wrapper.tsx) | Production-ready lazy-loaded React wrapper with fallback |
| [examples/interactive-scene.tsx](examples/interactive-scene.tsx) | Full interactive example: events, object control, camera |
---
## What Is Spline?
Spline is a browser-based 3D design tool — think Figma, but for 3D. Designers create interactive 3D scenes (objects, materials, animations, physics, events) in the Spline editor, then export them for the web via a hosted `.splinecode` file URL.
---
## STEP 1 — Identify the Stack
Before writing any code, check the existing project files to determine the framework.
| Stack | Method |
| ------------------------------ | -------------------------------------------------------- |
| Vanilla HTML/JS | `<spline-viewer>` web component OR `@splinetool/runtime` |
| React / Vite | `@splinetool/react-spline` |
| Next.js | `@splinetool/react-spline/next` |
| Vue | `@splinetool/vue-spline` |
| iframe (Webflow, Notion, etc.) | Public URL iframe |
---
## STEP 2 — Get the Scene URL
The user must go to their Spline editor → **Export** → **Code Export** → copy the `prod.spline.design` URL:
```
https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode
```
**Before copying the URL, tell the user to check Play Settings:**
- ✅ Toggle **Hide Background** ON if the site has a dark or custom background
- ✅ Toggle **Hide Spline Logo** ON if they have a paid plan
- ✅ Set **Geometry Quality** to Performance for faster load
- ✅ Disable **Page Scroll**, **Zoom**, **Pan** if those aren't needed (reduces hijacking risk)
- ✅ Click **Generate Draft** or **Promote to Production** after any settings change — the URL does NOT auto-update
---
## STEP 3 — Read the Relevant Guide
Once you have the stack and the scene URL, read the appropriate guide file above and follow its instructions. Always read COMMON_PROBLEMS.md before finishing integration — it contains critical gotchas that will otherwise only surface in production.
---
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in common, generic, or safe styles. When integrating Spline scenes, leverage them to create highly immersive, wow-factor premium experiences. Combine them thoughtfully with typography and layout.

198
skills/spline-3d-integration/examples/interactive-scene.tsx Normal file
View File

@@ -0,0 +1,198 @@
// interactive-scene.tsx
// Full interactive Spline example — React
// Demonstrates: events, object manipulation, animation triggers, variable access
//
// Usage: drop this into a React/Next.js project and replace the scene URL
import { useRef, useState, useCallback } from 'react';
import Spline from '@splinetool/react-spline';
import type { Application } from '@splinetool/runtime';
const SCENE_URL = 'https://prod.spline.design/REPLACE_ME/scene.splinecode';
export default function InteractiveScene() {
const splineApp = useRef<Application>();
const [isLoaded, setIsLoaded] = useState(false);
const [lastEvent, setLastEvent] = useState<string>('');
// --- Called when scene finishes loading ---
function onLoad(app: Application) {
splineApp.current = app;
setIsLoaded(true);
console.log('Scene loaded');
}
// --- Listen to events from inside the Spline scene ---
function onMouseDown(e: any) {
setLastEvent(`mouseDown on: ${e.target?.name}`);
console.log('mouseDown event:', e.target);
}
function onMouseHover(e: any) {
setLastEvent(`mouseHover on: ${e.target?.name}`);
}
// --- Programmatically move an object ---
const moveObject = useCallback(() => {
if (!splineApp.current) return;
const obj = splineApp.current.findObjectByName('Cube');
if (!obj) return console.warn('Object "Cube" not found — check the name in Spline editor');
obj.position.x += 50; // move right
}, []);
// --- Trigger an animation event ---
const triggerAnimation = useCallback(() => {
if (!splineApp.current) return;
splineApp.current.emitEvent('mouseHover', 'Cube'); // triggers the mouseHover event on 'Cube'
}, []);
// --- Trigger animation in reverse (useful for toggle effects) ---
const reverseAnimation = useCallback(() => {
if (!splineApp.current) return;
splineApp.current.emitEventReverse('mouseHover', 'Cube');
}, []);
// --- Rotate object (RADIANS not degrees!) ---
const rotateObject = useCallback(() => {
if (!splineApp.current) return;
const obj = splineApp.current.findObjectByName('Cube');
if (!obj) return;
// 90 degrees = Math.PI / 2
obj.rotation.y += Math.PI / 2;
}, []);
// --- Change object scale ---
const scaleObject = useCallback((factor: number) => {
if (!splineApp.current) return;
const obj = splineApp.current.findObjectByName('Cube');
if (!obj) return;
obj.scale.x = factor;
obj.scale.y = factor;
obj.scale.z = factor;
}, []);
// --- Read/write Spline variables ---
const updateVariable = useCallback(() => {
if (!splineApp.current) return;
// Get a variable defined in the Spline editor
const score = splineApp.current.getVariable('score');
console.log('Current score variable:', score);
// Set a variable
splineApp.current.setVariable('score', (score as number) + 1);
}, []);
return (
<div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
{/* Spline scene */}
<Spline
scene={SCENE_URL}
onLoad={onLoad}
onMouseDown={onMouseDown}
onMouseHover={onMouseHover}
style={{
position: 'absolute',
inset: 0,
width: '100%',
height: '100%',
zIndex: 0,
}}
/>
{/* Control panel — sits on top of the scene */}
{isLoaded && (
<div style={{
position: 'absolute',
bottom: 40,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 10,
display: 'flex',
gap: 12,
flexWrap: 'wrap',
justifyContent: 'center',
background: 'rgba(0,0,0,0.6)',
padding: '16px 24px',
borderRadius: 12,
backdropFilter: 'blur(8px)',
}}>
<button onClick={moveObject}>Move Right</button>
<button onClick={rotateObject}>Rotate 90°</button>
<button onClick={() => scaleObject(2)}>Scale Up</button>
<button onClick={() => scaleObject(1)}>Reset Scale</button>
<button onClick={triggerAnimation}>Trigger Hover</button>
<button onClick={reverseAnimation}>Reverse Hover</button>
<button onClick={updateVariable}>Increment Variable</button>
</div>
)}
{/* Event log */}
{lastEvent && (
<div style={{
position: 'absolute',
top: 20,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 10,
color: 'white',
background: 'rgba(0,0,0,0.5)',
padding: '8px 16px',
borderRadius: 8,
fontSize: 14,
fontFamily: 'monospace',
}}>
{lastEvent}
</div>
)}
{/* Loading state */}
{!isLoaded && (
<div style={{
position: 'absolute',
inset: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: 18,
zIndex: 10,
background: '#0a0a0a',
}}>
Loading scene...
</div>
)}
</div>
);
}
/*
NOTES FOR AGENT:
1. Replace 'Cube' with the actual object name from the Spline editor
(right-click object in editor → "Copy Development Object ID" for the UUID,
or just use the display name shown in the Objects panel)
2. Rotation uses RADIANS:
90° = Math.PI / 2
180° = Math.PI
360° = Math.PI * 2
Convert: const toRad = (deg) => deg * (Math.PI / 180)
3. Variables must be defined in the Spline editor first
(right sidebar → Variables panel → add variable)
4. All available event types for onXxx props:
onMouseDown, onMouseUp, onMouseHover, onMousePress,
onKeyDown, onKeyUp, onStart, onScroll
5. If getting hydration errors in Next.js, wrap with:
const Spline = dynamic(() => import('@splinetool/react-spline/next'), { ssr: false })
*/

124
skills/spline-3d-integration/examples/react-spline-wrapper.tsx Normal file
View File

@@ -0,0 +1,124 @@
// react-spline-wrapper.tsx
// Production-ready Spline wrapper for React / Next.js
// Features: lazy loading, mobile detection, GPU check, fallback, fade-in on load
//
// Usage:
// <SplineBackground sceneUrl="https://prod.spline.design/XXXXX/scene.splinecode" />
import { lazy, Suspense, useState, useEffect, useRef } from 'react';
const Spline = lazy(() => import('@splinetool/react-spline'));
interface SplineBackgroundProps {
sceneUrl: string;
fallbackColor?: string;
fallbackImageUrl?: string;
mobileBreakpoint?: number;
className?: string;
children?: React.ReactNode;
}
function shouldLoadSpline(mobileBreakpoint: number): boolean {
if (typeof window === 'undefined') return false; // SSR guard
const isMobile = window.innerWidth < mobileBreakpoint;
const isLowEnd = navigator.hardwareConcurrency <= 2;
// Check WebGL support
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
const noWebGL = !gl;
return !isMobile && !isLowEnd && !noWebGL;
}
export default function SplineBackground({
sceneUrl,
fallbackColor = '#0a0a0a',
fallbackImageUrl,
mobileBreakpoint = 768,
className = '',
children,
}: SplineBackgroundProps) {
const [splineLoaded, setSplineLoaded] = useState(false);
const [splineFailed, setSplineFailed] = useState(false);
const [canLoad, setCanLoad] = useState(false);
const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
useEffect(() => {
setCanLoad(shouldLoadSpline(mobileBreakpoint));
}, [mobileBreakpoint]);
useEffect(() => {
if (!canLoad) return;
// If Spline hasn't loaded after 8 seconds, show fallback
timeoutRef.current = setTimeout(() => {
if (!splineLoaded) {
setSplineFailed(true);
}
}, 8000);
return () => clearTimeout(timeoutRef.current);
}, [canLoad, splineLoaded]);
function onLoad() {
clearTimeout(timeoutRef.current);
setSplineLoaded(true);
}
const showFallback = !canLoad || splineFailed;
return (
<div
className={className}
style={{ position: 'relative', width: '100%', height: '100vh', overflow: 'hidden' }}
>
{/* Fallback layer — always rendered underneath */}
<div
style={{
position: 'absolute',
inset: 0,
zIndex: 0,
background: fallbackImageUrl
? `url(${fallbackImageUrl}) center/cover no-repeat`
: fallbackColor,
// Fade out once Spline loads
opacity: splineLoaded && !showFallback ? 0 : 1,
transition: 'opacity 0.6s ease',
}}
/>
{/* Spline scene — only on capable devices */}
{canLoad && !splineFailed && (
<Suspense fallback={null}>
<Spline
scene={sceneUrl}
onLoad={onLoad}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
// Fade in when ready
opacity: splineLoaded ? 1 : 0,
transition: 'opacity 0.6s ease',
// Don't block clicks on content above
// Change to 'all' if you want mouse interaction with the scene
pointerEvents: 'none',
}}
/>
</Suspense>
)}
{/* Content sits on top of everything */}
{children && (
<div style={{ position: 'relative', zIndex: 1 }}>
{children}
</div>
)}
</div>
);
}

146
skills/spline-3d-integration/examples/vanilla-embed.html Normal file
View File

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<!--
vanilla-embed.html
Minimal production-ready Spline embed — vanilla HTML/JS
Features: transparent background, mobile skip, GPU check, load timeout fallback, no scroll hijacking
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spline Background</title>
<!-- Preload scene for faster perceived load -->
<link rel="preload" href="https://prod.spline.design/REPLACE_ME/scene.splinecode" as="fetch" crossorigin>
<!-- Load Spline viewer web component -->
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
/* IMPORTANT: Do NOT set overflow: hidden here.
Spline's generated code tries to add this — it will break page scroll.
If it appears anywhere in your CSS, remove it. */
overflow: auto;
background: #0a0a0a;
}
/* Spline background wrapper */
.spline-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* Reserve space to prevent layout shift */
contain: strict;
/* Fade in when loaded */
opacity: 0;
transition: opacity 0.6s ease;
}
.spline-bg.loaded {
opacity: 1;
}
/* Fallback shown before load or on fallback devices */
.spline-fallback {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: #0a0a0a;
/* Optional: background image fallback
background: url('fallback.jpg') center/cover no-repeat;
*/
}
/* Your actual page content */
.content {
position: relative;
z-index: 1;
/* Make sure buttons and links are always clickable */
pointer-events: all;
}
spline-viewer {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<!-- Fallback (always rendered — hidden by JS once Spline loads) -->
<div class="spline-fallback" id="spline-fallback"></div>
<!-- Spline background (hidden until loaded) -->
<div class="spline-bg" id="spline-bg">
<spline-viewer
id="spline-viewer"
url="https://prod.spline.design/REPLACE_ME/scene.splinecode"
events-target="global">
<!--
events-target="global" = scene responds to mouse movements anywhere on page
Remove it if you only want interaction when hovering directly on the scene
-->
</spline-viewer>
</div>
<!-- Your page content -->
<div class="content">
<h1 style="color: white; padding: 40px;">Your Content Here</h1>
</div>
<script>
const splineBg = document.getElementById('spline-bg');
const splineFallback = document.getElementById('spline-fallback');
const splineViewer = document.getElementById('spline-viewer');
// --- Device capability check ---
function shouldLoadSpline() {
const isMobile = window.innerWidth < 768;
const isLowEnd = navigator.hardwareConcurrency <= 2;
// Check WebGL support
const testCanvas = document.createElement('canvas');
const gl = testCanvas.getContext('webgl2') || testCanvas.getContext('webgl');
const noWebGL = !gl;
return !isMobile && !isLowEnd && !noWebGL;
}
if (!shouldLoadSpline()) {
// Low-end or mobile — skip Spline entirely, keep fallback visible
splineBg.remove();
} else {
// --- Load timeout fallback ---
// If Spline hasn't loaded in 8 seconds, give up and show the fallback
const timeout = setTimeout(() => {
console.warn('Spline scene timed out — showing fallback');
splineBg.remove();
splineFallback.style.opacity = '1';
}, 8000);
// --- Detect successful load ---
// spline-viewer fires a 'load' event when the scene is ready
splineViewer.addEventListener('load', () => {
clearTimeout(timeout);
splineBg.classList.add('loaded');
// Optionally fade out the fallback
splineFallback.style.transition = 'opacity 0.6s ease';
splineFallback.style.opacity = '0';
});
}
</script>
</body>
</html>

262
skills/spline-3d-integration/guides/COMMON_PROBLEMS.md Normal file
View File

@@ -0,0 +1,262 @@
# Common Problems & Debugging
These are the real-world issues that only surface after integration. Read this before finishing any Spline implementation.
---
## 🚨 Critical Gotchas (Will Break Your Site)
---
### 1. Scroll Hijacking — Page Won't Scroll
**What happens:** After adding Spline, the whole page stops scrolling. Users are stuck.
**Why:** Spline's auto-generated vanilla JS exports inject `overflow: hidden` into `<body>` CSS by default. This is baked into their generated code.
**Fix:**
```css
/* Add this to your CSS — overrides Spline's injection */
body {
overflow: auto !important;
}
```
Or in Play Settings (Spline editor → Export → Play Settings), **disable "Page Scroll"** before generating the URL. This removes the overflow rule from the output.
**Also check:** If using the Runtime API and you embedded the generated `index.html` files, open them and manually remove the `overflow: hidden` line from the `<style>` block.
---
### 2. White Box Behind the 3D Scene
**What happens:** Your dark/transparent website has a white rectangle where the Spline scene is.
**Why:** The background color is set to white by default in Spline's export settings.
**Fix:**
1. In Spline editor → Export → Play Settings → toggle **Hide Background** ON
2. Click **Generate Draft** or **Promote to Production** — the URL does NOT auto-update with new settings
3. Copy the new URL
For the web component you can also override inline:
```html
<spline-viewer url="..." background="transparent"></spline-viewer>
```
---
### 3. Spline Scene Intermittently Fails to Load
**What happens:** Page loads fine sometimes, blank or broken other times. Feels random.
**Why:** The `prod.spline.design` CDN occasionally has latency or drops requests. There's no built-in retry or error handling.
**Fix — add a timeout fallback:**
```js
const TIMEOUT_MS = 8000;
const timeoutId = setTimeout(() => {
// Spline didn't load in time — show fallback
document.getElementById('spline-fallback').style.display = 'block';
document.querySelector('.spline-wrapper').style.display = 'none';
}, TIMEOUT_MS);
// If using Runtime API, clear the timeout on successful load:
spline.load(sceneUrl).then(() => {
clearTimeout(timeoutId);
});
```
**Long-term fix:** Download the `.splinecode` file and self-host it on your own CDN. This eliminates the third-party dependency entirely and also fixes CORS issues.
---
### 4. Scene Looks Fine on Mac, Lags on Everything Else
**What happens:** Buttery smooth on MacBook Pro or M-chip Mac. Completely broken — laggy, stuttering, sometimes crashing — on mid-range Windows laptops or Android phones.
**Why:** Spline uses WebGL which runs on the GPU. Apple Silicon Macs have exceptional GPU performance. Most Windows laptops and Android devices do not have dedicated GPUs.
**Fix — detect capability before loading:**
```js
function shouldLoadSpline() {
const isMobile = window.innerWidth < 768;
const isLowEnd = navigator.hardwareConcurrency <= 2;
// Optional: test WebGL support
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
const noWebGL = !gl;
return !isMobile && !isLowEnd && !noWebGL;
}
if (shouldLoadSpline()) {
loadSplineScene();
} else {
showFallback();
}
```
---
### 5. Layout Shift — Page Jumps When Scene Loads
**What happens:** User sees the page layout, then everything shifts/jumps when the 3D scene loads in.
**Why:** The canvas has no reserved height before loading, so the browser doesn't know how much space to allocate. HTML renders → space collapses → scene loads → everything jumps. This tanks your CLS (Cumulative Layout Shift) Core Web Vitals score.
**Fix — pre-allocate space:**
```css
spline-viewer, canvas.spline-canvas {
display: block;
width: 100%;
height: 100vh; /* or whatever your target height is */
contain: strict; /* tells browser to reserve this space */
}
```
For `position: fixed` backgrounds this is less of an issue, but for inline scenes it's critical.
---
### 6. Rotation Values Are Radians, Not Degrees
**What happens:** You try to rotate an object to 90 degrees. It barely moves or spins wildly.
**Why:** Spline's runtime API uses **radians**, not degrees. 90 degrees = `Math.PI / 2`. 180 degrees = `Math.PI`.
**Fix:**
```js
// WRONG
obj.rotation.y = 90;
// CORRECT
obj.rotation.y = Math.PI / 2; // 90 degrees
obj.rotation.y = Math.PI; // 180 degrees
obj.rotation.y = Math.PI * 2; // 360 degrees (full rotation)
// Helper function to use if you prefer degrees:
const toRad = (deg) => deg * (Math.PI / 180);
obj.rotation.y = toRad(90);
```
---
### 7. 3D Scene Blocks Clicks on Buttons / Links
**What happens:** Buttons, CTAs, or nav links that overlap with the Spline scene don't respond to clicks.
**Why:** The Spline canvas sits on top and captures all pointer events.
**Fix:** Add `pointer-events: none` to the Spline wrapper if it's decorative (no interaction needed):
```css
.spline-wrapper {
pointer-events: none; /* scene won't capture any clicks */
}
```
If you need BOTH mouse interaction on the scene AND clickable content on top:
```css
.spline-wrapper {
pointer-events: all; /* scene gets mouse events */
}
.content-overlay {
position: relative;
z-index: 10;
pointer-events: all; /* content also gets mouse events */
}
```
Note: When both have `pointer-events: all`, the topmost element (by z-index) wins. Make sure your content div has a higher z-index than the Spline wrapper.
---
### 8. Spline Watermark Visible (Free Plan)
**What happens:** A small "Built with Spline" logo appears in the corner.
**Options:**
**Option A — Upgrade to a Spline paid plan.** Then in Export → Play Settings → toggle "Hide Spline Logo" ON.
**Option B — CSS overlay (free plan workaround):**
```css
/* Hides the watermark via CSS — targets the shadow DOM */
spline-viewer::part(logo) {
display: none;
}
/* Fallback if the above doesn't work */
spline-viewer {
--spline-viewer-logo-display: none;
}
```
Note: CSS-based hiding may break with Spline updates. The paid plan is the reliable solution.
---
### 9. CORS Error When Loading Scene
**What happens:** Scene fails to load with a CORS error in the console.
**Why:** Browser security blocks cross-origin requests in some environments (especially localhost dev servers with certain configurations).
**Fix — self-host the scene file:**
1. In Spline → Export → Code Export → click the download icon next to the URL
2. Download the `.splinecode` file
3. Host it on your own server or CDN (same origin as your site)
4. Update the URL in your embed code to point to your hosted version
---
### 10. Next.js Hydration Error
**What happens:** React hydration mismatch error in Next.js when the Spline component is included.
**Why:** Spline renders on the client only (it needs the browser's WebGL), but Next.js tries to render on the server too.
**Fix:**
```jsx
import dynamic from 'next/dynamic';
// ssr: false tells Next.js not to render this on the server
const Spline = dynamic(() => import('@splinetool/react-spline/next'), {
ssr: false,
loading: () => <div style={{ background: '#0a0a0a', height: '100vh' }} />
});
```
---
### 11. Scene URL Not Reflecting Latest Changes
**What happens:** You updated the scene in the Spline editor, but the embed still shows the old version.
**Why:** The `prod.spline.design` URL is a snapshot. It does **not** auto-update when you make changes.
**Fix:** Every time you make changes in the Spline editor, you must:
1. Go to Export → Code Export
2. Click **"Promote to Production"** (or "Generate Draft" for a new draft URL)
3. The existing prod URL will now serve the updated scene — no need to change the URL in your code
---
## Quick Diagnostic Table
| Symptom | Most Likely Cause | Fix |
|---|---|---|
| Page won't scroll | `overflow: hidden` injected by Spline | Add `body { overflow: auto !important }` or disable Page Scroll in Play Settings |
| White box behind scene | Background not hidden | Play Settings → Hide Background → regenerate URL |
| Loads sometimes, blank others | CDN flakiness | Add timeout fallback; consider self-hosting |
| Smooth on Mac, laggy elsewhere | GPU performance gap | Add hardware detection, skip on low-end |
| Page jumps on load | No reserved space (CLS) | Set explicit height on canvas/viewer element |
| Rotations look wrong | Degrees vs radians | Use `Math.PI / 180 * degrees` |
| Buttons not clickable | Canvas capturing pointer events | Add `pointer-events: none` to Spline wrapper |
| Watermark visible | Free plan | Upgrade or use CSS override |
| CORS error | Cross-origin loading | Self-host the `.splinecode` file |
| Hydration error (Next.js) | SSR conflict | Use `dynamic(() => import(...), { ssr: false })` |
| Old scene still showing | Didn't promote to production | Click "Promote to Production" in Spline editor |

163
skills/spline-3d-integration/guides/PERFORMANCE.md Normal file
View File

@@ -0,0 +1,163 @@
# Performance & Mobile Optimization
Spline scenes are WebGL — they run on the GPU. A poorly optimized scene will tank your PageSpeed score, lag on mid-range devices, and drain mobile batteries. Treat them like video files, not images.
---
## Before You Even Integrate — Check Scene Size
**Tell the user to check their scene file size before giving you the URL.**
- Under ~3MB = generally fine
- 3–10MB = usable but optimize where possible
- Over 10MB = serious problem, needs optimization or a different approach
- Over 20MB = do not embed as live 3D — export as video instead
To check: in Spline editor → Export → Code Export → the file size is shown before generating the URL.
**If the scene is too heavy, tell the user to:**
1. In Export → Play Settings, set **Geometry Quality** to "Performance"
2. Reduce subdivision levels (1 is usually enough, max 2)
3. Delete objects that are hidden or never visible
4. Remove unused textures and images
5. Use fewer than 3 lights — prefer Matcap materials for reflective effects (fakes reflections without GPU cost)
6. Merge objects that share the same material
---
## Optimization Checklist (Pre-Integration)
Go through these before writing any embed code:
- [ ] Scene file size is under 10MB
- [ ] Geometry Quality set to "Performance" in Play Settings
- [ ] Background hidden if site has its own background color
- [ ] Disabled: Page Scroll, Zoom, Pan (in Play Settings) unless explicitly needed
- [ ] Max 1–2 Spline embeds on the page (never more than 3)
- [ ] Less than 3 lights in the scene
- [ ] No high-res textures unless essential
---
## Loading Strategy
### 1. Preload the scene file
Add to `<head>` to start fetching before scripts execute:
```html
<link rel="preload" href="https://prod.spline.design/REPLACE_ME/scene.splinecode" as="fetch" crossorigin>
```
### 2. Show a fallback while loading
Never leave users staring at a blank space. Always render a background color or static image as a placeholder:
```css
.spline-wrapper {
background: #0a0a0a; /* your site's bg color — shows instantly */
width: 100%;
height: 100vh;
}
```
### 3. Lazy load (React)
Don't load Spline until it's needed:
```jsx
const Spline = lazy(() => import('@splinetool/react-spline'));
```
### 4. Intersection Observer (load only when visible)
For Spline scenes below the fold:
```js
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadSplineScene(); // only load when user scrolls to it
observer.disconnect();
}
});
observer.observe(document.getElementById('spline-section'));
```
---
## Mobile Strategy
Spline scenes are GPU-intensive. On mobile they:
- Drain battery quickly
- Lag on any device without a dedicated GPU
- Can cause the browser tab to crash on lower-end Android
**Always implement one of these strategies:**
### Option A — Skip entirely on mobile (recommended for hero backgrounds)
```js
if (window.innerWidth < 768) {
// Don't load Spline — show static background instead
document.querySelector('.spline-wrapper').style.background = 'url(fallback.jpg) center/cover';
}
```
### Option B — Hardware concurrency check
```js
// navigator.hardwareConcurrency = number of CPU cores
// Low core count = likely a low-end device
if (navigator.hardwareConcurrency <= 2 || window.innerWidth < 768) {
// Skip Spline, use fallback
}
```
### Option C — Export as video for mobile
For decorative/non-interactive scenes: record the animation in Spline as MP4, serve that on mobile instead. Users get the visual, no GPU cost.
```js
const isMobile = window.innerWidth < 768;
if (isMobile) {
// Show video
document.getElementById('spline-video').style.display = 'block';
} else {
// Load Spline
loadSpline();
}
```
---
## Core Web Vitals (LCP / CLS)
Spline scenes are almost always the **Largest Contentful Paint** element, which means they directly affect your Google score.
### Preventing Layout Shift (CLS)
The canvas loads after HTML, causing the page to jump. Fix it by pre-allocating space:
```css
canvas#canvas3d {
width: 100%;
height: 100vh;
/* This tells the browser to reserve this space before the scene loads */
contain: strict;
}
```
Or for the web component:
```html
<spline-viewer
url="..."
style="width: 100%; height: 100vh; display: block;">
</spline-viewer>
```
### Lighthouse note
Lighthouse often cannot calculate a performance score at all when a Spline scene is the dominant above-the-fold element. This is a known Lighthouse limitation, not necessarily a site problem. Use WebPageTest or Chrome DevTools instead for real profiling.
---
## When NOT to Use a Live 3D Embed
Sometimes a Spline embed is the wrong tool. Use a video or GIF instead when:
- The animation doesn't respond to user input (no mouse tracking, no clicks)
- The scene file is over 15MB
- Your target audience is primarily mobile
- You need the page to score above 80 on PageSpeed
**How to export as video from Spline:**
In Spline editor → Export → Video → record your animation → compress with HandBrake → host on GitHub or a CDN → embed as `<video autoplay loop muted playsinline>`

212
skills/spline-3d-integration/guides/REACT_INTEGRATION.md Normal file
View File

@@ -0,0 +1,212 @@
# React / Next.js / Vue Integration
---
## React / Vite
Install:
```bash
npm install @splinetool/react-spline
```
Basic:
```jsx
import Spline from '@splinetool/react-spline';
export default function App() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<Spline scene="https://prod.spline.design/REPLACE_ME/scene.splinecode" />
</div>
);
}
```
With object interaction + event listeners:
```jsx
import { useRef } from 'react';
import Spline from '@splinetool/react-spline';
export default function App() {
const splineRef = useRef();
function onLoad(splineApp) {
splineRef.current = splineApp;
}
function triggerAnimation() {
splineRef.current.emitEvent('mouseHover', 'Cube');
}
function onSplineEvent(e) {
console.log('Object interacted:', e.target.name);
}
return (
<div>
<Spline
scene="https://prod.spline.design/REPLACE_ME/scene.splinecode"
onLoad={onLoad}
onMouseDown={onSplineEvent}
/>
<button onClick={triggerAnimation}>Trigger</button>
</div>
);
}
```
**Lazy loading (recommended for performance):**
```jsx
import { lazy, Suspense } from 'react';
const Spline = lazy(() => import('@splinetool/react-spline'));
export default function Hero() {
return (
<Suspense fallback={<div style={{ background: '#0a0a0a', width: '100%', height: '100vh' }} />}>
<Spline scene="https://prod.spline.design/REPLACE_ME/scene.splinecode" />
</Suspense>
);
}
```
---
## Next.js
Install:
```bash
npm install @splinetool/react-spline
```
**Use the `/next` import** for SSR support + auto blurred placeholder:
```jsx
import Spline from '@splinetool/react-spline/next';
export default function Page() {
return (
<Spline scene="https://prod.spline.design/REPLACE_ME/scene.splinecode" />
);
}
```
**With dynamic import (if you get hydration errors):**
```jsx
import dynamic from 'next/dynamic';
const Spline = dynamic(() => import('@splinetool/react-spline/next'), {
ssr: false,
loading: () => <div style={{ background: '#0a0a0a', width: '100%', height: '100vh' }} />
});
export default function Page() {
return <Spline scene="https://prod.spline.design/REPLACE_ME/scene.splinecode" />;
}
```
---
## Vue
Install:
```bash
npm install @splinetool/vue-spline
```
```vue
<template>
<Spline
scene="https://prod.spline.design/REPLACE_ME/scene.splinecode"
@spline-loaded="onLoaded"
@mouseDown="onClick"
/>
</template>
<script>
import Spline from '@splinetool/vue-spline';
export default {
components: { Spline },
methods: {
onLoaded(spline) {
const obj = spline.findObjectByName('Cube');
obj.position.x += 10; // NOTE: radians for rotation, not degrees
},
onClick(e) {
console.log('Clicked:', e.target.name);
}
}
}
</script>
```
---
## Full-Page Background (React)
```jsx
import Spline from '@splinetool/react-spline';
import { useState } from 'react';
export default function HeroSection() {
const [loaded, setLoaded] = useState(false);
// Skip Spline on mobile / low-end devices
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
const isLowEnd = typeof navigator !== 'undefined' && navigator.hardwareConcurrency <= 2;
return (
<div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
{/* Fallback background — always rendered, hidden once Spline loads */}
<div style={{
position: 'absolute', inset: 0,
background: '#0a0a0a',
zIndex: 0,
opacity: loaded ? 0 : 1,
transition: 'opacity 0.5s ease'
}} />
{/* Spline scene — only load on capable devices */}
{!isMobile && !isLowEnd && (
<Spline
scene="https://prod.spline.design/REPLACE_ME/scene.splinecode"
onLoad={() => setLoaded(true)}
style={{
position: 'absolute',
top: 0, left: 0,
width: '100%', height: '100%',
zIndex: 0
}}
/>
)}
{/* Content sits on top */}
<div style={{ position: 'relative', zIndex: 1 }}>
<h1>Your Content Here</h1>
</div>
</div>
);
}
```
---
## React Prop Reference
| Prop | Type | Description |
|---|---|---|
| `scene` | string | Scene URL (required) |
| `onLoad` | function | Called with splineApp when loaded |
| `onMouseDown` | function | Mouse/touch down on object |
| `onMouseUp` | function | Mouse/touch up |
| `onMouseHover` | function | Hover over object |
| `onKeyDown` | function | Key pressed |
| `onKeyUp` | function | Key released |
| `onStart` | function | Scene started |
| `onScroll` | function | Scroll event |
| `style` | object | CSS styles for the canvas |
| `className` | string | CSS class |
See [PERFORMANCE.md](PERFORMANCE.md) and [COMMON_PROBLEMS.md](COMMON_PROBLEMS.md) before finishing.

203
skills/spline-3d-integration/guides/VANILLA_INTEGRATION.md Normal file
View File

@@ -0,0 +1,203 @@
# Vanilla JS / HTML Integration
Two methods depending on how much control you need.
---
## Method A — Web Component (Recommended for most cases)
No npm required. Just add to HTML. Supports lazy loading, transparent backgrounds, and mouse interactivity.
```html
<!-- In <head> — loads the web component -->
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<!-- Basic embed -->
<spline-viewer url="https://prod.spline.design/REPLACE_ME/scene.splinecode"></spline-viewer>
<!-- With mouse-following interactivity (e.g. cursor-tracking robots) -->
<spline-viewer
url="https://prod.spline.design/REPLACE_ME/scene.splinecode"
events-target="global">
</spline-viewer>
<!-- Transparent background -->
<spline-viewer
url="https://prod.spline.design/REPLACE_ME/scene.splinecode"
background="transparent">
</spline-viewer>
```
---
## Method B — Runtime API (When you need programmatic control)
Use when you need to manipulate objects, trigger animations, or respond to events from your own JS.
Install:
```bash
npm install @splinetool/runtime
```
Or via CDN (no install):
```html
<script type="module">
import { Application } from 'https://unpkg.com/@splinetool/runtime@latest/build/runtime.module.js';
// ... rest of your code
</script>
```
Basic usage:
```js
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline.load('https://prod.spline.design/REPLACE_ME/scene.splinecode').then(() => {
console.log('Scene loaded');
});
```
With object interaction:
```js
spline.load(sceneUrl).then(() => {
const obj = spline.findObjectByName('Cube');
// or by ID: spline.findObjectById('uuid-here')
obj.position.x += 50;
obj.rotation.y += Math.PI / 4; // NOTE: radians, NOT degrees
obj.scale.x = 2;
});
```
With event listeners:
```js
spline.load(sceneUrl).then(() => {
spline.addEventListener('mouseDown', (e) => {
console.log('Clicked:', e.target.name);
});
});
```
Trigger animations programmatically:
```js
spline.load(sceneUrl).then(() => {
const obj = spline.findObjectByName('MyObject');
obj.emitEvent('mouseHover'); // forward
obj.emitEventReverse('mouseHover'); // reverse
});
```
---
## Full-Page Background Setup
The most common use case — Spline scene behind all content.
```html
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
/* DO NOT add overflow: hidden here — it will break page scroll */
position: relative;
}
.spline-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* pointer-events: none — use this if scene is decorative only */
/* pointer-events: all — use this if you want mouse interaction */
pointer-events: all;
}
.content {
position: relative;
z-index: 1;
/* Make sure content elements don't get blocked by the 3D scene */
}
/* Fallback shown while Spline loads or if it fails */
.spline-fallback {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
background: #0a0a0a; /* match your site's base color */
display: none; /* hidden by default, shown via JS if needed */
}
</style>
</head>
<body>
<!-- Fallback (shown if Spline fails to load) -->
<div class="spline-fallback" id="spline-fallback"></div>
<!-- Spline background -->
<div class="spline-bg">
<spline-viewer
url="https://prod.spline.design/REPLACE_ME/scene.splinecode"
events-target="global"
style="width:100%; height:100%;">
</spline-viewer>
</div>
<!-- Your website content -->
<div class="content">
<h1>Your Content Here</h1>
</div>
<script>
// Show fallback if Spline hasn't loaded after 8 seconds
setTimeout(() => {
const viewer = document.querySelector('spline-viewer');
if (!viewer || !viewer.shadowRoot) {
document.getElementById('spline-fallback').style.display = 'block';
}
}, 8000);
// Skip Spline entirely on low-end mobile to save battery + performance
if (window.innerWidth < 768 || navigator.hardwareConcurrency <= 2) {
document.querySelector('.spline-bg').style.display = 'none';
document.getElementById('spline-fallback').style.display = 'block';
}
</script>
</body>
</html>
```
---
## Available Event Types
| Event | Use case |
|---|---|
| `mouseDown` | Click/tap on object |
| `mouseUp` | Release after click |
| `mouseHover` | Cursor enters object area |
| `mousePress` | Holding click down |
| `keyDown` | Key pressed |
| `keyUp` | Key released |
| `start` | Scene has loaded and started |
| `scroll` | Page scrolled |
---
## Preloading (Reduces Perceived Load Time)
Add to `<head>` to start fetching the scene file before scripts run:
```html
<link rel="preload" href="https://prod.spline.design/REPLACE_ME/scene.splinecode" as="fetch" crossorigin>
```
See [PERFORMANCE.md](PERFORMANCE.md) for full optimization strategy.
See [COMMON_PROBLEMS.md](COMMON_PROBLEMS.md) for debugging.

BIN
skills/spline-3d-integration/spline-3d-integration-skill (1).zip Normal file
View File

Binary file not shown.

36
skills/unsplash-integration/SKILL.md Normal file
View File

@@ -0,0 +1,36 @@
---
name: unsplash-integration
description: Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash.
risk: safe
source: community
date_added: "2026-03-07"
---
# Unsplash Integration Skill
[Unsplash](https://unsplash.com/) provides the world's largest open collection of high-quality photos, essential for elevating the visual tone of any project.
## Context
Use this skill to source breathtaking imagery for websites, apps, and marketing materials. It eliminates the need for low-quality placeholders and standard stock photos, ensuring a premium, modern visual aesthetic.
## When to Use
Trigger this skill when:
- Creating hero sections, editorial layouts, or product galleries that demand stunning visual impact.
- Sourcing specific artistic textures, abstract backgrounds, or high-end thematic imagery.
- Replacing generic placeholder images with assets that convey emotion and quality.
## Execution Workflow
1. **Search Intentionally**: Define highly descriptive, artistic keywords (e.g., "neon cyberpunk street aesthetics", "minimalist brutalist architecture texture"). Avoid generic searches like "meeting room" or "happy people".
2. **Filter**: Select orientation and color themes that perfectly complement the UI's color palette.
3. **Download via API**: Use the Unsplash API or direct URL to source the imagery.
4. **Dynamic Resizing**: Utilize Unsplash's dynamic image parameters (e.g., `?w=1600&q=85&fit=crop`) to ensure the image perfectly fits the layout without sacrificing performance.
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. NEVER use generic, cliché, or corporate-looking stock photography. Choose images that feel artistic, premium, and unconventional.
- **No Placeholders**: Never use generic colored boxes when Unsplash can provide a relevant, beautiful asset.
- **Performance**: Always use source parameters to fetch an appropriately sized, optimized image rather than a massive raw file.

37
skills/vizcom/SKILL.md Normal file
View File

@@ -0,0 +1,37 @@
---
name: vizcom
description: AI-powered product design tool for transforming sketches into full-fidelity 3D renders.
risk: safe
source: community
date_added: "2026-03-07"
---
# Vizcom Skill
[Vizcom](https://vizcom.com/) is an AI-driven platform designed to accelerate the ideation and rendering process, turning rough inputs into breathtaking visualizations.
## Context
Use this skill when tasked with creating photorealistic renders from rough sketches or line art, exploring aesthetic variations of a physical product concept, or generating high-fidelity 3D-like visualizations.
## When to Use
Trigger this skill when:
- Designing physical products (furniture, electronics, transportation, consumer goods).
- A user provides a sketch or a description of a product and needs a professional, awe-inspiring render.
- Generating "mood" or "concept" imagery for hardware or tangible UI projects.
## Execution Workflow
1. **Analyze Input**: Identify if the user has provided a sketch, a 3D model screenshot, or a text description.
2. **Define Style**: Choose a specific **Render Style** (e.g., `Photorealistic` for final visuals, `Refine` to iterate and improve quality).
3. **Draft Premium Prompt**: Formulate precise prompts. Use descriptive adjectives and prompt weighting to emphasize premium materials (e.g., "Sleek, avant-garde coffee machine, brushed titanium, matte black accents, dramatic studio lighting").
4. **Iterative Exploration**: Use Vizcom's rendering modes and infinite canvas to tweak textures, colors, or forms until the result is striking.
5. **Finalize**: Present the high-fidelity render.
## Strict Rules
- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning designs. DO NOT build in common or generic styles. Avoid safe, boring product shapes.
- **Material Precision**: Always specify rich textures (e.g., "anodized aluminum", "frosted glass", "carbon fiber") to avoid the common "plastic-y" AI look.
- **Lighting is Key**: Always include lighting directions in the prompt (e.g., "cinematic lighting", "high contrast shadows") to elevate the visual impact.

100
skills_index.json
View File

@@ -539,6 +539,16 @@
"source": "self",
"date_added": "2026-02-27"
},
{
"id": "animejs-animation",
"path": "skills/animejs-animation",
"category": "uncategorized",
"name": "animejs-animation",
"description": "Advanced JavaScript animation library skill for creating complex, high-performance web animations.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "anti-reversing-techniques",
"path": "skills/anti-reversing-techniques",
@@ -549,6 +559,16 @@
"source": "community",
"date_added": "2026-02-27"
},
{
"id": "antigravity-design-expert",
"path": "skills/antigravity-design-expert",
"category": "uncategorized",
"name": "antigravity-design-expert",
"description": "Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "antigravity-workflows",
"path": "skills/antigravity-workflows",
@@ -3969,6 +3989,16 @@
"source": "https://github.com/ai-evos/agent-skills",
"date_added": "2026-02-27"
},
{
"id": "daily",
"path": "skills/daily",
"category": "uncategorized",
"name": "daily",
"description": "Documentation and capabilities reference for Daily",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "daily-news-report",
"path": "skills/daily-news-report",
@@ -4369,6 +4399,16 @@
"source": "community",
"date_added": "2026-02-27"
},
{
"id": "design-spells",
"path": "skills/design-spells",
"category": "uncategorized",
"name": "design-spells",
"description": "Curated micro-interactions and design details that add \"magic\" and personality to websites and apps.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "devcontainer-setup",
"path": "skills/devcontainer-setup",
@@ -6509,6 +6549,16 @@
"source": "community",
"date_added": "2026-02-27"
},
{
"id": "iconsax-library",
"path": "skills/iconsax-library",
"category": "uncategorized",
"name": "iconsax-library",
"description": "Extensive icon library and AI-driven icon generation skill for premium UI/UX design.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "idor-testing",
"path": "skills/idor-testing",
@@ -7339,6 +7389,26 @@
"source": "community",
"date_added": "2026-02-27"
},
{
"id": "magic-animator",
"path": "skills/magic-animator",
"category": "uncategorized",
"name": "magic-animator",
"description": "AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "magic-ui-generator",
"path": "skills/magic-ui-generator",
"category": "uncategorized",
"name": "magic-ui-generator",
"description": "Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "mailchimp-automation",
"path": "skills/mailchimp-automation",
@@ -10749,6 +10819,16 @@
"source": "unknown",
"date_added": null
},
{
"id": "spline-3d-integration",
"path": "skills/spline-3d-integration",
"category": "uncategorized",
"name": "spline-3d-integration",
"description": "Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "sql-injection-testing",
"path": "skills/sql-injection-testing",
@@ -11789,6 +11869,16 @@
"source": "self",
"date_added": "2026-02-27"
},
{
"id": "unsplash-integration",
"path": "skills/unsplash-integration",
"category": "uncategorized",
"name": "unsplash-integration",
"description": "Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "upgrading-expo",
"path": "skills/upgrading-expo",
@@ -11999,6 +12089,16 @@
"source": "vibeship-spawner-skills (Apache 2.0)",
"date_added": "2026-02-27"
},
{
"id": "vizcom",
"path": "skills/vizcom",
"category": "uncategorized",
"name": "vizcom",
"description": "AI-powered product design tool for transforming sketches into full-fidelity 3D renders.",
"risk": "safe",
"source": "community",
"date_added": "2026-03-07"
},
{
"id": "voice-agents",
"path": "skills/voice-agents",