From Viral This Fortnight · Build, don't scroll

Don't watch it. Build it.

The viral Claude Code setup clips, rewritten as copy-paste step-by-step guides. Each one tells you what you get, the tools you need, and the exact moves to get the same result — without sitting through the video.

8 Claude Code setups · companion to the viral roundup · Aziz Saif
Start building ↓ ← See the original videos

Steps are practical starting points written from working Claude Code knowledge — exact repo names, flags and URLs may shift, so sanity-check against each tool's own docs before you rely on it.

5 GitHub repos that turn Claude Code into a 10x engineer Short Prefer the clip? Watch on YouTube ↗
The stack

5 GitHub repos that turn Claude Code into a 10x engineer

What you get: A curated set of community repos — agent packs, slash-command libraries, MCP collections, skill packs and config templates — wired into your Claude Code.
GitHubClaude Code CLITerminal
Do this — step by step
  1. Know the five repo types you're collecting: (a) subagent/agent packs, (b) slash-command libraries, (c) MCP server collections, (d) skill packs, (e) starter CLAUDE.md / config templates.
  2. Find them: search GitHub for awesome-claude-code, claude code agents, claude code skills and sort by stars.
  3. Clone each into the matching folder — agents → .claude/agents/, commands → .claude/commands/, skills → .claude/skills/.
  4. For MCP collections, copy the server entries into .mcp.json or run claude mcp add.
  5. Restart Claude Code, then run /agents, /help and type / to confirm everything loaded.
  6. Test one on a real task before adding more — keep only what earns its place.
Clone a pack into your project
# example: drop an agent pack into your project
git clone https://github.com/<owner>/<agent-pack> /tmp/pack
mkdir -p .claude/agents && cp /tmp/pack/agents/*.md .claude/agents/
# restart Claude Code, then:
/agents
Result: Claude Code now has a senior-engineer toolkit — specialised agents, commands and skills on tap.
The GitHub setup that changes everything for Claude Short Prefer the clip? Watch on YouTube ↗
Setup

The GitHub setup that changes everything for Claude

What you get: A repo structured so Claude understands it on the first message — a clear CLAUDE.md, predictable layout and hooks.
Any repoClaude CodeCLAUDE.md
Do this — step by step
  1. Run /init in your repo to auto-generate a first CLAUDE.md, then refine it by hand.
  2. In CLAUDE.md write: what the project is, how to run / test / build, conventions, and clear do's & don'ts.
  3. Keep a predictable structure — src/, tests/, docs/, scripts/ — and add short READMEs to big folders.
  4. Add hooks in .claude/settings.json (e.g. run the linter/tests after edits, format on save) so quality is automatic.
  5. Add a few /commands for workflows you repeat (ship, review, test).
  6. Commit it — now every teammate (and every session) starts from the same context.
Minimal CLAUDE.md to start from
# Project — <name>
What: <one line>.
Run: `npm run dev`  ·  Test: `npm test`  ·  Build: `npm run build`

## Conventions
- <language/style rules>
- Keep files under 500 lines

## Do / Don't
- DO read a file before editing it
- DON'T commit secrets or .env
Result: Every session starts with Claude already knowing your codebase — far less re-explaining.
Headroom — context & token management (Netflix engineer) Short Prefer the clip? Watch on YouTube ↗
Tooling

Headroom — context & token management (Netflix engineer)

What you get: More usable working memory in long sessions, so Claude stops 'forgetting' and your token spend stays sane.
Claude Code/compact/clearCLAUDE.md
Do this — step by step
  1. Know the problem: long sessions fill the context window, quality drops and cost climbs.
  2. Run /compact when context fills — it summarises the session and reclaims room.
  3. Run /clear between unrelated tasks instead of letting one giant thread sprawl.
  4. Keep a CLAUDE.md so reloading context after a clear is cheap and instant.
  5. Offload state to files (a plan, notes, a checklist) rather than holding everything in chat.
  6. Push big searches to subagents so their token cost never pollutes your main context.
Result: Long-running sessions stay coherent and noticeably cheaper — no mid-task amnesia.
Hackathon winner open-sourced his entire Claude setup Short Prefer the clip? Watch on YouTube ↗
Open source

Hackathon winner open-sourced his entire Claude setup

What you get: A proven, prize-winning configuration — agents, skills, commands and CLAUDE.md — cloned onto your machine instead of built from scratch.
GitHubClaude Codesettings.json
Do this — step by step
  1. Open the repo from the video and inspect it: .claude/agents, .claude/skills, .claude/commands, CLAUDE.md, settings.json.
  2. Read settings.json first — check the hooks and permissions before you trust someone else's automation.
  3. Copy the parts you want into your global ~/.claude/ or your project .claude/.
  4. Adapt the CLAUDE.md to your own stack and rules.
  5. Restart Claude Code and run /agents and /help to verify it all loaded.
  6. Delete what you don't use — a lean setup beats a bloated one.
Result: A battle-tested setup in minutes, with the dangerous bits reviewed before you run them.
60 AI agents inside Claude Code (free setup guide) Short Prefer the clip? Watch on YouTube ↗
Agents

60 AI agents inside Claude Code (free setup guide)

What you get: A library of specialised subagents (reviewer, tester, security, researcher…) installed and routable on demand.
GitHub agent packClaude Code subagents~/.claude/agents
Do this — step by step
  1. Grab an agents pack repo (an 'awesome agents' style collection of .md files).
  2. Drop the agent files into ~/.claude/agents/ (global) or .claude/agents/ (this project only).
  3. Open one — each has frontmatter (name, description, tools) plus a system prompt that defines its job.
  4. Restart Claude Code and run /agents to see the full list.
  5. Use them: describe the task and Claude auto-routes, or name the agent you want.
  6. Prune to the dozen you actually reach for — 60 installed, but keep it tidy.
Anatomy of one agent file
---
name: code-reviewer
description: Reviews diffs for bugs and security issues
tools: Read, Grep, Bash
---
You are a senior reviewer. Find real bugs, flag risky
changes, and suggest the smallest safe fix.
Result: Specialised agents on demand — like hiring a team that's already onboarded.
How to run Claude Code (almost) free — the honest version Short Prefer the clip? Watch on YouTube ↗
Cost

How to run Claude Code (almost) free — the honest version

What you get: The approach people use to cut Claude Code cost to near-zero — plus the trade-offs the hype videos skip.
Claude CodeEnv varsLocal / alt model backend
Do this — step by step
  1. Understand the lever: Claude Code reads model endpoint + key from environment variables, so it can point at different backends.
  2. Common routes: a free-tier API key, a local model behind an OpenAI-compatible proxy, or a model-router tool.
  3. Set the base-URL and API-key env vars your chosen route needs, then restart Claude Code.
  4. Send a test prompt and confirm it's hitting the free backend (watch latency / output quality).
  5. Be honest about the trade-off: free/local models are weaker and slower — keep real Anthropic models for the hard tasks.
  6. Check the terms of any service before relying on it for real work.
Result: A cheap daily-driver setup for low-stakes work — with eyes open about where it falls short.
Claude Code pro website builds with a UI/UX skill Short Prefer the clip? Watch on YouTube ↗
Design

Claude Code pro website builds with a UI/UX skill

What you get: Designer-grade websites straight from Claude Code, using a UI/UX skill pack plus a design MCP — no designer needed.
Claude CodeUI/UX skill pack21st.dev Magic MCP
Do this — step by step
  1. Install the UI/UX skill pack (the 'Pro Max' set: style presets, colour palettes, font pairings) into .claude/skills/.
  2. Add the 21st.dev Magic MCP server so Claude can pull real components: claude mcp add with its command.
  3. Brief Claude: the brand, the vibe (editorial / playful / luxe), and the pages you need.
  4. Ask it to build using the skill's design system — it applies palettes, type pairings and spacing for you.
  5. Iterate in plain English: 'more editorial', 'add subtle motion', 'tighten the hero'.
  6. Preview locally, then refine until it ships.
Wire up the design MCP
# add the design component MCP, then restart Claude Code
claude mcp add magic -- npx -y @21st-dev/magic
# confirm it's connected
claude mcp list
Result: Professional, on-brand sites in a sitting — the look without hiring the look.
Claude's Find Skills tool — discover & install skills Short Prefer the clip? Watch on YouTube ↗
Skills

Claude's Find Skills tool — discover & install skills

What you get: A way to discover community skills by task and install the right one instead of reinventing it every time.
Claude Codefind-skills / skills.sh/help
Do this — step by step
  1. Know what a skill is: a reusable slash-command capability that triggers on keywords or via /name.
  2. Search by task — use the find-skills capability inside Claude, or browse the skills.sh directory.
  3. Pick one and install it into .claude/skills/ (drop the skill folder in).
  4. Restart Claude Code; the skill now fires on its trigger words or when you type /its-name.
  5. Confirm it's live with /help or by listing skills.
  6. Make it a habit: before building a workflow by hand, check if a skill already does it.
Result: Stop rebuilding the same workflows — pull a ready-made skill for almost any task.
Picsart MCP + Claude Code = AI image automation Short Prefer the clip? Watch on YouTube ↗
Automation

Picsart MCP + Claude Code = AI image automation

What you get: A hands-free image pipeline — generate, edit, remove backgrounds and upscale — driven entirely from Claude Code via Picsart's MCP server.
Claude CodePicsart MCPAPI key
Do this — step by step
  1. Create a Picsart developer account and grab an API key.
  2. Add the Picsart MCP server to Claude Code with claude mcp add, passing your key.
  3. Restart Claude Code and run claude mcp list to confirm it's connected.
  4. Ask in plain English: 'remove the background', 'upscale to 2x', 'make a 1:1 product shot'.
  5. Claude calls the MCP image tools and hands back the edited files / URLs.
  6. Chain it into a batch — e.g. clean and resize a whole product folder in one prompt.
Connect the Picsart MCP
# add the image MCP (key via env), then restart Claude Code
export PICSART_API_KEY=<your-key>
claude mcp add picsart -- npx -y <picsart-mcp-package>
# verify
claude mcp list
Result: Image generation and editing on command — no switching to a separate design app.
Build a business command center in one sitting Short Prefer the clip? Watch on YouTube ↗
Build

Build a business command center in one sitting

What you get: A single personal dashboard — revenue, leads, tasks, content calendar and automations — built with Claude Code in one session, replacing a stack of SaaS.
Claude CodeA simple web stackYour data sources
Do this — step by step
  1. List exactly what the dashboard must show: revenue, leads, tasks, content calendar, KPIs.
  2. Pick the simplest stack that works — one HTML page plus a tiny backend, or a static dashboard.
  3. Brief Claude with the sections and the data sources (CSV, a Sheet, an API).
  4. Have it scaffold the layout first, then wire up one widget at a time.
  5. Add a refresh job (a script or cron) so the numbers stay live.
  6. Run it locally and iterate section by section until it's your daily screen.
Result: One screen for the whole business — built in a sitting, owned by you, no monthly fees.
getdesign.md — make Claude build on-brand every time Short Prefer the clip? Watch on YouTube ↗
Design

getdesign.md — make Claude build on-brand every time

What you get: A single design file that captures your design system so every UI Claude builds is consistent and on-brand — no more drift.
Claude CodeDESIGN.mdCLAUDE.md
Do this — step by step
  1. Create a DESIGN.md (or getdesign.md) holding your tokens: colours, type scale, spacing, radius, core components and brand voice.
  2. Reference it from CLAUDE.md so it loads in every session automatically.
  3. When building UI, tell Claude: 'follow DESIGN.md'.
  4. Keep it the single source of truth — update the doc, not scattered one-off CSS.
  5. Optionally pair it with a component / design-system MCP for real building blocks.
  6. Review output against the tokens; when you spot drift, tighten the doc.
DESIGN.md skeleton
# Design System
Colours: --bg #FBF7F1  --ink #16110D  --accent #C45A3D
Type: Display 'Playfair Display' · Body 'Inter'
Scale: 13 / 15.5 / 21 / 32 / 50
Spacing: 8 16 24 40 64   ·   Radius: 10 / 16 / 24
Voice: confident, plain, no hype
Components: button (pill), card (1px line + soft shadow)
Result: Every page Claude builds shares one coherent, on-brand design language.
4 Claude skills every Claude user should install Short Prefer the clip? Watch on YouTube ↗
Skills

4 Claude skills every Claude user should install

What you get: Four high-leverage skills that turn ad-hoc prompting into repeatable, one-command workflows.
Claude Code.claude/skills//help
Do this — step by step
  1. Know the idea: a skill is a packaged slash-command workflow you trigger by keyword or /name.
  2. Pick four by the jobs you repeat most — e.g. a planner, a code reviewer, a doc/PDF maker, a design/UI one.
  3. Install each into .claude/skills/ (drop the skill folder in).
  4. Restart Claude Code and confirm they're live with /help.
  5. Use them: type the trigger or /skill-name and let the workflow run.
  6. Standardise — get your whole team on the same four so output is consistent.
Result: Four repeatable superpowers instead of retyping the same long prompts.
Top 3 Claude Code skills for non-designers Short Prefer the clip? Watch on YouTube ↗
Design

Top 3 Claude Code skills for non-designers

What you get: Three skills that let someone with zero design training ship work that actually looks good.
Claude CodeUI / design skillsdesign-review
Do this — step by step
  1. Name the gap non-designers hit: layout, colour & type choices, and final polish.
  2. Install three skills that close it — (a) a UI / design-system skill, (b) an infographic / one-pager skill, (c) a design-review skill.
  3. Drop them into .claude/skills/ and restart Claude Code.
  4. Build with the design skill, then run the design-review skill to catch AI-slop and spacing issues.
  5. Use the infographic skill whenever you need a shareable visual one-pager.
  6. Iterate on the review feedback until it looks intentional.
Result: Design-grade output without design training — build, then auto-critique, then fix.
The throughline

Watching is input. Building is output.

Every clip above is someone turning Claude Code into leverage. The fastest way to learn it isn't another video — it's running the steps once on your own machine. Want this wired into your own work?

Talk to Aziz on WhatsApp → DIY Marketing →