Skill category
Design & UI
Visual design, layout, typography, motion, and design systems. Discover source-linked skills that teach agents repeatable workflows.
All Design & UI listings
68 organic results
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP), Node/TypeScript (MCP SDK), or C#/.NET (Microsoft MCP SDK).
flutter-fix-layout-issues
Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.
flutter-build-responsive-layout
Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
flutter-apply-architecture-best-practices
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
flutter-add-widget-test
Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
flutter-add-widget-preview
Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
flutter-add-integration-test
Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.
huggingface-lora-space-builder
Build and publish a Gradio demo on Hugging Face Spaces for a user-provided LoRA. Use when someone asks to create, generate, ship, or publish a Space, demo, Gradio app, or playground for a LoRA — including LoRAs for Qwen-Image, Qwen-Image-Edit, LTX-Video, Wan, FLUX, SDXL, or other diffusion base models. Also triggers when someone describes a LoRA they trained or hosts on the Hub and wants to share it. Covers picking the right base pipeline and `diffusers` inference recipe, designing a UI tailored to the LoRA's task and inputs (Union/multi-task control, edit, video, image, etc.), respecting model-card recommendations (trigger words, steps, guidance, LoRA scale, example inputs), and shipping to
huggingface-gradio
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
supabase-postgres-best-practices
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
web-perf
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.
cloudflare-one
Guides Cloudflare One Zero Trust and SASE work across Access, Gateway, WARP, Tunnel, Cloudflare WAN, DLP, CASB, device posture, and identity. Use when designing, configuring, troubleshooting, or reviewing Cloudflare One deployments. Retrieval-first: use current Cloudflare docs/API schemas instead of embedded product docs.
Distill
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
Harden
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
Impeccable
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
Layout
Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.
Overdrive
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
Polish
Final quality pass for spacing, alignment, and consistency to prepare UI for launch.
Quieter
Tone down overly intense designs while keeping quality high and preserving hierarchy.
Shape
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
Typeset
Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.
Compact Landing
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
Text To Lottie
Turn text prompts into polished Lottie animations for motion-heavy UI work.
Build Primitive
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
Refine Live
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
Grill With Docs
Sharpens the domain model and updates supporting docs while grilling through design choices.
Prototype
Builds throwaway prototypes to answer design or logic questions quickly.
Codebase Design
Guidance for designing deep modules with small interfaces and clean seams.
Sounds On The Web
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
Shadcn
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.