UI Components
Code-based UI component generation and styling
frappe-router
by lubusIN
Route to the appropriate Frappe skill based on task type. Use as the entry point when working on Frappe projects to determine which specialized skill to apply.
guide-loader
by camoa
Use when needing specialized guide content - loads from user's configured path or fetches from online dev-guides based on task keywords
appkit-accessibility-auditor
by rgmez
Audit macOS AppKit interfaces for accessibility, focusing on VoiceOver, keyboard navigation, and semantics
frontend-patterns
by x-cmd
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
ux-audit-rethink
by mastepanoski
Comprehensive UX audit using IxDF's 7 factors, 5 usability characteristics, and 5 interaction dimensions. Holistic evaluation with redesign proposals based on user-centered design principles.
wcag-accessibility-audit
by mastepanoski
Comprehensive web accessibility audit using WCAG 2.1/2.2 guidelines. Evaluate compliance across 4 POUR principles (Perceivable, Operable, Understandable, Robust) with A, AA, AAA conformance levels.
dashboard-builder
by QwenLM
Build full-stack dashboard applications using React/Next.js + shadcn/ui + Tailwind CSS + Recharts + Express with customizable data sources. Use when creating data visualization dashboards, business intelligence interfaces, monitoring systems, KPI displays, analytics platforms, or any project requiring data visualization with modern UI components and dynamic effects.
tanstack-query
by tenequm
Master TanStack Query (React Query) v5 for server state management in React applications. Use when fetching data from APIs, managing server state, caching, handling mutations, streaming AI responses, or integrating with tRPC v11. Triggers on phrases like "react query", "tanstack query", "data fetching", "cache management", "server state", "streamed query", "streaming data", or file patterns like query.ts, Query.tsx, queryClient.ts.
artifacts-builder
by leegonzales
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.
chrome-extension-wxt
by tenequm
Build Chrome extensions using WXT framework with TypeScript, React, Vue, or Svelte. Use when creating browser extensions, developing cross-browser add-ons, or working with Chrome Web Store projects. Triggers on phrases like "chrome extension", "browser extension", "WXT framework", "manifest v3", or file patterns like wxt.config.ts.
tanstack-router
by tenequm
Build type-safe React applications with TanStack Router. Use when implementing file-based or code-based routing, type-safe navigation, search params validation, data loading, code splitting, or route-level error handling. Triggers on "tanstack router", "file-based routing", "type-safe routing", "search params", "route loader", or file patterns like routes/*.tsx, __root.tsx, routeTree.gen.ts.
read-aloud
by leegonzales
Generate a standalone HTML reader with Kokoro TTS audio and word-synced highlighting from any markdown file. Use when user wants to listen to an essay, proofread by ear, or create an audio reader.
slide-builder
by leegonzales
Transform essay-to-speech output into complete presentations with multiple output formats. Use when converting talk tracks to slides, generating presentation decks, or creating video-ready content from spoken word material.
tanstack-start
by tenequm
Build full-stack React applications with TanStack Start. Use when creating SSR/SSG apps, server functions, API routes, middleware, or deploying to Cloudflare/Vercel/Node. Triggers on "tanstack start", "server functions", "createServerFn", "full-stack react", "SSR framework", or file patterns like vite.config.ts with tanstackStart, src/server.ts, *.server.ts.
styling-with-tailwind
by tenequm
Creates UIs using Tailwind CSS utility classes and shadcn/ui patterns. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS.
figma-designer
by zhaono1
Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma MCP server connection.
angular-module-design
by aj-geddes
Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.
tanstack-vue-query-skilld
by harlan-zw
"ALWAYS use when writing code importing \"@tanstack/vue-query\". Consult for debugging, best practices, or modifying @tanstack/vue-query, tanstack/vue-query, tanstack vue-query, tanstack vue query, query."
vueuse-motion-skilld
by harlan-zw
"ALWAYS use when writing code importing \"@vueuse/motion\". Consult for debugging, best practices, or modifying @vueuse/motion, vueuse/motion, vueuse motion, motion."
vue-router-skilld
by harlan-zw
"ALWAYS use when writing code importing \"vue-router\". Consult for debugging, best practices, or modifying vue-router, vue router, router."
formkit-core-skilld
by harlan-zw
"ALWAYS use when writing code importing \"@formkit/core\". Consult for debugging, best practices, or modifying @formkit/core, formkit/core, formkit core, formkit."
motion-v-skilld
by harlan-zw
"ALWAYS use when writing code importing \"motion-v\". Consult for debugging, best practices, or modifying motion-v, motion v, motion-vue, motion vue."
reka-ui-skilld
by harlan-zw
"ALWAYS use when writing code importing \"reka-ui\". Consult for debugging, best practices, or modifying reka-ui, reka ui."
tanstack-ai-vue-skilld
by harlan-zw
"ALWAYS use when writing code importing \"@tanstack/ai-vue\". Consult for debugging, best practices, or modifying @tanstack/ai-vue, tanstack/ai-vue, tanstack ai-vue, tanstack ai vue, ai."