UI Components
Code-based UI component generation and styling
generate-snapshot-tests
by getsentry
Generate snapshot test files for Sentry frontend React components. Use when asked to "generate snapshot tests", "add snapshot tests", "create visual snapshots", "write snapshot tests", "add visual regression tests", or "snapshot this component". Accepts an optional component path or name via $ARGUMENTS.
studio-error-handling
by supabase
Error display and troubleshooting pattern for Supabase Studio. Use when
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
studio-mock-api-tests
by supabase
Component tests for Supabase Studio that mock API requests at the
author-ui-components
by remix-run
Build idiomatic packages/ui components for Remix. Use when authoring or revising first-party UI style mixins, headless primitives, styled component wrappers, or shared component utilities under packages/ui/src.
remix
by remix-run
Build and review Remix 3 applications using the remix npm package and subpath imports. Use when working on Remix app structure, routes, controllers, middleware, validation, data access, auth, sessions, file uploads, server setup, UI components, hydration, HMR, navigation, or tests.
enzyme-to-rtl
by elastic
Migrate Enzyme tests to React Testing Library (RTL). Use when converting shallow/mount enzyme tests to RTL render, replacing enzyme selectors with RTL queries, updating snapshot tests, or when the user mentions enzyme migration, RTL migration, or react-testing-library.
scout-ui-testing
by 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.
weapp-vite-best-practices
by weapp-vite
面向采用 weapp-vite 项目布局仓库或已安装 weapp-vite 依赖项目的工程化实践手册，覆盖 vite.config.ts 的 weapp 配置、自动路由、routeRules/layout、buildScope、自动导入组件、分包、npm、六平台单目标构建、受管 TypeScript、HMR、sourcemap、prepare、MCP、Web runtime、lib mode、worker、AI skills，以及与 weapp-ide-cli 的命令治理边界。
react-effects
by coder
Guidelines for when to use (and avoid) useEffect in React components
woocommerce-copy-guidelines
by woocommerce
Guidelines for UI text and copy in WooCommerce. Use when writing user-facing text, labels, buttons, or messages.
docs-sandpack
by reactjs
Use when adding interactive code examples to React docs.
docs-components
by reactjs
Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions.
adev-writing-guide
by angular
Comprehensive writing guide for Angular documentation (adev). Covers Google Technical Writing standards, Angular-specific markdown extensions, code blocks, and components. You MUST use this skill any time you plan to create, edit, or review documentation files in adev/ or adev/src/content.
angular-new-app
by angular
Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.
onchainkit
by BankrBot
Build onchain applications with React components and TypeScript utilities from Coinbase's OnchainKit. Use when users want to create crypto wallets, swap tokens, mint NFTs, build payments, display blockchain identities, or develop any onchain app functionality. Supports wallet connection, transaction building, token operations, identity management, and complete onchain app development workflows.
hash
by hashintel
🚀 The open-source, multi-tenant platform for self-building knowledge graphs and simulation
hash
by hashintel
🚀 The open-source, multi-tenant platform for self-building knowledge graphs and simulation
marko-best-practices
by marko-js
Apply Marko syntax and best practices when editing .marko files and building Marko components.
dust-writing-react-effects
by dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
compose-state-deferred-reads
by vitorpamplona
Use when Jetpack Compose code reads scroll, animation, gesture, or other frame-rate State in composition, passes changing values across composable boundaries, or uses value-form layout/draw modifiers. Technique-layer skill — complements the codebase-specific compose-expert.
compose-state-holder-ui-split
by vitorpamplona
Use when a Jetpack Compose screen-level composable takes a ViewModel/component/controller, collects state or effects, handles navigation/snackbars, or wires callbacks while also rendering layout. Technique-layer skill — complements the codebase-specific compose-expert and feed-patterns.
kotlin-coroutines-structured-concurrency
by vitorpamplona
Use when writing or reviewing Kotlin code that stores CoroutineScope, launches from init/non-suspending APIs, calls runBlocking, or catches broad exceptions around suspend calls. Technique-layer skill — complements the codebase-specific kotlin-coroutines.