Pagenue
Agent skills for building websites that look good, feel good, and convert.
https://github.com/user-attachments/assets/ba919b7d-9a4e-4d11-9344-017b0e244f07
Website · Skills · Install · Support
Skills for what to build with, how it should move, why people respond to it, and how it gets found. Works with Claude Code and any agent that reads SKILL.md files.
npx @codesudee/web-skills
The first run asks for your email to sign you in to a free Pagenue account. Then it asks which skills you want (or press Enter for all) and installs them into ~/.claude/skills. See Install for options.
Try before you install. The website shows each skill as a folder you can open, with an interactive demo.
Why this exists
An AI agent asked for "a landing page" will happily produce a generic one: default fonts, a hand-rolled fade-in, a blank sign-up form. The result works but is forgettable, and it does nothing for the person it was built for.
Two things fix that, and they are what this repo holds:
- A stack. Decide once which libraries to reach for (animation, scroll, components, framework, quality bar), so every build starts from good defaults instead of improvising.
- Psychology. Pages that sell or collect sign-ups succeed or fail on human behavior, not on code. Six well-studied principles, written as instructions an agent can follow.
Skills
| Skill | What it does | Use it when |
|---|---|---|
particle-globe-hero | A WebGL particle globe hero (no three.js, about 10 KB) that gathers on load, parts around the cursor and flies the camera through on scroll, with React, Astro and vanilla wiring | You want an interactive 3D hero or a scroll fly-through moment |
light-rays-background | A full-page bundle of glowing threads that pinches into a knot beside the hero and sways down the page behind every section, fading out behind text. One dependency-free file with React, Astro and no-build wiring | You want flowing light rays, glowing lines or a background that keeps moving as you scroll |
product-demo-video | Records a site with Playwright and edits it in Remotion: kinetic type, a camera that follows the cursor, beat-synced cuts, a ready sound kit and a music bed | You want a launch, promo or README video of a website or web app |
launch-workshop-video | A 40-second launch film from a product link: five cute characters build the launch on a little stage (crane-hoisted logo, the headline on a banner, real screenshots pinned up, "how it works" crates, a fact-checker stamping every claim, curtain up on the URL). Three original crew looks recolored to the brand, synthesized beat-synced music and sounds, frame-exact 4K or 1080p MP4, any language | You want a launch, announcement or promo video for a product, app or site |
ios-feel-motion | Rubber-band overscroll, spring presets, interruptible animation and flick projection, with the real iOS values | Building scrolling, dragging, sheets or animation that should feel native |
conversion-ux-psychology | Six UX psychology principles with do/avoid guidance and an ethics guardrail | The page sells something or asks the user to sign up |
apple-minimal-landing | A calm, Apple-like landing page look: Swiss grotesk with one italic serif accent, two-tone lowercase headlines, soft gray cards, one warm accent, and quiet motion (split-flap word rotator, blur reveals, sliding tab pill), with exact tokens and Tailwind/Framer Motion recipes | You want a landing page or product site that looks minimal, classy and premium |
website-build-stack | Names the default libraries and references for a site build, and when to use each | Starting any website, landing page or frontend build |
seo-toolkit | Router that sends SEO work to the claude-seo, geo-seo-claude and marketingskills skill sets and verifies against them | Writing or auditing SEO for any site |
They are designed to be used together: the stack decides the tools, the psychology decides the content and flow.
What's in the stack
| Need | Default | Why |
|---|---|---|
| Animation | GSAP | Timelines and ScrollTrigger handle nearly every motion need, and it is free |
| Smooth scroll | Lenis | Native-feeling scroll that keeps sticky and anchors working |
| Animated React components | react-bits | 215+ ready components, so you don't hand-roll common effects |
| Quality bar | Vercel Web Interface Guidelines + design.md | A checklist to review against before shipping |
| Tailwind v4 | Tailwind-Agent-Skills | Stops the agent writing v3-era classes and config |
| Framework | Astro | Zero JS by default, with islands for the interactive parts |
These are defaults, not rules. An existing project's stack, or one you name, always wins.
What's in the psychology
| Principle | One line | Example |
|---|---|---|
| Smart defaults | People rarely change defaults, so choose well | Pre-select the best plan |
| Goal gradient | Effort rises near the finish, so don't start at zero | Onboarding begins at 20% |
| Reciprocity | Give first and people give back | Free partial result before sign-up |
| IKEA effect | We value what we built | Personalize first; button says "Continue" |
| Loss aversion | Losses hurt about twice as much as gains | "You'll lose these 3 projects" |
| Contrast effect | Price is judged against what came before | Show the premium tier first |
Each one is written up in the skill with the reasoning, what to do, and what to avoid. The skill also contains a guardrail: no fake urgency, scarcity, progress or reviews. The principles should make a page clearer, not trick anyone.
Good for
- Landing pages, pricing pages, onboarding and sign-up flows
- Marketing and content sites (Astro) and animated React/Next.js sites
- Giving an agent a consistent house style across projects
Not for
- Internal tools, dashboards and docs. The psychology skill is scoped to conversion pages only.
- Projects with an established stack. The skills tell the agent to follow it.
How skills work
A skill is a folder with a SKILL.md. The top of the file (the frontmatter) has a name and a description. The agent reads only those at startup, which costs almost nothing. When your request matches a description, it loads the full file and follows it. That is why each description says when to use the skill.
skills/
particle-globe-hero/
SKILL.md
assets/ ready-to-copy engine, React wrappers, CSS
references/
light-rays-background/
SKILL.md
assets/ rays.ts, a no-build rays.js, CSS, React wrapper, example page
references/
product-demo-video/
SKILL.md
assets/ recorder, Remotion project, sound generators
references/
ios-feel-motion/
SKILL.md
conversion-ux-psychology/
SKILL.md
apple-minimal-landing/
SKILL.md
website-build-stack/
SKILL.md
seo-toolkit/
SKILL.md
Install
One command installs skills into ~/.claude/skills, so they apply to all your projects:
npx @codesudee/web-skills
The first time, it asks for your email and sends you a 6-digit code to sign in (free, no password). Then it lists the skills and asks which ones you want. Type numbers like 1,3 to pick some, or press Enter for all. Restart your agent session afterwards. Then ask for something like "build me a landing page for X" and the skills load on their own.
Options:
| Flag | What it does |
|---|---|
--list, -l | List the available skills |
--skill <name>, -s | Install only that skill (repeatable), without asking |
--all, -a | Install every skill without asking |
--project, -p | Install into ./.claude/skills for the current project only |
--dir <path> | Install into any directory |
--force, -f | Overwrite skills that are already installed |
--key <key> | Use the install key from your account for this run |
npx @codesudee/web-skills --list
npx @codesudee/web-skills -s conversion-ux-psychology
npx @codesudee/web-skills --all
npx @codesudee/web-skills --project
Existing skills are skipped unless you pass --force, so re-running is safe. When there is no interactive terminal (CI, scripts), it installs every skill without asking; sign in first with npx @codesudee/web-skills login <key> or pass --key.
To sign out, run npx @codesudee/web-skills logout.
Download instead: sign in at pagenue.com, open any skill, and press Download .zip. Unzip it into ~/.claude/skills.
Usage tip
To make the stack apply every time, add a line to ~/.claude/CLAUDE.md:
Whenever building or redesigning a website, check and apply the `website-build-stack` skill first.
Credits
- The six psychology principles are distilled from the uxpeak video "The UX Psychology Behind Apps People Can't Stop Using".
- The iOS motion values come from justinbuilds.mov's write-up "Why does iOS feel so nice to use" (blog.justinbuilds.mov/ios) and Apple's WWDC18 talk "Designing Fluid Interfaces".
- The demo-video motion techniques follow the examples collected at Prompt Motion, and the video is built with Playwright and Remotion (free for individuals and small teams; larger companies need a Remotion licence).
- The Apple-minimal landing style was first matched against the reception.sh landing page.
- The stack links to the projects above, which keep their own licenses.
Support
Four skills (website-build-stack, conversion-ux-psychology, seo-toolkit, launch-workshop-video) are free with a Pagenue account. The rest need Pagenue Pro, $9.50 paid once during the launch offer (usually $19), which includes new Pro skills as they're added. If the free ones save you time, you can support the work on Ko-fi or PayPal.
License
The skill files are under the Pagenue Skills License: use them in any project, but don't share or resell the files. Versions 0.5.0 and earlier were MIT and stay MIT.