Skip to content

DirectorySkills

Robot product site: 1440, made in this run
Run 1Robot product site“Build a product page for our drone, the Kestrel One. Specs in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Robot Product Site

A brushed-silver product site for a robot or hardware device: product hero, figures, tabs, two models and preorder.

$9.99once, yours to keep

Builds a hardware product site with a brushed-silver style into your own project: brushed silver gradients with graphite type and a teal light, the robot large beside its price and preorder button, key figures, feature tabs, two models to add, questions and a preorder sign-up. Plain HTML, CSS and JavaScript by default, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots the result at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, missing focus styles and motion that ignores reduced-motion settings. Use when a robot, smart home device, drone or other hardware product needs a product or preorder page, or someone asks for a silver, metallic, futuristic product look.

By RecaplyUpdated 11 Nov

Install Robot Product Site

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/robot-product-site/install.md and follow it to install the robot-product-site skill from robot-product-site.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Robot Product Site is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A hardware product site with a brushed-silver style
  • Checked at phone and desktop widths

Good fit

  • When a robot, smart home device, drone or other hardware product needs a product or preorder page

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Build a product page for our drone, the Kestrel One. Specs in brief.md.

It said back

The Kestrel One page is built as plain HTML, CSS and JS in index.html, style.css and script.js. The automated check passes at 390, 768 and 1440 px with no sideways overflow, small text, missing alt text, contrast or focus problems. I looked at the 1440 and 390 screenshots and they read cleanly. I changed the closing headline colour after those screenshots and re-ran the check, but didn't look at the screenshots again.

What's on the page

  • Top bar and hero: a sticky bar with a basket count and a "Buy now" button. The hero shows the drone beside "Buy now · $699", with a note that the Fly More kit is $899.
  • Figures: 249 g, 4K and 34 min.
  • Feature tabs: Follows you, Senses obstacles and Fits a pocket.
  • Kits: two cards, Kestrel One at $699 and Kestrel One + Fly More kit at $899. Each has an Add button that updates the basket count.
  • Questions and sign-up: a FAQ with four questions and an email sign-up block.
  • Footer.
Show more

What it did in run 1

  1. robot-product-site
  2. ./brief.md
  3. cd .; ls -la . .claude/skills/robot-product-site/reference; wc -c .claude/skills/robot-product-site/reference/*; node .claude/skills/robot-product-site/scripts/check.mjs --ready
  4. ./.claude/skills/robot-product-site/reference/index.html
  5. ./.claude/skills/robot-product-site/reference/script.js
  6. cd .; R=.claude/skills/robot-product-site/reference; cp $R/style.css $R/script.js .; grep -n "Hopper\|Ferrous" style.css script.js | head
  7. cp .claude/skills/robot-product-site/reference/style.css .claude/skills/robot-product-site/reference/script.js . && grep -n "Hopper\|Ferrous" style.css script.js | head
  8. cp .claude/skills/robot-product-site/reference/style.css .claude/skills/robot-product-site/reference/script.js .
  9. cd .; pwd; cp .claude/skills/robot-product-site/reference/style.css ./style.css
  10. ./.claude/skills/robot-product-site/reference/style.css
  11. ./style.css
  12. ./script.js
  13. ./index.html
  14. node .claude/skills/robot-product-site/scripts/check.mjs index.html --out check 2>&1 | tail -40
  15. ./check/1440.png
  16. ./check/390.png
  17. ./style.css
  18. node .claude/skills/robot-product-site/scripts/check.mjs index.html --out check 2>&1 | tail -5
  19. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 15 s · $0.43 of API use

Questions

Is Robot Product Site free?

No. Robot Product Site costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Robot Product Site?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Robot Product Site?

A ZIP of the whole skill folder (39 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Robot Product Site?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./robot-product-site with your agent's flag.

What do I get from Robot Product Site?

One HTML file with its CSS inside: no build step, no framework. A hardware product site with a brushed-silver style. Checked at phone and desktop widths.

What does Robot Product Site need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Robot Product Site?

7 files, about 29,231 tokens in all. The SKILL.md is about 2,635 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 15 s to 2 min 15 s and $0.43 to $0.43 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Robot Product Site to use it?

Type /robot-product-site first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.