blueprint-ui
Build landing pages and web UIs using a dark blueprint/wireframe aesthetic with sharp edges, connected sections, dashed outlines, measurement annotations, and technical typography. Use when creating marketing sites, landing pages, or product pages.
devup-ui
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time. TRIGGER WHEN: - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.) - Using styling APIs: css(), globalCss(), keyframes() - Configuring devup.json theme (colors, typography, extends) - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun) - Debugging "Cannot run on the runtime" errors - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.) - Using polymorphic `as` prop or `selectors` prop - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
flutter-ai-ui-skill
A master-level Flutter UI/UX design skill that equips AI coding assistants with curated design intelligence, colour palettes, typography pairings, animation patterns, component blueprints and actionable checklists for building beautiful, accessible, production-ready Flutter applications. Covers Material 3, Cupertino, adaptive layouts, animations, theming, state management integration, accessibility and performance optimization.
design-compare
Compare Figma designs against implementation screenshots, identifying layout, typography, color, and sizing discrepancies. Generates a structured visual review table and an interactive HTML comparison page with swipe and side-by-side modes. Use when the user asks to compare design with preview, compare Figma with screenshot, check design implementation, or provides a Figma URL alongside a screenshot.
mapbox-cartography
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
dg-design
Generate a DESIGN.md from a brand brief. Use when the user wants to create a visual identity, design system, or brand style guide for a web project. Also use when starting a new website from scratch. Asks for company name, industry, target audience, and aesthetic direction. Outputs an 8-section design spec with colors, typography, and anti-slop rules.
apple-hig-designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
app-ui-design
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.
brand-guidelines
Universal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual consistency, marketing collateral, or corporate design standards. Triggers include: brand guidelines, brand book, visual identity, corporate identity, brand compliance, brand review, brand audit, marketing materials, social media copy, poster design, banner design, PPT template, presentation template, company brochure, brand colors, typography guidelines, tone of voice, brand voice, logo usage, brand assets, style guide, design system, marketing collateral, campaign materials, brand consistency check. Also trigger when a user mentions producing materials like posters, banners, social posts, company introductions, pitch decks, brochures, flyers, email templates, or video storyboards and wants them to follow a specific brand look-and-feel. Even if the user doesn't say "brand guideline" explicitly, use this skill when any visual or verbal consistency with a company identity is implied.
ru-text
Use when writing, editing, or reviewing Russian-language text, or when user mentions ru-text. Covers typography, info-style, editorial, UX writing, business correspondence. Auto-activates on Russian text output.
ckm:banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
picasso
The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
brandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
makepad-router
CRITICAL: Use for ALL Makepad/Robius questions including widgets, layout, events, and shaders. Triggers on: makepad, robius, live_design, app_main, Widget, View, Button, Label, Image, TextInput, ScrollView, RoundedView, SolidView, PortalList, Markdown, Html, TextFlow, layout, Flow, Walk, padding, margin, width, height, Fit, Fill, align, spacing, event, action, Hit, FingerDown, FingerUp, KeyDown, handle_event, click, tap, animator, animation, state, transition, hover, pressed, ease, shader, draw_bg, draw_text, Sdf2d, pixel, gradient, glow, shadow, font, text_style, font_size, glyph, typography, tokio, async, spawn, submit_async, SignalToUI, post_action, apply_over, TextOrImage, modal, collapsible, drag drop, AppState, persistence, theme, Scope, deploy, package, APK, IPA, WASM, cargo makepad, makepad widget, makepad ç»ä»¶, makepad æé®, makepad å¸å±, makepad äºä»¶, makepad å¨ç», makepad çè²å¨, å建ç»ä»¶, èªå®ä¹ç»ä»¶, å¼ååºç¨, å± ä¸, 对é½, ç¹å»äºä»¶, æ¬åææ, æ¸å, é´å½±, åä½å¤§å°
Io.Github.Forge Space/Branding Mcp
AI-powered brand identity generation via MCP with design tokens, typography, and logo assets.