Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Pharmacy store: 1440, made in this run
Run 1Pharmacy store“Create the storefront for our chemist shop. See 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

Pharmacy Store

A clean green pharmacy storefront: prescription hero, category filter, products, pharmacist help, FAQ and legal notes.

$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 pharmacy storefront in a clean, trustworthy green style into your own project: white and soft mint with a pharmacy green, a prescription hero with a pill picture, category chips over products with Add buttons, how repeat prescriptions work, pharmacist help, reviews, questions and a regulatory note. 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 pharmacy, chemist, health shop or supplement store needs an online storefront, or someone asks for a clean, green, medical-but-friendly shop.

By RecaplyUpdated 12 Nov

Install Pharmacy Store

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

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

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An online pharmacy storefront in a clean, trustworthy green style
  • Checked at phone and desktop widths

Good fit

  • When a pharmacy, chemist, health shop or supplement store needs an online storefront

Not for

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

About this skill

You say

Create the storefront for our chemist shop. See brief.md.

It said back

The Riverside Chemist storefront is built as a plain HTML, CSS and JavaScript site, because the folder was empty. It passes the skill's check at 390, 768 and 1440px: no sideways overflow, no text under 12px, alt text and names present, contrast and focus styles fine, reduced motion respected, and no script errors. I looked at the 1440 and 390 screenshots and they read correctly. I didn't open the 768 one.

Files (all in the project folder):

  • index.html
  • style.css
  • script.js
  • check/ holds the screenshots: check/390.png, check/768.png, check/1440.png.
Show more

What it did in run 1

  1. pharmacy-store
  2. ./brief.md
  3. cd .; ls -la . .claude/skills/pharmacy-store .claude/skills/pharmacy-store/reference; wc -c .claude/skills/pharmacy-store/reference/*
  4. ./.claude/skills/pharmacy-store/reference/index.html
  5. ./.claude/skills/pharmacy-store/reference/script.js
  6. cd .; R=.claude/skills/pharmacy-store/reference; cp $R/style.css $R/script.js .; grep -n "features-grid\|features-steps\|\.feat-list" style.css | head -20
  7. cp .claude/skills/pharmacy-store/reference/style.css .claude/skills/pharmacy-store/reference/script.js . && ls
  8. cp .claude/skills/pharmacy-store/reference/style.css ./style.css && cp .claude/skills/pharmacy-store/reference/script.js ./script.js && ls
  9. ./.claude/skills/pharmacy-store/reference/style.css
  10. ./style.css
  11. ./script.js
  12. cat > /tmp/gen.mjs <<'EOF' import {writeFileSync} from 'node:fs'; const ic=(d)=><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="${d}"/></svg>; const cross=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="8" fill="#0A7A4B"/><path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff"/></svg>; const bottle=(label,c='#0A7A4B')=><svg viewBox="0 0 220 240" role="img" aria-label="${label}"><rect x="50" y="20" width="120" height="34" rx="8" fill="#0F2A1F"/><rect x="40" y="54" width="140" height="170" rx="18" fill="#FFFFFF" stroke="${c}" stroke-width="6"/><rect x="40" y="104" width="140" height="70" fill="${c}"/><path d="M98 122h24v12h12v24h-12v12H98v-12H86v-24h12z" fill="#FFFFFF"/></svg>; const prods=[['Sun cream','Sun cream','#0A7A4B'],['Cold and flu','Cold and flu remedies','#2563EB'],['First aid','First aid kit','#B45309'],['Baby care','Baby care','#0A7A4B']]; const product=([cat,name,c])=><li class="product reveal" data-cat="${cat}"><div class="product-art">${bottle(name+' (picture to be replaced)',c)}</div><div class="product-meta"><h3>${name}</h3><p class="product-note">Pack size: [to confirm]</p><p class="price">Price: [to confirm]</p></div><button class="btn btn-primary btn-sm" type="button" data-add="${name}">${ic('M12 5v14M5 12h14')}Add<span class="sr-only"> ${name} to basket</span></button></li>; const q=(t,a,open)=><details class="reveal"${open?' open':''}><summary>${t}${ic('M12 5v14M5 12h14')}</summary><p>${a}</p></details>; const html=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Riverside Chemist: Repeat prescriptions and health essentials in Cardiff</title> <meta name="description" content="Independent pharmacy in Cardiff. Order a repeat prescription online, book a flu jab, and ask about travel vaccines."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Riverside Chemist home">${cross}<span>Riverside Chemist</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">${ic('M4 7h16M4 12h16M4 17h16')}<span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#how">Prescriptions</a></li><li><a href="#shop">Shop</a></li><li><a href="#services">Pharmacist</a></li><li><a href="#faq">Questions</a></li></ul><a class="cart-link" href="#shop"><span class="sr-only">Basket, </span>${ic('M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2')}<span class="cart-count" data-cart-count>0</span><span class="sr-only"> items</span></a><a class="btn btn-primary btn-sm" href="#how">Order a repeat prescription</a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">Independent pharmacy, Cardiff</p><h1>Your repeat prescription, <em>made easy</em></h1><p class="hero-sub">Order your repeat prescription online from your local pharmacy. Book your flu jab, ask about travel vaccines and pick up everyday health essentials.</p><div class="hero-ctas"><a class="btn btn-primary" href="#how">Order a repeat prescription${ic('M5 12h14M13 6l6 6-6 6')}</a><a class="btn btn-ghost" href="#shop">Shop health essentials</a></div><p class="hero-note">Registered pharmacy number 1122334 · Pharmacist: Owen Price</p></div><div class="hero-art reveal"><div class="pill-plinth">${bottle('Prescription pill bottle')}</div></div></div></section> <section class="sec features features-steps" id="how" aria-labelledby="how-h"><div class="wrap"><div class="sec-head"><h2 id="how-h">Repeat prescriptions in <em>three steps</em></h2></div><ul class="feat-list"><li class="feat reveal"><span class="feat-n">1</span><h3>Tell us what you need</h3><p>Send us your repeat prescription request online.</p></li><li class="feat reveal"><span class="feat-n">2</span><h3>We check it</h3><p>A pharmacist checks your order before it is prepared.</p></li><li class="feat reveal"><span class="feat-n">3</span><h3>Get your medicine</h3><p>We let you know when it is ready.</p></li></ul></div></section> <section class="sec products" id="shop" aria-labelledby="shop-h"><div class="wrap"><div class="sec-head"><h2 id="shop-h">Health <em>essentials</em></h2></div><div class="chips" role="group" aria-label="Filter products"><button type="button" class="chip" aria-pressed="true" data-filter="*">All</button>${prods.map(p=><button type="button" class="chip" aria-pressed="false" data-filter="${p[0]}">${p[0]}</button>).join('')}</div><ul class="product-list">${prods.map(product).join('')}</ul><p class="sr-only" role="status" aria-live="polite" data-cart-status></p></div></section> <section class="sec features features-grid" id="services" aria-labelledby="services-h"><div class="wrap"><div class="sec-head"><h2 id="services-h">Help from a <em>pharmacist</em></h2></div><ul class="feat-list"><li class="feat reveal"><span class="feat-ic">${ic('M4 5h16v11H9l-5 4z')}</span><h3>Ask Owen Price</h3><p>Our pharmacist can answer questions about your medicines.</p></li><li class="feat reveal"><span class="feat-ic">${ic('M12 3v18M8 7l4-4 4 4M7 21h10')}</span><h3>Flu jabs</h3><p>Book your flu jab online with us in Cardiff.</p></li><li class="feat reveal"><span class="feat-ic">${ic('M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18')}</span><h3>Travel vaccines</h3><p>Planning a trip? Ask us about the vaccines you may need.</p></li></ul></div></section> <section class="sec faq" id="faq" aria-labelledby="faq-h"><div class="wrap faq-in"><div class="sec-head"><h2 id="faq-h">Questions</h2></div><div class="faq-list">${q('How do I order a repeat prescription?','Use the Order a repeat prescription button and follow the steps. A pharmacist checks your order before it is prepared.',1)}${q('Can I book a flu jab online?','Yes. You can book your flu jab online.')}${q('Do you offer travel vaccines?','Yes. Ask our pharmacist which vaccines suit your trip.')}${q('Is this a real pharmacy?','Yes. Riverside Chemist is an independent pharmacy in Cardiff. Our registered pharmacy number is 1122334 and our pharmacist is Owen Price.')}</div></div></section> <section class="sec cta" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">News from your local <em>chemist</em></h2><p>Leave your email and we will keep in touch about flu jabs and services.</p><form class="inline-form" data-form><label class="sr-only" for="cta-email">Email address</label><input id="cta-email" type="email" name="email" required placeholder="you@example.com" autocomplete="email"><button class="btn btn-primary" type="submit">Sign me up</button><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">${cross}<span>Riverside Chemist</span></a><p>Your independent pharmacy in Cardiff.</p></div><nav class="foot-col" aria-label="Services"><h2>Services</h2><ul><li><a href="#how">Repeat prescriptions</a></li><li><a href="#services">Flu jabs</a></li><li><a href="#services">Travel vaccines</a></li></ul></nav><nav class="foot-col" aria-label="Shop"><h2>Shop</h2><ul><li><a href="#shop">Sun cream</a></li><li><a href="#shop">Cold and flu</a></li><li><a href="#shop">First aid kits</a></li><li><a href="#shop">Baby care</a></li></ul></nav><nav class="foot-col" aria-label="Help"><h2>Help</h2><ul><li><a href="#faq">Questions</a></li><li><a href="#cta">Stay in touch</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Riverside Chemist, Cardiff. Registered pharmacy number 1122334. Pharmacist: Owen Price.</p><p>Always read the label. If symptoms persist, speak to your pharmacist or doctor.</p></div></footer> <script src="script.js" defer></script> </body> </html> ; writeFileSync('index.html',html); EOF node /tmp/gen.mjs && node .claude/skills/pharmacy-store/scripts/check.mjs index.html --out check 2>&1 | tail -40
  13. ./gen.mjs
  14. node gen.mjs && rm gen.mjs && node .claude/skills/pharmacy-store/scripts/check.mjs index.html --out check 2>&1 | tail -40
  15. ./check/1440.png
  16. ./check/390.png
  17. Done

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

Questions

Is Pharmacy Store free?

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

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

What do I get when I buy Pharmacy 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 Pharmacy 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 ./pharmacy-store with your agent's flag.

What do I get from Pharmacy Store?

One HTML file with its CSS inside: no build step, no framework. An online pharmacy storefront in a clean, trustworthy green style. Checked at phone and desktop widths.

What does Pharmacy Store need?

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

How big is Pharmacy Store?

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

What does a run cost?

Our 1 runs took 2 min 8 s to 2 min 8 s and $0.45 to $0.45 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 Pharmacy Store to use it?

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