Design
UI/UX direction, visual design, and design systems
performance
by thoreinstein
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
epic-ui-guidelines
by rubenpenap
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
rams
by thoreinstein
Run accessibility and visual design review
ux-flow-designer
by ThomasPraun
"Design and document app user flows, screens, and use cases using Mermaid diagrams and HTML wireframes. Use when creating user flow diagrams (flowcharts, state diagrams, sequence diagrams), screen wireframes (HTML), use case documentation, screen maps, or when the user mentions 'flows', 'wireframes', 'user journey', 'screen map', 'navigation flow', 'use cases', 'app flow', 'screen layout', 'flujos', 'pantallas', 'casos de uso'. Bridges Product (PRD) and Visual Design phases. Outputs serve as input for ui-ux-pro-max. Optional Figma export when user explicitly requests it."
frontend-web-dev-expert
by dy9759
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-web-dev-expert
by dy9759
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
js-gpt-image-designer-skill
by imjszhang
面向图像生成与视觉策略的设计师 skill，提供需求澄清、视觉方向制定、prompt 组装、结果评审与 gpt-image-2 执行能力。适用于海报、封面、品牌视觉、社媒图、信息图、图片评审、系列图统一风格等场景。
elite-performance
by RSHVR
Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, or performance budgets.
elite-gsap
by RSHVR
Complete GSAP (GreenSock Animation Platform) reference for elite web animations. Covers ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer, Draggable, timelines, and framework integration. 2026 UPDATE: All GSAP plugins are now 100% FREE (Webflow acquisition). Use when asked about: GSAP, gsap, GreenSock, ScrollTrigger, scroll animations, SplitText, text animations, Flip plugin, layout animations, MorphSVG, DrawSVG, SVG animations, complex animations, animation library, pinned sections, horizontal scroll, parallax effects, or any sophisticated web animation needs.
agency-codex-router-guard
by IvonYuaN
Use when a user is working on a repo, app, website, deck, workflow, marketing asset, or cross-functional project and Codex should do more than just pick the right specialist squad. This skill routes the right specialists, writes or updates .codex/project-profile.md, adds working-style and handoff rules, and activates anti-spinning guardrails or escalation when repeated failures or unsafe edit patterns appear.
elite-css-animations
by RSHVR
CSS-native animation techniques including Scroll-Driven Animations API, View Transitions, @property rule, and visual effects. Use when asked about: CSS animations, scroll-driven animations, CSS scroll timeline, view transitions, page transitions, @property, animating CSS variables, clip-path animations, backdrop-filter, mix-blend-mode, CSS masks, CSS-only animations, no-JavaScript animations, or when GSAP is not needed/wanted. Includes decision guide for CSS vs GSAP.
ui-ux-pro-max
by ThrownLemon
"UI/UX design intelligence. 57 styles, 96 palettes, 50 font pairings, 25 charts, 11 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Search and apply design best practices."
reeinvent-pitch-deck-design
by rebrained-asja
Apply the Reeinvent brand system when building any pitch deck, slide, cover, section divider, service-offer layout, contact slide, success story, or HTML/PPTX/PDF surface meant to ship under the Reeinvent brand. Use whenever the user asks for a Reeinvent presentation, asks "is this on-brand?" about a Reeinvent surface, or invokes a Reeinvent-branded layout.
designing-beautiful-websites
by tristanmanchester
Designs UX/UI for websites and web apps: UX strategy, information architecture, user flows, wireframes, UI systems, component specs, and polished visual design. Use when the user asks to design, redesign, modernise, critique, or improve a website, landing page, web app interface, design system, style guide, or UI kit.
ti-ui
by macCesar
"Titanium SDK UI/UX patterns and components expert. Use when working with, reviewing, analyzing, or examining Titanium layouts, ListView/TableView performance optimization, event handling and bubbling, gestures (swipe, pinch), animations, accessibility (VoiceOver/TalkBack), orientation changes, custom fonts/icons, app icons/splash screens, or platform-specific UI (Action Bar, Navigation Bar)."
gstack
by jkkorn
Fast headless browser for QA testing and site dogfooding. Navigate pages, interact with elements, verify state, diff before/after, take annotated screenshots, test responsive layouts, forms, uploads, dialogs, and capture bug evidence. Use when asked to open or test a site, verify a deployment, dogfood a user flow, or file a bug with screenshots. (gstack)
elite-layouts
by RSHVR
Modern CSS layout patterns for premium web experiences. Use when asked about: bento grids, horizontal scrolling sections, sticky/parallax layouts, container queries, CSS grid, asymmetric layouts, magazine layouts, responsive grid systems, scroll-snap, or layout + animation integration.
elite-accessibility
by RSHVR
Motion accessibility and WCAG compliance for web animations. CRITICAL: This skill should be loaded whenever implementing animations. Covers prefers-reduced-motion (CSS and GSAP patterns), WCAG contrast requirements, APCA, focus management, keyboard navigation, and screen reader considerations. Use when asked about: reduced motion, motion sensitivity, vestibular disorders, accessibility, a11y, WCAG, contrast ratios, focus styles, or making animations accessible.
apex-development
by david-sfdev
Expert guidance for Apex development on Salesforce Platform following NimbleUser style guide standards. Use this skill when working with Apex classes, triggers, test classes, or when the user mentions Salesforce Apex, .cls files, .trigger files, or Apex-specific concepts like SOQL, DML, governor limits, or test coverage.
ken-style-social-media
by kuse-ai
Generate authentic social media content in Ken's distinctive multilingual style - mixing Cantonese, English, and Traditional Chinese for personal branding, product promotion, and educational content. Perfect for creating viral posts that combine vulnerability, authority, and conversion optimization.
UX Designer
by QuestForTech-Investments
User experience and interface design specialist
backstage-style-web
by kuse-ai
Generate enterprise-grade web applications using Backstage Design System. Create admin dashboards, developer tools, and internal applications with modern React components, dark/light themes, and responsive design patterns based on Radix UI and Tailwind CSS.
modern-web-design
by kuse-ai
Create modern, responsive websites with professional design systems. Generates complete HTML/CSS/JS websites with Tailwind CSS, modern animations, and mobile-first responsive design. Perfect for landing pages, portfolios, business sites, and SaaS applications.
tailwind-shadcn-ui-setup
by hopeoverture
This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework" for Next.js projects.