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

Henry, a developer, created a reusable Claude Code Skill using a SKILL.md file to help Claude generate frontend UI that avoids generic AI design patterns. The skill provides rules for typography, colors, layout, responsive design, interaction states, and accessibility, and can be added to any project by creating a .claude/skills/frontend-design directory.

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. A Claude Code Skill is a reusable set of instructions for a specific type of work. For example, you can create a skill for: 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. 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 Now create the skill file: touch .claude/skills/frontend-design/SKILL.md Your project should now look something like this: your-project/ ├── .claude/ │ └── skills/ │ └── frontend-design/ │ └── SKILL.md ├── src/ ├── package.json └── README.md The important file here is: SKILL.md This is where we will put our instructions. Open the file: code .claude/skills/frontend-design/SKILL.md 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. This is already enough to create a useful starting skill. 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. 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 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. The second prompt gives Claude a much better direction. Your SKILL.md lets you keep those rules available for the project. 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 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. 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. The important part is: Follow the frontend-design skill. Now Claude has both: That is much better than putting the same 20 design instructions into every prompt. 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. 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. 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; } You do not need a big animation system. Small details like these can make a UI feel much more complete. 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. This is much better than simply saying: Make it responsive. You are telling Claude exactly what to check. 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. You do not need hundreds of rules. Keep the important ones. Claude needs clear instructions, not a huge design textbook. Words like: Make it beautiful. Make it modern. Make it premium. Make it awesome. are not very useful on their own. Explain what those words mean for your project. 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. Always include mobile checks in your skill. A frontend design skill should not only think about desktop screens. A design can look good and still be difficult to use. Add simple checks for: These things matter. 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 You do not need a complicated system. A small skill with good rules can already make your workflow much better. 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.