Ship Page

Create stunning, interactive landing pages for products, startups, and side projects — zero dependencies, single HTML file. Use this skill whenever the user wants to build a landing page, product page, launch page, marketing page, or any promotional web page for their app, tool, SaaS, open-source project, or personal brand. Also triggers when users say "I need a website for my product", "help me launch", "make a page for my app", or want to convert a README into a visual landing page. Works great for Product Hunt launches, GitHub project pages, and indie hacker ship days.

12 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Zooeyii/ship-page-skill --skill ship-page

Manual install

git clone --depth 1 https://github.com/Zooeyii/ship-page-skill.git /tmp/ship-page-skill
mkdir -p ~/.claude/skills
cp -r /tmp/ship-page-skill/. ~/.claude/skills/ship-page

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Ship Page

Create interactive, animation-rich landing pages that run entirely in the browser as a single HTML file.

This skill helps non-designers ship professional product pages through visual exploration ("show, don't tell"), then generates production-quality landing pages with real interactivity — not static mockups.

## Core Principles

- **Zero Dependencies** — Single HTML file with inline CSS/JS. No npm, no build tools, no frameworks. A single HTML file will outlive any React project.
- **Show, Don't Tell** — People can't describe what they want, but they know it when they see it. Generate visual previews, let them pick.
- **Anti-AI-Slop** — No purple gradients on white. No generic SaaS templates. Every page should feel custom-crafted for the product.
- **Interactive by Default** — Landing pages aren't slides. They have scroll animations, hover states, data counters, particle effects, and micro-interactions that make visitors stay.
- **Ship-Ready** — Output works immediately. Drop the HTML file anywhere — GitHub Pages, Vercel, Netlify, or just open it in a browser.

## Detect Mode

- **Mode A: New Page** — Create from scratch. Go to Phase 1.
- **Mode B: README Conversion** — Turn a GitHub README or product description into a landing page. Extract content, then go to Phase 1 Step 2 (skip content questions, go straight to style).

Read the full skill on GitHub

Details

Skill name: ship-page
Repository: Zooeyii/ship-page-skill
License: MIT
Repo updated: 8 March 2026

FAQ

What does the Ship Page skill do?

How do I install the Ship Page skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Zooeyii/ship-page-skill --skill ship-page. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Ship Page popular?

It lives in Zooeyii/ship-page-skill, which has 12 GitHub stars and 1 forks.

Related skills

Taxue Halftone

taxueseek/taxue-halftone

半调海报：用限墨+网点把任意主题做成有结构、有质感、可复用的艺术封面。支持多种印刷语言（半调/孔版/双色/木刻/蓝晒/蓝染/复印机、1-bit 剪影、撕纸拼贴），按风格给出一致又有特色的封面。六项不变式出图前先定：纸色、墨色角色、叠印方式、印刷机制、主体走向、字图音量。触发词：半调海报、艺术封面、网点、孔版、双色、Riso、duotone、木刻、蓝晒、蓝染、蓝染海报、物影、蓝晒物影、反俗套蓝染、复印机美学、不完美印刷拼贴、撕纸拼贴、编辑型印刷拼贴、有意不完美、点阵解构、丝网海报、剪纸、窗花、中式剪纸、网点剪纸、经典致敬、风格模仿、致敬、名画、艺术流派、年代美学、视觉风格转译、波普、波点、圆点场、点画、视错觉、扁平矢量图形、艺术展览海报、平台封面（B站/小红书/抖音/公众号/头像/超宽）、主题结构印刷封面、限墨封面。不用于：全彩实拍、UI、图表、模板拼贴。

Frontend & Design

Netops

Con-Benksl/NetOps

Route authorized VPS networking and proxy work to onboarding, read-only scanning, building, repair, or fleet management. Use for VPS access, 3x-ui/Xray/VLESS Reality/Hysteria2, DNS/TUN/routing failures, node performance, or ongoing multi-VPS operations. 典型中文请求：VPS 连不上、节点慢或掉线、搭建或修改节点、面板打不开、多台 VPS 统一维护。

Frontend & Design

Slizdeck

pedroanze/slizdeck

Genera decks de slides HTML animados a partir de un design system propio — enfocado en pitch decks de startup (minimalista, poco texto, mucha imagen/gráfica), pero también sirve para charlas, demos y recaps de evento. Arquitectura deck-stage 1920×1080 con navegación por teclado, pensado para presentar en vivo. Trae cinco style packs listos (terminal oscuro, blanco puro, color dominante, denso en datos, editorial), cada uno con paleta, tipografía y reglas de composición validadas contra contraste WCAG y clichés visuales de IA. El design system se define de forma guiada —elegir un pack, inyectar

Frontend & Design

Readydesign Skill

ZethRise/ReadyDesign-Skill

Force UI work onto six ready-to-use libraries only: shadcn/ui, Ant Design, Kokonut UI, Motion (motion.dev), Bklit (bklit.com), and sashimi UI. Web-fetch each official site one-by-one and install the real components from those pages — never invent APIs, class names, colors, or components from memory. Use when building or restyling a UI, scaffolding a frontend, adding components, picking a design system, or when the user says ReadyDesign, ready-to-use components, shadcn, antd, kokonut, motion.dev, framer motion, bklit, sashimi, or runs /readydesign-skill or $readydesign-skill.

Frontend & Design

Figma Annotations Strategy

saralobo/skill-figma-annotations

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

Frontend & Design

Experiment Report Skill

lyzbcy/experiment-report-skill

Create a complete experiment report workflow with frontend visualization and structured markdown report. Supports any experiment type — implementation, interactive frontend, screenshots, and md/docx delivery. Use for 实验报告、experiment report and experiment-related 前端展示 or 可视化报告, with visual confirmation before the final report.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.