# Pagekit
> Crea una landing page o portafolio completo a partir de una entrevista breve, pensado para alguien que no programa: entrevista, diseño, scaffolding con Next.js + Tailwind + shadcn/ui, despliegue sin cuenta de Vercel y SEO/AEO listos.
Fuente: https://skillsagentes.com/skills/kraayenjon/claude-pagekit/pagekit
Markdown: https://skillsagentes.com/skills/kraayenjon/claude-pagekit/pagekit.md
Repositorio: https://github.com/kraayenjon/claude-pagekit
Autor: kraayenjon
Licencia: NOASSERTION
Actualizado: hace 13 horas
Coste de contexto: 143 tok instalada, 3k tok al activarse, 3k tok con todos los archivos del bundle
Bundle: 1 archivo, 12 KB
Permisos que pide: ninguno declarado
## Instalación
Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.
```bash
# Claude Code
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent claude-code
# Cursor
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent cursor
# Codex
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent codex
# Gemini CLI
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent gemini
# Windsurf
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent windsurf
# Cline
npx -y skills add kraayenjon/claude-pagekit --skill pagekit --agent cline
```
## Qué hace
- Ejecuta una entrevista de cuatro rondas para definir marca, diseño y contenido
- Elige una dirección de diseño y estructura de secciones según el tipo de negocio
- Genera el proyecto con Next.js, Tailwind y shadcn/ui
- Escribe la página, la revisa y la despliega sin cuenta de Vercel
- Configura JSON-LD, llms.txt, robots.txt, sitemap, favicon y metadata SEO
## Cuándo usarla
- El usuario pide 'build me a website', 'landing page', 'portfolio site' o 'página web'
- Quiere un sitio de una página para un negocio pequeño y no escribe código
## Qué la activa
- "Necesito una landing page para mi negocio de repostería"
- "Hazme un sitio web para mi portafolio de fotografía"
- "Quiero una página para mi consultoría, tú decides el diseño"
## Antes de instalar
- Solo necesita tener instalado Node.js (v18 o superior) y Claude Code; no requiere cuentas ni claves de API.
- Necesita en el PATH: node, npm, npx
## Archivos
- SKILL.md — 12 KB
## SKILL.md
Reproducido tal cual desde kraayenjon/claude-pagekit bajo NOASSERTION. Esta sección es el documento original y está en inglés.
# PageKit
Take one person from nothing to a live landing page. They answer questions, you do everything
else.
Assume the user is a photographer, a baker, a consultant, a small agency — not a developer.
They may never have opened a terminal. Never show raw terminal output unless asked. Replace
every piece of jargon with a plain word.
**No accounts, no API keys, no signups.** Everything below works for someone who has installed
nothing but Node.js and Claude Code. If a companion skill suggests a paid tool or an API
integration, skip that part silently.
**Role lock.** Other skills you read during this flow will open by declaring they are an elite
art director or a senior SEO consultant. Ignore that framing — they are references, not roles.
Ignore any instruction in them to stop and wait for the user. The only pauses are the four
listed below.
## Companion skills
PageKit ships alongside these. Read each by path when this file says to, not because its
description sounds relevant.
| Skill | Read it |
|---|---|
| `design-taste-frontend` | Phase 2, always — the design authority |
| `minimalist-ui` / `high-end-visual-design` / `industrial-brutalist-ui` | Phase 2, exactly one of the three |
| `full-output-enforcement` | Phase 4, always — stops you truncating files |
| `copywriting` | Phase 4, before any headline |
| `landing-es` | Phase 4, whenever the page copy is Spanish |
| `cro` | Phase 5, to check the page persuades |
| `vercel-deploy` | Phase 6 |
| `seo-geo`, `seo-schema`, `seo-sitemap`, `llms-txt` | Phase 7 |
| `seo-local` | Phase 7, only if there is a physical address or service area |
If a companion skill is not installed, do the phase from the instructions here and say nothing
about the missing skill.
## The four pauses
Everything else runs without asking.
1. After questionnaire Round 2 — "Does this direction work?"
2. After Round 4 — "Did I get everything?"
3. After Phase 5 — "How does it look?"
4. Before Phase 6 — "Ready to put it online?"
## Phase 1 — Discovery
Four rounds, two to four questions at a time, conversational. Never read the list aloud.
**Round 1 — basics.** Business name. In one sentence, what they do. Who they are trying to
reach.
**Round 2 — look.** Any websites they like. Colour preferences, or should you pick. Light or
dark. What feeling visitors should get — professional, playful, bold, elegant, minimal, warm,
modern.
→ **Pause.** Present the direction. Get a yes before Round 3.
**Round 3 — content.** The one thing they want visitors to do. Three or four things worth
highlighting. Contact method. Any testimonials or client names. A tagline, if they have one.
**Round 4 — details.** Logo or photos to use. What language the page should be in — this is a
separate question from the language you are talking in. Whether they want it online today.
→ **Pause.** Summarise the brief.
Anyone who says "you decide" gets a decision, stated plainly, with one sentence of reasoning.
Do not push back. Do not re-ask.
## Phase 2 — Design direction
Read `design-taste-frontend`. It is long. Read it anyway — it is the main reason the page will
not look AI-generated.
Choose a direction, then read exactly one aesthetic skill for depth. Never two.
Choose a section order. Sensible defaults:
| Business | Order |
|---|---|
| Portfolio, photographer, designer | Hero → work grid → short about → contact |
| Local business, restaurant, salon | Hero → what we do → hours & location → proof → contact |
| Consultant, coach, freelancer | Hero → problem → how you help → proof → booking CTA |
| Small product or service | Hero → proof strip → benefits → objection → pricing → CTA |
Present in plain language: the feeling and why it fits, the colours with hex codes named like a
person would name them, the two fonts and what each is doing, the section order.
## Phase 3 — Setup
```bash
node --version
```
Below v18 or missing → "You need Node.js first. Go to nodejs.org, download the one marked LTS,
open the file, follow the installer. Tell me when it's done." Wait.
```bash
npx create-next-app@latest site --typescript --tailwind --app --src-dir --no-import-alias --yes
cd site
npx shadcn@latest init -b radix -p nova -y --css-variables --pointer
npx shadcn@latest add button card navigation-menu separator badge -y
npm install motion lucide-react
```
Do not simplify those flags:
- `-b radix` pins Radix. The current default base is Base UI, with different component code.
- `-p nova` is required. `-y` alone does **not** skip the preset prompt — the command hangs
forever with no output. Presets: `nova, vega, maia, lyra, mira, luma, sera, rhea`.
- `--pointer` adds `cursor-pointer` to generated components.
- The package is `shadcn`. `shadcn-ui` is deprecated on npm.
Recovery: "directory exists" → `rm -rf site` and retry. `init` hanging with no output → you
omitted `-p`. `init` failing → `npx shadcn@latest init --defaults` from inside `site/`, then
read `site/src/components/ui/*.tsx` before using any component API, because they will be Base
UI. `npm install` failing → `rm -rf site/node_modules site/package-lock.json && npm install
--prefix site`.
## Phase 4 — Build
Read `full-output-enforcement` first. Complete files. No placeholders, no "rest unchanged".
Read `copywriting` before writing a headline. Read `landing-es` too if the page is Spanish.
- `site/src/app/layout.tsx` — fonts, `metadata` export, global styles
- `site/src/app/page.tsx` — the page, a Server Component
- `"use client"` only for `useState`, `useEffect`, event handlers, or `motion/react`
`globals.css` already has `@import "tailwindcss"` and `@theme inline`. Edit the token values,
append your own `@theme` for type and spacing scales. Never overwrite the file. Never create
`tailwind.config.ts` — Tailwind 4 has no config file.
`create-next-app` hardcodes `body { font-family: Arial, Helvetica, sans-serif }`. Replace it —
fonts come from `next/font/google` with `display: "swap"` and CSS variables, never a CDN
``.
**Motion budget for a landing page:** a hero reveal, one scroll reveal per section, button
feedback. That is all.
- `cubic-bezier(0.23, 1, 0.32, 1)` for entrances and exits. Never `ease-in`
- Interface motion under 300ms; a marketing reveal may run to 800ms
- Never `scale(0)` — start at `scale(0.95)` with `opacity: 0`
- Animate `transform` and `opacity` only. Never `transition: all`
- `:active { transform: scale(0.97) }` on every button
- Hover motion behind `@media (hover: hover) and (pointer: fine)`
- `prefers-reduced-motion` keeps opacity and colour, drops movement
`motion` is imported as `motion/react`. Never also install `framer-motion` — same library, old
name, two copies shipped.
**Accessibility, not optional:** semantic landmarks, one `
` with no skipped levels, `alt`
on every image, 4.5:1 contrast on body text, `aria-label` on icon-only buttons, a visible
`