About this skill

Problem

Building product pages often fails not because styles are missing, but because color, typography, spacing, hover feedback, contrast, and accessibility details are decided ad hoc. This skill targets UI/UX design, implementation, review, and repair tasks by turning requirements into a reusable design system before code is written, reducing inconsistent visual decisions.

How It Works

Requirements analysis: extracts product type, style keywords, industry, and stack; defaults to html-tailwind when no stack is specified.
Design system generation: uses --design-system to search product, style, color, landing, and typography dimensions, then returns layout patterns, palettes, typography, effects, and anti-patterns.
Persistence: --persist creates design-system/MASTER.md and design-system/pages/ for page-specific overrides, following a Master + Overrides model.
Supplemental searches: queries style, chart, ux, typography, and landing as needed for charts, animation, accessibility, and page structure.
Stack guidance: covers React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn, and Jetpack Compose implementation patterns.
Delivery checks: verifies SVG icons, cursor-pointer, transition timing, light/dark contrast, fixed-navbar spacing, responsive behavior, and accessibility basics.

Boundaries

This skill is best for front-end UI/UX design and implementation, such as landing pages, dashboards, SaaS, and e-commerce interfaces. It is not a brand strategy, copywriting, or backend design tool. For one-off styling, the workflow may feel heavy; for cross-session consistency, persisted design systems are the better fit.

Screenshots

Use Cases

Define palette, typography, chart choices, and anti-patterns for a SaaS dashboard, then generate a Tailwind page.
Plan a marketing landing page structure with hero, social proof, pricing, and CTA rules.
Audit an existing React page and fix icon, hover, focus, light-mode contrast, and fixed-navbar issues.
Maintain cross-session design rules using a Master file plus page-specific overrides.

Best For

Front-end engineers building product UI who need consistent Tailwind or React implementations from design requirements.
Landing-page developers who need to control structure, color, typography, and accessibility together.
Dashboard engineers selecting chart types and handling real-time rendering plus loading states.
Teams maintaining multi-page design systems who need global rules with page-level overrides.

Related Skills

Excalidraw Wrap

@user_922b1001/excalidraw-wrap

Excalidraw Wrap is an Excalidraw-focused wrapper, with tags for TypeScript, GitHub, and automation.

Design & Media 2026.08.30 ↓ 440

Brand Distillation

@user_3104f8ec/brand-distillation-skill

Calibrate vague brand inputs, expose contradictions, distill a brand core and positioning boundaries, then stress-test the result into an executable brand skeleton.

Design & Media 2026.08.29 ↓ 424

Chinese Brand Naming Workbench

@user_36c7efa2/brand-naming-cn

Generate localized Chinese brand names, naming directions, slogans, and risk checklists with reusable templates and trademark search reminders.

Design & Media 2026.08.30 ↓ 454

Photo Guide

@user_eec9ad28/photo-guide-skill

A beginner-friendly photo analysis tool that infers shooting parameters from visual features and suggests post-processing, optimization, and learning keywords.

Design & Media 2026.08.29 ↓ 460

UI/UX Pro Design System Assistant