Learn the Top 5 Claude Code Skills I Use in Real Development
AI links open with a title + excerpt (these tools can't fetch the page themselves) — use "Copy full article" to paste the complete text for a fuller summary.
Introduction
This article demonstrates how to use Claude Code skills, using the five I used most in my own projects this month.
The list is not a guess. I counted the skill calls in my Claude Code session logs from October 2026. The work behind them was real: redesigning the Techkolors sites, building data dashboards, and adding Claude API features.
Claude Code Skills
A skill is a packaged set of instructions for one kind of task. It is a folder with a SKILL.md file, and sometimes scripts and reference data beside it. Claude Code reads the skill's short description all the time. It loads the full instructions only when the task needs them.
You can call a skill by name with a slash command, for example /run. Or you can just describe the job, and Claude Code picks the matching skill from its description. Skills that come from a plugin carry the plugin name as a prefix, such as data:build-dashboard.
Features
- Repeatable expertise for one job, written once and reused.
- Loaded only when needed, so your context stays small.
- Called by name, or picked automatically from the description.
- Shareable through plugins, so a team uses the same version.
With the following steps, you can see where each skill fits.
- UI/UX Pro Max for interface work.
- Design Taste Frontend for public pages.
- Build Dashboard for data pages.
- Dataviz for every chart.
- Claude API for AI features.
UI/UX Pro Max for Interface Work
ui-ux-pro-max was my most used skill by a wide margin: 19 calls in a month.
It is a design reference that Claude can search. It holds UI styles, colour palettes, font pairings, UX guidelines, chart types and stack-specific notes. Claude looks up what fits before it writes markup.
Use it when you are building, reviewing or fixing any screen. That includes layout, spacing, typography, colour, accessibility and responsive behaviour.
A typical prompt from my sessions:
Review the My Trading page. Fix the spacing, the table on mobile, and the contrast in dark mode.
My best suggestion is to use it for review, not only for new screens. It is good at finding the small things you stopped seeing, like a tap target that is too small or a grey that fails contrast.
Design Taste Frontend for Public Pages
design-taste-frontend is for public-facing pages. That means landing pages, marketing sites, portfolios and product pages.
Its job is to stop the page from looking generic or "AI-made". It picks an art direction first: the idea, composition, type, palette and section layout. Then it builds the page and checks screenshots in a real browser. It fixes what it sees and checks again.
Use it when a page must look designed, not templated. I used it to redesign the Techkolors website and the public EdgeLab pages.
Important: a redesign is a strong opinion. I also ran it on Netkalon and on Trader's Desk, and I reverted both. The output was well made, but it was not the brand I wanted. Keep a redesign local and review it before you push.
Build Dashboard for Data Pages
data:build-dashboard comes from the data plugin. It builds an interactive HTML dashboard with KPI cards, charts, filters and tables.
Use it when you have query results or a JSON report and you want one page people can open and read. I used it for my trading dashboards and for backtest summaries.
A typical prompt:
Build a dashboard from this backtest JSON. Show total P&L, max drawdown, win rate, and a monthly P&L table.
It gives you a working first version fast. You still own the numbers. Check that every KPI matches the source data before you share the page.
Dataviz for Every Chart
dataviz is the skill to load before you write any chart code. It works with any library: Chart.js, Recharts, matplotlib, plotly or plain SVG.
It teaches Claude a method rather than a style. It picks the right chart form for the question. It uses a colour formula that works in light and dark mode. It sets clear rules for axes, legends, tooltips and stat tiles.
Use it when a chart, sparkline, heatmap or KPI row is part of the task. I used it together with Build Dashboard, and on its own when a single chart on an existing page looked wrong.
The difference is easy to see. Without it, you often get a rainbow of series colours and a legend far from the lines. With it, the charts across a site look like one system.
Claude API for AI Features
claude-api is a reference for the Claude API and the Anthropic SDK. It covers model IDs, pricing, parameters, streaming, tool use, prompt caching and token counting.
Use it when your code calls Claude. Claude Code then works from the current reference, not from memory. Model names and parameters change, and an old model ID is an easy bug to ship.
I used it when I added AI features to my projects. The AI summary button on this blog is the same kind of feature.
Warning: keep your API key in the server-side settings. Never put it in frontend code. The skill helps with the code. Where the secret lives is still your job.
The Honest Part
Two things to know before you install a lot of skills.
First, this list shows what I build, not what is "best". I do a lot of frontend and data work, so design and chart skills win. A backend developer would get a very different top five. design:user-research was used as often as Design Taste Frontend, but I left it out because it was for research, not code.
Second, a skill does not replace review. Two of my redesigns were reverted. The dashboards still needed their numbers checked. A skill makes the first version much better. It does not make it final.
Conclusion
In this article we learned what a Claude Code skill is, how it is called, and where five of them fit in real development work: UI/UX Pro Max for screens, Design Taste Frontend for public pages, Build Dashboard and Dataviz for data, and Claude API for AI features.
Start with the one that matches the work you repeat most.
Reference
Comments
Be the first to comment.