How do I install the Better UI UX skill?

Run npx skillmds@latest add mert-byt/better-ui-ux in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Better UI UX safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Better UI UX?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Better UI UX free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Better UI UX?

Mert-byt (@mert-byt) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Better UI UX by mert-byt — Agent Skill

Name: Better UI UX
Author: Mert-byt

Better UI UX

UI/UX design system generation, palette search, component transformation, icon generation, and GSAP animation injection. Use when building or styling web UIs, choosing color palettes, generating icons, adding animations, or transforming component styles. Skip for non-UI tasks.

Mert-byt Updated Sep 17, 2026

File contents

Better-UI-UX

Note: The full skill instructions are in .claude/skills/better-ui-ux/SKILL.md. This file provides a brief summary for tools that look for a root-level SKILL.md.

What This Skill Provides

6 MCP tools for AI-assisted UI/UX design:

suggest_design_system — Curated design system candidates with fonts, colors, icons
search_palettes — BM25 search over 172 palettes with synonym expansion
transform_component — Glassmorphism, neumorphism, brutalist, minimal animated styles
generate_logo — Minimal geometric SVG logos
generate_icon — 114 parametric SVG icons from shape primitives with animation
inject_animations — GSAP + ScrollTrigger scroll-reveal, stagger, pin-scrub, hover-lift

When to Use

Use this skill when the user asks for:

Design system generation or color palette selection
Component styling or UI transformation
Icon or logo generation
Scroll or hover animation setup
"Make it look better" / "improve the design"

Elicitation

Before generating, gather: project type, industry, mood, audience, colors to avoid, stack, brand colors.

Full Documentation

See .claude/skills/better-ui-ux/SKILL.md for complete instructions, tool reference, and examples.

Frequently asked questions