响应式

casper-design-system

Casper-Studios

Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance.

frontend-enhancer

ailabs-393

This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.

web-audit

PaulKinlan

"Audit a URL for modern web quality and (optionally) fix it. This is a FULLY AGENTIC audit. YOU

tool-zesarux

gamesexplained

How to drive ZEsarUX 13.0 over ZRCP, the ZX Spectrum emulator the kit uses. Start it, connect, the commands the kit runs, stepping and checkpoints, frames, input, snapshots, and the traps measured on the release. What to do when a check fails is in workarounds.md, beside this file.

visual-cues-cta-psychology

flpbalada

Design effective CTAs using visual attention and gaze psychology principles.

nextjs-image-art-direction

flpbalada

Implement art direction for Next.js images using getImageProps(). Use when

css-container-queries

flpbalada

Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size.

flutter-dev

MiniMax-AI

Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling. Use when: building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.

ios-workflow-to-playwright

neonwatty

Translates iOS workflow markdown files into Playwright E2E tests for CI using WebKit with mobile viewport. Use this when the user says "convert ios workflows to playwright", "translate ios workflows to CI", or wants to promote refined iOS/mobile workflows to automated CI tests.

html-generator

camoa

Use when generating branded HTML pages and components from a design system. Creates standalone HTML components and composes them into full pages with embedded CSS, responsive design, and brand integration.

frontend-design

roman-16

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

pawa1

Nkubapawa2002

playwright-skill

CommandCodeAI

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

visual-qa

dylanfeltus

Use vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps. Use when reviewing designs, comparing implementations to mockups, or doing pre-ship QA.

flutter-master-detail-view

rodydavis

Learn how to implement a responsive Master-Detail interface in Flutter that adapts to different screen sizes, leveraging multi-column layouts on larger screens and pushing to detail screens on mobile.

design-verify-web

jthorare

Playwright screenshots at mobile/tablet/desktop viewports, diff against mockup baseline using design-comparison MCP, and report discrepancies with fix suggestions.

verify-web

jthorare

"Playwright-based self-verification of running web apps. Executes journeys through verification lenses (functional, visual, accessibility, error-state, responsive) and writes an evidence pack (pack.json + report.md) on every run."

ui-styling

mrgoonie

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

frontend-enhancer

auldsyababua

This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.

brand-guide

CrazySwami

Generate and maintain brand style guides - colors, fonts, imagery, voice/tone, responsive specs. Use when documenting brand identity or creating style guide pages.

frontend-design

vendeesign

"Garde-fou design frontend. Activer quand Claude génère ou modifie du code UI visuel : HTML/CSS, JSX/TSX avec styles, composants avec layout/couleurs/typo, pages complètes, landing pages, dashboards, formulaires stylés. Pousse vers des interfaces distinctives et production-grade — évite l'esthétique générique 'AI slop' (cyan/violet, glassmorphism, card grids identiques). Couvre : direction artistique, typographie, couleur, layout, animation, responsive, UX writing. Complémentaire avec accessibility (qui couvre WCAG/ARIA). Ne pas activer pour du code backend, de la logique métier sans rendu visuel, des scripts CLI, ou des fichiers de configuration."

ui-styling

duongductrong

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

moviemonk-ai

mfscpayload-690

"Full build and safety test workflow for MovieMonk UX/Component changes. Validates that UI modifications maintain type safety, component consistency, responsive behavior, and test coverage before deployment. Runs linting, unit tests, integration tests, and regression checks with automated validation of component consistency patterns. WHEN: after making UI component changes, before deploying UX improvements, validating movie/show/person display consistency, ensuring responsive behavior is preserved, testing ambiguity modal or hero metadata changes."

terminal-simulation

gaia-research

Generate interactive, animated, responsive HTML-based terminal simulators to showcase CLI commands, scripts, pipelines, or interactive workflows. Use this whenever you need to visually showcase a command line sequence, mock interactive CLI tools, or simulate code executions.