js-skills: teaching Claude my conventions
I packaged my UX rules, my writing voice and my illustration style as Claude Code skills – so agentic coding on my projects works to my standards, not the model's defaults.
If an AI is going to work on my projects, it should work to my standards. The problem is that standards live in your head – so I wrote mine down, as Claude Code skills, and now every session starts already knowing how I do things.
A skill is just a markdown instruction pack that Claude loads when the task matches. Write your conventions once and they apply forever, instead of being re-explained (badly, from memory, at 11pm) every time.
js-skills is my collection, packaged as a plugin with its own marketplace. It installs with two commands and updates with a git push:
/plugin marketplace add slaterjohn/js-skills
/plugin install js-skills@slaterjohnWhat's in it
- ux-guidelines – my rules for forms and data-loading UIs. Labels, hints, validation, error summaries, skeletons, optimistic updates, and the accessibility behaviour each pattern requires. If you've read my Bad Habits series, you know where these came from.
- john-writing-style – my tone of voice. This one was built by having Claude read every article on this site and pull out what makes the writing mine: verdict-first openings, because-lists, honest caveats, the odd dry aside. It quotes my real paragraphs as calibration, so drafts can be checked against the genuine article.
- john-article-image-prompts – my illustration style. Claude inspected the artwork across my posts – flat vector UI shapes, one bold background colour, text always greeked as grey bars – and distilled it into a prompt template for ChatGPT's image generator.
Does the image one actually work?
The hero at the top of this post came from a prompt the skill wrote. So did this one:
The hard part of AI image generation isn't getting something pretty, it's getting consistency. The skill encodes the rules my artwork actually follows – one background colour, one accent, soft shadows, and absolutely no words (image models love adding words) – so a new hero looks like it belongs next to ones I made by hand six years ago.
Why bother?
Because this is how agentic coding stays mine. I've written about how I use AI on this site: I direct, review and test; Claude implements. Skills are the "direct" part made permanent – the standards get applied before I ever review, which means review time goes on the work, not on correcting the same defaults again.
It's the same lesson as every design system I've worked on, including building EKM's UIFW: write the convention down once, and consistency stops depending on memory.
The code is public on GitHub – the skill format is plain markdown, so it's readable even if you never install it. If you work with Claude Code and have conventions you're tired of repeating, steal the structure.
Quick answers
- What is js-skills?
- A Claude Code plugin containing John Slater's personal skills – UX guidelines, writing tone of voice and article illustration style – hosted in its own marketplace on GitHub so it installs with two commands and updates with a git push.
- What is a Claude Code skill?
- A markdown instruction pack the AI loads when a task matches it. Instead of re-explaining your conventions every session, you write them once and every future session applies them.
- Did AI write the skills' rules?
- The conventions are John's – Claude helped extract them by reading all of his published articles and artwork, then John reviewed and corrected the results. The tone-of-voice skill quotes his real writing as calibration.
