- Home
- /
- Categories
- /
- UI Components
UI Components
Code-based UI component generation and styling
expo-ui
by CaiZongyuan
This skill should be used when users need to work with Expo UI (@expo/ui) for integrating SwiftUI components into React Native applications. It provides comprehensive guidance on installation, Host component, SwiftUI primitives, layouts, modifiers, native tabs navigation, and v10 preview features.
vue-doctor
by Arjun-Ingole
Diagnose and fix Vue/Nuxt codebase health issues. Use when reviewing Vue code, fixing performance problems, auditing security, or improving code quality.
codex-skills
by velcrafting
Customizable files for deterministic hierarchy and governance of agents via various: SKILL.md, AGENTS.md, template files, and scripts
react-router
by pluginagentmarketplace
Master React Router v6 for production routing with error boundaries, lazy loading, and navigation guards
ui-engineering
by yzfly
Expert system for creating high-quality, brand-aligned user interfaces. Use this skill when asked to design websites, create components, or implement specific visual styles. It contains specifications for major tech companies, design trends, and specific site types like blogs or presentations.
visualization
by pluginagentmarketplace
Data visualization design, tools, and storytelling for impactful analytics presentations
photographer-vonunwerth
by bluewaves-creations
Generate images in Ellen von Unwerth's playful vintage style. Use when users ask for von Unwerth style, playful sensuality, vintage film noir, whimsical feminine photography, retro glamour, narrative storytelling.
k8s-secrets
by nmime
Vault + External Secrets Operator for secrets management.
css-architecture
by pluginagentmarketplace
Implement scalable CSS architecture patterns - BEM, SMACSS, ITCSS, design tokens
Frontend Responsive Design Standards
by sarfraznawaz2005
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
nextjs-structure
by ahmed6ww
Architect scalable Next.js applications using Feature-Sliced Design and Server Component patterns.
design-consistency-auditor
by fefogarcia
Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications
advisor-collaboration
by Lynricsy
Advisor expert consultation for architecture design, second opinions, and code review. Use when: user requests Advisor, need alternative perspective, or get independent review. Advisor 是与 Claude 同等级别的顶级 AI 专家,按需调用。 注意:前端/UI 任务应使用专门的 Frontend 代理!
gs-nextjs-web-client
by gilbertopsantosjr
Guide for building Next.js 15+ React 19+ frontend components with Clean Architecture. Components receive DTOs from server actions, never Entities directly. Use when creating UI components, pages, layouts, forms, or client-side interactivity.
reduce-optional-params
by TianyiLi
Reduces optional parameters in functions and components for cleaner APIs. Use when designing or refactoring functions with many optional params, configurable components, or when the user mentions optional params, function signatures, or API simplification.
strategy
by teslasoft-de
Develop UX strategy, metrics, and organizational alignment. Use for UX vision, roadmaps, maturity assessment, DesignOps, HEART/CASTLE metrics, north star metric, experience canvas, UX OKRs, UX ROI calculation, stakeholder alignment, agentic UX, and delegative UI patterns.
convex-helpers
by Imfa-Solutions
Complete reference for the convex-helpers NPM library — utility functions, custom function builders, relationship helpers, row-level security, Zod validation, validators, CRUD generation, triggers, query streams, pagination, filtering, CORS, Hono HTTP endpoints, session tracking, query caching, and React hooks for Convex apps. Use when writing or reviewing Convex server/client code that uses or should use convex-helpers utilities. Triggers on: import from "convex-helpers", customQuery, customMutation, customAction, customCtx, asyncMap, pruneNull, nullThrows, getOneFrom, getManyFrom, getManyVia, wrapDatabaseReader, wrapDatabaseWriter, zCustomQuery, zid, filter(), stream(), mergedStream, getPage, paginator, Triggers, crud(), corsRouter, HttpRouterWithHono, SessionProvider, useSessionQuery, ConvexQueryCacheProvider, literals, nullable, partial, brandedString, typedV, makeUseQueryWithStatus, or any convex-helpers/* import path.
ux-design-tips
by dereknex
Use when asked for UX strategy or behavior guidance on landing pages, onboarding, pricing, CTAs, social proof, personalization, login, permissions, or brand memorability.
busirocket-core-conventions
by BusiRocket
Applies general engineering conventions optimized for AI agents. Use when
architecture-event-sourcing
by baotoq
"Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual consistency patterns. Use PROACTIVELY for event-sourced systems, audit trails, or temporal queries."
architecture
by terraphim
System architecture design for Rust/WebAssembly projects. Creates ADRs, designs APIs, plans module structures, and documents architectural decisions. Never writes implementation code - focuses purely on design and documentation.
react-best-practices
by tylergibbs1
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.
designing-architecture
by Git-Fg
"Applies system architecture and design frameworks for software systems. Provides discovery protocols, system design workflows, architecture decision records (ADRs), and quality evaluation criteria. PROACTIVELY Use when designing new systems, analyzing existing architecture, or making architectural decisions. Do not use for project plan state management, task execution, or phase coordination → see managing-plans skill."
use-dom
by gigs-slc
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.