UI Components
Code-based UI component generation and styling
Uses and selection guide
Use these skills to build and refine interfaces. Compare framework support, keyboard interaction and responsive behavior; test generated components with real content at both narrow and wide viewport sizes.
vue-options-api-best-practices
by vuejs-ai
"Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only."
streamdown
by vercel
Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues.
changelog-video
by heygen-com
Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.
vue-pinia-best-practices
by vuejs-ai
"Pinia stores, state management patterns, store setup, and reactivity with stores."
ui-core-components
by open-metadata
Use when writing or editing React/TSX in openmetadata-ui/src/main/resources/ui/src/ or openmetadata-ui-core-components/, before reaching for a raw + Tailwind utility classes to build layout (flex rows/columns, grids, bordered panels with header/body/footer, separators), and before writing any Tailwind color class (tw:bg-, tw:text-, tw:border-*) or hex color value. Applies whenever the change adds or restructures a layout container or touches color/dark-mode styling, not to every div.
build-mcp-app
by anthropics
This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the context of MCP. Use AFTER the build-mcp-server skill has settled the deployment model, or when the user already knows they want UI widgets.
woocommerce-copy-guidelines
by woocommerce
Guidelines for UI text and copy in WooCommerce. Use when writing user-facing text, labels, buttons, or messages.
design-guide
by paperclipai
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).
pr-report
by paperclipai
Produce a maintainer-grade PR or contribution report as HTML or Markdown. Use when asked to deeply review a PR, explain a design, compare systems, or prepare a merge recommendation.
component-fixtures
by microsoft
Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls.
integrated-browser
by microsoft
Use this when working on the VS Code integrated browser ("browserView") to understand its architecture and mental model. Covers the embedded Chromium browser, its editor tab, navigation, overlay/layout, sessions, and agent browser tools under src/vs/platform/browserView and src/vs/workbench/contrib/browserView.
project-setup-info-local
by microsoft
'Comprehensive setup steps to help the user create complete project structures in a VS Code workspace; this tool is designed for full project initialization and scaffolding, not for creating individual files. When to use this tool: user wants to create a new complete project from scratch; setting up entire project frameworks (TypeScript projects, React apps, Node.js servers, etc.); initializing Model Context Protocol (MCP) servers with full structure; creating VS Code extensions with proper scaffolding; setting up Next.js, Vite, or other framework-based projects; user asks for "new project", "create a workspace", "set up a [framework] project"; need to establish a complete development environment with dependencies, config files, and folder structure. When NOT to use this tool: creating single files or small code snippets; adding individual files to existing projects; making modifications to existing codebases; user asks to "create a file" or "add a component"; simple code examples or demonstrations; debugging or fixing existing code. This tool provides complete project setup including: folder structure creation; package.json and dependency management; configuration files (tsconfig, eslint, etc.); initial boilerplate code; development environment setup; build and run instructions. Use other file creation tools for individual files within existing projects.'
interactive-dashboard-builder
by anthropics
Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.
redesign-existing-projects
by Leonxlnx
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
gpt-taste
by Leonxlnx
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
design-taste-frontend-v1
by Leonxlnx
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
react-hook-form
by supabase
Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions,
studio-queries
by supabase
React Query conventions for data fetching in Supabase Studio. Use when
vercel-composition-patterns
by supabase
React composition patterns that scale. Use when refactoring components with
studio-mock-api-tests
by supabase
Component tests for Supabase Studio that mock API requests at the
studio-error-handling
by supabase
Error display and troubleshooting pattern for Supabase Studio. Use when
improve-codebase-architecture
by mattpocock
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
implementing-jsc-classes-rust
by oven-sh
Creates JavaScript classes using Bun's Rust bindings generator (.classes.ts). Use when implementing new JS APIs in Rust with JSC integration, prototypes, or constructors.
marko-best-practices
by marko-js
Apply Marko syntax and best practices when editing .marko files and building Marko components.