How to use the Web Prototype agent skill (prototype-web)

What is an agent skill and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file and optional supporting files. When installed, the agent can load these instructions when a request matches the skill, so it follows a specific workflow instead of guessing.

The prototype-web skill asks the agent to produce a complete product landing page. The planned sections are a top navigation bar with logo, links and a CTA button; a hero with a large headline, subheading, two CTA buttons and a visual placeholder; three to six feature cards; a how-it-works section with steps; social proof such as a logo wall or testimonials; optional pricing; and a footer.

The skill also asks for hover effects on feature cards, a navigation bar that changes colour on scroll, scroll-into-view entrance animations written in pure CSS, responsive layouts with a single column on mobile and multiple columns on desktop, and FAQ items that expand using the HTML details element. The output is meant to look close to launch-ready, so treat it as a high-fidelity mockup.

Install the Web Prototype skill

Download the prototype-web ZIP from this page. The package contains three files: SKILL.md, example.html and example.md.

To install it for your user account, unzip the folder into ~/.claude/skills/. To install it for a single project, unzip it into that project's .claude/skills/ folder. Either way, the skill folder should contain SKILL.md at its top level.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with a natural request

You do not need a special command. Describe the product and ask for a landing page or clickable prototype, and the agent should pick up the skill when the request matches its description. Naming the product, its audience and the sections you want gives the agent more to work with.

Good requests say what the product does, who it is for and what the call to action should be. You can also mention whether you want pricing included, since that section is optional.

• Make a clickable landing page prototype for a project management tool for small agencies, with pricing.
• Create a responsive SaaS homepage mockup for an invoicing app. Hero CTA should say Start free trial.
• Build a functional web prototype for a note-taking product with features, how it works and an FAQ.

What you get: the example page

The package includes example.html and example.md to show the expected style and structure. The example.md file describes a fictional SaaS product called Inkstack with a positioning line, core features, testimonials, a three-tier pricing list and a call to action. The example.html file is the matching rendered page.

Use these examples to judge the output before you ask for your own. Your result should follow a similar layout: navigation, hero, features, steps, social proof, optional pricing and footer.

Requirements and safety notes

The skill lists no required tools or dependencies. It does not run scripts and does not use the network, according to its listing. The output is static page markup written in native HTML and CSS.

The skill cannot give you real backend features. Sign-up forms, payments and data storage are not handled, so anything that needs those must be built separately. Copy, claims, prices and accessibility all still need human review before a page goes live.

• No dependencies or required tools are listed.
• No scripts are run and no network access is used.
• Review copy, claims, pricing and accessibility before publishing.

Tips for better prototypes

Give the agent real copy where you have it. The skill is designed for a polished look, so placeholder text can make the page feel more finished than it is; swap in your actual claims and prices before anyone relies on them.

Ask for one change at a time when refining. Requests such as making the hero headline larger or adding a pricing section tend to be easier to check than rewriting the whole page.

• Supply your product name, audience and CTA wording up front.
• Check the mobile layout, not just desktop, since the skill targets both.
• Keep the single HTML file as your starting point for a front-end build.