Getting Started with VibeCoding

A guided starting point for building a website with AI, using either a quick setup or a preview before publishing. GitHub stores the project code, and Vercel publishes it on the internet.

In plain words
What is it for?
Use it to start a new website, answer questions about your brand, generate a preview, create the required GitHub and Vercel setup, and prepare the site for publishing.
Why use it?
It helps beginners choose a setup path and understand what accounts and steps are needed to move from an idea to a live or previewable site.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/mrhinkle/vibecoding-a-website/getting-started
Any agent
npx skills add mrhinkle/VibeCoding-a-Website --skill getting-started
Clone the repo
git clone --depth 1 https://github.com/mrhinkle/VibeCoding-a-Website

Made for: Claude Code, Codex.

Per session 113 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,738 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00113 $0.01738
Opus 5 $0.00056 $0.00869
Sonnet 5 $0.00023 $0.00348
Haiku 4.5 $0.00011 $0.00174

Measured 2d ago against content hash a487ef12bbe6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

Getting Started with VibeCoding scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/getting-started/SKILL.md · 205 lines

How it starts

The opening of the file, as written. The whole thing — 205 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Welcome to VibeCoding

You're about to build a beautiful, personalized website with AI. This skill gets you ready—no experience needed.

Let's Start

I'll ask you one question: Do you want to see a preview of your site first, or set up the full infrastructure right now?

Path A: Go All-In (Recommended)

If you want to get your website live as quickly as possible, we'll set up the infrastructure first. This takes about 5 minutes and lets you go from "finished site" to "live on the internet" in seconds.

Requirements:

  • Free GitHub account (create one at github.com)
  • Free Vercel account (create one at vercel.com)
  • About 5 minutes

Path B: Preview First

If you want to see what your site looks like before setting up accounts, we'll:

  1. Ask you questions about your brand (your colors, vibe, what you do)
  2. Generate your site
  3. Show you a preview on your computer
  4. Then ask if you want to go live (we'll set up the accounts together)

Requirements:

  • About 10 minutes total
  • No accounts needed upfront

Which Path Are You Taking?

Tell me: "I'm ready to set up" (Path A) or "Show me a preview first" (Path B).


Path A: Go All-In

Step 1: Create Your GitHub Account

GitHub is where your website code lives—think of it as a safe storage box for your project.

  1. Go to github.com
  2. Click "Sign up"
  3. Enter your email, create a password, choose a username
  4. Verify your email
  5. Done!

Step 2: Create Your Vercel Account

Vercel takes your code from GitHub and puts your site on the internet—automatically, every time you make a change.

  1. Go to vercel.com
  2. Click "Sign up"
  3. Choose "Continue with GitHub"
  4. Authorize Vercel to access your GitHub account
  5. Done!

Step 3: Let's Check Your Setup

I'll verify that your GitHub and Vercel accounts are ready.

On Claude Code (terminal)? I'll run a quick check:

gh auth status
vercel --version

On Claude Cowork (desktop)? I'll guide you through clicking to verify your accounts are set up.

Read the full file on GitHub · 205 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 205 lines · 113 tokens per session scan A a487ef12bbe6

Subscribe to this mod's changes

Getting Started with VibeCoding is a skill published in the GitHub repository mrhinkle/VibeCoding-a-Website (11 stars, last pushed 4mo ago), licensed MIT. It adds 113 tokens to every session and 1,738 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

obra/superpowers · 37 tokens

auto-perf-optimize

Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.

microsoft/vscode · 62 tokens

chat-perf

Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.

microsoft/vscode · 51 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens