skillbay.
My workspace
Explore / Text workflows
Sample runFictional input · real output from SKILL.md
InputProduct brief

Brief: Gutterbell landing page

Product: Gutterbell, a free phone app that reminds homeowners about seasonal maintenance (gutters, smoke-alarm batteries, boiler service).
Audience: first-time homeowners who don't know what needs doing or when.
Primary action: join the beta waitlist with an email address.
What we can say: 40 built-in reminder templates; reminders adjust to your region's seasons; no account needed to try it.
What we can't say: no customer numbers, no reviews yet, no app-store ratings.
Brand: name only, no logo yet. Likes "calm, practical, a bit warm".
Stack: static HTML/CSS; the waitlist form posts to /api/waitlist (already exists).

Fictional brief. "Gutterbell", its features and audience are invented for this demonstration.

OutputBuild report

Gutterbell landing page: build report

1. Content outline
  1. Promise: Home maintenance, remembered for you.
  2. Proof: example reminders (Oct gutters, Nov radiators, Mar smoke alarms). No customer numbers or reviews, as the brief says.
  3. Benefits: 40 ready-made reminders · seasons where you live · try it without an account.
  4. How it works: tell it about your home → pick your reminders → get a nudge on time.
  5. Primary action: "Join the waitlist" (email, posts to /api/waitlist).
2. Design system
TokenValue
TypeGeorgia serif for headings · system sans for body
Spacing0.5 / 1 / 1.5 / 2.5 / 4 rem
Coloursink #1f2a2e · muted #4d5b60 · paper #fbf8f3 · line #e4ddd2
Accentrust #b4532a (button only)
Visualsnone needed: no logo yet, and the reminder card is plain HTML
3. Build

Static index.html with inline CSS, no scripts and no external assets. Semantic header / main / section / footer; the email field has a <label for>, type=email, autocomplete=email and required.

4. Checks (headless Chromium)
CheckResult
Horizontal overflow at 360 px0 px · pass
Horizontal overflow at 1280 px0 px · pass
Keyboard orderemail → button · pass
Focus ring3 px solid on both controls · pass
Label associated with input1 label · pass
Empty submitblocked by required · pass
Contrast, body ink on paper13.87:1 · pass
Contrast, muted text on paper6.65:1 · pass
Contrast, white on accent button4.99:1 · pass (AA)
Reduced motionhover transition 0s · pass
Controls that do nothingnone (2 controls, both live)
5. Not run
  • Lint, types, build: the sample is a single static file, so there is no project toolchain to run them in.
  • Waitlist form: /api/waitlist does not exist in this sandbox, so a real submit was not tested.
  • Slow loading: not throttled. There is nothing external to load (0 requests beyond the HTML).

Produced by following clean-landing-page/SKILL.md on samples/input.md. Fictional product. The page is samples/output/index.html.

The page this run built, shown as delivered (forms disabled).
SKILL.mdFull file · 20 lines
---
name: clean-landing-page
description: "Turn a clear brief into a beautifully focused, responsive landing page."
---

# Clean Landing Page

## When to use
Use this skill when asked to build a focused, accessible landing page from a brief.

## Workflow
1. Read the existing project and its instructions. Identify the product, audience, primary action, and any provided brand assets. Ask only for missing details that change the design.
2. Write a five-line content outline: clear promise, supporting proof, key benefits, how it works, and a single primary action. Do not invent customer quotes, statistics, or company claims.
3. Establish a compact design system: two type styles, a spacing scale, accessible colors, and one accent. Use real provided assets or original CSS/SVG visuals.
4. Build semantic, responsive HTML in the existing framework. Include keyboard focus, correctly associated form labels, useful alt text, and reduced-motion support.
5. Test narrow and wide screens, keyboard navigation, empty states, slow loading, and the primary action. Avoid decorative controls that do nothing.
6. Run the project's lint, types, and build checks. Report exactly what passed, failed, or was not run.

## Definition of done
A visitor understands what the product does and what to do next. There is no horizontal overflow at 360px. Interactive controls work or clearly explain their unavailable state.
InstallClaude Code
npx skillbay install clean-landing-page --agent claude-code

Other agents and scopes: see Installation below.

WHAT IT WRITES

Every line traces back to the input.

A practical starter workflow for turning a product brief into an accessible, responsive landing page. It covers message hierarchy, layout, implementation, and a final quality check, so your agent has a clear definition of done.

THE PLAYBOOK

How your agent works through it.

  1. 01
    Read the project and the brief
  2. 02
    Write a five-line content outline
  3. 03
    Set a compact design system
  4. 04
    Build semantic, responsive HTML
  5. 05
    Test screens, keyboard and states
  6. 06
    Run lint, types and build; report
USE IT IN YOUR PROJECT

Choose your agent.

The package is instructions only: SKILL.md, a README and the sample run as Markdown, no scripts.

Native SKILL.mdOfficial docs reviewed · 2026-10-02
SKILL DIRECTORY
.claude/skills/clean-landing-page/

Review the package, then place the complete skill folder here. Keep SKILL.md, scripts, references and assets together.

IN YOUR AGENT/clean-landing-page
  1. Start a project session and inspect /skills; explicitly invoke /clean-landing-page.
LOCAL CLI INSTALL
npx skillbay install clean-landing-page --agent claude-code

Run from your target workspace. Requires Node.js 22 or later. Sign in once with npx skillbay login; premium packages install with an active plan. CLI docs

  • Local personal skills are not automatically present in Cowork or cloud sessions. Use repository skills in cloned cloud workspaces or separately enabled account skills.
  • Portable exports omit Claude-only dynamic shell interpolation and tool pre-approval.
Claude Code documentation
Filesystem install and export checks are separate from agent discovery or execution. Each workflow still needs its listed tools and dependencies. No end-to-end agent run is certified.
START WITH THIS REQUEST

Use the clean-landing-page skill. Read SKILL.md first. Ask me for anything it needs that I have not given you, follow its steps on my material, then report what you checked and anything you could not verify.

Related skills

Responsive Product Landing Page: sample outputPRO
🔒 Model info for members
AGENT WORKFLOWWeb

Responsive Product Landing Page

Turn a product and positioning brief into a complete static landing page: semantic HTML, token-driven CSS, an SVG product mock, social card and launch files.

7 stages7 deliverablesPython 3.10+ and Pillow
Claude CodeCodexGemini CLI
SKILL.md + scripts + referencesPreview only