Design & Media Agent Skills for Claude Code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.

Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives

Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.

Create interface designs, wireframes, and design systems.

Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation…

Evaluate interfaces against 168 research-backed UX/UI principles, detect antipatterns, and inject UX context into AI coding sessions.

Automate Visme tasks via Rube MCP (Composio).

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

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

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 Liquid Glass lip-bezel treatment to toggle switches, on/off controls, and movable glass thumbs.

Converts structured outlines into high-impact, slogan-style HTML presentations with ultra-bold typography and minimalist aesthetics.

Generate a publication-quality methodology diagram from a text file using PaperBanana.

Generates high-quality images, logos, artwork, and avatars directly through the internal LLM gateway using gpt-image-2.

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

Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and…

Automate Logo Dev tasks via Rube MCP (Composio).

Generates low-fidelity grayscale wireframes and multi-screen storyboards to rapidly explore and compare structural UX directions before…