skills/preview-tunnel/SKILL.md
Run Next.js dev server and expose it via localtunnel for live preview sharing. Returns a public URL the user can send to clients or view on mobile. Activated after scaffold to let user see their site before deploy.
npx skillsauth add Hikkywannafly/vibe-kit preview-tunnelInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Give non-dev users a shareable preview URL for their locally running Next.js app without needing to deploy. Useful for client reviews and mobile testing.
npm run dev
# Runs on http://localhost:3000 by default
npx localtunnel --port 3000
# Returns: your url is: https://random-name.loca.lt
Or with a fixed subdomain (not guaranteed, best effort):
npx localtunnel --port 3000 --subdomain ten-cua-hang
# Returns: https://ten-cua-hang.loca.lt
Provide user with the tunnel URL and this note in Vietnamese:
Link xem thu: https://ten-cua-hang.loca.lt
(Link nay chi hoat dong khi may tinh ban dang bat.
De co link thuong tru, dung /vibe-deploy)
# Terminal 1
npm run dev
# Terminal 2
npx localtunnel --port 3000
Or with a single command using concurrently:
npm install --save-dev concurrently
Add to package.json:
{
"scripts": {
"preview": "concurrently \"npm run dev\" \"npx localtunnel --port 3000\""
}
}
Then: npm run preview
| Issue | Fix |
|-------|-----|
| "localtunnel: command not found" | Run npx localtunnel (no global install needed) |
| Tunnel URL shows password prompt | Enter any text — it's loca.lt's anti-abuse gate |
| Port 3000 already in use | Kill with lsof -ti:3000 \| xargs kill -9 or use port 3001 |
| Slow tunnel | Normal for loca.lt; for faster preview use Vercel deploy |
If localtunnel is unreliable, deploy a preview branch instead:
vercel deploy --prebuilt
# Returns a preview URL like: https://project-abc123.vercel.app
Supabase auth redirect URLs must include the tunnel URL for magic-link auth to
work during preview. Add https://*.loca.lt to allowed redirect URLs in
Supabase dashboard → Auth → URL Configuration.
data-ai
Generate Vietnamese marketing copy, UI strings, CTAs, error messages, and email templates for vibe-kit projects. Tone: friendly, conversational, Southern Vietnamese style. Activated for any user-visible text generation.
development
One-shot orchestrator. Turns the prose after /vibe into a shipped product by clarifying intent, rendering a plan, gating on approval, then spawning planner+researcher+fullstack-dev+tester+reviewer agents in sequence. User-visible strings match the user's input language (Vietnamese by default for VN users). Two modes: SAFE (default — clarify + show plan + wait for approval, max 1 round-trip) and YOLO (skip clarify+approval, run full auto with smart defaults — for demos and power users). YOLO triggers: prose contains `yolo`, `nhanh nha`, `lam luon`, `khoi hoi`, `auto`, or args start with `yolo`. Trigger phrases (EN + VN): "build me a site", "make me a landing page", "create a shop", "I need an app", "vibe lam website", "tao cho toi mot", "xay dung shop online", "lam landing page", "can mot app".
tools
On-demand security audit for vibe-kit projects. Stack-aware checks for Next.js App Router + Supabase + Polar: secrets leak, RLS gaps, service-role key in client bundle, missing webhook signature verification, unprotected API routes, weak headers, dependency vulns. Outputs a Vietnamese P0/P1/P2 report with file:line + fix hints. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "check security", "audit it", "security scan", "is this safe to launch", "kiem tra bao mat", "quet bao mat", "audit du an", "co an toan khong", "scan bao mat truoc khi deploy".
tools
Wire Supabase JS client into a React Native (Expo) vibe-kit project: session persistence via AsyncStorage, magic-link OAuth callback via expo-linking deep links, Realtime subscriptions on RN, and shared TypeScript types with the Next.js webapp twin (vibe-kit's typical web<->mobile pair pattern). This is the mobile counterpart of `auth-magic-link` (web). User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "supabase react native", "supabase mobile", "auth mobile expo", "magic link mobile", "tich hop supabase vao app", "supabase deep link".