Preview
hanamizuki/solopreneur
Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…
Generate immersive, one-shot single-file HTML websites with embedded CSS and JS.
Install Oneshot Website
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install cafe3310/public-agent-skills oneshot-website --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills_parked/oneshot-website .claude/skills/oneshot-website && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .claude/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-websiteType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install cafe3310/public-agent-skills oneshot-website --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills_parked/oneshot-website .agents/skills/oneshot-website && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .agents/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install cafe3310/public-agent-skills oneshot-website --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills_parked/oneshot-website .cursor/skills/oneshot-website && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .cursor/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/cafe3310/public-agent-skills.git --path skills_parked/oneshot-website--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install cafe3310/public-agent-skills oneshot-website --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills_parked/oneshot-website .gemini/skills/oneshot-website && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .gemini/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install cafe3310/public-agent-skills oneshot-websiteInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills_parked/oneshot-website .github/skills/oneshot-website && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .github/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cafe3310/public-agent-skills --skill oneshot-website -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install cafe3310/public-agent-skills oneshot-website --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cafe3310/public-agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills_parked/oneshot-website .opencode/skills/oneshot-website && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "oneshot-website" agent skill from https://github.com/cafe3310/public-agent-skills/tree/main/skills_parked/oneshot-website into .opencode/skills/oneshot-website/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oneshot-website", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
oneshot-website- GitHub stars
- 255
- Token cost
- ~1.5k tokens
- SKILL.md length
- 704 words
- Files
- 3
- Skills in repo
- 29
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Generate immersive, one-shot single-file HTML websites with embedded CSS and JS.
- Works in 5 steps: Elegant restaurant storefront -- dark… → Luxury perfume house -- mist particles,… → Antiquarian bookshop at night -- warm… → …
- Writeup showcases
- SKILL.md covers When to invoke, The Generation Prompt, Hosting and Example Output Names
- Calls vercel and python3
What it does
Oneshot Website is an agent skill from cafe3310/public-agent-skills. Generate immersive, one-shot single-file HTML websites with embedded CSS and JS. No external images. Hostable on CodePen or Vercel. Use for writeup showcases, AI capability demos, and portfolio pieces.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `oneshot-website.md` and `themes.md`).
It sits in Frontend & Design, covering HTML artifacts. It works with Vercel. The repository describes itself as: personal agent skills for better QoL. The licence is Apache-2.0.
When your agent uses it
- Writeup showcases
- AI capability demos
- Portfolio pieces
Example prompts
- “/oneshot-website”
Requirements
- Python 3
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Elegant restaurant storefront -- dark marble, candlelight, menu sections appearing like courses being served
- Luxury perfume house -- mist particles, scent notes drifting, amber and obsidian palette
- Antiquarian bookshop at night -- warm amber light, floating text fragments, vellum textures in CSS
- Deep sea research station -- bioluminescent creatures via canvas, pressure gauge UI, midnight blue
- Jazz club and vinyl lounge -- smoke rings via SVG, waveform visualizations, sepia and amber
What it can do on your machine
Read from SKILL.md and the folder at commit 6c45501. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
vercelpython3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use vercel, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Oneshot Website loads about 1.5k tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 704 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from cafe3310/public-agent-skills at commit 6c45501, republished under its Apache-2.0 licence (© cafe3310). 704 words, ~1,470 tokens.
Download SKILL.mdSave it as
.claude/skills/oneshot-website/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- oneshot-website
- description
- Generate immersive, one-shot single-file HTML websites with embedded CSS and JS. No external images. Hostable on CodePen or Vercel. Use for writeup showcases, AI capability demos, and portfolio pieces.
- author
- github/jpcaparas
- depends_on_binary
- python3
Oneshot Website
Generate a stunning, self-contained single-file HTML website -- fully immersive, scroll-driven, cinematic. No external images, no build step. Drop into CodePen or push to Vercel as-is.
Inspired by high-end digital brand experiences and the kind of creative coding that makes people say "this was done in one shot?"
When to invoke
Use when:
- Demonstrating an LLM's creative + technical range for writeups or articles
- Creating a stunning demo to embed in a CodePen
- Producing a portfolio piece or proof-of-concept landing page
- Showing off one-shot generation capabilities
The Generation Prompt
When this skill is invoked, generate the full HTML file using this master approach:
Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about [THEME].
The site must feel like a living brand experience -- sections that breathe as you scroll, typography that has weight and presence, and atmosphere you can almost feel.
Theme Selection
If no theme is specified, choose one from the repertoire in references/themes.md that hasn't been recently used. Never default to clockwork, clocks, or time-perception themes.
Recommended defaults (rotate through these):
- Elegant restaurant storefront -- dark marble, candlelight, menu sections appearing like courses being served
- Luxury perfume house -- mist particles, scent notes drifting, amber and obsidian palette
- Antiquarian bookshop at night -- warm amber light, floating text fragments, vellum textures in CSS
- Deep sea research station -- bioluminescent creatures via canvas, pressure gauge UI, midnight blue
- Jazz club and vinyl lounge -- smoke rings via SVG, waveform visualizations, sepia and amber
Technical Constraints (NON-NEGOTIABLE)
- Single file: All HTML, CSS, JS in one
.htmlfile - No external images: Use CSS gradients, SVG inline art, Canvas API, or unicode/emoji symbols only
- No CDN dependencies for core visuals (Google Fonts via @import is acceptable)
- No frameworks: Vanilla JS only. No React, Vue, Alpine, etc.
- Static: Must work as a static file (no server-side logic)
- Self-hostable: Drop into Vercel as
index.htmlor paste into CodePen
Show full SKILL.md (383 more words)Show less
Quality Bar
This is NOT a simple landing page. It should feel like it was commissioned by a world-class brand agency. Include:
Visual craft:
- Scroll-triggered reveals with Intersection Observer (not scroll events -- use IO for performance)
- Parallax depth on at least 2 layers (background moves slower than foreground)
- Typography that has character -- mix of serif and sans, large display type with tight tracking
- Color palette of 3-4 tones maximum, applied with intention (not rainbow)
- Subtle animated texture or grain overlay via CSS (repeating SVG noise, pseudo-element with opacity)
Interaction:
- Cursor that responds subtly (not gimmicky -- a small dot or trail at most)
- Hover states that feel intentional (transforms, not just color changes)
- At least one section with a scrolling marquee or horizontal text ticker
- Navigation that changes opacity/style on scroll
Atmosphere:
- Hero section with large, centered typographic statement
- At minimum 5 distinct sections with scroll transitions between them
- Footer with subtle details (coordinates, a fictional address, a motto in a second language)
- A moment of surprise -- one section that does something unexpected (inverted colors, a canvas animation, text that rearranges)
Polish details:
font-display: swapon any web fontswill-change: transformon animated elements- Smooth scroll behavior on
html - Mobile-responsive (flexbox/grid, no fixed px widths on containers)
prefers-reduced-motionmedia query to disable animations for accessibility
Output Format
Produce two files:
1. PROMPT.md -- the exact one-shot prompt that will be used to generate this site.
2. index.html -- the complete single-file website. Start with <!DOCTYPE html> and end with </html>. No explanation before or after the HTML.
Format of PROMPT.md:
# One-Shot Prompt
**Theme**: [theme name]
**Generated**: [date]
**Model**: [model name and version]
## Prompt
[The complete verbatim prompt that would reproduce this exact site if fed to any capable LLM fresh]
## Notes
- [Any notable techniques used]
- [Hosting: CodePen / Vercel / local]Name fictional brands with restraint: evocative, not punny. Think: "Maison Vorieux", "Sublevel 7", "The Meridian Press", not "Tasty Bistro" or "Cool Restaurant".
Hosting
CodePen
- Create new Pen
- Paste entire contents into the HTML panel
- Enable "Full Page" view
Vercel
mkdir my-site && cd my-site
# save as index.html
vercel --prodLocal preview
open index.html # macOS
# or
python3 -m http.server 3000Example Output Names
The generated site should have a real name. Examples by theme:
| Theme | Brand Name | Tagline |
|---|---|---|
| Restaurant | Maison Vorieux | Fine dining, honest cooking |
| Perfume | Atelier Obscur | Scent as memory |
| Bookshop | The Meridian Press | Est. 1887 |
| Deep Sea | Sublevel 7 | Research below the thermocline |
| Jazz | The Amber Room | Live music every Thursday |
| Botanical | Selva Studio | Plants for considered spaces |
| Mineral | Cabinet Brut | Specimen traders since 1952 |
| Observatory | Station Nuit | Watching since 1901 |
| Night Market | Hawker's Almanac | Every dish has a story |
© cafe3310, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in skills_parked/oneshot-website of cafe3310/public-agent-skills.
- SKILL.md
- oneshot-website.md
- themes.md
Open the folder on GitHubat commit 6c45501
Compare with similar skills
Oneshot Website next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Oneshot Website this skillcafe3310/public-agent-skills | 255 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Previewhanamizuki/solopreneur | 152 | — | ~5.2k | Automated safety check: Pass | MIT | |
| Claude Designmateaix/mateclaw | 1.2k | 3 repos | ~4.9k | Automated safety check: Pass | Apache-2.0 | |
| Htmldropooiyeefei/ccc | 495 | — | ~5.2k | Automated safety check: Warn | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Paperclip Pagepaperclipai/paperclip | 99k | — | ~1k | Automated safety check: Pass | MIT |
Similar skills
Claude Design
mateaix/mateclaw
Design one-off HTML artifacts (landing, deck, prototype). An agent skill from mateaix/mateclaw.
Htmldrop
ooiyeefei/ccc
Reach for this skill when an HTML artifact — report, deck, brief, mockup, dashboard, proposal, spec, or landing page, whether the user already has it or you just generated it — needs to reach other…
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Paperclip Page
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
More from cafe3310/public-agent-skills
All 29 skills in this repoImpeccable
cafe3310/public-agent-skills
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Text Watermark Fountain
cafe3310/public-agent-skills
A specialized skill for embedding and extracting resilient watermarks in text by manipulating sentence lengths and using Fountain Codes.
Obsidian Todo Collector
cafe3310/public-agent-skills
从 Obsidian 知识库中扫描指定时间范围内未完成事件，生成/更新未完成事件整理文档. An agent skill from cafe3310/public-agent-skills.
Deep Research
cafe3310/public-agent-skills
一个全面、自主的深度研究框架。当用户请求对复杂主题、市场调研、技术格局进行深入的多维度调查，或需要大量网页浏览、数据合成和结构化报告的任何任务时，使用此技能。它协调子代理（subagents）并使用基于文件系统的状态管理来防止上下文膨胀。
Long Audio To Obsidian
cafe3310/public-agent-skills
将语音转写项目输出的复杂文件结构整理合并为适合 Obsidian 归档的 Markdown 文档. An agent skill from cafe3310/public-agent-skills.
Markdown New
cafe3310/public-agent-skills
通过 markdown.new API 将网页、整站或搜索结果转换为干净的 Markdown. An agent skill from cafe3310/public-agent-skills.
Related
Works with
Categories
Questions about Oneshot Website
What does Oneshot Website do?
Generate immersive, one-shot single-file HTML websites with embedded CSS and JS. Oneshot Website is an agent skill from cafe3310/public-agent-skills. Generate immersive, one-shot single-file HTML websites with embedded CSS and JS.
When should I use Oneshot Website?
Oneshot Website fits situations like: writeup showcases; AI capability demos; portfolio pieces.
How do I install Oneshot Website in Claude Code?
Run `npx skills add cafe3310/public-agent-skills --skill oneshot-website -a claude-code`. Or copy the skill folder (skills_parked/oneshot-website in cafe3310/public-agent-skills) into .claude/skills/oneshot-website in your project. Claude Code loads it when a task matches its description.
How do I install Oneshot Website in Codex?
Run `npx skills add cafe3310/public-agent-skills --skill oneshot-website -a codex`. Or copy the skill folder (skills_parked/oneshot-website in cafe3310/public-agent-skills) into .agents/skills/oneshot-website in your project. Codex loads it when a task matches its description.
Can I use Oneshot Website in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cafe3310/public-agent-skills --skill oneshot-website -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/oneshot-website, .gemini/skills/oneshot-website, .github/skills/oneshot-website and .opencode/skills/oneshot-website in your project.
What does Oneshot Website need to run?
Going by SKILL.md and its folder, Oneshot Website needs the command-line tools its instructions call (vercel and python3). Our summary lists: Python 3.
Does Oneshot Website access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Oneshot Website safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Oneshot Website use?
Oneshot Website is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Oneshot Website use?
About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Oneshot Website?
Skills that share tags, products or a category with Oneshot Website: Preview (hanamizuki/solopreneur, 152 stars), Claude Design (mateaix/mateclaw, 1.2k stars), Htmldrop (ooiyeefei/ccc, 495 stars) and LobeHub Interactive Prototype (lobehub/lobehub, 83k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Oneshot Website?
cafe3310 (a GitHub user) maintains it in cafe3310/public-agent-skills, which has 255 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on June 26, 2026.
Source: cafe3310/public-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.