Claude Code Skill

Frontend Projects
One-Click Deploy, Instant Preview

Tell Claude "deploy this" and it automatically builds, uploads, configures Nginx, and issues SSL certificates — giving you a public HTTPS URL in seconds.

Terminal
# Say to Claude:
> deploy this project
# Auto-executed:
$ pnpm build
$ scp -r dist/* root@server
$ nginx reload + SSL
✅ Deployed successfully!
https://my-app.preview.example.com

Why Choose Presentation Skill

Focused on frontend preview scenarios, compressing the tedious deployment process into a single natural language command.

One-Click Trigger

Just tell Claude "deploy this" or type /presentation. The entire process is automated — no complex commands to remember.

Auto HTTPS

Integrated acme.sh for automatic SSL certificate issuance and renewal. Every deployment gets HTTPS with zero configuration.

Smart Build Detection

Automatically detects npm, pnpm, or yarn package managers and reads package.json build scripts to adapt to various frontend projects.

Auto Nginx Config

Automatically generates virtual host configurations, reloads Nginx, and supports SPA route fallback — no manual server editing needed.

Deployment History

Automatically maintains DEPLOYMENTS.md recording each deployment's project, URL, time, and status for full visibility.

Wildcard Domains

Configure wildcard DNS once, and each project automatically gets a unique subdomain preview URL — no conflicts.

Five Steps to Deployment

From saying "deploy this" to getting an HTTPS URL — fully automated.

1

Load Config

Load server IP, domain, paths, and other settings

2

Local Build

Auto-detect package manager and run build command

3

Upload Files

SCP uploads build artifacts to server site directory

4

Nginx + SSL

Generate vhost config, issue HTTPS cert, and reload

5

Return URL

Output a publicly accessible HTTPS preview URL

What You Need Before Starting

Configure once, deploy with one click every time after. Here's what you need to prepare.

1

A Linux Server

A Linux server (e.g. Ubuntu/CentOS) with Nginx installed and the nginx command available. Ports 80 and 443 must be open for HTTP/HTTPS access.

2

Wildcard DNS Record

A domain with a *.your-domain.com A record pointing to your server IP. For example, *.preview.example.com → 1.2.3.4. Each project gets a unique subdomain automatically.

3

SSH Access

Your local machine must connect to the server via ssh and scp commands. Supports key or password auth with root or sudo-capable users.

4

acme.sh Certificate Tool

The server needs acme.sh for automatic SSL certificate issuance and renewal. If not installed, /presentation init will prompt you. Run curl https://get.acme.sh | sh to install.

5

Claude Code

Install and configure the Claude Code CLI tool. Presentation Skill runs as a Claude Code Skill, supporting both command and natural language triggers.

6

Frontend SPA Project

The project should be a static SPA application (e.g. Vite, React, Vue build output) with a package.json containing a build script. SSR applications (Next.js/Nuxt.js server-side rendering) are not supported.

Tip: DNS propagation typically takes a few minutes to several hours. After configuration, use dig *.your-domain.com to verify. If you only need a single project on a fixed domain, you can skip wildcard DNS and point the domain's A record directly to the server.

Three Steps to Get Going

Install the skill, initialize the server, deploy your project — it's that simple.

Terminal
# 1. Install the skill into Claude Code $ cp -r presentation/ ~/.claude/skills/ # 2. Initialize the preview server $ /presentation init ✓ Detecting Nginx... /usr/sbin/nginx ✓ Detecting acme.sh... Ready ✓ Initialization complete # 3. Deploy your project $ /presentation ✓ Detected pnpm → running build ✓ Uploading dist/ → server ✓ Nginx config + SSL ✅ https://my-app.preview.example.com
01

Install Skill

Copy the presentation skill to ~/.claude/skills/ directory. Claude Code auto-detects it. Supports /presentation command and natural language trigger.

02

Initialize Server

Run /presentation init to auto-detect Nginx path, acme.sh installation, create directory structure, and generate config files.

03

One-Click Deploy

Run /presentation in your frontend project or tell Claude "deploy this" to auto-build, upload, configure, and return an HTTPS URL.

04

Natural Language

No command needed. Just tell Claude "deploy this project", "publish preview", or "deploy" — it works the same way.

Local Orchestration + Server-Side Execution

The Skill coordinates the build process locally and interacts with the server via SCP/SSH to complete deployment.

Local (Claude Code)

  • SKILL.md — Process orchestration
  • config.md — Server configuration
  • DEPLOYMENTS.md — Deployment records
  • Auto-detect package manager
  • Execute build to compile project
  • SCP upload build artifacts
SCP / SSH

Preview Server

  • deploy-preview.sh — Deploy script
  • Nginx — Virtual host configuration
  • acme.sh — SSL certificate issuance
  • /var/www/previews — Site directory
  • Auto HTTP → HTTPS upgrade
  • Idempotent deployment, overwrite to update