Two Claude Code skills are named prototype. Which one is in your project?
Two Claude Code skills share the name prototype, and they do different jobs. Matt Pocock's version picks between a one-file HTML demo for testing logic and UI variants on a real route. Emil Kowalski's version only builds UI variants behind a fixed picker, and it never runs unless you call it. Check the frontmatter to see which one you have.
We run Skillselion, an independent directory of agent skills for Claude Code, Codex, Cursor and other coding agents. We are not affiliated with Anthropic, OpenAI, Cursor, Matt Pocock or Emil Kowalski. For this post we read both files at upstream HEAD on Oct 14, 2026: mattpocock/skills skills/engineering/prototype/SKILL.md (last changed Aug 19, 2026) and emilkowalski/skills skills/prototype/SKILL.md (last changed Sep 15, 2026). We did not benchmark their output.
How popular is each prototype skill?
The Matt Pocock skill has 933,678 installs and the Emil Kowalski skill has 146,217 (skills.sh, Oct 14, 2026). That is about 6.4 installs of the first for every one of the second. The repos have 290,182 and 46,059 GitHub stars, both MIT (GitHub API, Oct 14, 2026). Stars count the whole repo, not this one skill.
Both listings are in our catalog: Matt Pocock's prototype skill on Skillselion and Emil Kowalski's prototype skill on Skillselion. The longer write-up is our guide to picking a prototype skill for Claude Code.
How do you tell which prototype skill you installed?
Open the installed SKILL.md and read the frontmatter. The two descriptions do not look alike.
Matt Pocock's starts with:
> "Build a throwaway prototype to answer a design question."
Emil Kowalski's ends with:
> "Only runs when explicitly invoked; it does not trigger on its own."
The second file also sets disable-model-invocation: true. If you see that line, you have the Emil Kowalski version.
This matters because both declare name: prototype, so both answer to /prototype. The Claude Code skills docs resolve a clash by location: "Enterprise over personal, and personal over project." A copy in ~/.claude/skills/ beats one in the repo's .claude/skills/. If a teammate installed one globally and the repo ships the other, the two of you get different skills from the same command.
What does the Matt Pocock prototype skill build?
It settles one question first, from your prompt, the surrounding code or by asking: is this about logic or about looks? The file names the two branches:
> "Does this logic / state model feel right?"
That branch builds "a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs)". It has no framework and no server, and a non-developer can open it by double-click.
> "What should this look like?"
That branch renders several UI variants on one route, switched by a ?variant= search param, a floating bottom bar and the arrow keys. Its UI.md prefers mounting variants on a page that already exists, because "A throwaway route on its own is a vacuum: every variant looks fine in isolation."
Six rules cover both branches. Rule 6 is the one to read twice: commit the prototype "to a throwaway branch, out of main", and keep only the validated decision on main.
What does the Emil Kowalski prototype skill build?
One thing: several versions of one UI piece, behind a picker you flip through. The picker comes from PICKER.md, which tells the agent to copy its markup and CSS verbatim, so it looks the same in every project. Number keys and the arrow keys switch variants, R replays entrance motion, and the choice persists in a ?v= URL param.
The file states its limits up front. It does not review existing UI ("that's review-animations"), plan fixes ("that's improve-animations") or choose dependencies ("that's pick-ui-library"). Each of those is a separate skill in the same repo:
- review-animations skill listing, source on GitHub
- improve-animations skill listing, source on GitHub
- pick-ui-library skill listing, source on GitHub
How do the two compare side by side?
| | Matt Pocock prototype | Emil Kowalski prototype |
|---|---|---|
| Questions it answers | Logic or UI | UI only, one component per run |
| Default variants | 3, cap 5 | 3, up to 5 |
| Switcher | ?variant=, bottom bar, arrow keys | Fixed dark pill, ?v=, number keys, arrows, R |
| Where variants live | On the existing route when possible | Isolated route or standalone HTML file |
| Auto-invoked by Claude | Can be, when its description fits the task | No, disable-model-invocation: true |
| After the choice | Losers go to a throwaway branch | Winner is integrated, prototype surface deleted |
Which prototype skill should you install?
Name the question first. If it is "does this state machine survive the awkward cases", only the Matt Pocock skill has a branch for it. If it is "what should this page look like next to the real header and data", the Matt Pocock UI branch fits too. If it is "which of three toasts feels right, motion included", the Emil Kowalski skill is the narrower tool. It also holds every variant to the author's motion rules, such as sub-300ms UI motion and animating only transform and opacity.
Pick one per project. If you want both, rename one copy's folder and its name field, for example to ui-variants, so the two commands do not collide.
For the step before building, the prototype-strategy skill from owl-listener/designer-skills helps choose fidelity and method. It has 1,955 installs (skills.sh, Oct 14, 2026), and its source is on GitHub.
FAQ
Does the Emil Kowalski prototype skill run by itself?
No. Its frontmatter sets disable-model-invocation: true. The Claude Code docs say this keeps the description out of context and loads the full skill only when you invoke it. Type /prototype with a description, or x5 after it for five variants.
Does the Matt Pocock prototype skill write tests?
No, on purpose. Rule 4 says "No tests, no error handling beyond what makes the prototype _runnable_". UI.md tells you to rewrite the winner properly when you fold it into real code.
Where can I compare other UI skills?
The frontend design skills ranked by installs cover the field, and the frontend design category on Skillselion lists the rest. To start variants from a defined style, browse the UI design skills hub. For the authors' other skills, see the guide to Emil Kowalski's Claude Code skills and the map of Matt Pocock's skills.
Last updated: Oct 14, 2026.
10 comments
Mentions
Does your AI-built UI survive a long name or an empty list? Emil Kowalski's break-ui catalog has ready test cases for missing avatars, narrow layouts and more. Free, MIT-licensed: github.com/emilkowalski/skills/blob/main/skills/b… #WebDev
Run this skill workflow over the weekend on your app: /remove-animations → /improve-animations → /animation-performance It removes unnecessary, annoying animations, improves existing ones, and makes sure they are performant, free wins. emilkowalski/skills
Just noticed my skills repo is at 50,000 stars and 2,7 million downloads, thanks! More skills coming soon, you’ll like them. emilkowalski/skills
📌영상 속 도구 링크 [CH1 AI 디자인 스킬] 프론트엔드 디자인: github.com/anthropics/skills/tree/main/skills/fro… UI UX 프로 맥스: nextlevelbuilder/ui-ux-pro-max-skill 테이스트 스킬: Leonxlnx/taste-skill 홀마크: Nutlope/hallmark 임페커블: pbakaus/impeccable (impeccable.style) [CH2 작업공간] 구글 스티치: stitch.withgoogle.com 오픈디자인: nexu-io/open-design [CH3 웹 인터랙션] 에밀 코왈스키 스킬: emilkowalski/skills 리액트 비츠: reactbits.dev (DavidHDev/react-bits) 키프레임 갤러리: keyframe.gallery [CH4 모션그래픽] 리모션: remotion.dev (remotion-dev/remotion) 하이퍼프레임즈: heygen-com/hyperframes 클로드 모션: claude.com 어썸 오푸스 5.5 비디오스: yihui-dev/awesome-opus5-5-videos
개발자들이 선택한 깃허브 디자인·모션 도구 TOP 14 웹사이트 UI 디자인부터 인터랙션, 모션그래픽, 3D 애니메이션까지. 깃허브에서 인기 있고 실제로 쓸 만한 AI 디자인 스킬과 도구 14개를 네 챕터로 정리했습니다. 필요한 챕터만 골라 보세요. 00:00 인트로 00:19 CH1 AI 디자인 스킬 00:19 프론트엔드 디자인 (Anthropic) 00:45 UI UX 프로 맥스 01:11 테이스트 스킬 01:33 홀마크 01:57 임페커블 02:28 CH2 작업공간 02:31 구글 스티치 02:55 오픈디자인 03:19 CH3 웹 인터랙션 03:22 에밀 코왈스키 애니메이션 스킬 03:49 리액트 비츠 04:09 키프레임 갤러리 04:23 CH4 모션그래픽 04:27 리모션 04:44 하이퍼프레임즈 05:06 클로드 모션 05:32 어썸 오푸스 5.5 비디오스 05:51 마무리 ▶ 영상 속 도구 링크 [CH1 AI 디자인 스킬] 프론트엔드 디자인: github.com/anthropics/skills/tree/main/skills/fro… UI UX 프로 맥스: nextlevelbuilder/ui-ux-pro-max-skill 테이스트 스킬: Leonxlnx/taste-skill 홀마크: Nutlope/hallmark 임페커블: pbakaus/impeccable (impeccable.style) [CH2 작업공간] 구글 스티치: stitch.withgoogle.com 오픈디자인: nexu-io/open-design [CH3 웹 인터랙션] 에밀 코왈스키 스킬: emilkowalski/skills 리액트 비츠: reactbits.dev (DavidHDev/react-bits) 키프레임 갤러리: keyframe.gallery [CH4 모션그래픽] 리모션: remotion.dev (remotion-dev/remotion) 하이퍼프레임즈: heygen-com/hyperframes 클로드 모션: claude.com 어썸 오푸스 5.5 비디오스: yihui-dev/awesome-opus5-5-videos [en-US] TOP 14 GitHub Design & Motion Tools Chosen by Developers From website UI design to interactions, motion graphics, and 3D animation. We have organized 14 popular and practically useful AI design skills and tools from GitHub into four chapters. Pick only the chapters you need. 00:00 Intro 00:19 CH1 AI Design Skills 00:19 Frontend Design (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Web Interactions 03:22 Emil Kowalski Animation Skills 03:49 React Beats 04:09 Keyframe Gallery 04:23 CH4 Motion Graphics 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Awesome Opus 5.5 Videos 05:51 Wrap-up ▶ Links to tools in the video [CH1 AI Design Skills] Frontend Design: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [CH2 Workspace] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [CH3 Web Interactions] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Keyframes Gallery: keyframe.gallery [CH4 Motion Graphics] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Awesome Opus 5.5 Videos: yihui-dev/awesome-opus5-5-videos [id] 14 Alat Desain & Motion GitHub Pilihan Para Developer Mulai dari desain UI situs web hingga interaksi, grafis gerak, dan animasi 3D. Kami telah mengorganisir 14 keterampilan dan alat desain AI yang populer dan praktis dari GitHub ke dalam empat bab. Pilih hanya bab yang Anda butuhkan. 00:00 Pendahuluan 00:19 CH1 Keterampilan Desain AI 00:19 Desain Frontend (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Interaksi Web 03:22 Keterampilan Animasi Emil Kowalski 03:49 React Beats 04:09 Galeri Keyframe 04:23 CH4 Grafis Gerak 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Video Awesome Opus 5.5 05:51 Penutup ▶ Tautan ke alat dalam video [CH1 Keterampilan Desain AI] Desain Frontend: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [Ruang Kerja Bab 2] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [Interaksi Web Bab 3] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Galeri Keyframes: keyframe.gallery [Grafik Gerak CH4] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Video Awesome Opus 5.5: yihui-dev/awesome-opus5-5-videos
@emilkowalski 5 years ago: can you write a debounce function today: do you understand 'debounce' as a concept The vocabulary and ability to navigate the conceptual space has become more important than the code. Case in point 😁 github.com/emilkowalski/skills/blob/main/skills/a…
Try this skill workflow over the weekend, it’s pretty good: /find-animation-opportunities → /animate → /review-animations emilkowalski/skills
Two Claude Code skills are named prototype. Which one is in your project? Two Claude Code skills share the name prototype, and they do different jobs. Matt Pocock's version picks between a one-file HTML demo for testing logic and UI variants on a real route. Emil Kowalski's version only builds UI variants behind a fixed picker, and it never runs unless you call it. Check the frontmatter to see which one you have. We run Skillselion, an independent directory of agent skills for Claude Code, Codex, Cursor and other coding agents. We are not affiliated with Anthropic, OpenAI, Cursor, Matt Pocock or Emil Kowalski. For this post we read both files at upstream HEAD on Oct 14, 2026: mattpocock/skills skills/engineering/prototype/SKILL.md (last changed Aug 19, 2026) and emilkowalski/skills skills/prototype/SKILL.md (last changed Sep 15, 2026). We did not benchmark their output. How popular is each prototype skill? The Matt Pocock skill has 933,678 installs and the Emil Kowalski skill has 146,217 (skills.sh, Oct 14, 2026). That is about 6.4 installs of the first for every one of the second. The repos have 290,182 and 46,059 GitHub stars, both MIT (GitHub API, Oct 14, 2026). Stars count the whole repo, not this one skill. Both listings are in our catalog: Matt Pocock's prototype skill on Skillselion and Emil Kowalski's prototype skill on Skillselion. The longer write-up is our guide to picking a prototype skill for Claude Code. How do you tell which prototype skill you installed? Open the installed SKILL.md and read the frontmatter. The two descriptions do not look alike. Matt Pocock's starts with: > "Build a throwaway prototype to answer a design question." Emil Kowalski's ends with: > "Only runs when explicitly invoked; it does not trigger on its own." The second file also sets disable-model-invocation: true. If you see that line, you have the Emil Kowalski version. This matters because both declare name: prototype, so both answer to /prototype. The Claude Code skills docs resolve a clash by location: "Enterprise over personal, and personal over project." A copy in ~/.claude/skills/ beats one in the repo's .claude/skills/. If a teammate installed one globally and the repo ships the other, the two of you get different skills from the same command. What does the Matt Pocock prototype skill build? It settles one question first, from your prompt, the surrounding code or by asking: is this about logic or about looks? The file names the two branches: > "Does this logic / state model feel right?" That branch builds "a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs)". It has no framework and no server, and a non-developer can open it by double-click. > "What should this look like?" That branch renders several UI variants on one route, switched by a ?variant= search param, a floating bottom bar and the arrow keys. Its UI.md prefers mounting variants on a page that already exists, because "A throwaway route on its own is a vacuum: every variant looks fine in isolation." Six rules cover both branches. Rule 6 is the one to read twice: commit the prototype "to a throwaway branch, out of main", and keep only the validated decision on main. What does the Emil Kowalski prototype skill build? One thing: several versions of one UI piece, behind a picker you flip through. The picker comes from PICKER.md, which tells the agent to copy its markup and CSS verbatim, so it looks the same in every project. Number keys and the arrow keys switch variants, R replays entrance motion, and the choice persists in a ?v= URL param. The file states its limits up front. It does not review existing UI ("that's review-animations"), plan fixes ("that's improve-animations") or choose dependencies ("that's pick-ui-library"). Each of those is a separate skill in the same repo: - review-animations skill listing, source on GitHub - improve-animations skill listing, source on GitHub - pick-ui-library skill listing, source on GitHub How do the two compare side by side? | | Matt Pocock prototype | Emil Kowalski prototype | |---|---|---| | Questions it answers | Logic or UI | UI only, one component per run | | Default variants | 3, cap 5 | 3, up to 5 | | Switcher | ?variant=, bottom bar, arrow keys | Fixed dark pill, ?v=, number keys, arrows, R | | Where variants live | On the existing route when possible | Isolated route or standalone HTML file | | Auto-invoked by Claude | Can be, when its description fits the task | No, disable-model-invocation: true | | After the choice | Losers go to a throwaway branch | Winner is integrated, prototype surface deleted | Which prototype skill should you install? Name the question first. If it is "does this state machine survive the awkward cases", only the Matt Pocock skill has a branch for it. If it is "what should this page look like next to the real header and data", the Matt Pocock UI branch fits too. If it is "which of three toasts feels right, motion included", the Emil Kowalski skill is the narrower tool. It also holds every variant to the author's motion rules, such as sub-300ms UI motion and animating only transform and opacity. Pick one per project. If you want both, rename one copy's folder and its name field, for example to ui-variants, so the two commands do not collide. For the step before building, the prototype-strategy skill from owl-listener/designer-skills helps choose fidelity and method. It has 1,955 installs (skills.sh, Oct 14, 2026), and its source is on GitHub. FAQ Does the Emil Kowalski prototype skill run by itself? No. Its frontmatter sets disable-model-invocation: true. The Claude Code docs say this keeps the description out of context and loads the full skill only when you invoke it. Type /prototype with a description, or x5 after it for five variants. Does the Matt Pocock prototype skill write tests? No, on purpose. Rule 4 says "No tests, no error handling beyond what makes the prototype _runnable_". UI.md tells you to rewrite the winner properly when you fold it into real code. Where can I compare other UI skills? The frontend design skills ranked by installs cover the field, and the frontend design category on Skillselion lists the rest. To start variants from a defined style, browse the UI design skills hub. For the authors' other skills, see the guide to Emil Kowalski's Claude Code skills and the map of Matt Pocock's skills. Last updated: Oct 14, 2026.
These UI animation skills are truly elite stuff emilkowalski/skills
Added a new /animation-performance skill to my skills repo. It includes lots of rules that agents seem to skip at the moment. Think about keeping blur() values small, not animating shadows, not swapping CSS variables frequently, etc. emilkowalski/skills