Design & Media

casoon Skill

Motion design system for Astro + Tailwind v4 + Svelte 5 — animation tokens, component state patterns, scroll reveals, performance rules, and modern CSS 2025/2026 features. Use this skill whenever adding any animation, transition, hover effect, scroll reveal, micro-interaction, or motion to any component or page. Also use when the user mentions "animation", "transition", "hover effect", "motion", "scroll reveal", "fade in", "entrance animation", "interactive feel", or wants a page to feel "more alive", "more polished", or "like Stripe/Apple/Linear/Vercel".

casoon Skill

Aktuelle visuelle UI-Trend-Stilmittel — Glassmorphism, Neomorphism, Gradient-Systeme, Icon-Systeme, Illustration vs. Fotografie, Bento-Grids — mit Einsatzkriterien und Fallstricken. Ergänzt die festen Regeln aus ui-design um dosiert einsetzbare Trend-Stilmittel. Nutzen bei der visuellen Gestaltung einzelner Komponenten/Sections. NICHT für die Kernregeln zu Spacing/Typografie/Farbsystem (→ ui-design) und NICHT für die grundsätzliche Stilrichtung einer ganzen Seite (→ design-directions/frontend-design).

casoon Bundle

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

cogine-ai Bundle

Search the bundled UI/UX database for product-specific styles, palettes, typography, accessibility, motion, charts, and stack guidance. Use only when explicitly requested.

jacardl Bundle

为「直隶按察使」公众号长文统一配图。读取 HTML → 提取 shot list → mmx image generate 生图 → 上传微信素材 → 注入 HTML。 触发条件：用户说「配图」「生成插图」「zhili-illustration」「给文章配图」。

wpgaurav Skill

Style WordPress blocks with theme.json: presets, block-level styles, style variations, and custom CSS. Configure typography, colors, spacing, and layouts.

wpgaurav Skill

Create blog featured images as SVG (2400x1260px) using illustration libraries, FontAwesome icons, and open-source SVGs. No or negligible text. Convert to PNG via rsvg-convert. Use for yoursite.com and youragency.com blog post thumbnails, social sharing images, and WordPress featured images.

wpgaurav Skill

Framework-agnostic CSS patterns for typography, color, motion, and spatial composition.

wpgaurav Skill

Convert Figma designs to GenerateBlocks V2 format for WordPress

wpgaurav Skill

Create cinematic editorial hero images with photorealistic subjects, dramatic typography, and magazine-quality composition. Use for blog hero images, announcement graphics, feature stories, newsletter headers, and social media covers. Optimized prompts for Gemini and ChatGPT/DALL-E image generation.

gtmify Bundle

Build a brand-customized single-file design system from a working HTML template. Interviews the user for brand name, palette, typography, and voice; produces a self-contained design-system.html the user can share with their team. Use when the user says 'build my design system', 'design system template', 'brand my design system', 'design tokens', 'design guide for my brand', or asks for help producing a single-source-of-truth design artifact.

ch4570 Bundle

Turn supplied content into a polished, accessible, editable Markdown document with clear structure, typography roles, information hierarchy, tables, callouts, captions, and page-aware layout intent. Use for reports, PRDs, technical documents, memos, and other Markdown-first publications before HTML or PDF rendering. Do not use to render HTML/PDF or to invent missing content.

hjdspace Skill

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

filippodesilva Bundle

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.

filippodesilva Bundle

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

dragoon0x Skill

Run the full 8-axis DNA analysis. Produces a radar chart profile with Typography, Color, Layout, Motion, Accessibility, Tokens, Hierarchy, and Personality scores.

dragoon0x Skill

Auto-fix typography issues. Replace banned fonts, normalize scale, add line-height.

dragoon0x Skill

Apply a complete typography system in one command. Scale, pairing, line-heights, letter-spacing.

pinocpie Skill

review งานดีไซน์ Figma

pinocpie Skill

สร้าง color palette

pinocpie Skill

แปลง Figma เป็นโค้ด

brandonburrus Bundle

This skill should be used to review or critique an existing UI for visual quality and accessibility without changing it, returning a severity-ranked findings report. It applies when the user says "review this UI", "audit the frontend", "critique this design", or "is this accessible", or hands over a live page, screenshots, or a component. Covers anti-slop visual quality, hierarchy and typography, accessibility (WCAG contrast, focus, ARIA, keyboard, alt text), responsive behavior, and interaction states. It should not be used for building or fixing UI (use design), or when only behavioral usability is in question (heuristics, mental-model match, flow completeness; use the ux-reviewer agent); this skill reports problems and never implements the fix.

blink-new Skill

Access Figma files, components, styles, dev resources, and comments. Use when asked to list design files, read frame details, check components, access design tokens, view comments, or read dev resources. Requires a linked Figma connection.

wanghaisheng Skill

创建完整的排版系统，包括字体选择、字号层级、字重系统、行高系统和字间距系统。确保排版系统符合无障碍标准并支持响应式设计。

eliasoulkadi Bundle

UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

mphinance Bundle

Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.

stanestane Bundle

Build a themed visual moodboard — sources candidate images from the web, curates them for color harmony, composition, and mood fit, and composes a properly designed board (not a plain photo grid) as an HTML artifact and a flattened PNG. Use this any time the user asks for a moodboard, mood board, visual reference board, inspiration board, style board, or aesthetic/color-palette collage for a theme, brand, room, character, game, event, or creative project — even if they just describe a vibe or aesthetic ("something coastal and mid-century", "cyberpunk night market energy") without using the word "moodboard" explicitly. Also use when asked to research visual references for a look, pull a color palette from a theme, or build a reference sheet for design/art direction.

unoplatform Skill

Comprehensive reference for the Uno Themes Semantic Design Language. Covers semantic control styles, typography, 33 color palette keys, ~288 generated brushes, opacity/state system, color pairing rules, and theme customization.

valentinnikolaev Bundle

Analyze an existing GitHub Pages site and any available repository wiki, propose prioritized evidence-backed improvements, pause for explicit user approval, and then implement only the approved full or partial change set. Use for staged review-to-remediation of Pages content, navigation, accessibility, responsive layout, visual hierarchy, color scheme, typography, branding, and interactions. Do not use for a report-only audit, a net-new site, or changes the user already specified without requesting an approval gate.

valentinnikolaev Bundle

Audit the rendered user experience of an existing GitHub Pages site or production-equivalent local build and report evidence-backed accessibility, responsive-layout, navigation, content-density, typography, color, brand, and interaction defects. Use for Pages-specific visual and UX verification after a build. Do not use for generic website audits, source-only code review, deployment configuration, or implementing fixes.

valentinnikolaev Bundle

Design or refine the visual system of a GitHub Pages documentation site, repository website, wiki, or project landing page. Use for Pages-specific CSS tokens, color and dark themes, typography, reading measure, spacing, grids, hierarchy, responsive behavior, and repository branding. Do not use for generic product design systems, native mobile UI, or non-Pages websites.

jhonatan-oliveiradev Bundle

Use when designing, implementing, refining, or auditing premium web motion systems, including microinteractions, transitions, scroll choreography, reveals, kinetic typography, smooth scrolling, SVG, canvas, WebGL, 3D, loaders, ambient effects, and animation performance. Applies to React, Next.js, Vue, Svelte, and vanilla projects needing coherent motion, reference-inspired movement, motion tokens, or fixes for janky, excessive, or inaccessible animation.

jhonatan-oliveiradev Skill

Use when a project needs reusable UI tokens, component conventions, variants, responsive rules, or a coherent design system across multiple screens or features.

jhonatan-oliveiradev Skill

Use when an approved brand strategy needs a coherent visual identity system across multiple touchpoints, including marks, typography, color, imagery, graphic language, and responsive applications.

jhonatan-oliveiradev Skill

Use when converting Figma designs or design-system components into production Next.js and React code while preserving fidelity, reuse, responsiveness, and maintainable component boundaries.

jhonatan-oliveiradev Skill

Use when reviewing an implemented frontend against Figma, screenshots, a live reference, or explicit visual acceptance criteria and concrete visual regressions must be identified and prioritized.