Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

web-cloud-designer

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.

151 repo starsObserved in 1 repos

Design

GitHub

web-design-expert

Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns. Use for brand identity development, visual design systems, layout composition, and responsive web design. Activate on "web design", "brand identity", "color palette", "UI design", "visual design", "layout". NOT for typography details (use typography-expert), color theory deep-dives (use color-theory-expert), design system tokens (use design-system-creator), or code implementation without design direction.

151 repo starsObserved in 1 repos

Design

GitHub

win31-audio-design

Expert in Windows 3.1 era sound vocabulary for modern web/mobile apps. Creates satisfying retro UI sounds using CC-licensed 8-bit audio, Web Audio API, and haptic coordination. Activate on 'win31 sounds', 'retro audio', '90s sound effects', 'chimes', 'tada', 'ding', 'satisfying UI sounds'. NOT for modern flat UI sounds, voice synthesis, or music composition.

151 repo starsObserved in 1 repos

Design

GitHub

docusaurus-styling

Style Docusaurus sites to match Avalonia Customer Portal theme using TailwindCSS, CSS variables, and component swizzling. Use when user requests Docusaurus styling, theming, visual customization, or component modifications. Ensures unified brand experience across documentation and portal.

150 repo starsObserved in 3 repos

Design

GitHub

tailwind-to-infima

You are an expert in Docusaurus theming and the Infima CSS framework. The user has a React application built with Tailwind CSS and wants to replicate that look in a Docusaurus site.

150 repo starsObserved in 2 repos

Design

GitHub

analyse-design

Reverse-engineer an application, website or document's design system from its codebase and screenshots. Use when asked to analyse visual design, extract a colour palette, document UI patterns, identify typography and spacing systems, audit design consistency, or understand the design language of a frontend codebase.