UI 组件
基于代码的 UI 组件生成与样式实现
3d-web-experience
sickn33
Expert in building 3D experiences for the web - Three.js, React
storybook
langfuse
Use when writing or reviewing Storybook stories (.stories.tsx) for React components.
frontend-large-feature-architecture
langfuse
Architect large or state-heavy Langfuse frontend features. Use for virtualized lists, large tables, controllers, Zustand stores, row selection, high-frequency state, rendering performance, or before adding useEffect, useMemo, useCallback, or form defaults derived from loaded data.
refactor-react-effects
langfuse
Refactor avoidable React useEffect usage in Langfuse frontend code. Use when adding, reviewing, or removing effects; initializing forms or local UI state from query data; synchronizing client and server state; moving mutations or async workflows out of components; cleaning every effect from a frontend submodule; or reviewing whether an effect has a valid external-system owner.
vercel-react-best-practices
langfuse
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
react-component-guidelines
langfuse
Guidelines for writing React components. Use this when creating a new react component.
vercel-composition-patterns
langfuse
React composition patterns that scale. Use when refactoring components with
react-component-cleaner
langfuse
Use this skill to clean up a React component. Only use this skill when instructed to do so by the user.
flutter-expert
Jeffallan
Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
opentui
cline
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
scout-ui-testing
elastic
Use when creating, updating, debugging, or reviewing Scout UI tests in Kibana (Playwright + Scout fixtures), including page objects, browser authentication, parallel UI tests (spaceTest/scoutSpace), a11y checks, and flake control.
iwsdk-ui-panel
Develop and iterate on IWSDK UI panels efficiently. Use when working on PanelUI components, debugging UI layout, or improving UI design in IWSDK applications.
opik-frontend
comet-ml
React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.
diagram-generation
comet-ml
Generate self-contained HTML architecture diagrams. Use when creating visual diagrams for PRs, task plans, or architectural explanations.
artifacts-builder
davepoon
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
mastra-frontend
mastra-ai
How to build Mastra frontend interfaces with the @mastra/playground-ui design system. This skill should be used when creating or modifying any application UI — pages, components, styling, or tokens — in this repo or in an external consumer of the design system. The docs site has its own styling and is out of scope.
tailwind-v4
mastra-ai
Tailwind CSS v4 usage guide and v3-to-v4 differences. This skill should be used when writing, reviewing, or refactoring any Tailwind CSS code in this repo. Triggers on tasks involving Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax.
how-to-write-component
langgenius
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.
hash
hashintel
🚀 The open-source, multi-tenant platform for self-building knowledge graphs and simulation
hash
hashintel
🚀 The open-source, multi-tenant platform for self-building knowledge graphs and simulation
cmux-custom-sidebar
manaflow-ai
"Build a custom cmux sidebar from a plain-language request. Use when the user asks for a custom sidebar, a sidebar that shows their workspaces/tabs/PRs/clock, a vibe-coded sidebar, or anything involving files in ~/.config/cmux/sidebars/. Covers authoring the interpreted SwiftUI-style file, enabling the beta flag, selecting it, and iterating with hot reload."
fullstack-developer
Shubhamsaboo
Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development.
browser-pair
langwatch
"Collaborative headed browser session for UI work. Launch Playwright Chromium visible to the user, handle auth, then interactively drive the browser while the user watches and gives real-time visual feedback. Edit code and refresh to verify fixes live. Use when the user says 'browser pair', 'paired browser', 'let's look at this together', 'open chromium', or wants to iterate on UI with live visual feedback."