UI 组件
基于代码的 UI 组件生成与样式实现
用途与选择建议
这类技能用于界面实现与体验改进。比较框架支持、键盘交互和响应式行为；生成组件后，使用真实内容分别检查窄屏与宽屏布局。
vue-options-api-best-practices
vuejs-ai
"Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only."
streamdown
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
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
vuejs-ai
"Pinia stores, state management patterns, store setup, and reactivity with stores."
ui-core-components
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
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
woocommerce
Guidelines for UI text and copy in WooCommerce. Use when writing user-facing text, labels, buttons, or messages.
design-guide
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
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
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
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
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
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
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
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
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
supabase
Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions,
studio-queries
supabase
React Query conventions for data fetching in Supabase Studio. Use when
vercel-composition-patterns
supabase
React composition patterns that scale. Use when refactoring components with
studio-mock-api-tests
supabase
Component tests for Supabase Studio that mock API requests at the
studio-error-handling
supabase
Error display and troubleshooting pattern for Supabase Studio. Use when
improve-codebase-architecture
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
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
marko-js
Apply Marko syntax and best practices when editing .marko files and building Marko components.