Use the Claude front-end design skill

Claude Skills are powerful. Anthropic released a front-end design skill recently. It's just one page of instructions in a Markdown file, but it completely transforms Claude's ability to design beautiful UIs.

For example, I wanted to make a simple spaced repetition app to help me learn Cuban Salsa figures.

Here's the output without the front-end design skill:

And here's the output with the front-end design skill:

And if I ask for something more fun:

Not perfect, but good enough to bring joy.

The skill is now included by default on the Claude consumer app and Claude Code. Just make sure to say "use your front-end design skill", as it doesn't always activate when it should.

Anthropic's blog post explains why this works so well.

Appendix 1. The prompt I used

Voice dictation, vibe coding FTW:

All right, I'd like to make a little spaced repetition style app to help me learn Salsa figures. I'm going to give you a CSV file which has the name of a Salsa move, and then a YouTube video link which shows me the move. What I want is to just have the kind of spaced repetition style cards so you know I will see the name of the move and then I press SPACE PAR or CLICK or TAP and then it will show me the video. This can be a really simple HTML one pager. I want it to look nice so please do something fun, but do **not** use your front end design skill. But the logic can be super simple: we can just randomly load the cards every time the page loads, we can just sort them randomly, and there's no need to track state or remember anything.

I provided a CSV file with the figure names and links to YouTube videos that demonstrate the figures. So I flip the cards, I get the video.