Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Paper-craft studio site: 1440, made in this run
Run 1Paper-craft studio site“Make a website for our community pottery studio. 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

Paper-Craft Studio Site

A site for a creative collective in layered cut paper: shadowed paper hills, members, work, events and joining.

$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 site for an artist or creative collective in a layered cut-paper style into your own project: layered paper shapes in terracotta, mustard, teal and cream with soft drop shadows, a hero landscape cut from paper, members with portraits, work in a bento, upcoming events and a join form. 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 an artist collective, community studio, co-op, craft group or makerspace needs a site, or someone asks for a layered cut-paper, papercraft look.

By RecaplyUpdated 11 Nov

Install Paper-Craft Studio Site

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

Read https://recaply.co/skills/paper-craft-studio-site/install.md and follow it to install the paper-craft-studio-site skill from paper-craft-studio-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 Paper-Craft Studio Site is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A site for an artist or creative collective in a layered cut-paper style
  • Checked at phone and desktop widths

Good fit

  • When an artist collective, community studio, co-op, craft group or makerspace needs a site

Not for

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

About this skill

You say

Make a website for our community pottery studio. See brief.md.

It said back

The Clayground Co-op site is built and the check passes at 390, 768 and 1440px. That covers sideways overflow, small text, alt text, contrast, focus styles, reduced motion and script errors. I looked at the 1440 and 390 screenshots before the last layout fix, but not after it. I didn't re-read the 768 screenshot or any screenshot from the second run.

The last fix: I made the work tiles a fixed height on desktop so the rows line up. I also put the member portraits in two columns on phones, so they no longer fill the screen.

Show more

What it did in run 1

  1. ./brief.md
  2. paper-craft-studio-site
  3. cd .; ls -a; ls .claude/skills/paper-craft-studio-site/reference; wc -c .claude/skills/paper-craft-studio-site/reference/*; node .claude/skills/paper-craft-studio-site/scripts/check.mjs --ready
  4. ./.claude/skills/paper-craft-studio-site/reference/index.html
  5. ./.claude/skills/paper-craft-studio-site/reference/script.js
  6. cd .; grep -n "this design" -A400 .claude/skills/paper-craft-studio-site/reference/style.css | cut -c1-220 | head -230
  7. cd .; sed -n 231,400p .claude/skills/paper-craft-studio-site/reference/style.css | cut -c1-260
  8. cd .; R=.claude/skills/paper-craft-studio-site/reference cp $R/style.css style.css # script: keep only shared behaviour + form python3 - <<'E' s=open('.claude/skills/paper-craft-studio-site/reference/script.js').read() a=s.index('// Billing switch'); b=s.index('// Forms:') c=s.index('// Copy buttons') s=s[:a]+s[b:c] s=s.replace("'Thanks. This reference has no server, so nothing was sent; connect the form to yours.'","'Thanks. You are on the waiting list.'") open('script.js','w').write(s) E cat >> style.css <<'E' .person-pic.ph{display:grid;place-items:center;background:#E4D6BE} .person-pic.ph svg{width:60%;height:60%} .work-art.pot{background:#F2D9A6} .work-year{display:block} E python3 - <<'E' logo='<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M10 6h12v3c5 3 6 8 4 13-1 3-4 5-10 5S7 25 6 22c-2-5-1-10 4-13z" fill="#A84A2A"/><path d="M10 6h12" stroke="#F6EEDF" stroke-width="2.5"/></svg>' name='Clayground Co-op' 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"><path d="M5 12h14M13 6l6 6-6 6"/></svg>' def pot(bg,body,rim,sun,d): return f'<div class="work-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="{bg}"/><circle cx="320" cy="76" r="38" fill="{sun}"/><path d="M0 250C100 225 220 262 400 238V300H0z" fill="#2B211A"/>{d}</svg></div>' wheel=pot('#F2D9A6','','','#E9A23B','<ellipse cx="200" cy="228" rx="110" ry="18" fill="#1F5C5A"/><path d="M150 226c-18-40-6-84 20-104h60c26 20 38 64 20 104z" fill="#C8673F"/><ellipse cx="200" cy="122" rx="30" ry="8" fill="#A84A2A"/><path d="M162 170c25 10 51 10 76 0" stroke="#FFF9EE" stroke-width="5" fill="none"/>') course=pot('#F6E3C4','','','#C8673F','<path d="M110 232c-14-50 0-96 30-110h120c30 14 44 60 30 110z" fill="#1F5C5A"/><rect x="150" y="104" width="100" height="22" rx="6" fill="#FFF9EE"/><circle cx="200" cy="185" r="22" fill="#E9A23B"/>') market=pot('#CFE3D8','','','#E9A23B','<path d="M90 232V150h220v82z" fill="#E7B98A"/><path d="M80 150l30-40h180l30 40z" fill="#C8673F"/><circle cx="140" cy="205" r="18" fill="#1F5C5A"/><circle cx="200" cy="205" r="18" fill="#A84A2A"/><circle cx="260" cy="205" r="18" fill="#FFF9EE"/>') member=pot('#E4D6BE','','','#FFF9EE','<path d="M120 232c-6-40 4-70 20-84h20c-10 30-6 60 0 84zM240 232c-6-24-6-54 0-84h20c16 14 26 44 20 84z" fill="#A84A2A"/><path d="M185 232c-10-36-6-76 15-100 21 24 25 64 15 100z" fill="#1F5C5A"/>') def item(span,art,h,p,yr): return f'<li class="work-item reveal" style="--span:{span}"><a href="#schedule" class="work-link">{art}<div class="work-meta"><h3>{h}</h3><span class="work-year">{yr}</span><p>{p}</p></div></a></li>' def person(): return '<li class="person reveal"><div class="person-pic ph"><svg viewBox="0 0 100 100" role="img" aria-label="Photo placeholder"><circle cx="50" cy="36" r="18" fill="#A84A2A" opacity=".55"/><path d="M16 96c2-22 16-34 34-34s32 12 34 34z" fill="#A84A2A" opacity=".55"/></svg></div><h3>[Member name]</h3><p>[Role: add before launch]</p></li>' def sched(day,h,p,t,tag): return f'<li class="sched reveal"><p class="sched-day">{day}</p><div class="sched-main"><h3>{h}</h3><p>{p}</p></div><p class="sched-time">{t}</p><span class="tag">{tag}</span></li>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{name}: a member-run pottery studio in Glasgow</title> <meta name="description" content="A member-run pottery studio in Glasgow with 40 members and 6 wheels. Book a Saturday taster session for £25."> <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=Gloock&family=Instrument+Sans: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 nav-bar"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="{name} home">{logo}<span>{name}</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu"><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="M4 7h16M4 12h16M4 17h16"/></svg><span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#team">Members</a></li><li><a href="#work">The studio</a></li><li><a href="#schedule">Come along</a></li><li><a href="#cta">Membership</a></li></ul><a class="btn btn-primary btn-sm" href="#schedule">Book a taster</a></nav> </div></header> <main id="main"> <section class="hero hero-split"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">A member-run pottery studio in Glasgow</p><h1>Get your hands in the <em>clay</em></h1><p class="hero-sub">Forty members, six wheels and a Saturday taster session open to anyone. Come and throw your first pot with us.</p><div class="hero-ctas"><a class="btn btn-primary" href="#schedule">Book a taster{ic}</a><a class="btn btn-ghost" href="#cta">Join the waiting list</a></div></div><div class="hero-art reveal"><svg class="paper" viewBox="0 0 400 320" role="img" aria-label="Cut-paper scene of a clay pot on a wheel in front of a sun and hills"><defs><filter id="ps" x="-10%" y="-10%" width="120%" height="130%"><feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#2B211A" flood-opacity=".28"/></filter></defs><rect width="400" height="320" rx="20" fill="#F2D9A6"/><circle cx="300" cy="90" r="46" fill="#E9A23B" filter="url(#ps)"/><path d="M0 170C70 120 140 140 200 160S330 120 400 150V320H0z" fill="#E7B98A" filter="url(#ps)"/><path d="M0 210C80 170 160 200 240 190S350 170 400 190V320H0z" fill="#C8673F" filter="url(#ps)"/><path d="M0 250C90 220 180 250 260 236S360 226 400 240V320H0z" fill="#1F5C5A" filter="url(#ps)"/><g filter="url(#ps)"><path d="M130 262c-14-34-4-70 18-86h8c-8 20-4 56 4 86z" fill="#FFF9EE" opacity="0"/><path d="M150 268c-16-40-6-80 20-98h60c26 18 36 58 20 98z" fill="#A84A2A"/><ellipse cx="200" cy="170" rx="30" ry="8" fill="#9A4024"/><path d="M160 214c25 10 55 10 80 0" stroke="#FFF9EE" stroke-width="5" fill="none"/></g><path d="M0 300C100 280 200 296 300 288S380 284 400 290V320H0z" fill="#2B211A" filter="url(#ps)"/></svg></div></div></section> <section class="sec team" id="team" aria-labelledby="team-h"><div class="wrap"><div class="sec-head"><h2 id="team-h">Meet the <em>members</em></h2><p class="sec-sub">The studio is run by its forty members. <!-- TODO: replace placeholders with four real members, names, roles and portraits --></p></div><ul class="team-list">{person()*4}</ul></div></section> <section class="sec work work-bento" id="work" aria-labelledby="work-h"><div class="wrap"><div class="sec-head"><h2 id="work-h">In the <em>studio</em></h2></div><ul class="work-list">{item(4,wheel,'Six wheels','Throw at your own pace on one of our six wheels.','Members')}{item(2,course,'Beginner course','Six weeks, from first lump of clay to finished pots.','£180')}{item(2,market,'Winter market','Our members sell their work on 13 December.','13 Dec')}{item(4,member,'Membership','Open studio time and shared kit.','£60/month')}</ul></div></section> <section class="sec schedule" id="schedule" aria-labelledby="schedule-h"><div class="wrap"><div class="sec-head"><h2 id="schedule-h">Come <em>along</em></h2><p class="sec-sub">To book, get in touch. <!-- TODO: link buttons and rows to the real booking page --></p></div><ul class="sched-list">{sched('Every Saturday','Taster session','Try the wheel for the first time. A good place to start.','[Time TBC]','£25')}{sched('6 weeks','Beginner course','Learn the basics over six weeks. [Start dates TBC]','[Time TBC]','£180')}{sched('Sun 13 Dec','Winter market','Pots made by our members, ready for gifts.','[Time TBC]','[Entry TBC]')}</ul><p class="hero-ctas"><a class="btn btn-primary" href="mailto:hello@example.com?subject=Taster%20booking">Book a taster{ic}</a></p></div></section> <section class="sec cta cta-band" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Join the <em>co-op</em></h2><p>Membership is £60 a month. There is a waiting list, so leave your email and we will be in touch when a place opens.</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">Join the list</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>{name}</span></a><p>A member-run pottery studio in Glasgow.</p></div><nav class="foot-col" aria-label="Visit"><h2>Visit</h2><ul><li><a href="#schedule">Taster sessions</a></li><li><a href="#schedule">Beginner course</a></li><li><a href="#schedule">Winter market</a></li></ul></nav><nav class="foot-col" aria-label="Studio"><h2>Studio</h2><ul><li><a href="#team">Members</a></li><li><a href="#work">The studio</a></li><li><a href="#cta">Membership</a></li></ul></nav><nav class="foot-col" aria-label="Contact"><h2>Contact</h2><ul><li><a href="mailto:hello@example.com">Email [placeholder]</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> {name}. Glasgow.</p></div></footer> <script src="script.js" defer></script> </body> </html> ''' open('index.html','w').write(html) E node .claude/skills/paper-craft-studio-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  9. cd .; ls; wc -c index.html script.js style.css; timeout 150 node .claude/skills/paper-craft-studio-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  10. cd .; R=.claude/skills/paper-craft-studio-site/reference cp $R/style.css style.css sed -n '1,17p;49,56p' $R/script.js | sed "s/Thanks. This reference has no server, so nothing was sent; connect the form to yours./Thanks. You are on the waiting list./" > script.js cat >> style.css <<'E' .person-pic.ph{display:grid;place-items:center;background:#E4D6BE} .person-pic.ph svg{width:100%;height:100%} .work-year{display:block;margin-left:0;font-weight:600} E tail -12 script.js | cut -c1-120; ls
  11. cp .claude/skills/paper-craft-studio-site/reference/style.css style.css && sed -n '1,17p;49,51p' .claude/skills/paper-craft-studio-site/reference/script.js | sed "s/Thanks. This reference has no server, so nothing was sent; connect the form to yours./Thanks. You are on the waiting list./" > script.js && printf '.person-pic.ph{background:#E4D6BE}\n.person-pic.ph svg{width:100%%;height:100%%}\n.work-year{display:block;margin-left:0;font-weight:600}\n' >> style.css && node --check script.js && ls
  12. cp .claude/skills/paper-craft-studio-site/reference/style.css style.css
  13. W=.; cp $W/.claude/skills/paper-craft-studio-site/reference/style.css $W/style.css; ls $W
  14. ./.claude/skills/paper-craft-studio-site/reference/style.css
  15. ./style.css
  16. ./script.js
  17. ./index.html
  18. timeout 170 node .claude/skills/paper-craft-studio-site/scripts/check.mjs index.html --out check 2>&1 | tail -30
  19. ./check/1440.png
  20. ./check/390.png
  21. ./style.css
  22. timeout 170 node .claude/skills/paper-craft-studio-site/scripts/check.mjs index.html --out check 2>&1 | tail -5
  23. Done

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

Questions

Is Paper-Craft Studio Site free?

No. Paper-Craft Studio 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 Paper-Craft Studio Site?

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

What do I get when I buy Paper-Craft Studio Site?

A ZIP of the whole skill folder (40 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 Paper-Craft Studio 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 ./paper-craft-studio-site with your agent's flag.

What do I get from Paper-Craft Studio Site?

One HTML file with its CSS inside: no build step, no framework. A site for an artist or creative collective in a layered cut-paper style. Checked at phone and desktop widths.

What does Paper-Craft Studio Site need?

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

How big is Paper-Craft Studio Site?

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

What does a run cost?

Our 1 runs took 2 min 56 s to 2 min 56 s and $0.54 to $0.54 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 Paper-Craft Studio Site to use it?

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