How to use the Product Proof SaaS agent skill

What the skill makes the agent do

When the skill is active, the agent follows a design playbook for SaaS and AI product pages. The page is organized around one user friction, a hero with a product stage that shows one complete outcome, and a workflow that explains input, processing, draft, edit, approval and publish states.

The skill also sets visual rules: white-to-pale-blue surfaces, near-black text, thin borders, 12–16px radii, one cool signal color, and black primary actions. It includes motion defaults such as 160–220ms control feedback and reduced-motion handling, plus a validation checklist for keyboard use, focus, contrast, 200% zoom and mobile wrapping.

• Pricing comparisons with aligned limits, usage units and footnotes
• FAQ answers linked from ambiguous plan terms
• Removal of invented customers, outcomes, security claims and metrics

Install the skill from the download ZIP

Download the ZIP for this skill from the page where you found this guide. Unzip it so that the product-proof-saas folder, which contains SKILL.md, is placed in your skills directory.

For a personal install, unzip into ~/.claude/skills/. For a single project, unzip into the project's .claude/skills/ folder so the skill applies only to that repository.

You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP there.

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

Trigger the skill with natural requests

You do not need a special command. Describe the landing page you want and mention the kind of proof you need. The skill's description covers requests about pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules, honest pricing comparisons and FAQ handoffs.

The demo prompts in the package name the skill directly with $product-proof-saas. Using that name makes the trigger explicit.

• Use $product-proof-saas to create an original SaaS landing page where an honest, deterministic workflow demo is the central proof.
• Redesign our AI product homepage so the hero shows the prompt-to-output flow, with every sample state labeled.
• Build a pricing section for our SaaS that aligns usage limits and links ambiguous plan terms to FAQ answers.

Examples of what to ask for

The package includes a demo prompt that recreates an editorial-workflow demo as a standalone index.html. The requested stage shows editable input, a deterministic sample output, a selected direction, version context, progress, and an explicit Sample · not published label.

The skill asks for the run action to move through processing and ready states without pretending to contact a model. Reference links for a Verseo template are listed in REFERENCES.md, but you should treat them as reference material, not as code to copy.

What you need and safety notes

The skill lists no requirements. It does not run scripts and does not use the network. Its files are agents/openai.yaml, demo/index.html, demo/PROMPT.md, REFERENCES.md and SKILL.md.

Because the skill runs no scripts and makes no network calls, the risk is mainly in the generated page content. Review any sample data, claims, prices and outputs before publishing, and remove anything that is not real or not clearly labeled as a sample.

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

Tips for better results

Give the agent your real product workflow, real limits and real prices. The skill replaces placeholders, but it cannot know what your product does unless you tell it.

If you have no real outputs, ask for a clearly labeled sample workflow instead of fabricated results. The skill itself says to avoid fake dashboards, fake typing and unlabeled sample output.

• Name the user friction in one sentence before you start.
• Ask for the reduced-motion and keyboard checks to be included in the result.
• Ask the agent to run the validation checklist against the finished page.