{"slug": "how-to-create-your-own-claude-code-skill-with-skill-md", "title": "How to Create Your Own Claude Code Skill With SKILL.md", "summary": "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.", "body_md": "If you use Claude Code for frontend development, you may have noticed something.\n\nClaude can write code very fast.\n\nBut sometimes the UI it creates looks too similar to other AI-generated websites.\n\nYou get the same rounded cards, large headings, soft shadows, gradients, and simple layouts.\n\nThe code works.\n\nBut the design does not always feel like your own.\n\nHi everyone, I am Henry.\n\nIn this article, I want to show you a simple way to fix that.\n\nWe are going to create our own **Claude Code Skill** using a `SKILL.md`\n\nfile.\n\nYou do not need to build a complicated tool.\n\nYou just need a clear set of instructions that Claude can follow when working on your frontend.\n\nA Claude Code Skill is a reusable set of instructions for a specific type of work.\n\nFor example, you can create a skill for:\n\nFor this tutorial, we will create a **frontend design skill**.\n\nOur goal is simple:\n\nHelp Claude create clean frontend UI without falling back to the same generic design patterns.\n\nInstead of writing the same design rules in every prompt, we can keep them inside a skill.\n\nOpen your project in the terminal.\n\nCreate a `.claude`\n\nfolder if you do not already have one.\n\nThen create a skills folder:\n\n```\nmkdir -p .claude/skills/frontend-design\n```\n\nNow create the skill file:\n\n```\ntouch .claude/skills/frontend-design/SKILL.md\n```\n\nYour project should now look something like this:\n\n```\nyour-project/\n├── .claude/\n│   └── skills/\n│       └── frontend-design/\n│           └── SKILL.md\n├── src/\n├── package.json\n└── README.md\n```\n\nThe important file here is:\n\n```\nSKILL.md\n```\n\nThis is where we will put our instructions.\n\nOpen the file:\n\n```\ncode .claude/skills/frontend-design/SKILL.md\n```\n\nNow add the following:\n\n```\n---\nname: frontend-design\ndescription: Build clean, responsive frontend UI with simple and consistent design rules.\n---\n\n# Frontend Design Rules\n\nBefore writing UI code:\n\n1. Understand the purpose of the page.\n2. Think about the target user.\n3. Keep the layout simple and easy to scan.\n4. Use consistent spacing.\n5. Use a clear typography hierarchy.\n6. Avoid unnecessary cards and containers.\n7. Do not use gradients unless they have a clear purpose.\n8. Do not add icons just to fill empty space.\n9. Keep buttons clear and easy to understand.\n10. Make the design responsive.\n\n## Typography\n\n- Use a clear heading hierarchy.\n- Keep paragraphs easy to read.\n- Avoid very long lines of text.\n- Use font weight to create hierarchy.\n- Do not make every heading extremely large.\n\n## Colors\n\n- Use a small color palette.\n- Keep the main action easy to recognize.\n- Do not use several bright colors without a reason.\n- Make sure text has enough contrast.\n\n## Layout\n\n- Use whitespace to separate important sections.\n- Avoid putting every element inside a card.\n- Keep related content together.\n- Make the main action easy to find.\n\n## Responsive Design\n\nAlways check:\n\n- Desktop\n- Tablet\n- Mobile\n\nDo not simply shrink the desktop layout.\n\nChange the layout when needed.\n\n## Interaction\n\nAdd useful states for:\n\n- Hover\n- Focus\n- Active\n- Disabled\n- Loading\n- Error\n- Success\n\nKeep animations small and useful.\n\nDo not animate every element.\n\n## Accessibility\n\n- Use semantic HTML.\n- Add labels to form fields.\n- Keep keyboard navigation working.\n- Use visible focus states.\n- Add useful alt text to meaningful images.\n\n## Before Finishing\n\nCheck the page for:\n\n- Inconsistent spacing\n- Weak typography\n- Too many cards\n- Unnecessary animations\n- Poor mobile layout\n- Low color contrast\n- Missing button states\n- Missing form states\n\nRemove anything that does not help the user.\n```\n\nThis is already enough to create a useful starting skill.\n\nYou may be wondering why we need so many simple rules.\n\nBecause Claude needs a direction.\n\nFor example, if you only say:\n\n```\nBuild a modern landing page.\n```\n\nClaude has to guess what “modern” means.\n\nIt may create something like:\n\n```\nHuge heading\n↓\nGradient background\n↓\nTwo buttons\n↓\nThree rounded cards\n↓\nMore cards\n↓\nTestimonials\n↓\nPricing\n```\n\nThere is nothing technically wrong with that.\n\nBut it can feel very predictable.\n\nNow compare that with:\n\n```\nBuild a developer-focused landing page.\n\nKeep the layout compact.\n\nUse strong typography.\n\nAvoid large gradients.\n\nDo not put every feature inside a card.\n\nUse simple colors.\n\nKeep animations subtle.\n\nMake the main action clear.\n```\n\nThe second prompt gives Claude a much better direction.\n\nYour `SKILL.md`\n\nlets you keep those rules available for the project.\n\nThe real power comes when you make the skill fit your project.\n\nFor example, maybe you are building a developer tool.\n\nYou can add:\n\n```\n## Project Style\n\nThis product is made for developers.\n\nThe UI should feel:\n\n- Technical\n- Clean\n- Fast\n- Focused\n\nAvoid:\n\n- Large decorative illustrations\n- Heavy gradients\n- Excessive rounded cards\n- Large empty hero sections\n- Unnecessary animations\n```\n\nNow Claude has a much clearer idea of the product.\n\nYou can do the same thing for a SaaS app, portfolio, dashboard, ecommerce site, or documentation website.\n\nNow you can work on your frontend normally with Claude Code.\n\nFor example:\n\n```\nBuild a pricing page for this project.\n\nFollow the frontend-design skill.\n\nKeep the layout simple and easy to scan.\n\nMake the pricing options clear on mobile.\n```\n\nThe important part is:\n\n```\nFollow the frontend-design skill.\n```\n\nNow Claude has both:\n\nThat is much better than putting the same 20 design instructions into every prompt.\n\nThis is one of my favorite ways to use a skill.\n\nDo not only use Claude to create the page.\n\nUse it to review the page too.\n\nTry:\n\n```\nReview the current page using the frontend-design skill.\n\nFind problems with:\n\n- spacing\n- typography\n- colors\n- responsive layout\n- button states\n- accessibility\n- unnecessary UI\n\nFix the problems directly.\n```\n\nThis gives Claude a clear checklist.\n\nInstead of:\n\nMake this page better.\n\nyou are asking for specific checks.\n\nThat usually produces a much more useful result.\n\nOne thing I always check is button and form states.\n\nFor example, a simple button should not only have a normal state.\n\nIt should also handle:\n\n```\n.button:hover {\n  opacity: 0.9;\n}\n\n.button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.button:active {\n  transform: scale(0.98);\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n```\n\nYou do not need a big animation system.\n\nSmall details like these can make a UI feel much more complete.\n\nA page can look great on a laptop and still be bad on a phone.\n\nSo I usually add a separate mobile check.\n\nFor example:\n\n```\nReview this page at mobile width.\n\nCheck:\n\n- Navigation\n- Headings\n- Buttons\n- Cards\n- Forms\n- Horizontal scrolling\n- Text size\n- Section spacing\n\nFix anything that feels difficult to use.\n```\n\nThis is much better than simply saying:\n\nMake it responsive.\n\nYou are telling Claude exactly what to check.\n\nOnce your frontend is ready, you need somewhere to run and test it.\n\nA VPS gives you more control over your environment, especially when you are working with your own applications, APIs, databases, or development tools.\n\nIf you are looking for a VPS for your web projects, ** HelloServer** is one option you can check.\n\nChoose your VPS based on what your project actually needs instead of paying for resources you will never use.\n\nFor a small project, start simple.\n\nAs your traffic and workload grow, you can increase your resources.\n\nYou do not need hundreds of rules.\n\nKeep the important ones.\n\nClaude needs clear instructions, not a huge design textbook.\n\nWords like:\n\n```\nMake it beautiful.\nMake it modern.\nMake it premium.\nMake it awesome.\n```\n\nare not very useful on their own.\n\nExplain what those words mean for your project.\n\nIf you tell Claude:\n\nUse 17 different rules for every button, card, heading, icon, and animation.\n\nthe skill can become difficult to maintain.\n\nStart small.\n\nAdd rules when you find a real problem.\n\nAlways include mobile checks in your skill.\n\nA frontend design skill should not only think about desktop screens.\n\nA design can look good and still be difficult to use.\n\nAdd simple checks for:\n\nThese things matter.\n\nMy workflow is basically this:\n\n```\nCreate SKILL.md\n      ↓\nAdd project design rules\n      ↓\nBuild the first version\n      ↓\nAsk Claude to review it\n      ↓\nFix layout and typography\n      ↓\nCheck mobile\n      ↓\nCheck accessibility\n      ↓\nPolish interactions\n```\n\nYou do not need a complicated system.\n\nA small skill with good rules can already make your workflow much better.\n\nClaude Code is already very good at writing code.\n\nThe problem is that the first UI it creates can sometimes look too generic.\n\nA custom **Claude Code Skill** gives you a simple way to add your own design rules.\n\nYou can tell Claude what to use.\n\nYou can tell it what to avoid.\n\nYou can give it rules for typography, spacing, colors, responsive design, accessibility, and interaction.\n\nAnd the best part is that you can keep improving the skill as you work.\n\nIf you notice Claude making the same mistake again and again, don't just fix that page.\n\nAdd a rule to your `SKILL.md`\n\n.\n\nThen Claude can follow that rule the next time too.\n\nThat's what makes a custom skill useful.\n\n**Write the rule once. Reuse it across your project.**\n\nIf you use Claude Code, I would love to know what kind of custom skill you would build first. Let me know in the comments.", "url": "https://wpnews.pro/news/how-to-create-your-own-claude-code-skill-with-skill-md", "canonical_source": "https://dev.to/arthur_luca/how-to-create-your-own-claude-code-skill-with-skillmd-3555", "published_at": "2026-08-20 15:30:25+00:00", "updated_at": "2026-08-20 15:44:55.449606+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "generative-ai", "ai-tools"], "entities": ["Claude Code", "Henry"], "alternates": {"html": "https://wpnews.pro/news/how-to-create-your-own-claude-code-skill-with-skill-md", "markdown": "https://wpnews.pro/news/how-to-create-your-own-claude-code-skill-with-skill-md.md", "text": "https://wpnews.pro/news/how-to-create-your-own-claude-code-skill-with-skill-md.txt", "jsonld": "https://wpnews.pro/news/how-to-create-your-own-claude-code-skill-with-skill-md.jsonld"}}