UI Design

ckm:design-system helps you build three-layer tokens, component specs, CSS variables, Tailwind mappings, and brand-consistent slide assets from a clear token architecture.

ckm:brand is a branding workflow skill for creating, updating, and reviewing brand guidelines, messaging, voice, visual identity, and design-token sync with practical scripts and checklists.

design-system-patterns helps teams design scalable UI foundations with token structure, theming architecture, and reusable component API patterns for design systems and component libraries.

The web-component-design skill helps teams design reusable UI components for React, Vue, and Svelte with strong API patterns, accessibility guidance, and styling tradeoff references for design systems.

Use the tailwind-design-system skill to build Tailwind CSS v4 design systems with tokens, theming, variants, accessibility, and v3-to-v4 migration guidance.

The harden skill helps make frontend UIs production-ready with stronger error handling, empty and loading states, text overflow fixes, i18n support, and edge-case coverage for real-world data.

The extract skill helps teams find repeated UI patterns, tokens, and components, then plan or perform consolidation into an existing design system with a safer migration path.

The critique skill helps teams run structured UX reviews on pages, features, and components. It evaluates hierarchy, cognitive load, heuristics, and persona-based risks, then turns findings into actionable fixes. Best used after /frontend-design with clear screenshots, goals, and user context.

clarify helps rewrite confusing UI text, error messages, labels, and instructions for better UX. Best used in the pbakaus/impeccable workflow after /frontend-design, with audience level and user mental state provided for stronger results.

The extract skill helps teams find repeated UI patterns, tokens, and components, then consolidate them into an existing design system with a safer migration plan.

baoyu-article-illustrator helps agents turn article drafts into structured illustration prompts, placements, and consistent type-plus-style decisions for explainers, tutorials, diagrams, and multi-image posts.

huggingface-gradio helps you build and edit Gradio web UIs in Python for demos, chatbots, and frontend-development workflows. Use the huggingface-gradio skill to choose components, wire events, and shape layouts with less guesswork.

ab-test-store-listing helps you plan and run App Store product page tests to improve Conversion. Use it to evaluate icons, screenshots, and preview video with Apple Product Page Optimization, understand PPO limits, and prepare the right App ID, traffic, and test hypothesis before you start.

makepad-2.0-dsl is a practical skill for writing, reading, and fixing Makepad 2.0 DSL `script_mod!` UI code. It helps frontend developers and Rust UI authors use colon syntax, named instances, merge behavior, and Rust bindings correctly, with a clear makepad-2.0-dsl guide for install and usage.

makepad-2.0-splash is a Makepad 2.0 Splash skill for writing valid runtime UI scripts in script_mod!{} with reliable state handling, event wiring, hot reload flows, and Canvas-driven app patterns. Use this makepad-2.0-splash guide when you need clear syntax, install guidance, and practical usage for frontend development tasks.