New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Preview

by tobihagemann in tobihagemann/turbo

Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply.

MITAuto-check passedFrontend & Design

Install Preview

skills CLI
$ npx skills add tobihagemann/turbo --skill preview -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tobihagemann/turbo preview --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tobihagemann/turbo.git skills-src && mkdir -p .claude/skills && cp -r skills-src/codex/skills/preview .claude/skills/preview && rm -rf skills-src

Use ~/.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/

Facts

Skill name
preview
GitHub stars
409
Token cost
~1.3k tokens
SKILL.md length
825 words
Files
1
Skills in repo
81
Repo updated
First seen
Licence
MIT

At a glance

Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply.

  • Works in 5 steps: Determine Scope → Determine Launch Approach → Bring Up the Stack → …
  • The user asks to preview the change
  • SKILL.md covers Step 1: Determine Scope, Step 2: Determine Launch…, Step 3: Bring Up the Stack and Step 4: Point the User at the…, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Preview is an agent skill from tobihagemann/turbo. Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply. Use when the user asks to "preview the change", "let me try it", "spin up the app so I can test it", "set it up so I can poke at it", or before finalizing a UI/UX change that needs human eyes.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design and Meeting notes and agendas. The repository describes itself as: Reusable workflows for planning, building, reviewing, and shipping with Claude Code and Codex. The licence is MIT.

When your agent uses it

  • The user asks to preview the change
  • Spin up the app so I can test it
  • Set it up so I can poke at it
  • Before finalizing a UI/UX change that needs human eyes

Example prompts

  • “preview the change”
  • “let me try it”
  • “spin up the app so I can test it”
  • “/preview”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Determine Scope
  2. Determine Launch Approach
  3. Bring Up the Stack
  4. Point the User at the Running App
  5. Act on the User's Reply

What it can do on your machine

Read from SKILL.md and the folder at commit 160a0fa. 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

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

Preview loads about 1.3k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 825 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

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 tobihagemann/turbo at commit 160a0fa, republished under its MIT licence (© tobihagemann). 825 words, ~1,306 tokens.

Download SKILL.mdSave it as .claude/skills/preview/SKILL.md (or your agent's skills folder).
name
preview
description
Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply. Use when the user asks to "preview the change", "let me try it", "spin up the app so I can test it", "set it up so I can poke at it", or before finalizing a UI/UX change that needs human eyes.

Preview

Bring up the running app and let the user drive it themselves to judge the change, then act on their verdict.

Step 1: Determine Scope

Resolve what to preview using the first match:

  1. User-specified — the user says what to look at. Use that.
  2. PR — a PR URL or number is provided. Fetch its details and read the changed code.
  3. Conversation context — prior conversation contains recent work. Extract what changed, where it lives, and the expected behavior.
  4. App-level discovery — fresh context with no prior work. Examine entry points, routes, and the README to identify the app's core user-facing flows.

If the resolved scope has no user-visible surface to try (a CLI-only change, a library with no entry point, backend work with no UI to look at), present this message: "Nothing to preview — <one-line reason>." Then call update_plan to mark this step completed and continue with the next step of the active workflow.

Step 2: Determine Launch Approach

Check for a project-specific skill or plugin that launches the app, and use it if present. Otherwise use the fallback for the surface type:

  • Web app → start the dev server; the access point is the local URL and port
  • Desktop/native app → build and launch the app so its window is open

Step 3: Bring Up the Stack

Start backend services and frontend together — a frontend-only change still needs the backend running to be exercised. When a service runs at an address other than its default, find the settings elsewhere in the stack that name that default, such as allowed origins and sign-in callback URLs, and bring each in line through runtime overrides, leaving the working tree unchanged: add the new address beside the default in a list, and replace the default only where no process outside this skill reads the setting. Build first if the project requires a build step.

Start long-running processes in a background shell and wait until each reports ready. Confirm each process bound to its port before sending it traffic, since a readiness probe passes just as well against an orphan from an earlier attempt. Capture each process's PID and stop it by that PID and its process group, rather than by port or command-line pattern, which also match a concurrent agent's server. Tail their logs in a background shell so backend errors and warnings surface while the user is trying the app.

If a required service cannot be stood up in this session (missing auth provider, external dependency, seed data), or a process fails to start or never reports ready, use request_user_input to surface the blocker and let the user choose how to proceed.

Show full SKILL.md (385 more words)Show less

Step 4: Point the User at the Running App

Output as text:

  • The access point — the local URL and port for a web app, or confirmation that the window is open for a native app
  • When the surface sits behind a sign-in, each account to use with its password and the role that account holds, plus every key or code generated while bringing up the stack that the app requests during or after sign-in, such as on a new browser
  • What changed
  • Each scenario worth trying, as many as the change needs: numbered steps naming the exact controls and inputs, the result to expect after each step, and the judgment the user is being asked to make. Write each scenario so one person can perform it at one device, one action after another. When a scenario depends on a state the user would not reach in ordinary use, open it with what that state is in the user's own terms and why it is worth looking at
  • Each case left out of the scenarios because one person cannot perform it that way
  • When a verification pass preceded this hand-over, what it could not cover: paths needing real credentials, external services, or state unavailable in this session
  • How to reply once they have tried it: say it looks good, adding whether to keep the app running or shut it down, or describe what needs changing

Then end the turn, leaving every process this skill started running.

Step 5: Act on the User's Reply

A goal continuation turn that carries no reply from the user is not a verdict: end it without calling any tool and without advancing.

  • Needs changes — make the change the user describes, then rebuild or refresh the running app so it is live. When the reply or session context surfaces further open issues, fix and re-verify each. Once no known issue remains, output what changed and the scenarios worth retrying, close with Step 4's reply guidance, and end the turn again.
  • Looks good — when the user asks to shut the app down, stop every process this skill started, and revert every override this skill made in a service that keeps running. Otherwise leave everything running.

Then call update_plan to mark this step completed and continue with the next step of the active workflow.

© tobihagemann, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in codex/skills/preview of tobihagemann/turbo.

Open the folder on GitHubat commit 160a0fa

Compare with similar skills

Preview 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.

Preview compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Preview this skilltobihagemann/turbo409—~1.3kAutomated safety check: PassMIT
Lark Appsrongxinzy/RongxinAI1541 repos~2.8kAutomated safety check: NotesAGPL-3.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause

Similar skills

  • Lark Apps

    rongxinzy/RongxinAI

    妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV…

    154 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • 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.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

More from tobihagemann/turbo

All 81 skills in this repo

  • Consult Oracle

    tobihagemann/turbo

    Consult ChatGPT Pro via ChatGPT browser automation for problems that resist standard approaches.

    409 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Fetch PR Comments

    tobihagemann/turbo

    Fetch and summarize review feedback and conversation from a GitHub PR (unresolved review threads, review bodies, and PR conversation comments) without making changes.

    409 GitHub stars~967 tokensUpdated today
    Auto-check passed

  • Recall Rationale

    tobihagemann/turbo

    Recall why a past change was made by locating the Claude Code transcript that produced it.

    409 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Resolve PR Comments

    tobihagemann/turbo

    Evaluate, fix, answer, and reply to GitHub pull request review comments and conversation comments.

    409 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

  • Resolve PR Comments

    tobihagemann/turbo

    Evaluate, fix, answer, and reply to GitHub pull request review comments and conversation comments.

    409 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

  • Assess Technical Debt

    tobihagemann/turbo

    Assess project-wide structural technical debt: complexity hotspots, deprecated API usage, duplication clusters, architecture rot, and low-value tests.

    409 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

Categories

Questions about Preview

What does Preview do?

Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply. Preview is an agent skill from tobihagemann/turbo. Stand up the project's live app and hand it to the user to try a change firsthand, then act on their verdict once they reply.

When should I use Preview?

Preview fits situations like: the user asks to preview the change; spin up the app so I can test it; set it up so I can poke at it; before finalizing a UI/UX change that needs human eyes.

How do I install Preview in Claude Code?

Run `npx skills add tobihagemann/turbo --skill preview -a claude-code`. Or copy the skill folder (codex/skills/preview in tobihagemann/turbo) into .claude/skills/preview in your project. Claude Code loads it when a task matches its description.

How do I install Preview in Codex?

Run `npx skills add tobihagemann/turbo --skill preview -a codex`. Or copy the skill folder (codex/skills/preview in tobihagemann/turbo) into .agents/skills/preview in your project. Codex loads it when a task matches its description.

Can I use Preview 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 tobihagemann/turbo --skill preview -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/preview, .gemini/skills/preview, .github/skills/preview and .opencode/skills/preview in your project.

What does Preview need to run?

SKILL.md names no scripts, command-line tools or credentials: Preview is instructions for the agent only.

Does Preview 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 Preview 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 Preview use?

Preview is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Preview use?

About 1.3k tokens (SKILL.md is roughly 5.2k 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 Preview?

Skills that share tags, products or a category with Preview: Lark Apps (rongxinzy/RongxinAI, 154 stars), UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Preview?

tobihagemann (a GitHub user) maintains it in tobihagemann/turbo, which has 409 GitHub stars. The repository holds 81 skills in this directory. The repository was last updated on October 9, 2026.

Source: tobihagemann/turbo on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.