Design &amp; UI

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

officialHugging Face

huggingface-gradio

Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.

officialHugging Face

skills.shskills.sh rank 96

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.

officialCloudflare

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.

officialCloudflare

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.

ui-skillsai-media

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.

ui-skillsai-media

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.

skills.shskills.sh rank 6

grill-with-docs

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

skills.shskills.sh rank 47

setup-matt-pocock-skills

Configure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

skills.shskills.sh rank 56

prototype

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

skills.shskills.sh rank 118

codebase-design

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Sounds On The Web

Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.