Claude Code Skills I Use Every Day

February 18, 2026

claude-code · ai-tools · developer-tools

I've been using Claude Code as my primary coding assistant for a while now. One feature that quietly changed how I work is skills — Markdown files that give Claude domain-specific knowledge it wouldn't otherwise have.

Instead of re-explaining my preferences every session ("use Tailwind, follow accessibility guidelines, match this design style"), I install a skill once and Claude just knows.

I've tried a bunch of them, but three have stuck around in my daily workflow. Here's what they are, where to get them, and how I actually use them.

UI/UX Pro Max

By: nextlevelbuilder | Install: npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

This one is wild. It gives Claude access to a searchable database of design knowledge — 50+ UI styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 different tech stacks (React, Next.js, Vue, Svelte, SwiftUI, Flutter, and more).

The way I use it: I describe what I'm building — "landing page for a fintech dashboard, dark mode" — and the skill generates a complete design system. Not just colors and fonts, but the right UI pattern, effects to use, and anti-patterns to avoid. It works through a Python CLI that searches a local CSV database:

python3 skills/ui-ux-pro-max/scripts/search.py "fintech dashboard dark" --design-system -p "TradeView"

The part that saves me the most time is the pre-delivery checklist. Before Claude hands over any UI code, it checks for things I used to miss constantly:

  • Emoji used as icons instead of SVGs
  • Missing cursor-pointer on clickable elements
  • Insufficient contrast in light mode (glass cards with bg-white/10 instead of bg-white/80)
  • Content hidden behind fixed navbars
  • Hover states that cause layout shift

These are the small things that make UI look unprofessional, and having them caught automatically is huge.

Mintlify

By: Mintlify (official) | Install: npx skills add https://mintlify.com/docs

This is Mintlify's official skill for Claude Code. If you use Mintlify for documentation (and you should — it's excellent), this skill teaches Claude everything about the platform.

The main thing it does for me is eliminate guesswork around docs.json configuration. Mintlify has a lot of navigation patterns — groups, tabs, anchors, dropdowns, products, versions — and picking the right one used to mean reading through docs every time. The skill has a decision table baked in so Claude picks the right pattern based on the project.

It also enforces Mintlify's writing standards automatically. No marketing language ("powerful", "seamless"), sentence case for headings, second-person voice, code blocks always have language tags. And it reminds Claude to run mint broken-links and mint validate before finishing — two checks I'd forget otherwise.

Mintlify also pioneered the skill.md standard where any docs site can auto-serve a skill file at /.well-known/skills/default/skill.md. There's a good write-up on it on their blog.

Vercel Web Guidelines

By: Vercel Labs | Install: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

This one is a code review skill. You point it at a file or pattern, and Claude checks your UI against 100+ rules from Vercel's Web Interface Guidelines.

I use it as a last pass before shipping frontend code. A few rules that have caught real bugs for me:

  • Never outline-none without a focus replacement — easy to miss, breaks keyboard navigation for everyone
  • touch-action: manipulation — prevents the 300ms double-tap zoom delay on mobile
  • overscroll-behavior: contain in modals — stops the page behind from scrolling when you hit the edge of a modal
  • font-variant-numeric: tabular-nums for number columns — keeps digits aligned instead of jumping around

The output is terse and VS Code-clickable:

src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Modal.tsx:12 - missing overscroll-behavior: contain

No preamble, no explanation paragraphs. Just file:line - issue. I appreciate that.

The vercel-labs/agent-skills repo also has skills for React best practices, React Native, and composition patterns — worth checking out if you're in that ecosystem.

How to Set Up Skills

If you haven't used skills before, here's the quick version.

Skills are .md files with YAML frontmatter. Claude reads the description field to decide when to activate the skill. Two levels:

Project-level — shared with your team via git:

.claude/skills/my-skill.md

Global — available across all your projects:

~/.claude/skills/my-skill.md

You can install community skills with the npx skills add CLI, or just drop .md files in those directories manually. No configuration needed beyond that.

Where to Find More

If you're using Claude Code and haven't tried skills yet, start with one of the three above. They're the ones that made the biggest difference for me.