Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Farm app landing page: 1440, made in this run
Run 1Farm app landing page“Build a landing page for Herdbook, our livestock app. Brief 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, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Farm App Landing Page

An illustrated farm-app landing page: rolling fields, a tractor, app screens, features, figures, pricing and FAQ.

$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 illustrated landing page for a farming or agritech app into your own project: warm wheat and field green with an illustrated landscape of rolling fields and a tractor, the app on a phone, feature cards, three steps, figures, a farmer quote, pricing per farm and questions. 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 farm management, agritech, weather, soil, livestock or rural service app needs a landing page, or someone asks for an illustrated, countryside, fields-and-tractor look.

By RecaplyUpdated 12 Nov

Install Farm App Landing Page

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

Read https://recaply.co/skills/farm-app-landing-page/install.md and follow it to install the farm-app-landing-page skill from farm-app-landing-page.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 Farm App Landing Page is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An illustrated landing page for a farming or agritech app
  • Checked at phone and desktop widths

Good fit

  • When a farm management, agritech, weather, soil, livestock or rural service app needs a landing page

Not for

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

About this skill

You say

Build a landing page for Herdbook, our livestock app. Brief in brief.md.

It said back

The Herdbook landing page is built, but I overwrote the skill's sample page by mistake and haven't been able to put it back. The final check also doesn't pass cleanly because of that.

What went wrong: my build script ran with the shell inside .claude/skills/farm-app-landing-page/reference/. It overwrote the skill's sample reference/index.html with the Herdbook page and left two stray files, favicon.svg and og-image.svg, in that folder. My attempts to move or restore them were blocked by a permissions prompt on .claude/, so they're still there. I have the original sample's full text from earlier in this session. If you say go ahead, I'll write it back and remove the two stray files.

Show more

What it did in run 1

  1. ls -la && cat brief.md
  2. farm-app-landing-page
  3. cd ./.claude/skills/farm-app-landing-page && ls -R . | head -30 && wc -c reference/* && node scripts/check.mjs --ready; cat reference/index.html
  4. cd ./.claude/skills/farm-app-landing-page/reference && grep -n "feat-list\|features-grid\|farm-tractor\|hero-art\|farm-art" style.css | head -30; cat script.js | head -60
  5. grep -n "form\|field\|\.avatar\|stat-list\|\.cta-box\|\.sr-only\|hero-note" style.css | cut -c1-220
  6. cd . && cp .claude/skills/farm-app-landing-page/reference/{style.css,script.js} . && cat > build.mjs <<'EOF' import fs from 'node:fs'; const ic=(p)=><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="${p}"/></svg>; const arrow=ic('M5 12h14M13 6l6 6-6 6'), tick=ic('M5 12l5 5 9-10'), plus=ic('M12 5v14M5 12h14'); const logo=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M5 27C5 14 13 5 27 5c0 14-9 22-22 22z" fill="#2F6B2A"/><path d="M5 27L18 14" stroke="#FBF6E9" stroke-width="2.5"/></svg>; const feats=[ ['M4 8h3l1.5-2h7L17 8h3v11H4zM12 17a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z','Reads ear tags','Point your phone at the tag and the animal comes up. No typing numbers with cold fingers.'], ['M3 9a14 14 0 0 1 18 0M6 12.5a9.5 9.5 0 0 1 12 0M9 16a5 5 0 0 1 6 0M12 19.5h.01','Works offline','Record in the field with no signal. Herdbook syncs when you are back in range.'], ['M9 3h6v4l4 12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2l4-12zM8 14h8','Medicine log','Warns you about withdrawal periods before an animal goes anywhere it should not.'], ['M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a1.5 1.5 0 1 0 0-.01M17 19a1.5 1.5 0 1 0 0-.01','Movement records','Kept ready for the government reporting service, so reporting is not a Sunday-night job.'], ['M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3zM9 9h6M9 13h6','Calving book','Sire, ease of birth and notes for every calf, in one place.']]; const steps=[['01','Add your animals','Scan ear tags with your phone camera, or start with a few and add the rest as you go.'],['02','Record as you work','Log medicine, movements and calvings in the field. It all saves on the phone.'],['03','Let it sync','Back in signal, your records sync and your movements are ready to report.']]; const faqs=[['Does it work without signal?','Yes. Herdbook works offline in the field and syncs when you are back in signal.',1], ['How does the free trial work?','You get 30 days to try Herdbook, and you do not need to enter a card.'], ['Will it tell me about withdrawal periods?','Yes. The medicine log warns you about withdrawal periods.'], ['Does it do my movement records?','Yes. Movement records are kept ready for the government reporting service.']]; const tiers=[ ['Free','For small herds.','£0','up to 50 animals','Choose Free',false,['Up to 50 animals']], ['Herd','For growing herds.','£19','/ month','Choose Herd',true,['Everything in Free','More than 50 animals']], ['Large herd','For herds over 1,000 animals.','£49','/ month','Choose Large herd',false,['Everything in Herd','Over 1,000 animals']]]; const html=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Herdbook: animal records for cattle and sheep farmers</title> <meta name="description" content="Herdbook keeps your animal records, movements, medicine log and calving book in your pocket, and works offline in the field. Free for 30 days, no card."> <meta property="og:title" content="Herdbook: animal records for cattle and sheep farmers"> <meta property="og:description" content="Animal records, movements, medicine log and calving book that work offline in the field. Start a free 30-day trial, no card."> <meta property="og:type" content="website"> <meta property="og:image" content="og-image.svg"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> <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=Bitter:wght@500;700;800&family=Karla: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 nav-bar"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Herdbook home">${logo}<span>Herdbook</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="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">Questions</a></li></ul><a class="btn btn-primary btn-sm" href="#cta">Start free trial</a></nav> </div></header> <main id="main"> <section class="hero hero-split"><div class="wrap hero-in"><div class="hero-words reveal"><h1>Your herd records, <em>done in the field</em></h1><p class="hero-sub">Herdbook keeps animal records, movements, medicine and calving for cattle and sheep farmers, and works even when your phone has no signal.</p><div class="hero-ctas"><a class="btn btn-primary" href="#cta">Start your free 30-day trial${arrow}</a><a class="btn btn-ghost" href="#features">See what it does</a></div><p class="hero-note">No card needed. Used on 2,600 farms.</p></div><div class="hero-art reveal"><div class="farm-art"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#CDE7F5"/><stop offset="1" stop-color="#E8D58A"/></linearGradient></defs><rect width="400" height="300" fill="url(#sky)"/><circle cx="165" cy="96" r="30" fill="#FFFFFF"/><path d="M0 170 C 100 141, 220 176, 400 151 L400 300 L0 300Z" fill="#E8D58A"/><path d="M0 210 C 100 160, 220 221, 400 186 L400 300 L0 300Z" fill="#7FB24A"/><path d="M0 255 C 100 220, 220 260, 400 254 L400 300 L0 300Z" fill="#3F7D2C"/><g fill="#FFFFFF" stroke="#1F2A1A" stroke-width="2"><ellipse cx="300" cy="222" rx="13" ry="8"/><circle cx="313" cy="218" r="5"/><ellipse cx="335" cy="236" rx="13" ry="8"/><circle cx="348" cy="232" r="5"/></g></svg><div class="farm-tractor"><svg viewBox="0 0 300 200" role="img" aria-label="Red tractor"><rect x="70" y="70" width="120" height="70" rx="8" fill="#C8372D"/><rect x="130" y="30" width="60" height="50" rx="6" fill="none" stroke="#C8372D" stroke-width="8"/><rect x="190" y="96" width="70" height="44" rx="8" fill="#C8372D"/><rect x="230" y="70" width="10" height="30" fill="#1F2A1A"/><circle cx="110" cy="150" r="40" fill="#1F2A1A"/><circle cx="110" cy="150" r="16" fill="#F2C14E"/><circle cx="240" cy="160" r="26" fill="#1F2A1A"/><circle cx="240" cy="160" r="10" fill="#F2C14E"/></svg></div><div class="farm-phone"><svg viewBox="0 0 90 170" role="img" aria-label="Herdbook on a phone, showing an ear tag being read"><rect x="2" y="2" width="86" height="166" rx="14" fill="#1F2A1A"/><rect x="8" y="14" width="74" height="142" rx="8" fill="#FBF6E9"/><rect x="14" y="22" width="62" height="40" rx="6" fill="#E7F0D9"/><rect x="34" y="30" width="22" height="24" rx="5" fill="#F2C14E" stroke="#1F2A1A" stroke-width="2"/><circle cx="45" cy="38" r="3" fill="#1F2A1A"/><rect x="14" y="70" width="62" height="10" rx="5" fill="#2F6B2A"/><rect x="14" y="88" width="46" height="7" rx="3.5" fill="#E3DAC2"/><rect x="14" y="101" width="54" height="7" rx="3.5" fill="#E3DAC2"/><rect x="14" y="114" width="38" height="7" rx="3.5" fill="#E3DAC2"/><rect x="14" y="132" width="62" height="16" rx="8" fill="#2F6B2A"/></svg></div></div></div></div></section> <section class="sec features features-grid features-five" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head "><h2 id="features-h">Built for <em>muddy</em> hands</h2></div><ul class="feat-list">${feats.map(f=><li class="feat reveal"><span class="feat-ic">${ic(f[0])}</span><h3>${f[1]}</h3><p>${f[2]}</p></li>).join('')}</ul></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">Set up before <em>lunch</em></h2></div><ul class="feat-list">${steps.map(s=><li class="feat reveal"><span class="feat-n">${s[0]}</span><h3>${s[1]}</h3><p>${s[2]}</p></li>).join('')}</ul></div></section> <section class="sec stats"><div class="wrap"><dl class="stat-list"><div class="stat reveal"><dt>farms use Herdbook</dt><dd>2,600</dd></div><div class="stat reveal"><dt>animals recorded</dt><dd>1.1 million</dd></div></dl></div></section> <section class="sec quotes quotes-single" id="stories"><div class="wrap"><ul class="quote-list"><li class="quote reveal"><figure><blockquote><p>Herdbook does my movement records while I'm still in the field. I used to spend Sunday nights on paperwork.</p></blockquote><figcaption><span class="avatar avatar-initials" aria-hidden="true">GP</span><span><b>Gwen Pritchard</b><br><span class="role">Beef and sheep farmer, 340 head, Powys</span></span></figcaption></figure></li></ul></div></section> <section class="sec pricing" id="pricing" aria-labelledby="pricing-h"><div class="wrap"><div class="sec-head "><h2 id="pricing-h">One price per <em>farm</em></h2></div><ul class="tiers">${tiers.map(t=><li class="tier reveal${t[5]?' featured':''}">${t[5]?'<p class="tier-flag">Suggested</p>':''}<h3>${t[0]}</h3><p class="tier-blurb">${t[1]}</p><p class="tier-price"><span class="amount">${t[2]}</span><span class="per">${t[3]}</span></p><a class="btn ${t[5]?'btn-primary':'btn-ghost'}" href="#cta">${t[4]}</a><ul class="ticks">${t[6].map(x=><li>${tick}${x}</li>).join('')}</ul></li>).join('')}</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">${faqs.map(q=><details class="reveal"${q[2]?' open':''}><summary>${q[0]}${plus}</summary><p>${q[1]}</p></details>).join('')}</div></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">Less paperwork, more <em>farming</em></h2><p>Free for 30 days. No card.</p><form class="inline-form" data-form data-done="Thanks. Your email is noted, but this form is not connected to a sign-up service yet."><label class="sr-only" for="trial-email">Your email address</label><input id="trial-email" type="email" name="email" autocomplete="email" placeholder="Your email address" required><button class="btn btn-primary" type="submit">Start free trial</button><p class="form-status" role="status"></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>Herdbook</span></a><p>Animal records for cattle and sheep farmers.</p></div><nav class="foot-col" aria-label="Product"><h2>Product</h2><ul><li><a href="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">Questions</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Herdbook.</p></div></footer> <script src="script.js" defer></script> </body> </html>; fs.writeFileSync('index.html',html); fs.writeFileSync('favicon.svg',<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">${logo.replace(/^<svg[^>]*>|<\/svg>$/g,'')}</svg>); fs.writeFileSync('og-image.svg',<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630"><rect width="1200" height="630" fill="#FBF6E9"/><path d="M0 470C300 400 700 500 1200 430V630H0z" fill="#7FB24A"/><path d="M0 550C300 500 700 580 1200 530V630H0z" fill="#3F7D2C"/><text x="80" y="260" font-family="Georgia,serif" font-weight="800" font-size="110" fill="#1F2A1A">Herdbook</text><text x="80" y="340" font-family="Arial,sans-serif" font-size="40" fill="#4D5A45">Animal records for cattle and sheep farmers</text></svg>); EOF node build.mjs && cat >> style.css <<'EOF' /* Herdbook additions */ .farm-phone{position:absolute;width:19%;right:7%;bottom:9%;filter:drop-shadow(0 10px 10px rgba(31,42,26,.3))} .farm-phone svg{width:100%;height:auto} .avatar-initials{display:grid;place-items:center;background:var(--chip-bg);color:var(--accent);font-family:'Bitter',serif;font-weight:700;font-size:1rem} .features-five .feat-list{grid-template-columns:repeat(6,minmax(0,1fr))} .features-five .feat{grid-column:span 2} .features-five .feat:nth-child(n+4){grid-column:span 3} @media (max-width:900px){.features-five .feat,.features-five .feat:nth-child(n+4){grid-column:span 3}.features-five .feat:last-child{grid-column:1/-1}} @media (max-width:600px){.features-five .feat,.features-five .feat:nth-child(n+4),.features-five .feat:last-child{grid-column:1/-1}} EOF node .claude/skills/farm-app-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
  7. cd . && cp .claude/skills/farm-app-landing-page/reference/style.css .claude/skills/farm-app-landing-page/reference/script.js . && ls
  8. W=.; cp $W/.claude/skills/farm-app-landing-page/reference/style.css $W/style.css && cp $W/.claude/skills/farm-app-landing-page/reference/script.js $W/script.js && ls $W
  9. ./.claude/skills/farm-app-landing-page/reference/style.css
  10. ./build.mjs
  11. ./script.js
  12. ./style.css
  13. cd . && node build.mjs && sed -i '' -e 's/^\.features-grid::after,\.faq::after{/#how::after{/' -e "s/%23E7F0D9/%232F6B2A/" -e '/^\.faq::after{display:none}/d' style.css && node .claude/skills/farm-app-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
  14. ./style.css
  15. ./style.css
  16. node ./build.mjs
  17. pwd; ls -la . ./.claude/skills/farm-app-landing-page/reference
  18. mv ./.claude/skills/farm-app-landing-page/reference/favicon.svg ./favicon.svg
  19. mv ./.claude/skills/farm-app-landing-page/reference/og-image.svg ./og-image.svg
  20. mv ./.claude/skills/farm-app-landing-page/reference/index.html ./index.html
  21. cd .
  22. node build.mjs
  23. node .claude/skills/farm-app-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
  24. ./check/1440.png
  25. ./check/390.png
  26. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 3 min 6 s · $0.62 of API use

Questions

Is Farm App Landing Page free?

No. Farm App Landing Page 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 Farm App Landing Page?

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

What do I get when I buy Farm App Landing Page?

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 Farm App Landing Page?

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 ./farm-app-landing-page with your agent's flag.

What do I get from Farm App Landing Page?

One HTML file with its CSS inside: no build step, no framework. An illustrated landing page for a farming or agritech app. Checked at phone and desktop widths.

What does Farm App Landing Page need?

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

How big is Farm App Landing Page?

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

What does a run cost?

Our 1 runs took 3 min 6 s to 3 min 6 s and $0.62 to $0.62 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 Farm App Landing Page to use it?

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