Skills tagged "design" (787)

🎨 Diagram Generator

This skill generates draw.io diagrams from natural language requests, outputs valid mxCell XML, and renders them in a browser preview.

aiautomationfrontendcloud

🎨 Diagram To Image

This skill converts Mermaid diagrams and Markdown tables into PNG or SVG images, enabling visual exports for platforms that don't support rich formatting.

aiautomationdatacontent

📝 Didactic Notes

This skill helps educators document pedagogical design decisions in LaTeX materials using didactic notes and the \ltnote command to clarify reasoning.

writingcontentdesign

🧪 Dignified Python

This skill guides you toward modern, production-ready Python by enforcing typing, LBYL, pathlib, and ABC patterns across projects.

pythoncode-reviewlintingdesign

📋 Discovery

This skill helps you master user discovery and research by guiding interviews, persona creation, and journey mapping to inform product decisions.

productresearchplanningux

📝 Doc To Skill

This skill converts documentation into concise, structured Agent Skills using progressive disclosure for efficient AI consumption.

docsaiproductivitydesign

🎨 Document Design

This skill helps you design print-ready HTML documents with brand-aware CSS, producing clean PDFs and print-ready outputs.

designbrandingfrontenddocs

📝 Document Illustrator Skill

This skill automatically analyzes documents to generate themed illustrations in 16:9 or 3:4, including a cover image and multiple styles.

aidesigncontentbranding

📋 Document Writer Skill

This skill helps you create structured technical docs, ADRs, RFCs, and runbooks with clear rationale and reusable templates.

docswritingdesignplanning

📋 Domain Driven Design

This skill helps you model domains using domain-driven design patterns to create clear contexts, aggregates, and ubiquitous language.

pythondesignbackendai

🛡️ Domain Fintech

This skill helps you design and implement immutable, precise fintech transactions using rust_decimal, event sourcing, and audit trails for compliance.

backenddatabasesecurityobservability

🛡️ Domain Iot

This skill helps you design offline-first, power-efficient IoT apps with secure, reliable messaging and safe OTA updates.

securityperformancedesignproduct

📋 Dspy Signature Designer

This skill designs type-safe DSPy module signatures with input/output schemas and Pydantic models for robust, structured results.

aiapidatadesign

🔍 Educational Course Kit

This skill helps you generate complete micro-courses with scripts, visuals, audio, and previews for diverse platforms.

docswritingcontentdesign

🎨 Email Template Design

This skill designs production-ready HTML email templates with inline CSS and cross-client compatibility, ensuring responsive, accessible campaigns.

designuxmarketingbranding

🔍 Emilkowal Animations Swift

This skill helps you apply SwiftUI and AppKit animation best practices to write, review, and implement polished, accessible motion.

designuxaccessibilityperformance

🛡️ Encapsulation

This skill enforces encapsulation in TypeScript by guiding you to hide internal state and expose behavior through validated methods.

code-reviewdesignrefactorfrontend

🎨 Enhance Prompt

This skill transforms vague UI ideas into polished Stitch prompts with design system context and structured output for better generation results.

designuxfrontendai

✨ Ergon

This skill helps you generate and edit images, create AI-powered videos, and synthesize narration from prompts.

aiautomationcliscripting

⚙️ Excalidraw Diagram

This skill generates Excalidraw diagrams from text for Obsidian, producing ready-to-use markdown with frontmatter and automatic file saving.

designproductplanningproductivity

📋 Excalidraw Generation

This skill helps you generate Excalidraw diagrams that convey concepts with hand-drawn aesthetics, spatial layouts, and accessibility-aware design.

designuxaccessibilityproduct

🎨 Excalidraw Skill

This skill helps you design and refine Excalidraw diagrams in real time, export/import scenes, and manage elements across a live canvas.

frontenddesignuxapi

⚙️ Excalidraw Slides Skills

This skill transforms user topics into polished Excalidraw 16:9 slide decks by outlining, visualizing ideas, and generating ready-to-export slides.

designuxproductcontent

📋 Explain Like

This skill explains code changes or designs at beginner, intermediate, and expert levels to improve understanding and reveal gaps.

designdocswriting

🧪 Extract Flow Scenario

This skill extracts a precise workflow narrative from conversation into a structured markdown flow for accurate design and specification.

docsplanningdesignanalytics

✨ Fal Text To Image

This skill generates professional images from text prompts using fal.ai models, enabling style transfer, high resolution outputs, and automatic model selection.

aiapiclidesign

📋 Fantasy

This skill helps you design coherent fantasy worlds by applying Sanderson laws, world-building frameworks, and race and politics considerations.

writingplanningdesigncontent

✨ Fashion Model Photography

This skill generates professional fashion photography prompts with model direction, styling, lighting, and composition for editorial and commercial campaigns.

designbrandingcopywriting

🎨 Favicon

This skill generates a complete favicon set from a source image, updates project HTML, and configures a manifest for consistent branding across platforms.

frontendautomationscriptingdevops

📋 Feature Data

This skill helps design robust data models and schemas for new features, ensuring normalization, constraints, migrations, and optimized access.

databasedatamigrationdesign

🧪 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

🎨 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