UI Components
Code-based UI component generation and styling
monorepo-management
by HermeticOrmus
Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up monorepos, optimizing builds, or managing shared dependencies.
architecture-patterns
by romiluz13
"Internal skill. Use cc10x-router for all development tasks."
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.
vueuse-functions
by vueuse
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
ab-test-setup
by manojbajaj95
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.
generic-fullstack-ux-designer
by travisjneuman
Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
sdd-verify
by Gentleman-Programming
Validate that implementation matches specs, design, and tasks. Trigger: When the orchestrator launches you to verify a completed (or partially completed) change.
shipwright
by sailscastshq
Shipwright build system for The Boring JavaScript Stack — Rsbuild-based asset pipeline replacing Grunt, with framework plugins for React/Vue/Svelte, Tailwind CSS, SSR support, and dev server with HMR. Use this skill when configuring builds, managing assets, or debugging the development server.
inertia
by sailscastshq
Inertia.js server-side rendering, redirects, shared data, forms, validation, and client-side patterns for The Boring JavaScript Stack. Use this skill when building pages, handling form submissions, managing redirects, sharing data, or working with any Inertia.js feature in a Sails.js application.
realtime
by sailscastshq
WebSocket and realtime communication with sails-hook-sockets for Sails.js applications. Use this skill when building chat, notifications, live updates, presence tracking, or any feature that requires persistent bidirectional communication between server and client.
durable-ui
by sailscastshq
Durable UI patterns for modern web development — persisting client-side state across page loads, browser sessions, and shareable URLs. Use this skill when implementing localStorage persistence, URL query parameter state, form draft auto-save, multi-step wizard persistence, click-outside dismissal, modal/dialog backdrop patterns, or any client-side state and interaction pattern that should be resilient and well-behaved. Works with React, Vue, and Svelte.
nielsen-heuristics-audit
by mastepanoski
Evaluate UX/UI using Jakob Nielsen's 10 usability heuristics. Comprehensive audit of visibility, control, consistency, error prevention, recognition, flexibility, aesthetics, error recovery, and documentation.
modern-css
by paulirish
Specialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.
neon-js
by neondatabase
Sets up the full Neon JS SDK with unified auth and PostgREST-style database queries. Configures auth client, data client, and type generation. Use when building apps that need both authentication and database access in one SDK.
course-material-creator
by travisjneuman
Create custom educational materials including syllabi, lesson plans, assessments, reading lists, and learning objectives. Use when building course curricula, training programs, workshops, or educational content.
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.
canvas-design
by einverne
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
nextjs
by einverne
Guide for implementing Next.js - a React framework for production with server-side rendering, static generation, and modern web features. Use when building Next.js applications, implementing App Router, working with server components, data fetching, routing, or optimizing performance.
react-component-generator
by einverne
生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用
remix-icon
by einverne
Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Use when adding icons to applications, building UI components, or designing interfaces. Supports webfonts, SVG, React, Vue, and direct integration.
shadcn-ui
by einverne
Guide for implementing shadcn/ui - a collection of beautifully-designed, accessible UI components built with Radix UI and Tailwind CSS. Use when building user interfaces, adding UI components, or implementing design systems in React-based applications.
canvas-design
by Kilo-Org
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
protein-design-workflow
by adaptyvbio
End-to-end guidance for protein design pipelines. Use this skill when: (1) Starting a new protein design project, (2) Need step-by-step workflow guidance, (3) Understanding the full design pipeline, (4) Planning compute resources and timelines, (5) Integrating multiple design tools. For tool selection, use binder-design. For QC thresholds, use protein-qc.
shaping
by rjs
Use this methodology when collaboratively shaping a solution with the user - iterating on problem definition (requirements) and solution options (shapes).