component-catalog
How to access metadata about Vivid components. Use to list available components or query their API.
fylgja-css
Guidance on using the Fylgja CSS library, its class-less base, design tokens, dynamic utilities, and native HTML components. Trigger when the user wants to use Fylgja CSS for styling.
shadcn-vue-admin
Build and maintain the shadcn-vue-admin Vue 3 + Vite + TypeScript admin dashboard with shadcn-vue, Tailwind, Pinia, Vue Router, i18n, and TanStack Query. Use for UI/layout changes, page additions, routing updates, theme/auth work, and component integration in this repo.
KtUI Components
Use this skill when working with [KtUI](https://ktui.io)âfree Tailwind UI components by Keenthemes. It ensures correct package usage, initialization, and reference to official docs.
Shadcn Admin Kit Development Guide
Shadcn Admin Kit is a component library for building admin/CRUD applications using React, TypeScript, and shadcn/ui. It provides 98+ pre-built components on top of **ra-core** (from react-admin), combining react-admin's proven data layer with modern shadcn/ui components styled via Tailwind CSS. Befo
npm-library-setup
Comprehensive guidance on setting up npm libraries with package.json, with a preference for ES Modules (ESM). Use when setting up npm packages, configuring ESM, TypeScript packages, or React component libraries.
arrow-js
Use when working on Arrow apps, templates, reactivity, components, SSR, hydration, routing, or Vite-based Arrow projects.
analyze-power-nets
Analyzes KiCad PCB files to identify power nets by looking up component datasheets via AI. Use when you need to determine which nets are power/ground nets and what track widths to use, especially when KiCad pintype annotations are missing or unreliable.
apple-crash-symbolication
Symbolicate .NET runtime frames in Apple platform .ips crash logs (iOS, tvOS, Mac Catalyst, macOS). Extracts UUIDs and addresses from the native backtrace, locates dSYM debug symbols, and runs atos to produce function names with source file and line numbers. Automatically downloads .dwarf symbols from the Microsoft symbol server using Mach-O UUIDs. USE FOR triaging a .NET MAUI or Mono app crash from an .ips file on any Apple platform, resolving native backtrace frames in libcoreclr or libmonosgen-2.0 to .NET runtime source code, retrieving .ips crash logs from a connected iOS device or iPhone, or investigating EXC_CRASH, EXC_BAD_ACCESS, SIGABRT, or SIGSEGV originating from the .NET runtime. DO NOT USE FOR pure Swift/Objective-C crashes with no .NET components, or Android tombstone files. INVOKES Symbolicate-Crash.ps1 script, atos, dwarfdump, idevicecrashreport.
Io.Github.ConanMcN/Fragments Mcp
Design system MCP with 9 tools for component discovery, rendering, and a11y auditing
react-native-testing
Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React 18, sync render) and v14 (React 19+, async render). Triggers on: test files for React Native components, RNTL imports, mentions of "testing library", "write tests", "component tests", or "RNTL".
devup-ui
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time. TRIGGER WHEN: - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.) - Using styling APIs: css(), globalCss(), keyframes() - Configuring devup.json theme (colors, typography, extends) - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun) - Debugging "Cannot run on the runtime" errors - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.) - Using polymorphic `as` prop or `selectors` prop - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
smoothui-component-craft
Create, improve, fix, or review SmoothUI components with production-quality animations, accessibility, and performance. Orchestrates interface-craft, web-design-guidelines, rams, and vercel-react-best-practices skills for high-quality output. Use when the user wants to build a new component, add a variant, improve an existing component, fix a component bug, or review component quality in the SmoothUI project. Triggers on "create component", "build component", "new component", "add component", "improve component", "fix component", "review component", "add variant", "refactor component", or any component work in the smoothui monorepo.
Io.Github.MusaddiqueHussainLabs/Mhlabs Mcp Tools
An MCP server that provides text preprocessing, NLP components, and document analysis
dryui
Use when building UIs with DryUI (@dryui/ui) Svelte 5 components. Teaches correct patterns for compound components, theming, forms, and accessibility. Use the CLI as the default entry point; MCP mirrors the same workflow when available.
ui-dev
This skill MUST be used whenever the task involves UI development, renderer code changes, adding or modifying components, creating modals or dialogs, working with CSS styles, building new UI features, or touching any file in src/renderer/. Use this skill when the user asks to "add a button", "create a modal", "add a dropdown", "update the sidebar", "style a component", "add a new UI feature", or any renderer/frontend work.
robot-components
Add features to the Node Editor Canvas - visual effects, interactions, physics, keyboard shortcuts
chart-builder
Use this skill when creating data visualizations, selecting the right chart type, or generating chart code. Trigger phrases: 'build a chart', 'visualize this data', 'create a graph', 'plot these numbers', 'which chart should I use for'. Not for building interactive dashboards, designing UI components, or creating infographics with design tools like Figma.
bunli
Build type-safe CLIs with Bun. Use when: (1) Creating a new CLI application with Bun, (2) Adding commands with defineCommand/option(), (3) Building a plugin system, (4) Using prompt/spinner APIs for interactive CLIs, (5) Building TUI components, (6) Publishing CLI to npm. For advanced TUI (custom components, animations, full layout control), use the 'opentui' skill. Covers: defineCommand, option() APIs, plugin architecture, bunli CLI commands (dev/build/generate/test/release/init/doctor), create-bunli scaffolding, and utilities.
lazyllm-skill
LazyLLM framework for building multi-agent AI applications. Use when task mentioned LazyLLM or AI program for: (1) Flow orchestration - linear, branching, parallel, loop workflows for complex data pipelines, (2) Model fine-tuning and acceleration - finetuning LLMs with LLaMA-Factory/Alpaca-LoRA/Collie and acceleration with vLLM/LMDeploy/LightLLM. Includes comprehensive code examples for all components, (3) RAG systems - knowledge-based QA with document retrieval, vectorization, and generation, (4) Agent development - single/multi-agent systems with tools, memory, planning, and web interfaces.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
implement-figma-design
Implement a UI component from a Figma design by iterating with visual diff feedback. Use when the user provides a Figma design reference and asks you to build or match it in code.
flutter-ai-ui-skill
A master-level Flutter UI/UX design skill that equips AI coding assistants with curated design intelligence, colour palettes, typography pairings, animation patterns, component blueprints and actionable checklists for building beautiful, accessible, production-ready Flutter applications. Covers Material 3, Cupertino, adaptive layouts, animations, theming, state management integration, accessibility and performance optimization.
Porting Components from bslib to py-shiny
This guide explains how to port new UI components from the R bslib package to py-shiny. It assumes you're an experienced developer familiar with Python, R, and JavaScript/TypeScript, but may be new to the specifics of these repositories.
sapling-island
Guide for using the <sapling-island> web component to implement selective hydration and islands architecture. Use this skill when asked to use Sapling for an interactive section, contact form, or to add animations triggered by visibility or other loading strategies using sapling-island.
lit-migration
This skill should be used when the user asks to "migrate component to lit", "convert to lit", "lit migration", "migrate to litElement", "convert component to Lit", or discusses migrating Tyler Forge components from the legacy component/core/adapter/template architecture to Lit-based components.
Flowbite Mcp
MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS
capri
Capri static site generator with island architecture. Use when creating components, pages, configuring hydration, fetching data, or working with this Capri project.
Io.Github.Maverick7/Glue Code Generator
Maps API JSON to Vue/React components with Zod schemas and live UI previews
bom
BOM (Bill of Materials) management for electronics projects â the primary orchestrator skill that coordinates DigiKey, Mouser, LCSC, element14, JLCPCB, PCBWay, and KiCad skills into a unified workflow. Create, update, and maintain BOMs with part numbers, costs, quantities stored as KiCad symbol properties. ALWAYS trigger this skill for any task involving component sourcing, pricing, ordering, distributor searches, BOM export, or fabrication preparation â even if the user names a specific distributor or fab house (e.g. "search DigiKey for...", "generate JLCPCB BOM", "order from Mouser"). This skill decides which distributor/fab skills to invoke and in what order. Also trigger on phrases like "what parts do I need", "order components", "how much will this cost", "export for JLCPCB", "find parts for this board", "cost estimate", "compare pricing", or "check stock".
gesture-handler-3-migration
Migrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3.
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.
Io.Github.UI5/Webcomponents Mcp Server
MCP server for UI5 Web Components development assistance
gdsfactory Component Designer Skill
This skill lets an LLM agent **generate**, **visualize**, and **iteratively modify** photonic-IC components using the [gdsfactory](https://github.com/gdsfactory/gdsfactory) Python library.
backpack-code-review-checklist
Comprehensive code review checklist for Backpack design system components. Use when: (1) Reviewing PRs for new or modified Backpack components, (2) Validating component compliance with Constitution and design system rules, (3) Checking if component follows Backpack conventions before merge, (4) Identifying violations in API design, token usage, accessibility, or documentation. Covers Constitution principles (I-XIII), decisions/ guidelines, API encapsulation rules, private token restrictions, design approval workflow, icon alignment helpers, hover mixin usage, token semantic correctness, and snapshot currency. Essential for maintaining Backpack quality standards and catching non-obvious violations like className props in new components, wrong icon alignment wrapper, raw :hover instead of bpk-hover mixin, or cross-component private token usage.
fireact-builder
Helps customize and extend Fireact SaaS apps after installation. Auto-detects Fireact projects by checking for @fireact.dev/app in package.json. Invoke when the user wants to add features, pages, custom components, navigation, branding, Cloud Functions, or i18n.
review-react
React code review guidelines covering Rules of React, re-render optimization, rendering performance, and advanced patterns. Activates when writing, reviewing, or refactoring React components, hooks, or state management code.
Build eBPF for Windows
Build the eBPF for Windows solution or individual components using MSBuild.
shadcn-svelte â Component-Aware Svelte UI Assistant
Use the right shadcn-svelte components when building UI in SvelteKit projects. This skill detects your project setup, shows what's available, and gives you access to full component documentation.
create-component
Create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation. Use when the user wants to create a new component or add a component to the design system.
impact-analysis
Use when you need to analyze cascade impact of changing a component.
gradio
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
context-analysis
Analyze plain text documents to understand their semantic structure and token distribution. Use when asked to analyze context, visualize token usage, segment text, identify components, create waffle charts, or compare multiple documents.
8-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
component-gen
Generate React components
react-developer
React and OpenTUI best practices for building clean, maintainable, performant TUI applications using Feature-Sliced Design architecture. ALWAYS use when working with React/OpenTUI/TUI: (1) Creating or modifying ANY React/OpenTUI components (.tsx files), (2) Organizing code into FSD layers (app/pages/widgets/features/entities/shared), (3) Writing custom hooks or React components, (4) Managing state with Jotai or TanStack Query, (5) Building CLI/TUI/terminal interfaces with OpenTUI, (6) Creating page components, widget components, feature components, or UI components, (7) Structuring React applications with FSD architecture, (8) Any React/OpenTUI development task requiring architectural or code quality guidance. Provides component patterns, hooks best practices, state management strategies, performance optimization, FSD layer organization, and OpenTUI-specific TUI patterns. Auto-triggers for all .tsx files and FSD structure work.
design-workflow
Spec-first workflow for designers who use Claude Code to design in Figma. Covers components and full interfaces/screens. Use when a designer wants to: (1) write or review a component or screen spec, (2) generate a Figma design via MCP, (3) review and iterate on a design, (4) close or abandon work. Triggers: "spec", "design", "screen", "review", "done", "drop", "learn", "sync", "status", "setup", "workflow", "what's next", "new component", "new screen", or any design request.
codebase-architecture-analysis
Analyze a GitHub codebase to create comprehensive architecture documentation including ASCII diagrams, component relationships, data flow, hosting infrastructure, and file structure assessment.
android-design-guidelines
Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.
circuit-ui
Use this skill when working with the Circuit UI design system. It provides generated inventories of design tokens plus exported Circuit UI components and hooks from the source code, so you can answer usage and availability questions with current data.