A collection of custom skills for Claude Code (the changelog is at the end of this document).

Every skill in this collection is ready to use in real production work as-is — but that’s not the only way to use it. If you want to see how a skill like this is put together, treat this repo as study material for skill-building itself. Feel free to take a skill apart, adapt it to your own environment together with an AI, or evolve it into an original skill that streamlines your own workflow. We hope you put this collection to good use.

※ Some registered skills have dependencies on other skills to run correctly. See the “Skill Dependencies” section in the middle of this document and copy any required companion skills into your skills folder as well.

Placing each skill directly under ~/.claude/skills/ in your home directory lets you call it as a /skill-namecommand from anywhere on your machine. Copying it into .claude/skills/ under your working project’s document root makes it available only within that directory. Local takes priority over global, so if a skill with the same name exists in both places, the local one is used.

The skills below assume a frontend project built with Vite, using code generation and data integration via the Figma MCP, and the tech stack covered in each course. Styling is assumed to be Tailwind CSS v4, chosen for its strong AI compatibility and ease of editing. Some skills (such as click-to-fix) also work outside that environment, but the skills are primarily designed for Vite + Tailwind v4 projects.

A higher-tier Claude model is not always better than a lower-tier one. For a typical site, mockup skills work perfectly well with “Sonnet.” Higher-tier models help with complex UI or nuanced design intent, but they are not required.

Notes

Cross-platform (OS) behavior These skills are written with both Mac and Windows in mind, but environment-dependent errors can still occur. Windows in particular has several possible shells (PowerShell, Command Prompt, WSL), so some steps may fail depending on which one you’re using. If that happens, just tell Claude directly: “fix this error and make the skill work in my current environment.”

Differences in environment setup / MCP server names Depending on how Claude Code or Claude Desktop is installed and configured, the internal names of the features a skill calls (MCP servers, external tool integrations, etc.) may differ. We’ve tried to keep the wording as generic as possible, but if a call fails, ask Claude to check your config files or adjust the skill accordingly.

Claude Code updates Claude Code moves fast and ships frequent updates. Behavior may change between versions, and it may not always match what’s shown in a given course video — thanks for your understanding.

Using these skills with other AI agents If you want to use these skills with an agent other than Claude Code (e.g. Codex, Cursor), you’ll need to adapt anything Claude-specific — tool names, skill-invocation syntax, etc. — to your own environment.

Node.js version Also check the Node.js version in your skill-execution environment. Vite 8 requires at minimum Node 20.x or 22.x. Depending on your specific tech-stack combination, 22.x or higher may be required — if a skill or environment doesn’t run, try upgrading Node.js.

Quick Skill Reference

If you want to generate code starting from a Figma design, focus on the Figma group. If you want to build a mockup up from code, focus on the Setup + Mockup Creation groups.

Setup — spin up a new project

Mockup Creation — build UI from code