# UI Master > Master hub for UI, frontend & design. Use for any UI, frontend, styling, design-system, brand identity (logo/colors/typography/brand book), Tailwind CSS v4 (full stack in tailwind-master), Figma-grade design systems, elite world-class UI/UX redesigns (Apple/Stripe/Linear/Notion/Raycast tier), ultra-HD/8K rendering, award-winning effects, advanced forms, charts & dashboards, responsive, or accessibility work. Bundles 28 specialized skills (in skills//GUIDE.md). Use this for any ui task. - Skill: `bodymobarez/ui-master` (Agent Skill, multi-file: 287 files) - Install (CLI): `npx skillmds@latest add bodymobarez/ui-master` - Raw SKILL.md: https://api.skillmd.com/api/skills/bodymobarez/ui-master/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: Bodymobarez (https://skillmd.com/u/bodymobarez) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/bodymobarez/ui-master --- # UI, frontend & design — Master Hub Use for any UI, frontend, styling, design-system, responsive, or accessibility work. ## How to use this hub This single skill bundles **all 28 ui skills**. Each bundled skill's full instructions live in `skills//GUIDE.md` (plus any `scripts/`, `data/`, `references/` next to it). **Workflow:** 1. Match the user's request to one or more skills in the list below. 2. Read that skill's `skills//GUIDE.md` for full instructions before acting. 3. Combine multiple bundled skills when a task spans several areas. ## Bundled skills - **brand-identity-creator** ⭐ — Create a complete brand identity end-to-end: logo suite (SVG + AI raster), color system with WCAG contrast, typography pairing, voice & tone, design tokens (CSS/Tailwind/JSON), and a full BRAND.md brand book. Use for branding, logos, rebrands, and style guides. → `skills/brand-identity-creator/GUIDE.md` - **charts-and-dashboards** ⭐ — Build charts & analytics dashboards: pick the right chart for the question, choose a library (Recharts/ECharts/Tremor/visx), dashboard layout & KPIs, large-data performance, theming, and accessibility. → `skills/charts-and-dashboards/GUIDE.md` - **tailwind-v4-latest** ⭐ — Tailwind CSS **v4.3+** (no v5): setup, `@theme`, upgrade guide. For **full stack** (tokens, CVA, shadcn, Radix, RTL, UAE DLS, Next RSC) use **`tailwind-master`** (12 skills). → `skills/tailwind-v4-latest/GUIDE.md` - **figma-grade-design-system** ⭐ — Design & generate Figma-grade (and better) design systems in code: 3-tier design tokens, modular type scale + 8pt grid, variant×state components (CVA + Radix/React Aria), dark mode/theming, and design-to-code/Figma interop. Use for top-tier design quality. → `skills/figma-grade-design-system/GUIDE.md` - **elite-ui-ux-design-system** ⭐ — World-class product UI/UX: Apple/Stripe/Linear/Notion/Raycast/VisionOS DNA, glassmorphism 2.0, fintech dashboards, AI copilot panels, Framer Motion, multi-panel workspaces, WCAG AA+, Lighthouse 95+. Never average UI. → `skills/elite-ui-ux-design-system/GUIDE.md` - **ultra-hd-visual-rendering** ⭐ — Razor-sharp "8K-grade" rendering: vector-first SVG, devicePixelRatio canvas/WebGL, AVIF/WebP srcset, OKLCH/P3 wide-gamut color, variable-font optical sizing, hairline borders, and 2–4×/300DPI exports. → `skills/ultra-hd-visual-rendering/GUIDE.md` - **award-winning-ui-effects** ⭐ — Awwwards/FWA-tier, never-seen-before UI: WebGL/shaders (Three.js/R3F/OGL), mesh/aurora gradients, glassmorphism, 3D, scroll storytelling (GSAP/Lenis), kinetic type, micro-interactions, View Transitions — all at 60fps with reduced-motion/a11y fallbacks. → `skills/award-winning-ui-effects/GUIDE.md` - **advanced-forms-architecture** ⭐ — Foundation for all advanced forms: Zod schema (client+server), React Hook Form, validation timing, security (CSRF, rate-limit, honeypot), WCAG a11y, error UX — read first for any form work. → `skills/advanced-forms-architecture/GUIDE.md` - **form-patterns-by-use-case** ⭐ — Production patterns per form type: registration, login, password reset, onboarding, profile/settings, contact, checkout, survey, application/KYC, booking, admin CRUD — fields, validation, security, and flows. → `skills/form-patterns-by-use-case/GUIDE.md` - **multi-step-dynamic-forms** — Multi-step wizards, conditional show/hide fields, field arrays, cascading selects, async validation, file uploads, branching surveys, and save/resume drafts. → `skills/multi-step-dynamic-forms/GUIDE.md` - **accessibility-auditing** — Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse. → `skills/accessibility-auditing/GUIDE.md` - **anthropic-algorithmic-art** — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields,... → `skills/anthropic-algorithmic-art/GUIDE.md` - **anthropic-canvas-design** — Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create ... → `skills/anthropic-canvas-design/GUIDE.md` - **anthropic-frontend-design** — Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples in... → `skills/anthropic-frontend-design/GUIDE.md` - **anthropic-slack-gif-creator** — Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me ... → `skills/anthropic-slack-gif-creator/GUIDE.md` - **anthropic-theme-factory** — Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifac... → `skills/anthropic-theme-factory/GUIDE.md` - **anthropic-web-artifacts-builder** — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state ma... → `skills/anthropic-web-artifacts-builder/GUIDE.md` - **converting-css-modules-to-tailwind** — Migrate CSS Modules (.module.css/.module.scss) to Tailwind utility classes. Handles styles object removal, className interpolation, composition, and global overrides. → `skills/converting-css-modules-to-tailwind/GUIDE.md` - **converting-css-to-tailwind** — Convert plain CSS stylesheets to Tailwind CSS utility classes. Handles selectors, media queries, pseudo-classes, custom properties, and animations. → `skills/converting-css-to-tailwind/GUIDE.md` - **cursor-skills-webdesign** — Web design and frontend rules for Cursor — HTML, CSS, JavaScript, React, Vue, Angular, responsive design, and accessibility. Use for frontend or web design work. → `skills/cursor-skills-webdesign/GUIDE.md` - **dark-mode-testing** — Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues. → `skills/dark-mode-testing/GUIDE.md` - **responsive-testing** — Open the app in Cursor's browser at multiple viewport sizes, screenshot each, and report any layout breakage. → `skills/responsive-testing/GUIDE.md` - **ui-ux-pro-max** — Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 15 technology stacks. → `skills/ui-ux-pro-max/GUIDE.md` - **using-ui-stack** — Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components. → `skills/using-ui-stack/GUIDE.md` - **vercel-composition-patterns** — React composition patterns that scale. Use when refactoring components with → `skills/vercel-composition-patterns/GUIDE.md` - **vercel-react-best-practices** — React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance pat... → `skills/vercel-react-best-practices/GUIDE.md` - **vercel-react-view-transitions** — Guide for implementing smooth, native-feeling animations using React's View Transition API (`` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this ski... → `skills/vercel-react-view-transitions/GUIDE.md` - **vercel-web-design-guidelines** — Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". → `skills/vercel-web-design-guidelines/GUIDE.md` ## Pairs well with **`color-design-master`** — AI color harmony (Artist-Engineer): OKLCH palettes, WCAG, semantic roles, LLM palette prompts. **`tailwind-master`** — dedicated hub for the complete Tailwind v4 production stack (tokens → components → gov UAE DLS). ## Note These bundled skills are intentionally not registered as separate Cursor skills (their files are `GUIDE.md`, not `SKILL.md`) so only this master appears in the skills list. Read the relevant `GUIDE.md` on demand.