Skills for Claude Code

48 Claude Code skills,
from first brief to finished code

KMRVID Claude Skills covers the whole loop of building a site with Claude Code: set up a project, build mockups, sync design tokens with Figma, clean up Tailwind, polish Astro code and check accessibility. Each skill is a folder of instructions (SKILL.md) that you call with a slash command. Run them one at a time, or chain them with the pipeline skills.

Get the skills · $137 Browse the skills

Try before you buy: free skills and free trial runs on Agensi

Skill folders, each with a SKILL.md

Categories, by stage of the work

PDF

README with dependencies and free lifetime updates

Repeatable steps instead of re-writing prompts

Built for designers and frontend developers who work with Astro, Vite or React and Tailwind CSS v4, and who want to save a procedure that worked and call it again.

Skills for each stage of the work

Setup, mockups, Figma integration, Tailwind, finishing and pipeline design, each as a folder you call with a slash command.

A README you can work from

A PDF with a skill reference, the dependency list, ready-made skill combinations and install steps ships alongside the ZIP.

Readable, adaptable skills

Every skill is plain text, so you can also use the package as study material for writing your own.

The skills that run inside Figma’s Design Agent are not in this package. They are in KMRVID Figma Skills, and in the bundle together with these.

Get started in 3 steps

01
Copy the skills
Into ~/.claude/skills/ for all projects, or into .claude/skills/ for one project. A skill in the project folder wins over the same name in the global one.
02
Call one with a slash command
Type /skill-name in Claude Code, for example /create-mockup or /tailwind-review. The skill asks for whatever it needs, so running it with no arguments is fine.
03
Install what it depends on
Some skills call other skills. Install the ones a skill depends on in the same place. Every dependency is listed below and in the README.

Flows that work well together

Build a UI and polish it

create-mockup
mobile-polish
visual-polish
click-to-fix

Build from scratch without Figma, add mobile navigation, self-correct from screenshots, then fix details by clicking in the browser.

Requirements first

brief-me
create-mockup

A BRIEF.md written up front is picked up automatically by the mockup skills, so the copy and structure reflect your target and goal.

Astro quality pass

tailwind-review
astro-doctor

Tidy Tailwind classes and accessibility structure, then optimize component granularity.

Check a Figma design before coding

figma-audit
figma-workflow

Score the frame, fix low-scoring spots in Figma, then implement, review and optimize through sub-agents.

Keep code and Figma tokens in sync

tailwind-to-figma
figma-to-tailwind

Start from whichever side is the master: code to Figma, or Figma back to Tailwind @theme.

Hand it to a pipeline

mockup-pipeline
lp-pipeline
full-pipeline

The pipeline skills chain setup, mockup, mobile polish, Tailwind review and Astro checks for you.

The 48 skills

Grouped by stage of the work. Each card shows what the skill does and which other skills it needs. See thecomparison tablefor how these relate to the Figma Design Agent edition.

Setup and pipelines

6 skills

Start a new project

setup-astro

Start a new Astro v7 project with Tailwind v4.

setup-html

Start a vanilla HTML project (Vite + TypeScript) with Tailwind v4.

setup-react

Start a React (Vite + TanStack Router) project with Tailwind v4.

mockup-pipeline

Setup → DESIGN.md → type scale → mockup, end to end.

One of: setup-astrosetup-htmlsetup-react
Required: create-design-mdtailwind-typescale
One of: create-mockupcreate-multi-mockup
Optional: japanese-web-guidelinecognitive-ui-design

full-pipeline

mockup-pipeline, then mobile-polish, tailwind-review, astro-doctor (Astro projects) and a fresh DESIGN.md.

Required: mockup-pipelinemobile-polishtailwind-reviewcreate-design-md
Optional: astro-doctorcode-to-figma

Also needs everything mockup-pipeline depends on.

lp-pipeline

A landing-page pipeline that pre-selects sections from your purpose and target.

One of: setup-astrosetup-htmlsetup-react
Required: create-mockuptailwind-reviewmobile-polish
Optional: japanese-web-guidelinecognitive-ui-designcode-to-figma

Mockup creation

8 skills

Build UI from code

Combine create-mockup / create-multi-mockup with cognitive-ui-design (breaks generic layouts) and japanese-web-guideline (corrections for Japanese sites) to avoid the generic look AI tends to produce.

brief-me

A business-requirements interview that writes BRIEF.md.

create-mockup

Builds a UI from scratch, no Figma needed.

Optional: brief-mecode-to-figmajapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

create-multi-mockup

Several structurally different layouts side by side.

Optional: create-mockupbrief-mejapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

create-jp-lp

For Japanese commercial landing pages. Its SKILL.md is in Japanese.

Required: create-mockup
Optional: brief-mejapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

mobile-polish

Mobile navigation, small-screen type and touch targets.

create-design-md

Generates a DESIGN.md in Google’s design.md format.

export-design-md

Turns DESIGN.md into a visual HTML or Astro page.

rewrite-me

Rewrites page copy to match BRIEF.md.

Required: brief-me
Optional: japanese-web-guideline

If BRIEF.md already exists in the project, brief-me does not need to be installed.

Figma integration

18 skills

Read and write Figma from Claude Code through the Figma MCP (Tailwind-based)

A Figma frame’s structure carries straight into the code. Run figma-audit first, fix low-scoring spots in Figma, then implement, and you will need fewer corrections. Many of these have a counterpart in the Figma Design Agent edition (KMRVID Figma Skills).

figma-audit

Scores how well AI can implement a frame (4 dimensions) and writes a report.

figma-component-audit

Audits component structure and variants.

figma-weather

The figma-audit score, delivered as a weather forecast.

figma-layer-rename

Replaces auto-generated layer names with semantic ones, after confirmation.

figma-tidy-up

Rebuilds a frame with no auto layout into a clean auto-layout hierarchy.

Optional: figma-tokenize

figma-tokenize

Turns hardcoded colors, font sizes and spacing into bound variables.

Optional: figma-layer-rename

figma-componentize

Finds repeated patterns and builds components and variants, with your confirmation.

Optional: figma-tokenize

figma-enhance

Audits an already structured file for further improvements and applies what you approve.

figma-optimize

Pick which of the five clean-up tasks to run; they run in dependency order.

Required: figma-tidy-upfigma-layer-renamefigma-tokenizefigma-componentizefigma-enhance

Calls only the tasks you select. Install them all in the same place.

figma-contrast-check

WCAG AA/AAA contrast per text node, with confirmation-gated auto-fix.

figma-to-tailwind

Figma Variables → Tailwind @theme tokens.

tailwind-to-figma

Tailwind @theme tokens → Figma Variables.

figma-workflow

Figma to working code via sub-agents (implement, review, optimize).

Optional: tailwind-reviewfigma-update-checker

If tailwind-review is not installed, the Tailwind review phase is skipped and the run continues.

figma-pipeline

Figma to a running page: starter, variable sync and implementation in one go.

Required: figma-workflowfigma-to-tailwindcreate-design-md
Optional: figma-audittailwind-to-figma

Also needs everything figma-workflow depends on. figma-to-tailwind, tailwind-to-figma and create-design-md are also bundled with the starter it clones.

figma-update-checker

Detects whether a Figma node changed since the last check.

Optional: figma-workflowfigma-pipelinefigma-update-patch

figma-update-patch

Patches only the part that changed instead of rebuilding the page.

Required: figma-update-checker

code-to-figma

Sends implemented code back to Figma, from a quick capture to full components.

figma-node-checkDeprecated

Deprecated — folded into each skill that used it, as references/known-pitfalls.md.

Tailwind

3 skills

Clean up styling

css-to-tailwind

A fast first pass from plain CSS or Sass to Tailwind v4, with a list of what still needs manual work.

Optional: tailwind-review

tailwind-review

Review, v3 → v4 migration and accessibility structure checks (code already on Tailwind).

tailwind-typescale

Apply a base size and a named ratio to @theme.

Finishing and quality

11 skills

Raise quality during and after implementation

astro-i18n

Locale routing, translation dictionary and language switcher for an existing Astro project.

html-to-astro

Migrate a plain-HTML project into Astro v7 with Tailwind v4.

Required: setup-astro
Optional: astro-doctorcss-to-tailwind

If the source does not use Tailwind yet, run css-to-tailwind first.

astro-doctor

Astro spec compliance and component granularity.

japanese-web-guideline

Implementation rules for Japanese-language sites.

cognitive-ui-design

Breaks generic layout and color defaults using eye-tracking patterns.

japanese-lp-seasoning

Carousels, full-bleed, scroll animation and vertical text for landing pages.

click-to-fix

Click in the browser to give a visual fix instruction.

visual-polish

Screenshot-based self-correction, up to 5 rounds.

Optional: japanese-web-guideline

polish-me

Report-only design review: measures the running page (desktop + mobile) and pins numbered, evidence-based findings onto it. Edits no source files.

Optional: cognitive-ui-designrewrite-mecreate-jp-lpbrief-me

finish-me

A step-by-step finishing pass over an existing mockup.

Required: rewrite-memobile-polishclick-to-fixtailwind-review
Optional: astro-doctor

Also needs everything rewrite-me depends on.

Pipeline design

2 skills

For designing your own pipelines

pipeline-thinking

A Socratic guide to how skills combine into pipelines.

pipeline-composer

Scans your installed skills and writes a PIPELINE.md proposal.

See the changelog

Good to know

Written for Claude Code (CLI, Desktop and the VS Code extension) on macOS, Linux and Windows (WSL or PowerShell). Using them in another agent such as Cursor or Codex means adapting the Claude-specific parts; the README explains what to change.
Tested on real projects, but agents and tool versions move quickly, so results can vary in your setup. One-to-one troubleshooting is not offered. If something breaks, pass the SKILL.md and the error log to your agent; the skills are plain text and easy to adapt.
A few skills that encode Japanese-specific conventions, such as create-jp-lp, keep their rule text in Japanese. Their questions and reports are in English.

Pricing

KMRVID Claude Skills

All 48 skills, the README (PDF) and free lifetime updates for $137.

$137

One-time purchase on Gumroad

Buy on Gumroad

48 skills for Claude Code
A README (PDF) with a skill reference, dependency list, ready-made combinations and install steps
Free lifetime updates
Plain-text SKILL.md files you can read and adapt

Want the Figma side too?

Figma Design Agent

KMRVID Figma Skills

Custom skills you register in Figma’s Design Agent: requirements, page generation, structure clean-up, accessibility checks and a prompt for your coding agent.

Skills: 30
Includes: README (PDF) + free lifetime updates

$87one-time purchase

Buy on Gumroad See details

Claude Code + Figma Design Agent

KMRVID Skills Bundle

Both editions together. Cheaper than buying them separately.

Skills: 78
Includes: README (PDF) + free lifetime updates

$199one-time purchase

Buy on Gumroad See details

The bundle saves you $25 compared with buying the Claude and Figma editions separately.

About the creator

Masaaki Komori

Independent UI/UX designer and frontend engineer since 2001. Author of numerous web design books in Japan, Figma instructor, and design system consultant specializing in AI-augmented workflows and design tokens. Also ranked among the top 500 all-time most viewed and downloaded creators globally on Unsplash.

FAQ

Frequently asked questions

Which projects is this for?▾

Frontend projects built with Astro, Vite or React and Tailwind CSS v4. Some skills, such as click-to-fix, also work outside that stack, but the package assumes it.

Do the Figma skills here need the Figma edition?▾

No. The Figma integration skills in this package work from Claude Code through the Figma MCP. The Figma edition is a separate set of skills that run inside Figma’s Design Agent.

Does it include video lessons?▾

No. The package contains the skills and a README (PDF).

Can I try something before buying?▾

Some skills are open source on GitHub, and some are free on Figma Community. A selection of the Claude Code skills is also on Agensi: some are free, and every paid skill has 3 free trial runs. See the creator page on Agensi.

Can I buy a single skill?▾

Yes. A selection of the Claude Code skills is sold individually on Agensi. Some are free, and every paid skill has 3 free trial runs. The Figma edition is not sold there. See the creator page on Agensi for what is available. This package includes all 48 Claude Code skills together.

Can I edit the skills?▾

Yes. Every skill is plain text, so you can adapt it to your own workflow, or read it to learn how to write your own.

48 skills for $137

Buy on Gumroad See the bundle with the Figma edition

48 Claude Code skills,from first brief to finished code