← Blog

Basics2026-10-09

How to choose Claude Code Skills: three kinds for websites and videos

Claude Code Skills fall into three kinds: design guidance that teaches the AI taste, complete websites with assets, and Skills that render video in code. Here is when each fits and how to choose.

First, what a Skill is

A Skill is a set of instructions written as a SKILL.md file that Claude Code, Codex and Cursor can all read. The AI follows its steps and specs, which is more reliable than a one-off prompt. For the full explanation, see What is an AI Skill.

Kind one: design guidance

These Skills do not build a whole website. They teach the AI how to design: choosing typefaces and colors and setting a layout direction, so the result does not look like every other template. Anthropic's public frontend-design Skill on GitHub is one of them. Its description calls it guidance for distinctive, intentional visual design, covering aesthetic direction and typography.

It fits when you already have your own way of working and only want better design quality in the result.

Kind two: complete websites with assets

These Skills hand over a whole package: the design spec, the steps and a demo asset pack. The AI follows them to build a complete website you can edit directly. Sketchry's website Skills are of this kind, covering restaurants, property, brands, stays, photography portfolios and design studios, and each one has a finished demo you can look at first.

It fits when you want a complete website fast and then swap in your own brand, copy and photos, or when you build sites for clients.

Kind three: video rendered in code

Some Skills make video. The AI renders each frame in code and delivers an MP4, a poster and a storyboard, and it can do type cards, data charts, app walkthroughs and event countdowns. Sketchry's marketing video Skills are of this kind, and the free INKFRAME is a good one to try first.

It fits when you need a product intro, an event promo or a short social clip and do not want to edit video yourself.

How to choose

  1. Decide first whether you are making a website or a video.
  2. For a website: pick design guidance to raise quality, or a website Skill with assets to get a finished result.
  3. Open the Skill's demo to confirm the style is what you want, and check that commercial use is stated.
  4. Confirm which AI tools it supports. Sketchry Skills support Claude Code, Codex and Cursor.
  5. When it is done, check the layout once more at phone width.

How to use one

The simplest way is to copy the Skill, paste it into Claude Code, Codex or Cursor and give it your brand name and assets when asked. You can also save it as SKILL.md in the tool's skills folder and call it by name later. Where each tool keeps Skills is covered in how to use Skills.

FAQ

Can I use several Skills at once?

Yes, but let the AI focus on one main workflow at a time. For example, build the site with a complete website Skill first and then fine-tune it with design guidance, so the two sets of instructions do not clash.

Do Skills work in tools other than Claude Code?

SKILL.md is a common format that Claude Code, Codex and Cursor can all read. Sketchry Skills are written for those three tools.

Can I give the result to a client?

That depends on each Skill's license. What you make with a Sketchry Skill can be used in your own or your clients' commercial projects, with no attribution needed.

Do I have to pay to try one?

Not necessarily. Anthropic's public frontend-design Skill is available to anyone, and Sketchry also has free website and video Skills, such as OFFSET STUDIO and INKFRAME.