How to use the Pricing Page Template agent skill

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

An agent skill is a folder of instructions and supporting files that an AI agent can read when a task matches it. This skill is named pricing-page and is listed under the prototype category with a sales scenario. Its SKILL.md file describes the layout the agent should follow.

When asked, the agent produces one HTML page containing a header with a monthly/annual toggle, three plan cards (Free, Pro and Enterprise) with the middle plan highlighted as popular, a full feature comparison table that uses checkmarks, dashes and differences per plan, an FAQ built with details and summary elements, and a closing call-to-action at the bottom.

• The skill is a template and style guide, not a tool that changes anything on its own.
• The folder includes an example.html file that shows the expected look.
• The skill's own aspect hint suggests a desktop width of 1440.

Install the Pricing Page skill

Download the ZIP for the pricing-page skill from this page. You have two options for installing it.

Option one is to unzip the folder into your personal skills directory at ~/.claude/skills/. Option two is to unzip it into a project's .claude/skills/ directory so that it applies only to that project.

Option three is to upload the ZIP in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.

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

Trigger the skill with a natural request

You do not need a special command. Describe the page you want in plain language and mention pricing, plans or a pricing page. The skill's tags include pricing, plans and 定价, which describe its purpose.

A good request names the product and the tiers you have in mind, so the agent can fill the template sensibly. Remember that the template invents plan names and prices, so treat the output as a mockup and replace the content with your own.

• Example: Make a pricing page for my note-taking app with three tiers.
• Example: Mock up a SaaS pricing page with a monthly/annual toggle and a feature comparison table.
• Example: Create a pricing page layout I can show my team before we build the real one.

What you need before you start

The skill lists no requirements. It does not run scripts and does not use the network, so there is nothing to configure beyond installing the folder.

Because the skill does not connect to billing, the page will not reflect your real prices or plans unless you edit it yourself.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Safety notes before you publish

The template is static. It invents plan names and prices, which could mislead visitors if you publish it unchecked. Replace every plan name, price, and feature with verified details from your own billing and product data.

The skill contains no legal or compliance wording for subscriptions. If your page needs terms, refund language or other compliance text, you must write or review that yourself.

• Do not publish sample prices or plan names as real offers.
• Add your own subscription and legal wording where it is required.

Tips for better results

Ask for one clear change at a time, such as a different plan name or a shorter comparison table, so you can check each edit. Open example.html alongside the agent's output to compare the look.

Use the output as a starting HTML structure for developers or as a visual reference for designers exploring three-tier layouts.

• Compare the output against example.html to check the expected look.
• Edit the plan names and feature rows to match your product before sharing.
• Keep a note of which numbers are placeholders.