DEV Community

Cover image for How to Create Your Own Claude Code Skill With SKILL.md
Arthur
Arthur

Posted on

How to Create Your Own Claude Code Skill With SKILL.md

#ai #webdev #frontend #claude

If you use Claude Code for frontend development, you may have noticed something.

Claude can write code very fast.

But sometimes the UI it creates looks too similar to other AI-generated websites.

You get the same rounded cards, large headings, soft shadows, gradients, and simple layouts.

The code works.

But the design does not always feel like your own.

Hi everyone, I am Henry.

In this article, I want to show you a simple way to fix that.

We are going to create our own Claude Code Skill using a SKILL.md file.

You do not need to build a complicated tool.

You just need a clear set of instructions that Claude can follow when working on your frontend.

What Is a Claude Code Skill?

A Claude Code Skill is a reusable set of instructions for a specific type of work.

For example, you can create a skill for:

  • Frontend design
  • Testing
  • Documentation
  • Code review
  • Database work
  • DevOps
  • UI accessibility

For this tutorial, we will create a frontend design skill.

Our goal is simple:

Help Claude create clean frontend UI without falling back to the same generic design patterns.

Instead of writing the same design rules in every prompt, we can keep them inside a skill.

Step 1: Create the Skill Folder

Open your project in the terminal.

Create a .claude folder if you do not already have one.

Then create a skills folder:

mkdir -p .claude/skills/frontend-design
Enter fullscreen mode Exit fullscreen mode

Now create the skill file:

touch .claude/skills/frontend-design/SKILL.md
Enter fullscreen mode Exit fullscreen mode

Your project should now look something like this:

your-project/
├── .claude/
│   └── skills/
│       └── frontend-design/
│           └── SKILL.md
├── src/
├── package.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

The important file here is:

SKILL.md
Enter fullscreen mode Exit fullscreen mode

This is where we will put our instructions.

Step 2: Write Your SKILL.md

Open the file:

code .claude/skills/frontend-design/SKILL.md
Enter fullscreen mode Exit fullscreen mode

Now add the following:

---
name: frontend-design
description: Build clean, responsive frontend UI with simple and consistent design rules.
---

# Frontend Design Rules

Before writing UI code:

1. Understand the purpose of the page.
2. Think about the target user.
3. Keep the layout simple and easy to scan.
4. Use consistent spacing.
5. Use a clear typography hierarchy.
6. Avoid unnecessary cards and containers.
7. Do not use gradients unless they have a clear purpose.
8. Do not add icons just to fill empty space.
9. Keep buttons clear and easy to understand.
10. Make the design responsive.

## Typography

- Use a clear heading hierarchy.
- Keep paragraphs easy to read.
- Avoid very long lines of text.
- Use font weight to create hierarchy.
- Do not make every heading extremely large.

## Colors

- Use a small color palette.
- Keep the main action easy to recognize.
- Do not use several bright colors without a reason.
- Make sure text has enough contrast.

## Layout

- Use whitespace to separate important sections.
- Avoid putting every element inside a card.
- Keep related content together.
- Make the main action easy to find.

## Responsive Design

Always check:

- Desktop
- Tablet
- Mobile

Do not simply shrink the desktop layout.

Change the layout when needed.

## Interaction

Add useful states for:

- Hover
- Focus
- Active
- Disabled
- Loading
- Error
- Success

Keep animations small and useful.

Do not animate every element.

## Accessibility

- Use semantic HTML.
- Add labels to form fields.
- Keep keyboard navigation working.
- Use visible focus states.
- Add useful alt text to meaningful images.

## Before Finishing

Check the page for:

- Inconsistent spacing
- Weak typography
- Too many cards
- Unnecessary animations
- Poor mobile layout
- Low color contrast
- Missing button states
- Missing form states

Remove anything that does not help the user.
Enter fullscreen mode Exit fullscreen mode

This is already enough to create a useful starting skill.

Step 3: Why These Rules Matter

You may be wondering why we need so many simple rules.

Because Claude needs a direction.

For example, if you only say:

Build a modern landing page.
Enter fullscreen mode Exit fullscreen mode

Claude has to guess what “modern” means.

It may create something like:

Huge heading
↓
Gradient background
↓
Two buttons
↓
Three rounded cards
↓
More cards
↓
Testimonials
↓
Pricing
Enter fullscreen mode Exit fullscreen mode

There is nothing technically wrong with that.

But it can feel very predictable.

Now compare that with:

Build a developer-focused landing page.

Keep the layout compact.

Use strong typography.

Avoid large gradients.

Do not put every feature inside a card.

Use simple colors.

Keep animations subtle.

Make the main action clear.
Enter fullscreen mode Exit fullscreen mode

The second prompt gives Claude a much better direction.

Your SKILL.md lets you keep those rules available for the project.

Step 4: Add Project-Specific Rules

The real power comes when you make the skill fit your project.

For example, maybe you are building a developer tool.

You can add:

## Project Style

This product is made for developers.

The UI should feel:

- Technical
- Clean
- Fast
- Focused

Avoid:

- Large decorative illustrations
- Heavy gradients
- Excessive rounded cards
- Large empty hero sections
- Unnecessary animations
Enter fullscreen mode Exit fullscreen mode

Now Claude has a much clearer idea of the product.

You can do the same thing for a SaaS app, portfolio, dashboard, ecommerce site, or documentation website.

Step 5: Use the Skill While Building

Now you can work on your frontend normally with Claude Code.

For example:

Build a pricing page for this project.

Follow the frontend-design skill.

Keep the layout simple and easy to scan.

Make the pricing options clear on mobile.
Enter fullscreen mode Exit fullscreen mode

The important part is:

Follow the frontend-design skill.
Enter fullscreen mode Exit fullscreen mode

Now Claude has both:

  1. Your current request
  2. Your reusable design rules

That is much better than putting the same 20 design instructions into every prompt.

Step 6: Ask Claude to Review the UI

This is one of my favorite ways to use a skill.

Do not only use Claude to create the page.

Use it to review the page too.

Try:

Review the current page using the frontend-design skill.

Find problems with:

- spacing
- typography
- colors
- responsive layout
- button states
- accessibility
- unnecessary UI

Fix the problems directly.
Enter fullscreen mode Exit fullscreen mode

This gives Claude a clear checklist.

Instead of:

Make this page better.

you are asking for specific checks.

That usually produces a much more useful result.

Step 7: Add Real Interaction States

One thing I always check is button and form states.

For example, a simple button should not only have a normal state.

It should also handle:

.button:hover {
  opacity: 0.9;
}

.button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
Enter fullscreen mode Exit fullscreen mode

You do not need a big animation system.

Small details like these can make a UI feel much more complete.

Step 8: Make Claude Check Mobile

A page can look great on a laptop and still be bad on a phone.

So I usually add a separate mobile check.

For example:

Review this page at mobile width.

Check:

- Navigation
- Headings
- Buttons
- Cards
- Forms
- Horizontal scrolling
- Text size
- Section spacing

Fix anything that feels difficult to use.
Enter fullscreen mode Exit fullscreen mode

This is much better than simply saying:

Make it responsive.

You are telling Claude exactly what to check.

Where Should You Host the Project?

Once your frontend is ready, you need somewhere to run and test it.

A VPS gives you more control over your environment, especially when you are working with your own applications, APIs, databases, or development tools.

If you are looking for a VPS for your web projects, HelloServer is one option you can check.

Choose your VPS based on what your project actually needs instead of paying for resources you will never use.

For a small project, start simple.

As your traffic and workload grow, you can increase your resources.

Common Mistakes When Creating a Claude Code Skill

1. Making the Skill Too Long

You do not need hundreds of rules.

Keep the important ones.

Claude needs clear instructions, not a huge design textbook.

2. Using Vague Words

Words like:

Make it beautiful.
Make it modern.
Make it premium.
Make it awesome.
Enter fullscreen mode Exit fullscreen mode

are not very useful on their own.

Explain what those words mean for your project.

3. Adding Too Many Design Rules

If you tell Claude:

Use 17 different rules for every button, card, heading, icon, and animation.

the skill can become difficult to maintain.

Start small.

Add rules when you find a real problem.

4. Forgetting Mobile

Always include mobile checks in your skill.

A frontend design skill should not only think about desktop screens.

5. Forgetting Accessibility

A design can look good and still be difficult to use.

Add simple checks for:

  • Keyboard navigation
  • Focus states
  • Contrast
  • Form labels
  • Semantic HTML

These things matter.

The Simple Workflow I Use

My workflow is basically this:

Create SKILL.md
      ↓
Add project design rules
      ↓
Build the first version
      ↓
Ask Claude to review it
      ↓
Fix layout and typography
      ↓
Check mobile
      ↓
Check accessibility
      ↓
Polish interactions
Enter fullscreen mode Exit fullscreen mode

You do not need a complicated system.

A small skill with good rules can already make your workflow much better.

Final Thoughts

Claude Code is already very good at writing code.

The problem is that the first UI it creates can sometimes look too generic.

A custom Claude Code Skill gives you a simple way to add your own design rules.

You can tell Claude what to use.

You can tell it what to avoid.

You can give it rules for typography, spacing, colors, responsive design, accessibility, and interaction.

And the best part is that you can keep improving the skill as you work.

If you notice Claude making the same mistake again and again, don't just fix that page.

Add a rule to your SKILL.md.

Then Claude can follow that rule the next time too.

That's what makes a custom skill useful.

Write the rule once. Reuse it across your project.

If you use Claude Code, I would love to know what kind of custom skill you would build first. Let me know in the comments.

Top comments (1)

Collapse
 
marcusykim profile image
Marcus Kim •

Do not simply shrink the desktop layout" is the right standard; checking navigation, forms, horizontal scrolling, and section spacing at mobile width turns "responsive" into something testable. I'd also separate the SKILL.md rules used to generate the page from a rendered acceptance checklist covering focus-visible, disabled, loading, error, and success states. Otherwise the same model can review its own work through the same assumptions that produced it, so the real leverage comes from pairing reusable instructions with viewport screenshots and explicit pass/fail criteria.