css AI Agent Skills

Responsive Layout Breaker

71

PramodDutta

Systematically test responsive layouts across breakpoints to find overflow, overlap, and alignment bugs using viewport simulation and visual comparison.

Dark Mode Testing Patterns

71

PramodDutta

Systematic dark mode testing covering color contrast, theme switching, persistence, media query respect, component-level theming, and image adaptation.

web-cloud-designer

43

curiositech

Creates realistic cloud effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for atmospheric backgrounds, weather effects, skyboxes, parallax scenes, and decorative cloud elements. Activate on "cloud effect", "SVG clouds", "realistic clouds", "atmospheric background", "sky animation", "feTurbulence", "weather effects", "parallax clouds". NOT for 3D rendering (use WebGL/Three.js skills), photo manipulation (use image editing tools), weather data APIs (use data integration skills), or simple CSS gradients without volumetric effects.

design-system-creator

43

curiositech

Builds comprehensive design systems and design bibles with production-ready CSS. Expert in design tokens, component libraries, CSS architecture. Use for design system creation, token architecture, component documentation, style guide generation. Activate on "design system", "design tokens", "CSS architecture", "component library", "style guide", "design bible". NOT for typography deep-dives (use typography-expert), color theory mathematics (use color-theory-palette-harmony-expert), brand identity strategy (use web-design-expert), or actual UI implementation (use web-design-expert or native-app-designer).

web-wave-designer

43

curiositech

Creates realistic ocean and water wave effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for ocean backgrounds, underwater distortion, beach scenes, ripple effects, liquid glass, and water-themed UI. Activate on "ocean wave", "water effect", "SVG water", "ripple animation", "underwater distortion", "liquid glass", "wave animation", "feTurbulence water", "beach waves", "sea foam". NOT for 3D ocean simulation (use WebGL/Three.js), video water effects (use video editing), physics-based fluid simulation (use canvas/WebGL), or simple gradient backgrounds without wave motion.

responsive-design

40

manutej

Mobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive images

frontend-design

18

LangConfig

Expert guidance for creating production-grade, distinctive frontend interfaces. Use when designing UIs, choosing aesthetics, or building memorable web experiences.

frontend-developer

7

louloulin

Modern frontend development expert specializing in React, Vue, Angular, and responsive web applications

pdf-press

7

kdcube

Teaches agents how to generate HTML and Markdown that renders beautifully to PDF with proper page breaks, compact professional layouts, domain-adaptive color schemes, and multi-column support for technical reports, scientific papers, and magazine-style documents.

ui-implementor

7

ydnikolaev

UI Implementor that converts design tokens into Tailwind, shadcn components, and production CSS.