From e00397cb5cb0e9e8ebb085b9c5f320d1fadcd48a Mon Sep 17 00:00:00 2001 From: sck_0 Date: Sat, 7 Mar 2026 10:21:41 +0100 Subject: [PATCH] feat: add Antigravity premium design and AI integration skills (#224) --- CATALOG.md | 18 +- README.md | 10 +- data/bundles.json | 2 + data/catalog.json | 234 +++++++++++++- skills/animejs-animation/SKILL.md | 52 +++ skills/antigravity-design-expert/SKILL.md | 42 +++ skills/daily/SKILL.md | 303 ++++++++++++++++++ skills/design-spells/SKILL.md | 37 +++ skills/iconsax-library/SKILL.md | 39 +++ skills/magic-animator/SKILL.md | 37 +++ skills/magic-ui-generator/SKILL.md | 42 +++ skills/spline-3d-integration/SKILL.md | 80 +++++ .../examples/interactive-scene.tsx | 198 ++++++++++++ .../examples/react-spline-wrapper.tsx | 124 +++++++ .../examples/vanilla-embed.html | 146 +++++++++ .../guides/COMMON_PROBLEMS.md | 262 +++++++++++++++ .../guides/PERFORMANCE.md | 163 ++++++++++ .../guides/REACT_INTEGRATION.md | 212 ++++++++++++ .../guides/VANILLA_INTEGRATION.md | 203 ++++++++++++ .../spline-3d-integration-skill (1).zip | Bin 0 -> 21119 bytes skills/unsplash-integration/SKILL.md | 36 +++ skills/vizcom/SKILL.md | 37 +++ skills_index.json | 100 ++++++ 23 files changed, 2367 insertions(+), 10 deletions(-) create mode 100644 skills/animejs-animation/SKILL.md create mode 100644 skills/antigravity-design-expert/SKILL.md create mode 100644 skills/daily/SKILL.md create mode 100644 skills/design-spells/SKILL.md create mode 100644 skills/iconsax-library/SKILL.md create mode 100644 skills/magic-animator/SKILL.md create mode 100644 skills/magic-ui-generator/SKILL.md create mode 100644 skills/spline-3d-integration/SKILL.md create mode 100644 skills/spline-3d-integration/examples/interactive-scene.tsx create mode 100644 skills/spline-3d-integration/examples/react-spline-wrapper.tsx create mode 100644 skills/spline-3d-integration/examples/vanilla-embed.html create mode 100644 skills/spline-3d-integration/guides/COMMON_PROBLEMS.md create mode 100644 skills/spline-3d-integration/guides/PERFORMANCE.md create mode 100644 skills/spline-3d-integration/guides/REACT_INTEGRATION.md create mode 100644 skills/spline-3d-integration/guides/VANILLA_INTEGRATION.md create mode 100644 skills/spline-3d-integration/spline-3d-integration-skill (1).zip create mode 100644 skills/unsplash-integration/SKILL.md create mode 100644 skills/vizcom/SKILL.md diff --git a/CATALOG.md b/CATALOG.md index 93f0a9aa..663a834c 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -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 | diff --git a/README.md b/README.md index fddc56d8..9756f1ab 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ - -# 🌌 Antigravity Awesome Skills: 1,260+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More + +# 🌌 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). diff --git a/data/bundles.json b/data/bundles.json index f26255ab..8d3606bc 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -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", diff --git a/data/catalog.json b/data/catalog.json index b6bfce72..71e47fef 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -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", diff --git a/skills/animejs-animation/SKILL.md b/skills/animejs-animation/SKILL.md new file mode 100644 index 00000000..6ececf43 --- /dev/null +++ b/skills/animejs-animation/SKILL.md @@ -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. diff --git a/skills/antigravity-design-expert/SKILL.md b/skills/antigravity-design-expert/SKILL.md new file mode 100644 index 00000000..4e12b7c6 --- /dev/null +++ b/skills/antigravity-design-expert/SKILL.md @@ -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. diff --git a/skills/daily/SKILL.md b/skills/daily/SKILL.md new file mode 100644 index 00000000..a3966408 --- /dev/null +++ b/skills/daily/SKILL.md @@ -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 diff --git a/skills/design-spells/SKILL.md b/skills/design-spells/SKILL.md new file mode 100644 index 00000000..f4777cfe --- /dev/null +++ b/skills/design-spells/SKILL.md @@ -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. diff --git a/skills/iconsax-library/SKILL.md b/skills/iconsax-library/SKILL.md new file mode 100644 index 00000000..8b7eae82 --- /dev/null +++ b/skills/iconsax-library/SKILL.md @@ -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. diff --git a/skills/magic-animator/SKILL.md b/skills/magic-animator/SKILL.md new file mode 100644 index 00000000..d4b905cb --- /dev/null +++ b/skills/magic-animator/SKILL.md @@ -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. diff --git a/skills/magic-ui-generator/SKILL.md b/skills/magic-ui-generator/SKILL.md new file mode 100644 index 00000000..86f14e0e --- /dev/null +++ b/skills/magic-ui-generator/SKILL.md @@ -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. diff --git a/skills/spline-3d-integration/SKILL.md b/skills/spline-3d-integration/SKILL.md new file mode 100644 index 00000000..b35f8689 --- /dev/null +++ b/skills/spline-3d-integration/SKILL.md @@ -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 | `` 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. diff --git a/skills/spline-3d-integration/examples/interactive-scene.tsx b/skills/spline-3d-integration/examples/interactive-scene.tsx new file mode 100644 index 00000000..1cf79d01 --- /dev/null +++ b/skills/spline-3d-integration/examples/interactive-scene.tsx @@ -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(); + const [isLoaded, setIsLoaded] = useState(false); + const [lastEvent, setLastEvent] = useState(''); + + // --- 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 ( +
+ + {/* Spline scene */} + + + {/* Control panel — sits on top of the scene */} + {isLoaded && ( +
+ + + + + + + +
+ )} + + {/* Event log */} + {lastEvent && ( +
+ {lastEvent} +
+ )} + + {/* Loading state */} + {!isLoaded && ( +
+ Loading scene... +
+ )} +
+ ); +} + +/* +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 }) +*/ diff --git a/skills/spline-3d-integration/examples/react-spline-wrapper.tsx b/skills/spline-3d-integration/examples/react-spline-wrapper.tsx new file mode 100644 index 00000000..cdaf7331 --- /dev/null +++ b/skills/spline-3d-integration/examples/react-spline-wrapper.tsx @@ -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: +// + +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>(); + + 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 ( +
+ {/* Fallback layer — always rendered underneath */} +
+ + {/* Spline scene — only on capable devices */} + {canLoad && !splineFailed && ( + + + + )} + + {/* Content sits on top of everything */} + {children && ( +
+ {children} +
+ )} +
+ ); +} diff --git a/skills/spline-3d-integration/examples/vanilla-embed.html b/skills/spline-3d-integration/examples/vanilla-embed.html new file mode 100644 index 00000000..e96491cd --- /dev/null +++ b/skills/spline-3d-integration/examples/vanilla-embed.html @@ -0,0 +1,146 @@ + + + + + + + Spline Background + + + + + + + + + + + + +
+ + +
+ + + +
+ + +
+

Your Content Here

+
+ + + + + diff --git a/skills/spline-3d-integration/guides/COMMON_PROBLEMS.md b/skills/spline-3d-integration/guides/COMMON_PROBLEMS.md new file mode 100644 index 00000000..4afe52e1 --- /dev/null +++ b/skills/spline-3d-integration/guides/COMMON_PROBLEMS.md @@ -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 `` 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 ` + + + +
+ + +
+ + +
+ + +
+

Your Content Here

+
+ + + + +``` + +--- + +## 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 `` to start fetching the scene file before scripts run: + +```html + +``` + +See [PERFORMANCE.md](PERFORMANCE.md) for full optimization strategy. +See [COMMON_PROBLEMS.md](COMMON_PROBLEMS.md) for debugging. diff --git a/skills/spline-3d-integration/spline-3d-integration-skill (1).zip b/skills/spline-3d-integration/spline-3d-integration-skill (1).zip new file mode 100644 index 0000000000000000000000000000000000000000..c9cedcfeedfdd86ec966d80269994d966016d460 GIT binary patch literal 21119 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 literal 0 HcmV?d00001 diff --git a/skills/unsplash-integration/SKILL.md b/skills/unsplash-integration/SKILL.md new file mode 100644 index 00000000..992d1580 --- /dev/null +++ b/skills/unsplash-integration/SKILL.md @@ -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. diff --git a/skills/vizcom/SKILL.md b/skills/vizcom/SKILL.md new file mode 100644 index 00000000..f29fcfe4 --- /dev/null +++ b/skills/vizcom/SKILL.md @@ -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. diff --git a/skills_index.json b/skills_index.json index cb6a1ff8..2a86482b 100644 --- a/skills_index.json +++ b/skills_index.json @@ -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",