Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Lime frame portfolio: 1440, made in this run
Run 1Lime frame portfolio“Make my portfolio. Notes in brief.md, stills and a portrait 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

Lime Frame Portfolio

A dark charcoal portfolio held in a thick lime frame, with a big name, project list, services, figures and contact.

$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 dark designer portfolio inside a bold lime frame into your own project: charcoal page inside a fixed 10px lime frame, a huge name in a wide display face, a stacked list of projects with large pictures, services, figures, kind words and a contact form. 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 designer, art director or creative developer wants a bold, dark portfolio that stands out, or someone asks for a dark site with a neon or lime frame.

By RecaplyUpdated 12 Nov

Install Lime Frame Portfolio

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

Read https://recaply.co/skills/lime-frame-portfolio/install.md and follow it to install the lime-frame-portfolio skill from lime-frame-portfolio.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 Lime Frame Portfolio is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A dark designer portfolio inside a bold lime frame
  • Checked at phone and desktop widths

Good fit

  • When a designer, art director or creative developer wants a bold, dark portfolio that stands out

Not for

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

About this skill

You say

Make my portfolio. Notes in brief.md, stills and a portrait in photos/.

It said back

Your portfolio is built, and the check passes at 390, 768 and 1440 px. That covers sideways overflow, small text, alt text, contrast, focus styles, reduced motion, script errors, leftover sample words and icon characters.

I read the 390 and 1440 screenshots: nothing is cut off or overlapping. The lime frame shows only at the top of those full-page captures, because it is fixed to the viewport. I did not open check/768.png myself.

Show more

What it did in run 1

  1. lime-frame-portfolio
  2. ls -la . photos && cat brief.md
  3. cd ./.claude/skills/lime-frame-portfolio && ls -R reference | head -30; cat reference/index.html reference/style.css reference/script.js; node scripts/check.mjs --ready
  4. ~/.claude/projects/-private-var-folders-4r-x1k-d3dx36v-yrnn39ymflm40000gn-T-rcl-real-runs-lime-frame-portfolio-work1/252b8baa-d84c-4869-9e70-a68d2c8194dd/tool-results/bsdh0ltsf.txt
  5. ./photos/juno.jpg
  6. ./photos/festival-titles.jpg
  7. ./photos/sneaker-ad.jpg
  8. ./photos/music-video.jpg
  9. cd . && sips -g pixelWidth -g pixelHeight photos/*.jpg
  10. cd . && R=.claude/skills/lime-frame-portfolio/reference && cp $R/style.css style.css && cp $R/script.js script.js && cat >> style.css <<'EOF' /* ---- Juno Park additions ---- */ .hero-portfolio .hero-in{grid-template-columns:1.5fr 1fr} .hero h1{max-width:12ch} .hero-art img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--line)} .work-list-v .work-art{aspect-ratio:16/9} .work-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} .work-item:hover .work-art img{transform:scale(1.04)} .work-item:hover .work-meta h3{color:#C8F031} .work-list-v .work-list{gap:clamp(40px,6vw,80px)} .work-head{margin-bottom:clamp(32px,5vw,56px)} .clients-list{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem} .clients-list li{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.01em} .award{margin-top:2rem;color:var(--muted);max-width:60ch} .award strong{color:var(--ink);font-weight:600} .about-line{font-size:clamp(1.2rem,2vw,1.5rem);max-width:40ch;margin-top:1.25rem} .contact-line a{text-decoration:underline;text-decoration-color:#C8F031;text-underline-offset:.2em} @media (max-width:900px){.hero-portfolio .hero-in{grid-template-columns:1fr}.hero-art{max-width:420px}} EOF python3 - <<'EOF' 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">' logo='<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><rect x="3" y="3" width="26" height="26" rx="4" fill="#C8F031"/><rect x="11" y="11" width="10" height="10" fill="#161616"/></svg>' def work(img,alt,t,p,y=''): yr=f'<span class="work-year">{y}</span>' if y else '' return f'<li class="work-item reveal"><div class="work-art"><img src="photos/{img}" alt="{alt}" loading="lazy"></div><div class="work-meta"><h3>{t}</h3><p>{p}</p>{yr}</div></li>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Juno Park: Motion designer in Seoul and Berlin</title> <meta name="description" content="Juno Park is a motion designer in Seoul and Berlin. Title sequences, 3D product animation and music videos for festivals, sports brands and musicians."> <meta property="og:title" content="Juno Park: Motion designer in Seoul and Berlin"> <meta property="og:description" content="Type and objects that move like they mean it. Title sequences, 3D product animation and music videos."> <meta property="og:type" content="website"> <meta property="og:image" content="photos/festival-titles.jpg"> <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=Syne:wght@500;700;800&family=Manrope:wght@400;500;600&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="Juno Park home">{logo}<span>Juno Park</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 class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#work">Work</a></li><li><a href="#services">Services</a></li><li><a href="#contact">Contact</a></li></ul><a class="btn btn-primary btn-sm" href="#contact">Hire Juno</a></nav> </div></header> <main id="main"> <section class="hero hero-portfolio"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">Motion designer · Seoul and Berlin</p><h1>Juno Park makes things <em>move</em></h1><p class="hero-sub">I make type and objects move like they mean it. Most of my work is for festivals, sports brands and musicians.</p><div class="hero-ctas"><a class="btn btn-primary" href="#work">See the work{ic}<path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="btn btn-ghost" href="#contact">Hire Juno</a></div></div><div class="hero-art reveal"><img src="photos/juno.jpg" alt="Portrait of Juno Park, with a dark bob haircut, against a dark background with a bright lime light on the right" width="1024" height="1024"></div></div></section> <section class="sec work work-list-v" id="work" aria-labelledby="work-h"><div class="wrap"><div class="sec-head work-head"><h2 id="work-h">Selected <em>work</em></h2></div><ul class="work-list">{work("festival-titles.jpg","Glowing lime light trails curving across a black frame from the title sequence","Seoul Film Night 2026","The 90-second opening title sequence","2026")}{work("sneaker-ad.jpg","A white running shoe floating above a soft green surface, casting a shadow","Lift-off","Six 15-second 3D ads for Vela Running&rsquo;s new shoe")}{work("music-video.jpg","A dancer in silhouette in front of a wall of projected lime and purple light","Static Bloom","Music video for the band Neon Harbour, 3 min 40 s")}</ul></div></section> <section class="sec features features-list" id="services" aria-labelledby="services-h"><div class="wrap"><div class="sec-head"><h2 id="services-h">Services</h2></div><ul class="feat-list"><li class="feat reveal"><h3>Motion design</h3><p>Type, graphics and objects brought to life, from first board to final frame.</p></li><li class="feat reveal"><h3>Title sequences</h3><p>Openers for festivals, films and live events.</p></li><li class="feat reveal"><h3>3D product animation</h3><p>Short, sharp ads that make a product look fast.</p></li></ul></div></section> <section class="sec stats" aria-label="Juno in numbers"><div class="wrap"><dl class="stat-list"><div class="stat reveal"><dt>years in motion design</dt><dd>8</dd></div><div class="stat reveal"><dt>day rate</dt><dd>&euro;650</dd></div><div class="stat reveal"><dt>Berlin Motion Awards 2025, shortlisted</dt><dd>1</dd></div></dl></div></section> <section class="sec clients" aria-labelledby="clients-h"><div class="wrap"><div class="sec-head"><h2 id="clients-h">Worked <em>with</em></h2></div><ul class="clients-list reveal"><li>Seoul Film Night</li><li>Vela Running</li><li>Neon Harbour</li><li>Kreuzberg Radio</li></ul><p class="award reveal"><strong>Shortlisted, Berlin Motion Awards 2025.</strong></p></div></section> <section class="sec contact" id="contact" aria-labelledby="contact-h"><div class="wrap contact-in"><div class="reveal"><div class="sec-head"><h2 id="contact-h">Got something that should <em>move</em>?</h2></div><p class="contact-line">{ic}<path d="M3 6h18v12H3zM3 7l9 6 9-6"/></svg><a href="mailto:juno@junopark.tv">juno@junopark.tv</a></p><p class="contact-line">{ic}<path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12zM12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/></svg><span>Seoul and Berlin</span></p></div><form class="contact-form reveal" data-form data-done="This form is not connected yet, so nothing was sent. Please email juno@junopark.tv." aria-label="Contact form"><label class="field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label><label class="field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label><label class="field"><span>What are you working on?</span><textarea name="message" rows="5" required></textarea></label><button class="btn btn-primary" type="submit">Send message</button><p class="form-status" role="status" aria-live="polite"></p></form></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">{logo}<span>Juno Park</span></a><p>Motion designer in Seoul and Berlin.</p></div><nav class="foot-col" aria-label="Pages"><h2>Pages</h2><ul><li><a href="#work">Work</a></li><li><a href="#services">Services</a></li><li><a href="#contact">Contact</a></li></ul></nav><nav class="foot-col" aria-label="Contact"><h2>Contact</h2><ul><li><a href="mailto:juno@junopark.tv">juno@junopark.tv</a></li></ul></nav></div><div class="wrap foot-small"><p>&copy; <span data-year>2026</span> Juno Park. All rights reserved.</p></div></footer> <script src="script.js" defer></script> </body> </html> ''' open('index.html','w').write(html) EOF node .claude/skills/lime-frame-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -40
  11. cd . && ls; tail -3 style.css
  12. cd . && cp .claude/skills/lime-frame-portfolio/reference/style.css style.css && cp .claude/skills/lime-frame-portfolio/reference/script.js script.js && ls
  13. ./index.html
  14. cp .claude/skills/lime-frame-portfolio/reference/style.css style.css
  15. cp .claude/skills/lime-frame-portfolio/reference/script.js script.js
  16. cp reference/style.css ../../../style.css
  17. cp reference/script.js ../../../script.js
  18. cd . && pwd && ls -la .claude/skills/lime-frame-portfolio/reference
  19. cp .claude/skills/lime-frame-portfolio/reference/style.css style.css
  20. cp .claude/skills/lime-frame-portfolio/reference/script.js script.js
  21. ./style.css
  22. ./script.js
  23. node .claude/skills/lime-frame-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -40
  24. ./index.html
  25. node .claude/skills/lime-frame-portfolio/scripts/check.mjs index.html --out check 2>&1 | tail -20
  26. ./check/1440.png
  27. ./check/390.png
  28. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 54 s · $0.52 of API use

Questions

Is Lime Frame Portfolio free?

No. Lime Frame Portfolio 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 Lime Frame Portfolio?

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

What do I get when I buy Lime Frame Portfolio?

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 Lime Frame Portfolio?

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 ./lime-frame-portfolio with your agent's flag.

What do I get from Lime Frame Portfolio?

One HTML file with its CSS inside: no build step, no framework. A dark designer portfolio inside a bold lime frame. Checked at phone and desktop widths.

What does Lime Frame Portfolio need?

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

How big is Lime Frame Portfolio?

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

What does a run cost?

Our 1 runs took 2 min 54 s to 2 min 54 s and $0.52 to $0.52 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 Lime Frame Portfolio to use it?

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