Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Grid-paper drinks site: 1440, made in this run
Run 1Grid-paper drinks site“Make the website for our iced tea brand. Products 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

Grid-Paper Drinks Site

A drinks brand site on graph paper: bold cans, a flavour filter, ingredients notes, reviews, stockists and sign-up.

$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 a drinks brand site on a graph-paper background into your own project: cream graph paper with blue grid lines, bold flavour colours on cans, a heavy display face and mono notes, flavour chips over products with Add buttons, ingredient call-outs, reviews and a stockist 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 soda, tea, kombucha, coffee or other drinks brand needs a site, or someone asks for a graph-paper, technical-but-fun drinks look.

By RecaplyUpdated 11 Nov

Install Grid-Paper Drinks Site

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

Read https://recaply.co/skills/grid-paper-drinks-site/install.md and follow it to install the grid-paper-drinks-site skill from grid-paper-drinks-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 Grid-Paper Drinks Site is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A drinks brand site on a graph-paper background
  • Checked at phone and desktop widths

Good fit

  • When a soda, tea, kombucha, coffee or other drinks brand needs a site, or someone asks for a graph-paper, technical-but-fun drinks look

Not for

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

About this skill

You say

Make the website for our iced tea brand. Products in brief.md.

It said back

The Steep Street site is built and the automated check passes. That covers sideways overflow, small text, alt text, names, contrast, focus, reduced motion and script errors. I looked at the 390px and 1440px screenshots and both read cleanly. I didn't open the 768px one.

The page is index.html plus style.css and script.js, in plain HTML, CSS and JavaScript. It has:

Show more

What it did in run 1

  1. grid-paper-drinks-site
  2. ./brief.md
  3. cd .; ls -a; S=.claude/skills/grid-paper-drinks-site; ls $S/reference; wc -c $S/reference/*; cat $S/reference/index.html
  4. cd .; ls -a; ls .claude/skills/grid-paper-drinks-site/reference; cat .claude/skills/grid-paper-drinks-site/reference/index.html
  5. cd .; cp .claude/skills/grid-paper-drinks-site/reference/{style.css,script.js} .; cat style.css | head -150; grep -n "cart\|filter\|year" script.js | head -30
  6. cd .; cp .claude/skills/grid-paper-drinks-site/reference/style.css .; cp .claude/skills/grid-paper-drinks-site/reference/script.js .; grep -n "call\|lab-can\|--\(bg\|em\|art\)" style.css | head -40; grep -n "cart\|filter" script.js | head
  7. cp .claude/skills/grid-paper-drinks-site/reference/style.css style.css
  8. cp .claude/skills/grid-paper-drinks-site/reference/script.js script.js
  9. ./.claude/skills/grid-paper-drinks-site/reference/style.css
  10. ./.claude/skills/grid-paper-drinks-site/reference/script.js
  11. ./style.css
  12. ./script.js
  13. python3 -I - <<'EOF' def can(color,name,lbl): return f'<svg viewBox="0 0 160 280" role="img" aria-label="{name} can"><ellipse cx="80" cy="26" rx="52" ry="12" fill="#C9CED6"/><path d="M28 26v228c0 10 24 16 52 16s52-6 52-16V26c0 10-24 16-52 16S28 36 28 26z" fill="{color}"/><path d="M28 100h104v80H28z" fill="#FBF8EF"/><text x="80" y="132" text-anchor="middle" font-family="Arial Black,Arial" font-weight="900" font-size="14" fill="#171A33">STEEP</text><text x="80" y="152" text-anchor="middle" font-family="Arial Black,Arial" font-weight="900" font-size="14" fill="#171A33">STREET</text><text x="80" y="170" text-anchor="middle" font-family="monospace" font-size="9" fill="#171A33">{lbl}</text><path d="M44 50v190" stroke="#fff" stroke-width="8" opacity=".3" stroke-linecap="round"/></svg>' ic='<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">' drop='<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 3c6 8 10 13 10 18a10 10 0 0 1-20 0c0-5 4-10 10-18z" fill="#2346B8"/></svg>' P=[("Peach black tea","#E9825A","Fruity","Black tea, peach","PEACH"),("Hibiscus berry","#B3203F","Fruity","Hibiscus, berries","HIBISCUS"),("Green tea and yuzu","#3E9E6A","Light","Green tea, yuzu","YUZU"),("Unsweetened jasmine","#E2B93B","Light","Jasmine tea, no sugar added","JASMINE")] prods="" for n,c,cat,note,l in P: full=f"{n}, 12 cans" prods+=f'<li class="product reveal" data-cat="{cat}"><div class="product-art">{can(c,n,l)}</div><div class="product-meta"><h3>{n}</h3><p class="product-note">{note} · 4 g sugar or less</p><p class="price">£15 <span class="product-note">/ 12 cans</span></p></div><button class="btn btn-primary btn-sm" type="button" data-add="{full}">{ic}<path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> {full} to basket</span></button></li>' def col(t,items): return f'<nav class="foot-col" aria-label="{t}"><h2>{t}</h2><ul>'+''.join(f'<li><a href="#">{i}</a></li>' for i in items)+'</ul></nav>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Steep Street: cold-brewed iced tea in cans, made in London</title> <meta name="description" content="Cold-brewed iced tea in cans, made in London. Real tea, 4 g of sugar or less, no sweeteners."> <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=Archivo+Black&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&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="Steep Street home">{drop}<span>Steep Street</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">{ic}<path d="M4 7h16M4 12h16M4 17h16"/></svg><span>Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#shop">Flavours</a></li><li><a href="#inside">What's inside</a></li><li><a href="#list">Join the list</a></li></ul><a class="btn btn-primary btn-sm" href="#shop">Shop online</a><a class="cart-link" href="#shop"><span class="sr-only">Basket, </span>{ic}<path d="M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2"/></svg><span class="cart-count" data-cart-count>0</span><span class="sr-only"> items</span></a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="reveal"><p class="kicker">Cold-brewed in London</p><h1>Iced tea that is <em>actually tea</em></h1><p class="hero-sub">Real tea, cold-brewed and canned. 4 g of sugar or less, and no sweeteners, ever.</p><div class="hero-ctas"><a class="btn btn-primary" href="#shop">Shop online{ic}<path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="btn btn-ghost" href="#inside">What's inside</a></div><p class="hero-note">£15 for 12 cans. Free delivery over £30.</p></div> <div class="hero-art reveal"><div class="lab-can">{can("#E9825A","Peach black tea","PEACH")}<span class="call c1">≤ 4 g sugar</span><span class="call c2">real tea</span><span class="call c3">0 sweeteners</span></div></div></div></section> <section class="sec" id="shop" aria-labelledby="shop-h"><div class="wrap"><div class="sec-head"><h2 id="shop-h">The <em>flavours</em></h2><p class="sec-sub">£15 for 12 cans. Free delivery when you spend over £30.</p></div> <div class="chips" role="group" aria-label="Filter flavours"><button type="button" class="chip" aria-pressed="true" data-filter="*">All</button><button type="button" class="chip" aria-pressed="false" data-filter="Fruity">Fruity</button><button type="button" class="chip" aria-pressed="false" data-filter="Light">Light</button></div> <ul class="product-list">{prods}</ul><p class="sr-only" role="status" aria-live="polite" data-cart-status></p></div></section> <section class="sec" id="inside" aria-labelledby="inside-h"><div class="wrap"><div class="sec-head"><h2 id="inside-h">What's <em>inside</em></h2></div><ul class="feat-list"> <li class="feat reveal"><span class="feat-n" aria-hidden="true">01</span><h3>Real tea</h3><p>Cold-brewed from tea, not made from powder or flavouring alone.</p></li> <li class="feat reveal"><span class="feat-n" aria-hidden="true">02</span><h3>4 g sugar or less</h3><p>Every can is at or under 4 g. The jasmine has none added.</p></li> <li class="feat reveal"><span class="feat-n" aria-hidden="true">03</span><h3>No sweeteners</h3><p>Nothing artificial to make up for the missing sugar.</p></li></ul></div></section> <section class="sec" id="list" aria-labelledby="list-h"><div class="wrap"><div class="cta-box reveal"><h2 id="list-h">Join the <em>list</em></h2><p>New flavours and delivery news, from Steep Street in London. No spam.</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">{drop}<span>Steep Street</span></a><p>Cold-brewed iced tea in cans, London.</p></div>{col("Shop",["Peach black tea","Hibiscus berry","Green tea and yuzu","Unsweetened jasmine"])}{col("Help",["Delivery","Contact us"])}{col("About",["Our story","Stockists"])}</div><div class="wrap foot-small"><p>© <span data-year>2026</span> Steep Street. London.</p></div></footer> <script src="script.js" defer></script> </body> </html>''' open('index.html','w').write(html) EOF node .claude/skills/grid-paper-drinks-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  14. /private/var/folders/4r/x1k_d3dx36v_yrnn39ymflm40000gn/T/rcl-real-runs/grid-paper-drinks-site/gen/gen.py
  15. python3 -I /private/var/folders/4r/x1k_d3dx36v_yrnn39ymflm40000gn/T/rcl-real-runs/grid-paper-drinks-site/gen/gen.py ./index.html && node ./.claude/skills/grid-paper-drinks-site/scripts/check.mjs ./index.html --out ./check 2>&1 | tail -30
  16. python3 -I /private/var/folders/4r/x1k_d3dx36v_yrnn39ymflm40000gn/T/rcl-real-runs/grid-paper-drinks-site/gen/gen.py ./index.html
  17. ./index.html
  18. node .claude/skills/grid-paper-drinks-site/scripts/check.mjs index.html --out check
  19. sed -i '' 's/font-family="monospace" font-size="9"/font-family="monospace" font-size="12"/g' index.html && node .claude/skills/grid-paper-drinks-site/scripts/check.mjs index.html --out check
  20. ./index.html
  21. ./index.html
  22. ./index.html
  23. ./index.html
  24. ./index.html
  25. node .claude/skills/grid-paper-drinks-site/scripts/check.mjs index.html --out check
  26. ./check/1440.png
  27. ./check/390.png
  28. Done

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

Questions

Is Grid-Paper Drinks Site free?

No. Grid-Paper Drinks 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 Grid-Paper Drinks Site?

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

What do I get when I buy Grid-Paper Drinks 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 Grid-Paper Drinks 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 ./grid-paper-drinks-site with your agent's flag.

What do I get from Grid-Paper Drinks Site?

One HTML file with its CSS inside: no build step, no framework. A drinks brand site on a graph-paper background. Checked at phone and desktop widths.

What does Grid-Paper Drinks Site need?

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

How big is Grid-Paper Drinks Site?

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

What does a run cost?

Our 1 runs took 2 min 59 s to 2 min 59 s and $0.57 to $0.57 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 Grid-Paper Drinks Site to use it?

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