Design & Media Agent Skills

Use this skill when building or refactoring React interfaces with Mantine UI, especially when working with @mantine/core components…

Pick an AI slide-deck skill and a concrete visual style from a curated registry, filtering on the requirements that decide it — editable…

A variable-first, stack-agnostic runtime CSS engine for building responsive interfaces.

How to choose and configure data sources for MapLibre GL JS — rendering your own data without tiles, hosted tile services, serverless…

Apply seamless infinite marquee loops using duplicated items.

generate, refine, validate, and render diagrams from natural language, notes, code snippets, schemas, tables, or existing diagram source…

When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces.

Create masked staggered word reveals on scroll with GSAP ScrollTrigger.

Reference-first frontend design workflow.

Implement Google's Material Design 3 (Material You) UI system.

Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

Convert photographs of materials-testing equipment into scientifically faithful, moderately simplified, isometric 3D schematics for SCI…

A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

When to activate: accessibility, ARIA, WCAG, screen reader, keyboard navigation, focus management, a11y audit

When to activate: CSS animations, GSAP, Framer Motion, scroll-driven animations, Web Animations API, transitions, motion

Measure and diagnose one specific difference between a rendered React screen and its Figma design export — which mechanism to use, how to…

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating…

User experience design principles for developers

Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

Design editorial product UI inspired by Notion and Linear: warm monochrome palette, typographic contrast, flat bento grids, muted pastel…