Claude Skills for Designers (Part 2)

So, in my last video, I showed you some of the best Claude skills for designers, and you guys loved that video. But

here's the thing. Skills are super useful and super popular right now. So,

a ton of new ones have been coming out just over the past couple weeks, and some of them are game-changing add-ons to the ones that I showed you before.

So, in this video, I'm covering seven skills that I strongly believe every designer using Claude needs to know about. Some of these completely change

about. Some of these completely change how Cloud Code approaches design, whether you lean more into UI, UX, or even design engineering. All right,

let's get into it. So, this first one is called Impeccable, built by the original creator of jQuery UI. And I want to start here because it's actually the most direct evolution of the front-end design skill that I covered last time.

The original front-end design skill is great at generating UI that doesn't look like AI slop. And Impeccable takes that and goes way further. It's an enhanced version of that skill. Same anti- AI

slop philosophy baked in, but it adds something that the original doesn't have. over 20 slash commands. And these

have. over 20 slash commands. And these

are where it gets really interesting for designers. It comes with slash commands

designers. It comes with slash commands like optimize, harden, polish, normalize. And this way, you don't have

normalize. And this way, you don't have to count on Claw to use the skill to the best of its ability. You can tell it specifically what you want it to do using these slash commands. If you want your UI to look quieter, use slash

quieter. Want it boulder? Just use

quieter. Want it boulder? Just use

/bolder. It's really that simple. And it

comes with so many different slash commands that you can use regardless of what type of UI you're working on. Now,

delight in particular is a really impressive command. It adds moments of

impressive command. It adds moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. And as we continue to lean so heavily into AI to build user interfaces that people actually use in

the real world, it's so important for us to figure out how to make them more delightful and unique. Because by

default, artificial intelligence, no matter what model you're using, is not great at that. The whole idea behind Impeccable is that great design prompts require design vocabulary and how that vocab translates visually and

functionally. All these commands put

functionally. All these commands put that language in your hands, even if you've never formally studied design.

But the one I keep coming back to is critique. In the latest version,

critique. In the latest version, critique literally scores your UI against Neielson's 10 usability heristics, tests it against different user personas, and assesses cognitive load. So, this enables you to do a lot

load. So, this enables you to do a lot more than just design a pretty interface. It's even useful for

interface. It's even useful for designers diving deep into user experience by giving you a structured design review. You can get this skill

design review. You can get this skill from impeccable.style.

from impeccable.style.

And you can really quickly put this command in your terminal or any agent that you're using, whether it's cursor, claude code, gemini. So it's not even exclusive to just claude. It's basically

agent agnostic. This next skill is called UIUX Pro Max, which is kind of a mouthful, but this one's different from everything else on this list. It's less

of a design philosophy skill and more of a design intelligence database. When you

install this, Cloud gets access to a searchable catalog of a ton of different UI styles, color palettes, font pairings, UX guidelines, and a lot more.

It also covers 13 different text stacks.

So whether you're building with React, Nex.js, Tailwind, Swift UI, or Flutter, it's got stack specific guidelines for each. So even though this is about UI

each. So even though this is about UI and UX, it's also tailored to those who are building their own designs in code.

The way it works in practice is you describe what you're building and the skill runs parallel searches across all those databases to assemble a tailored design system for your project. It

matches your product type to relevant styles, pulls the right color palette, and recommends font pairings that fit your industry. All of that happens

your industry. All of that happens before Claude even writes a single line of code. If you've ever asked Claude to

of code. If you've ever asked Claude to design something and gotten back a result that technically felt fine, but was just kind of generic, this is why.

Claude was just guessing. The thing is, agents like Claude Code need these skills because they don't understand design the way we do as designers, even though they've been exposed to countless user interfaces. They're understanding

user interfaces. They're understanding and studying these UIs based on lines of code, not visually. UIUX Pro Max gives it an actual reference library to pull from. And the newest version of this

from. And the newest version of this skill actually includes intelligent design system generation for all you designers who build and maintain design systems. And this feature included makes that design system generation happen by

doing all these searches in parallel across its own database every time you work on a project. To get this one, I'll leave the link in the description or just look up UIUX Pro Max. So, this

one's a little different. Emil Kowalsski

is a design engineer. And if you haven't heard of that role, it's a designer that can code or an engineer that has taste to put it simply, which is a more important role than ever in the age of AI generated slop. Emil is known for his

work on animations, micro interactions, and what makes interfaces feel alive.

And he's packaged that knowledge directly into this skill file. So, this

isn't a tool built by a company. It's

one person's expertise, his articles, his principles, his framework for thinking about UI quality, translated into instructions Claude can actually follow. It covers animations, design

follow. It covers animations, design fundamentals performance considerations, and interaction patterns. And the author's

patterns. And the author's recommendation is actually worth following. Don't keep this one always

following. Don't keep this one always on. Use it on a case-byase basis. Drop

on. Use it on a case-byase basis. Drop

it in when you're specifically working on animation, reviewing motion quality, or trying to elevate a component from functional to refined. You can find the link to this skill in the description, or just tell your agent to install Emil

Kowalsski's skill. One command works

Kowalsski's skill. One command works across all the major AI coding tools.

What I like about this one is the idea behind it more than anything else.

Skills are a way to package taste, and Emil happens to have very good taste, but good taste in UI design is not something that you're born with. It

takes lots of practice and exposure to beautiful, practical, realworld user interfaces. And this is where Mobin

interfaces. And this is where Mobin comes in. If you're designing UI and you

comes in. If you're designing UI and you need real world reference and inspiration, Mobin is the best place to go. It's a library of over 500,000

go. It's a library of over 500,000 screenshots of some of the best apps and websites out there. What makes Mobin different from just saving random screenshots is the structure of it. You

can filter by category, search specific UI patterns, and see entire flows end to end, not just individual screens. It's

how I get design inspiration that actually holds up instead of looking at concepts on Dribble that were never actually meant for real users. So, stop

taking screenshots of UIs, start designing like a pro, and join over 2 million modded users. Use the first link in the description to get 20% off.

Moving on to the fourth skill, we have Shad CN UI. And if you haven't heard of it, Shad Cenne is one of the most popular component libraries out there to date. It's what a huge portion of the

date. It's what a huge portion of the web is being built with. buttons,

modalls, forms, data tables, drop downs, pre-built, accessible, and designed to be customized. If you've seen a clean,

be customized. If you've seen a clean, minimal React interface lately, there's a good chance it was built with Shad CN.

The problem is that when you ask Claude to build something using Shad CN, again, it's just guessing. It's working from training data, and that means wrong component names, outdated patterns, and code that you have to debug before it

even works. And of course, as a

even works. And of course, as a designer, you don't want to spend all of your time in that loop. The official

Shad CN skill fixes this. Once

installed, Claude reads your actual project setup, what components you already have, how your files are structured, which framework you're using, and generates code that fits your project correctly the first time. That

means no going back and forth with Claude telling it how Shad CN components should look and function. So, in

practice, you describe the screen you want, and you get components that actually look like Shad CN composed the way Shad Cenne intends without the generic fallback styling Claude usually reaches for. You can find the command to

reaches for. You can find the command to install the skill by looking up shad cenui skill. And something I want to

cenui skill. And something I want to point out is that when you have multiple skills installed that are targeted toward UI design, there's a good chance that Cloud will reference multiple of those skills at once for a single task.

So if you want to stick to a single skill like shad CN for a project, what you can do is just tell it only reference the shad CN UI skill for this project so that it doesn't take instructions from other skills at the

same time, which might skew your output and make it end up not looking like shaden, for example. Now, these last three skills are from u-sklls.com, a set of skills to polish interfaces

built by agents like Claude Code.

They've built what I'd call a quality enforcement layer for your UI. The

interaction design skill specifically focuses on the stuff that separates decent interfaces from ones that feel polished. And it's also particularly

polished. And it's also particularly relevant to design engineer types, but still applicable to the rest of you designers as well. It focuses on hover states, active states, focus rings,

micro interactions, animation timing, touch targets, and even forgiveness patterns. The smaller, more subtle

patterns. The smaller, more subtle things that are super easy to skip when you're moving fast. The skill enforces specific rules. Animations should

specific rules. Animations should trigger within 100 to 150 milliseconds when they should feel immediate.

Transitions should land between 200 and 500 milliseconds. And a bunch of other

500 milliseconds. And a bunch of other very specific instructions about how an interface should feel. So something like this that focuses more on interaction pairs really well with a skill that

focuses more on visual UI design. So if

you appreciate the more subtle details of a UI, you'll be a fan of this one.

Use it when you're polishing a component or building anything with somewhat complex interaction design. It's

essentially a peer reviewer that catches what you missed. You can install this skill and the next two from u-skills.com.

u-skills.com.

Up next, this one is called interface design. This one solves the most

design. This one solves the most annoying problem with AI assisted design. Your agent can forget design

design. Your agent can forget design decisions between sessions, but this plug-in stores your specs, including spacing grids, color palettes, depth strategies, component patterns in a

persistent system.md file that loads

persistent system.md file that loads automatically. And this skill really

automatically. And this skill really comes in handy when you're designing things like dashboards, admin panels, SAS tools, things that are very data heavy. It clearly defines the problem

heavy. It clearly defines the problem that the AI will generate generic output and then elaborates on that and then tells the AI how it can fix this problem. It clearly defines how it

problem. It clearly defines how it should handle and present typography, navigation, data. And with this intent

navigation, data. And with this intent first section before touching any code, it asks me a few questions that are really important for any design project.

Who is this for? What are they doing?

what should it feel like and what's the goal of this type of interface that we're building. So, like I said, this

we're building. So, like I said, this one is more for SAS tools like dashboards. If you're looking for

dashboards. If you're looking for something more tailored to landing pages, something like the front-end design skill would be more relevant for that. This one is for product UI. This

that. This one is for product UI. This

last one that I'll mention really quick is called web design guidelines. This

one is from Verscell Labs, the creators of Nex.js. You just point it at your

of Nex.js. You just point it at your code, a component, a page, your whole project, and it audits everything against a 100 established web interface rules accessibility usability layout

performance, semantic structure. And it

doesn't just flag problems. It tells you where in the file the issue is, what the violation is, and what to fix. Think of

it like running your design through a senior reviewer who knows every WCAG guideline, every usability heristic, and every best practice for production web UI, and actually reads your code instead

of just eyeballing screenshots. So, this

one is less about producing a beautiful, perfect UI in the first place, but instead for when you have an existing web design project and want to make your website completely accessible for the web. So, if you care about

web. So, if you care about accessibility, which you should, this is a perfect skill to use for websites or even apps. Just like the last two, you

even apps. Just like the last two, you can grab the command to install this skill from u-skills.com.

So, that's it for my updated list of Claude skills that designers need. Seven

skills that push Claude from being capable to genuinely useful for design work. The thing I keep coming back to

work. The thing I keep coming back to with all these skills is how you can close the taste gap. Claude is

definitely capable of great output, but by default, it's averaging across everything that it's seen. Skills are

how you stop getting the average and start getting something that reflects how you actually approach and think about design. I'll keep covering new

about design. I'll keep covering new useful skills as they come out. So, if

you've used any that have truly impressed you, let me know in the comments. I'm super curious about what's

comments. I'm super curious about what's working for you guys and what isn't. If

you haven't watched Claude skills for designers part one, that's where you'll find some of the most foundational skills like front-end design and more.

That video is on screen right now, so go watch it if you haven't. I'll see you guys in the next video and subscribe to become a better designer.