Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Gradient juice site: 1440, made in this run
Run 1Gradient juice site“We need a site for our smoothie bar. Info 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

Gradient Juice Site

A juicy brand site in sunset gradients: bottles on a melting orange-pink hero, flavours, why it is good and reviews.

$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 juice or smoothie brand site in bright fruit gradients into your own project: melting orange, pink and yellow gradients, a big rounded retro script headline over three bottles, a band of flavours, products with Add buttons, benefits, reviews and a subscription 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 juice, smoothie, wellness drink or snack brand needs a vibrant site, or someone asks for a juicy, gradient, summery look.

By RecaplyUpdated 11 Nov

Install Gradient Juice Site

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

Read https://recaply.co/skills/gradient-juice-site/install.md and follow it to install the gradient-juice-site skill from gradient-juice-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 Gradient Juice Site is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A juice or smoothie brand site in bright fruit gradients
  • Checked at phone and desktop widths

Good fit

  • When a juice, smoothie, wellness drink or snack brand needs a vibrant site, or someone asks for a juicy, gradient, summery look

Not for

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

About this skill

You say

We need a site for our smoothie bar. Info in brief.md.

It said back

The Blend & Bloom site is built and the automated check passes at phone, tablet and desktop widths. I looked at the 1440px and 390px screenshots and they look right. I didn't open the 768px one.

It checks for sideways overflow, small text, alt text, names, contrast, focus styles, reduced motion and script errors. Orders and the subscription sign-up don't actually do anything yet, because there's no ordering system or email handler behind them.

Show more

What it did in run 1

  1. ls -la && cat brief.md
  2. gradient-juice-site
  3. cd ./.claude/skills/gradient-juice-site && ls -R reference scripts | head -30 && wc -l reference/* && cat reference/index.html
  4. cd . && cp .claude/skills/gradient-juice-site/reference/{style.css,script.js} . && cat script.js && grep -n "sunpress\|Sunpress\|sample" -i style.css script.js
  5. cd . && R=.claude/skills/gradient-juice-site/reference && cp $R/style.css $R/script.js . && cat script.js && grep -n -i "sunpress\|sample" style.css script.js
  6. cd . && cp .claude/skills/gradient-juice-site/reference/style.css .claude/skills/gradient-juice-site/reference/script.js . && cat script.js && grep -n -i "sunpress\|sample" style.css script.js
  7. ./.claude/skills/gradient-juice-site/reference/style.css
  8. ./.claude/skills/gradient-juice-site/reference/script.js
  9. ./style.css
  10. ./script.js
  11. mkdir -p /tmp/gen && cat > /tmp/gen/build.mjs <<'EOF' import fs from 'node:fs'; const out = process.argv[2]; const bottle = (cap, body, label, name, attrs='') => <svg viewBox="0 0 160 300" ${attrs||'aria-hidden="true" focusable="false"'}><rect x="62" y="10" width="36" height="26" rx="6" fill="${cap}"/><path d="M60 36h40v20c18 12 26 30 26 52v160c0 12-10 22-22 22H56c-12 0-22-10-22-22V108c0-22 8-40 26-52z" fill="${body}"/><rect x="34" y="130" width="92" height="90" fill="${label}"/><circle cx="80" cy="175" r="24" fill="${body}" opacity=".9"/><path d="M50 70c-6 10-8 22-8 34" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity=".5" fill="none"/></svg>; const P = [ ['Berry Blast','£5.50','#4A0F3C','#C026A3','#FBDDF3'], ['Tropical Green','£5.90','#14532D','#16A34A','#DCFCE7'], ['Peanut Power','£6.20','#6B3E0A','#C98A2E','#FBEBCB'], ['Acai Sunrise','£6.50','#3B0F6B','#7C3AED','#E9DDFB'], ]; 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 logo = <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="16" cy="16" r="7" fill="#E11D48"/><g stroke="#F97316" stroke-width="2.5" stroke-linecap="round"><path d="M16 2v4M16 26v4M2 16h4M26 16h4M6 6l3 3M23 23l3 3M6 26l3-3M23 9l3-3"/></g></svg>; const phrase = P.map(p=>p[0]).join(' <b>✦</b> ') + ' <b>✦</b> Next-day delivery <b>✦</b> '; const html = <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Blend &amp; Bloom: Smoothie bar in Brighton</title> <meta name="description" content="Smoothies from three shops in Brighton, with next-day delivery."> <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=Shrikhand&family=Outfit:wght@400;500;600;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="Blend &amp; Bloom home">${logo}<span>Blend &amp; Bloom</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="#shop">Smoothies</a></li><li><a href="#why">Why us</a></li><li><a href="#weekly">Weekly plan</a></li></ul><a class="btn btn-primary btn-sm" href="#shop">Order for delivery</a><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></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="reveal"><h1>Brighton's <em>smoothie</em> bar</h1><p class="hero-sub">Three shops in town, and your smoothies at the door the next day.</p><div class="hero-ctas"><a class="btn btn-primary" href="#shop">Order for delivery${ic('M5 12h14M13 6l6 6-6 6')}</a><a class="btn btn-ghost" href="#weekly">See the weekly plan</a></div></div> <div class="hero-art reveal"><div class="bottles">${P.slice(0,3).map(p=>bottle(p[2],p[3],p[4])).join('')}</div></div></div></section> <div class="marquee" aria-hidden="true"><div class="marquee-track"><span>${phrase}</span><span>${phrase}</span></div></div> <section class="sec" id="shop" aria-labelledby="shop-h"><div class="wrap"><div class="sec-head"><h2 id="shop-h">Pick your <em>smoothie</em></h2></div><ul class="product-list"> ${P.map(p=><li class="product reveal"><div class="product-art">${bottle(p[2],p[3],p[4],p[0],role="img" aria-label="${p[0]} smoothie")}</div><div class="product-meta"><h3>${p[0]}</h3><p class="price">${p[1]}</p></div><button class="btn btn-primary btn-sm" type="button" data-add="${p[0]}">${ic('M12 5v14M5 12h14')}Add<span class="sr-only"> ${p[0]} to basket</span></button></li>).join('\n')} </ul><p class="sr-only" role="status" aria-live="polite" data-cart-status></p></div></section> <section class="sec" id="why" aria-labelledby="why-h" style="padding-top:0"><div class="wrap"><div class="sec-head"><h2 id="why-h">Why <em>Blend &amp; Bloom</em></h2></div><ul class="feat-list"> <li class="feat reveal"><span class="feat-ic">${ic('M3 11l9-7 9 7v9H3zM9 20v-6h6v6')}</span><h3>Three shops</h3><p>Drop in at any of our three bars around Brighton.</p></li> <li class="feat reveal"><span class="feat-ic">${ic('M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18')}</span><h3>Next-day delivery</h3><p>Order today and your smoothies arrive tomorrow.</p></li> <li class="feat reveal"><span class="feat-ic">${ic('M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z')}</span><h3>Four favourites</h3><p>From Berry Blast to Acai Sunrise, there's one for every mood.</p></li> </ul></div></section> <section class="sec" id="weekly" aria-labelledby="weekly-h" style="padding-top:0"><div class="wrap"><div class="plan reveal"><div class="plan-words"><h2 id="weekly-h">Five a week, <em>sorted</em></h2><p>Subscribe and have five smoothies delivered every week.</p></div><div class="plan-card"><p class="plan-price">£25 <span>a week</span></p><p>5 smoothies a week, that's £5 each.</p><a class="btn btn-primary" href="#cta">Start my subscription</a></div></div></div></section> <section class="sec" id="cta" aria-labelledby="cta-h" style="padding-top:0"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Get your <em>weekly</em> smoothies</h2><p>Leave your email and we'll set up your subscription.</p><form class="inline-form" data-form data-done="Thanks! We'll be in touch to set up your subscription."><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">${logo}<span>Blend &amp; Bloom</span></a><p>Smoothie bar with three shops in Brighton and next-day delivery.</p></div> <nav class="foot-col" aria-label="Menu"><h2>Menu</h2><ul>${P.map(p=><li><a href="#shop">${p[0]}</a></li>).join('')}</ul></nav> <nav class="foot-col" aria-label="More"><h2>More</h2><ul><li><a href="#why">Why us</a></li><li><a href="#weekly">Weekly plan</a></li><li><a href="#cta">Sign up</a></li></ul></nav></div> <div class="wrap foot-small"><p>© <span data-year>2026</span> Blend &amp; Bloom, Brighton.</p></div></footer> <script src="script.js" defer></script> </body> </html> ; fs.writeFileSync(out + '/index.html', html); EOF cd . && node /tmp/gen/build.mjs . && node .claude/skills/gradient-juice-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  12. ls /tmp/gen 2>&1; ls .
  13. ./index.html
  14. cd . && node .claude/skills/gradient-juice-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  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 11 s · $0.46 of API use

Questions

Is Gradient Juice Site free?

No. Gradient Juice 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 Gradient Juice Site?

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

What do I get when I buy Gradient Juice 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 Gradient Juice 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 ./gradient-juice-site with your agent's flag.

What do I get from Gradient Juice Site?

One HTML file with its CSS inside: no build step, no framework. A juice or smoothie brand site in bright fruit gradients. Checked at phone and desktop widths.

What does Gradient Juice Site need?

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

How big is Gradient Juice Site?

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

What does a run cost?

Our 1 runs took 2 min 11 s to 2 min 11 s and $0.46 to $0.46 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 Gradient Juice Site to use it?

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