Bodymobarez 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/<name>/GUIDE.md (plus any scripts/, data/, references/ next to it).
Workflow:
- Match the user's request to one or more skills in the list below.
- Read that skill's
skills/<name>/GUIDE.mdfor full instructions before acting. - 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) usetailwind-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 (
<ViewTransition>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.