UI Components skills

Accessibility

microsoft

Enhance VS Code UI with essential accessibility features.

Design System Starter

davila7

Build scalable and accessible design systems efficiently.

Chakra UI Builder

chakra-ui

Effortlessly create responsive UIs with Chakra UI v3.

OmniStudio FlexCard Generate

forcedotcom

Streamline FlexCard creation and validation for Salesforce.

COSS UI

cosscom

Streamline your UI development with COSS components.

daisyUI

saadeghi

Essential UI components for Tailwind CSS.

Shadcn Svelte Components

vercel-labs

Pre-built components for Svelte apps using Tailwind CSS.

Solid JSON Renderer

vercel-labs

Render JSON specs into Solid component trees with reactivity.

Core Components

sickn33

A design system for consistent UI development.

Shadcn UI for Flutter

nank1ro

Build customizable Flutter UIs with accessible components.

Mesh Gradient Dark Blue Clean

mengto

Create a premium dark-blue mesh gradient design system.

Compose Multiplatform Expert

vitorpamplona

Streamline UI component sharing across platforms.

S

Shadcn Component Manager

bklit

Efficiently manage shadcn components and UI projects.

React Native & Expo Guide

minimax-ai

Comprehensive guide for React Native and Expo development.

COSS UI Particles Index

cosscom

Easily find and implement UI component patterns.

Implementing MCP UI Apps

posthog

Create interactive visualizations for MCP tools.

Building React + Quill Canvases

posthog

Create PostHog canvases with React and Quill components.

Storybook Stories

posthog

Create and manage Storybook stories for PostHog UI components.

Design System

anthropics

Audit, document, and extend your design system efficiently.

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Build Remotion videos with remocn — copy-paste animation components and timeline-driven UI primitives from a shadcn registry. Use when composing a video or scene in a Remotion project, adding a single animation, transition, background, or UI-block sim, or reaching for a video-ready UI primitive (button, dialog, command menu). Activate for polished Remotion video work even when remocn isn't named.

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.

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.