Skills tagged "design" (831)

🧪 Figma And Lit

This skill teaches you to build a Figma plugin using Lit web components, covering setup, UI creation, code integration, and testing.

frontendjavascripttypescriptdebugging

🎨 Figma Code To Canvas

This skill helps you push running UI code to Figma as editable design layers using the Code to Canvas MCP integration.

designuxautomationfrontend

🎨 Figma Illustration Import

This skill helps you convert multi-layer Figma illustrations into reusable React atom components with assets, stories, and theme support.

reactfrontenddesignux

🎨 Figma Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity using MCP workflows and design-system mapping.

designfrontenduxaccessibility

🎨 Figma Mcp Downloader

This skill downloads complete Figma design context and metadata to local files, ensuring 100% complete output before other workflows start.

cliautomationdesignproduct

🧪 Figma Storybook Workflow

This skill translates Figma designs into pixel-perfect Storybook components, enforcing one-at-a-time extraction, exact dimensions, and iterative refinement

frontenddesigncode-reviewtesting

⚙️ Figma Use

This skill lets you automate Figma design tasks from the CLI or JSX, creating and editing frames, text, icons, and exports.

designautomationcliproductivity

🧪 Fixing Accessibility

This skill helps you fix accessibility issues in UI by applying targeted, minimal changes that improve usability and compliance.

frontenduxdesignproduct

⚙️ Fixing Metadata

This skill helps ensure metadata is correct and complete across pages, enforcing single sources, proper titles, descriptions, and social cards.

seocontentuxdesign

🎨 Fixing Motion Performance

This skill helps optimize animation performance by applying motion guidelines to CSS, WAAPI, and scroll-linked effects across the UI.

performancefrontenddebuggingux

🐛 Flame Core

This skill helps you implement Flame Engine core fundamentals including components, input, collision, camera, animation, and scenes.

performancedebuggingdocsscripting

⚙️ Flame Systems

This skill helps you implement Flame Engine 14 game systems such as quest, dialogue, inventory, and combat with reference patterns.

docsproductplanningproductivity

📝 Flow Designer

This skill helps you design features through structured brainstorming sessions and document architectural decisions before coding.

designplanning

🧪 Flutter

This skill helps you build Flutter apps by guiding widgets, state management, navigation, and platform integration with practical best practices.

frontenddesignuxproductivity

🧪 Flutter Adaptive Ui

This skill helps you build adaptive Flutter UIs that gracefully respond to screen size and platform, enhancing usability across mobile, tablet, and desktop.

frontenduxaccessibilitydesign

🎨 Flutter Animations

This skill helps you implement Flutter animations effectively by choosing implicit, explicit, hero, staggered, and physics-based approaches for smooth UX.

frontenduxdesignperformance

🔍 Flutter Bloc Clean Architecture Skill

This skill enforces BLoC state management and clean architecture in Flutter, generating feature-ready code with data, UI, and barrel files.

aiautomationcode-reviewdebugging

🔍 Flutter Design

This skill accelerates Flutter theming and UI consistency by applying project-defined ThemeData, ColorScheme, typography, and spacing patterns.

designuxrefactorperformance

🧪 Flutter Widget Generator

This skill generates complete Flutter widget Dart files with state management and theming for immediate use

flutterfrontendautomationcode-review

🎨 Fluxui Development

This skill helps you build UI with Flux UI Pro components in Laravel Livewire, replacing HTML elements and accelerating component-driven interfaces.

laravelfrontendtailwinddesign

✨ Fogg Behavior Model

This skill helps you apply the Fogg Behavior Model to diagnose why users fail to act and design targeted prompts.

uxproductgrowthanalytics

🔍 Frame

This skill translates Figma design context into structured handoff data for downstream engineers and design-system aware agents.

designuxautomationplanning

🎨 Framer Motion

This skill helps you implement Disney's twelve animation principles in Framer Motion to create expressive, responsive React animations.

frontenddesignuxai

✨ Free Zimage Skills

This skill generates high-quality images using ModelScope's Z-Image model via the Zimage API, streamlining prompt-to-image creation.

aiapiautomationdesign

🎨 Frontend

This skill helps you design and implement striking UI components with responsive styling, motion, and accessibility-focused reviews.

frontenddesignuxaccessibility

🧪 Frontend Accessibility

This skill helps you build accessible user interfaces by applying WCAG guidelines, semantic HTML, keyboard navigation, and ARIA practices across components.

frontenddesigntestingcode-review

🎨 Frontend Agent

This skill helps you build accessible, design-faithful React and Next.js UI using shadcn/ui, server components, and design tokens for performance.

frontendreactnextjsshadcn

🎨 Frontend Css

This skill guides you to write maintainable, performant CSS across frameworks using design tokens, methodologies like BEM, CSS modules, and utility classes.

frontenddesignperformancecode-review

🎨 Frontend Design

This skill guides you through thoughtful web UI design using psychology, layout, typography, color, and accessibility principles to improve user experience.

designuxaccessibilityfrontend

🎨 Frontend Design

This skill helps you craft production-grade frontend interfaces with a distinctive aesthetic, robust accessibility, and a clear design system using

frontenddesignuxaccessibility

🎨 Frontend Design

This skill helps you design and implement production-grade frontend interfaces with distinctive aesthetics, translating design references into precise code

frontenddesignuxaccessibility

🎨 Frontend Design

This skill crafts distinctive, production-grade frontend interfaces with bold aesthetics, delivering polished components, pages, or apps that avoid generic AI

frontenddesignuxaccessibility

🎨 Frontend Design

This skill helps you design production-grade frontend interfaces by analyzing designs, generating tokens, palettes, typography, and framework-ready components.

designfrontendaccessibilityreact

🎨 Frontend Design

This skill helps you craft production-grade interactive interfaces with distinctive aesthetics using HTML/CSS/React components and motion.

frontendreactdesignux

🎨 Frontend Design

This skill helps you implement pixel-perfect frontend experiences that align with human-centered psychology and production-grade design systems.

frontenduxdesignaccessibility

🎨 Frontend Design

This skill helps you craft distinctive, production-grade frontend interfaces with bold aesthetics, accessible structure, and purposeful motion across

frontenddesignuxaccessibility

🎨 Frontend Design

This skill helps you design and implement distinctive production-grade frontend interfaces with polished aesthetics and creative detail.

designuxfrontendreact

🎨 Frontend Engineer

This skill helps you transform designs into stunning, responsive UI components with polished visuals, motion, and accessible interactions.

frontenddesignuxaccessibility

🎨 Frontend Enhancer

This skill enhances Next.js apps with modern UI components, palettes, and layouts to boost visual polish and user experience.

frontenddesignuxaccessibility

🧪 Frontend Implementation

This skill helps you implement robust frontend components with React, Vue, or Angular, including accessibility, validation, and responsive UI guidance.

frontenduxaccessibilitydesign

🎨 Frontend Ui Skill

This skill helps audit and build enterprise SaaS UIs with Tailwind v4, shadcn/ui, and Next.js/Vite while ensuring accessibility and performance.

frontendreactnextjstailwind

🎨 Frontend Ui Ux

This skill helps you craft stunning UI/UX by guiding typography, color, spacing, and motion decisions for cohesive interfaces.

designuxfrontendaccessibility

🎨 Frontend Ui Ux

This skill helps you craft visually stunning, cohesive UI/UX by translating design intent into pixel-perfect code with thoughtful interactions and

frontenddesignuxaccessibility

🎨 Frontend Ui Ux Engineer Skill

This skill helps transform plain UI components into visually stunning, accessible, responsive interfaces with polished micro-interactions and design-driven

frontenduxdesignaccessibility

🧪 Frontend Web Dev Skill

This skill helps you design scalable frontend architectures, implement accessible UI, and optimize performance with modern tools and cross-platform workflows.

frontendperformancedesignux

🎨 Frontend_aesthetics

This skill helps you design unique, immersive frontend aesthetics by selecting distinctive typography, cohesive color themes, and expressive motion to elevate

frontenddesignuxperformance

🎨 Frontend_design_system

This skill translates UI design requirements into production-grade frontend code with design tokens, accessibility compliance, and artistic execution.

frontenddesignuxaccessibility

🛡️ Functional Designer

This skill designs functional architectures and detailed PHP/CakePHP specifications from requirements to guide development and ensure consistent, scalable

designbackendapidatabase

📋 Game Design Theory

This skill helps you master game design theory including MDA, balance, and player psychology to create engaging, rewarding gameplay experiences.

designresearchplanningux

🧪 Gemini Image

This skill generates high-quality images from prompts using Google's Gemini and Imagen models, offering multiple outputs, aspect ratios, and resolutions.

aiautomationscriptingapi

🎨 Generate

This skill generates custom images using Gemini 2.5 Flash for frontend designs, illustrations, icons, or hero images from user prompts.

aifrontenddesignux

⚙️ Generate Slide

This skill automatically generates project intro slide images using Nano Banana Pro, delivering ready-to-share visuals and a quality-checked best set.

aiautomationdesignux

🎬 Generate Video

This skill automates product demo video generation using Remotion, analyzing codebase, planning scenes, and parallel rendering to deliver visuals.

automationremixjavascriptproduct

🧪 Gentleman Trainer

This skill helps you design and implement Vim training modules, exercises, and boss fights for the Gentlemen trainer system.

scriptingdesignproductivitydebugging

🧪 Go Interfaces

This skill helps design Go interfaces with registry, middleware, and hooks for Beluga AI v2, enabling extensible contracts and runtime customization.

godesignapibackend

🧪 Godot Design

This skill provides design guidelines for Godot GDScript interfaces focusing on testability, maintainability, and TDD-friendly patterns.

designtestingpythoncode-review

🐛 Godot Dev

This skill helps you develop Godot games efficiently by guiding scene structure, GDScript patterns, and common tasks with practical examples.

scriptingdebuggingproductivitydesign

🔍 Godot Development

This skill helps you develop Godot 4 games efficiently by applying best practices for nodes, signals, resources, and performance.

performancedebuggingdesignscripting

🎨 Godot Ui

This skill provides expert guidance for Godot UI creation, theming, responsive layouts, and common patterns to accelerate menus, HUDs, inventories, and

designuxproductivityperformance

📝 Governance

This skill creates governance documents such as ADRs and CRs to capture architectural decisions and requirement changes for projects.

docsplanningproductdesign