UI Components
Code-based UI component generation and styling
design
by whawkinsiv
"Use this skill when the user needs to create a design system, establish UI patterns, improve visual hierarchy, refine interactions, or ensure visual consistency across their SaaS app. Covers design system management (CREATE/MODIFY/WORK WITHIN modes), screen-by-screen UI guidance, component selection, and spacing rules."
landing-page
by whawkinsiv
"Use this skill when the user needs to create or improve a landing page, write above-the-fold copy, structure a sales page, or increase landing page conversion rates. Covers page structure, headline formulas, buyer psychology, and conversion elements."
pricing
by whawkinsiv
"Use this skill when the user needs to set pricing, design pricing tiers, choose value metrics, or test price changes. Covers pricing psychology, tier design, anchoring, self-selection mechanisms, and monetization strategy for SaaS."
brand
by whawkinsiv
"Use this skill when the user needs to create a brand identity, choose a color palette, design a logo, establish design tokens, or build visual consistency for their SaaS product. Covers color systems, typography, logo design, and brand recognition."
accessibility
by whawkinsiv
"Use this skill when the user needs to make their app accessible, comply with WCAG guidelines, implement ARIA patterns, support screen readers, or ensure keyboard navigation works. Covers WCAG 2.2, semantic HTML, assistive technology testing, and inclusive design."
build
by whawkinsiv
"Use this skill when the user needs to build features with AI coding tools, choose between Claude Code, Lovable, Replit, or Cursor, write effective prompts for code generation, or iterate on AI-generated code. Covers tool selection, prompting strategies, and development workflows for non-technical founders."
onboarding
by whawkinsiv
"Use this skill when the user needs to design onboarding flows, define their aha moment, improve activation rates, or reduce early churn. Covers activation metrics, interactive onboarding, personalization, progressive disclosure, and first-run UX."
nuxt
by nuxt-content
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns.
nuxt-ui
by nuxt-content
Use when building styled UI or working with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
writing-react-native-storybook-stories
by storybookjs
Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.
react-native-best-practices
by storybookjs
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
setup-react-native-storybook
by storybookjs
Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.
mobile-components
by dadbodgeoff
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.
edgeone-pages-deploy
by NeverSight
Deploys static HTML to a public URL instantly with no authentication required. Use when asked to "host this", "deploy this site", "get a public link", "share this HTML", "quick deploy", "publish this page", or any request to make an HTML file publicly accessible via URL. Supports self-contained HTML files with inline CSS/JS.
frontend-design
by buildermethods
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
typescript-testing
by shinpr
Frontend testing rules with Vitest, React Testing Library, and MSW. Includes coverage requirements, test design principles, and quality criteria. Use when writing frontend tests or reviewing test quality.
vuetify0
by vuetifyjs
Build with @vuetify/v0 headless composables and components for Vue 3. Use when creating selection state (single, multi, grouped, stepped), form validation, tab/dialog/popover UI, provide/inject context, registries, virtual scrolling, pagination, keyboard shortcuts, resize observers, theming, breakpoints, or SSR-safe browser detection. Triggers on v0, vuetify0, headless components, or WAI-ARIA patterns.
frontend-ai-guide
by shinpr
Frontend-specific technical decision criteria, anti-patterns, debugging techniques, and quality check workflow. Use when making frontend technical decisions or performing quality assurance.
integration-e2e-testing
by shinpr
Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria. Use when designing integration tests, E2E tests, or reviewing test quality.
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."
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."
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."
vue-test-utils-skilld
by harlan-zw
"ALWAYS use when writing code importing \"@vue/test-utils\". Consult for debugging, best practices, or modifying @vue/test-utils, vue/test-utils, vue test-utils, vue test utils, test-utils, test utils."