Design & Media Agent Skills for Windsurf (legacy)

This skill provides a curated collection of professional font and color themes themes, each with carefully selected color palettes and…

Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.

Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash.

Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.

Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.

Add appropriate user feedback states (loading, success, error, empty) to a component or page

To build powerful frontend claude.ai artifacts, follow these steps:

Review files for compliance with Web Interface Guidelines.

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime…

Creates the visuals for a LinkedIn profile or Page (profile photo, personal banner, company logo, company cover) at LinkedIn's official…

Design and implement high-quality liquid glass UI effects for web apps.

Coordinate blog-core Liquid Glass across a whole UI area or several related controls.

Apply the Kube-blog stronger displacement treatment to magnifiers, zoom lenses, spotlights, and cursor-following Liquid Glass effects.

Build or tune Liquid Glass media players, podcast cards, album browsers, and media toolbars using the Kube-blog Music Player composition…

Apply the Kube-blog compact Liquid Glass treatment to search boxes, command palettes, quick menus, and search entry controls.

Apply the Kube-blog convex Liquid Glass treatment to sliders, progress bars, volume controls, scrubbers, range inputs, and timeline handles.

Apply the Kube-blog Liquid Glass lip-bezel treatment to toggle switches, on/off controls, and movable glass thumbs.

Apply a blog-derived Liquid Glass thumb to navigation tabs, segmented controls, and active-tab indicators.

Blog-core Liquid Glass workflow for ordinary static web surfaces such as a single card, button, toolbar, or panel, using physics-based…

INVOKE THIS SKILL when: making AI-generated images interactive, mapping clickable zones onto generated artwork, warping HTML content onto…

Logo design principles and AI image generation best practices for creating