Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Blue pet store: 1440, made in this run
Run 1Blue pet store“Create the home page for our pet shop. Details in brief.md, product photos in photos/.”
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, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Blue Pet Store

A cheerful royal-blue pet shop with a paw hero, dog and cat filters, products with a basket, perks and FAQ.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds an online pet shop in a cheerful royal blue style into your own project: royal blue and sunny yellow with rounded type, a paw-and-bowl hero, dog and cat filter chips over products with Add buttons, shop perks, reviews, questions and a newsletter. Plain HTML, CSS and JavaScript, 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 it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a pet shop, pet food brand, vet clinic or pet service needs a site, or someone asks for a friendly, royal-blue-and-yellow pet store.

By RecaplyUpdated 12 Nov

Install Blue Pet Store

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

Read https://recaply.co/skills/blue-pet-store/install.md and follow it to install the blue-pet-store skill from blue-pet-store.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 Blue Pet Store is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An online pet shop in a cheerful royal blue style
  • Checked at phone and desktop widths

Good fit

  • When a pet shop, pet food brand, vet clinic or pet service needs a site, or someone asks for a friendly, royal-blue-and-yellow pet store

Not for

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

About this skill

You say

Create the home page for our pet shop. Details in brief.md, product photos in photos/.

It said back

I've built the home page for Whisker & Wag. The skill's check passes at 390, 768 and 1440 px, with no horizontal overflow, small text, missing alt text, contrast problems or script errors. I looked at the 390 and 1440 screenshots and they look right. I didn't open the 768 one. I haven't tested it with a keyboard, with reduced motion on, or at 320 px, apart from what the check covers.

Files (in the project folder):

  • index.html
  • style.css (the design's styles, unchanged)
  • shop.css (my additions)
  • script.js (menu, scroll reveal, basket count, Dog/Cat filter)
  • check/390.png, check/768.png, check/1440.png (screenshots)
Show more

What it did in run 1

  1. blue-pet-store
  2. ls -la . photos && cat brief.md
  3. cd ./.claude/skills/blue-pet-store && ls -R . | head -30 && cat reference/index.html && cat reference/script.js && wc -l reference/style.css && file ../../../photos/*
  4. cd ./.claude/skills/blue-pet-store; ls -R .
  5. ./.claude/skills/blue-pet-store/reference/index.html
  6. ./.claude/skills/blue-pet-store/reference/script.js
  7. ./.claude/skills/blue-pet-store/reference/style.css
  8. ./photos/dog-food.jpg
  9. ./photos/hedgehog-toy.jpg
  10. sips -g pixelWidth -g pixelHeight ./photos/*.jpg
  11. cd . && cp .claude/skills/blue-pet-store/reference/style.css style.css && cat >> style.css <<'EOF' .hero-photo{position:relative;max-width:480px;margin-inline:auto} .hero-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--radius) * 1.6);border:6px solid var(--surface);box-shadow:0 30px 60px -34px rgba(19,32,90,.55)} .hero-badge{position:absolute;left:-4%;bottom:6%;background:#FFD66B;color:var(--ink);border-radius:20px;padding:.7rem 1rem;font-family:var(--font-display);font-weight:700;line-height:1.15;box-shadow:0 14px 24px -14px rgba(19,32,90,.5);max-width:11rem} .hero-badge small{display:block;font-family:var(--font-body);font-weight:600;font-size:.85rem} .product-art{padding:0} .product-art img{width:100%;height:100%;object-fit:cover} .avatar-init{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--art-bg);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.2rem;flex:none} .cta-box .hero-ctas{margin-top:2rem} .btn-ghost-light{border-color:#fff;color:#fff} .hours{display:grid;gap:.2rem;margin-top:.8rem;color:var(--muted)} .foot-col address{font-style:normal;color:var(--muted);line-height:1.6} .foot-col p{color:var(--muted)} .foot-col a.plain{padding:0} .cta-box .cta-addr{margin-top:1rem;font-size:1rem} @media (max-width:900px){.hero-badge{left:2%}} EOF cat > script.js <<'EOF' // Marks JS on, phone menu, reveal on scroll (skipped with reduced motion), basket count and product filter. document.documentElement.classList.add('js'); const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); for (const b of document.querySelectorAll('[data-nav-toggle]')) { const menu = document.getElementById(b.getAttribute('aria-controls')); b.addEventListener('click', () => { const open = b.getAttribute('aria-expanded') !== 'true'; b.setAttribute('aria-expanded', String(open)); menu && menu.classList.toggle('open', open); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && b.getAttribute('aria-expanded') === 'true') { b.setAttribute('aria-expanded', 'false'); menu && menu.classList.remove('open'); b.focus(); } }); menu && menu.addEventListener('click', (e) => { if (e.target.closest('a')) { b.setAttribute('aria-expanded', 'false'); menu.classList.remove('open'); } }); } (() => { const els = document.querySelectorAll('.reveal'); if (reduceMotion.matches || !('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; } const io = new IntersectionObserver((entries) => { for (const en of entries) if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' }); els.forEach((e) => io.observe(e)); })(); for (const y of document.querySelectorAll('[data-year]')) y.textContent = new Date().getFullYear(); // Basket: "Add" buttons count up and say what was added. (Front-end only: connect to your shop's cart.) let basket = 0; for (const b of document.querySelectorAll('[data-add]')) b.addEventListener('click', () => { basket++; for (const c of document.querySelectorAll('[data-cart-count]')) c.textContent = basket; const s = document.querySelector('[data-cart-status]'); if (s) s.textContent = b.dataset.add + ' added. ' + basket + ' in your basket.'; }); // Product filter chips. for (const g of document.querySelectorAll('.chips')) g.addEventListener('click', (e) => { const c = e.target.closest('[data-filter]'); if (!c) return; for (const x of g.querySelectorAll('[data-filter]')) x.setAttribute('aria-pressed', String(x === c)); for (const p of document.querySelectorAll('.product')) p.hidden = c.dataset.filter !== '*' && p.dataset.cat !== c.dataset.filter; }); EOF
  12. cp .claude/skills/blue-pet-store/reference/style.css style.css
  13. ./shop.css
  14. ./script.js
  15. W=.; cp $W/.claude/skills/blue-pet-store/reference/style.css $W/style.css; ls $W
  16. cat ./.claude/skills/blue-pet-store/reference/style.css > ./style.css
  17. ./index.html
  18. cd . && node .claude/skills/blue-pet-store/scripts/check.mjs index.html --out check 2>&1 | tail -40
  19. ./check/390.png
  20. ./check/1440.png
  21. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 55 s · $0.41 of API use

Questions

Is Blue Pet Store free?

No. Blue Pet Store 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 Blue Pet Store?

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

What do I get when I buy Blue Pet Store?

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 Blue Pet Store?

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 ./blue-pet-store with your agent's flag.

What do I get from Blue Pet Store?

One HTML file with its CSS inside: no build step, no framework. An online pet shop in a cheerful royal blue style. Checked at phone and desktop widths.

What does Blue Pet Store need?

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

How big is Blue Pet Store?

7 files, about 30,156 tokens in all. The SKILL.md is about 2,622 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 55 s to 1 min 55 s and $0.41 to $0.41 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 Blue Pet Store to use it?

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