Maison Cler
The Claude Code Shortlist

Before You
Start

Make sure you have the following in place before working through the installs. The whole setup takes under 30 minutes.

This is the shortlist we wish existed when we started with Claude Code. Not every possible install. Not a deep technical breakdown. Just the 9 installs that actually changed how we build — tested in production, used daily, explained in plain language.

Work through this in order. By the end you'll have a Claude Code setup that thinks like a marketer, builds like a designer, and ships like a team of five.

Prerequisites
Required Claude Code installed
Required Node.js v18+
Required GitHub account (free)
Required Anthropic account
Check your environment
Terminal
# Verify both are installed $ node --version $ claude --version
No Claude Code yet?
Install
$ npm install -g @anthropic-ai/claude-code
Note ~/.claude/skills/ is your global skills folder. Any SKILL.md you clone here is automatically discovered by Claude Code across all your projects. You'll create this in Step 01.
Environment Setup

How to Run
Claude Code

Three ways to run Claude Code — all work with every skill and MCP in this guide. Pick the one that fits how you work.

Option 01 — Terminal
Terminal

The default. Most direct. Recommended if you're comfortable in the command line. Every skill and MCP in this guide runs from here.

Terminal
# Install Claude Code globally $ npm install -g @anthropic-ai/claude-code # Navigate to your project and launch $ cd your-project $ claude
Option 02 — VS Code
VS Code

Claude Code runs inside VS Code's integrated terminal — no extra setup. Open your project, press Ctrl+` (or Cmd+`) to open the terminal, then run claude as normal. You can watch Claude edit your files live while it works.

Download VS Code at code.visualstudio.com, then:

VS Code Terminal
$ claude
Option 03 — Google Antigravity
Google Antigravity

Google's free AI-powered IDE released November 2025 — built around autonomous agents, not code completion. Instead of a file tree you get an Agent Manager: a mission control for running multiple agents across different tasks simultaneously.

Antigravity supports Claude Sonnet natively alongside Gemini 3 Pro. Download at antigravity.google — Mac, Windows and Linux. Free during public preview. Sign in with Google, then open Agent Manager and switch your model to Claude Sonnet.

Tip Antigravity is best for the big picture — parallel agents, live browser preview, visual task tracking. Claude Code CLI is the sharper tool for deep, precise work. Both work for this guide.
Quick Comparison
TerminalVS CodeAntigravity
Setup time2 min5 min10 min
Best forPower usersVisual learnersBeginners
CostFreeFreeFree
Skills✓✓✓
MCPs✓✓✓
The Stack · 8 installs

The Stack
at a Glance

~25 minutes total. Every install adds a specialist to your team. Steps 01–04 are Skills. Steps 05–08 are MCPs.

# Name Type Time GitHub
01Skill CreatorSkill2 minanthropics/skills→
02Awesome Claude CodeResource5 minhesreallyhim/awesome-cc→
03Marketing SkillsSkill2 mincoreyhaines31/marketingskills→
04UI/UX Pro MaxSkill2 minanthropics/skills→
05Google Stitch MCPMCP3 mingoogle-labs-code/stitch→
06Nano Banana 2MCP3 minop7418/NanoBanana2→
0721st.dev MagicMCP2 min21st-dev/magic-mcp→
08Perplexity MCPMCP2 minperplexityai/modelcontextprotocol→
09Notion MCPMCP3 minmakenotion/notion-mcp-server→
Note Steps 01–04 are Skill installs — SKILL.md files cloned from GitHub into ~/.claude/skills/. Steps 05–08 are MCP installs — live connections to external tools, each needing a one-time API key setup.
Skill · anthropics/skills · Free

Skill
Creator

The meta-skill Anthropic just dropped. Build, test and improve your own custom skills — with evals and A/B testing built in. Install this first.

What Forking a GitHub repo, cloning it to your machine, and placing the skill where Claude can find it. Claude automatically discovers any SKILL.md inside ~/.claude/skills/.
Step 1 — Fork on GitHub
Browser
github.com/anthropics/skills

Click Fork in the top right → Create fork. This makes your own editable copy under your GitHub account.

Step 2 — Create your global skills folder
Terminal
# This is where Claude looks for all your skills $ mkdir -p ~/.claude/skills
Step 3 — Clone your fork

Replace YOUR-USERNAME with your GitHub handle:

Terminal
$ git clone https://github.com/YOUR-USERNAME/skills ~/.claude/skills/anthropic-skills
Step 4 — Verify it's there
Terminal
# You should see skill folders listed $ ls ~/.claude/skills/anthropic-skills/
Step 5 — Open Claude Code and test
Terminal
$ cd your-project $ claude
Tip Ask Claude: "Use the Skill Creator to build a skill for my most repeated workflow." Describe what you do. It writes the SKILL.md, runs evals, and refines it. Custom skills in minutes.
Resource · hesreallyhim/awesome-claude-code · Free

Awesome
Claude Code

The most comprehensive curated list of Claude Code tools, skills, plugins and integrations on GitHub. Your map for everything the ecosystem has built.

What Forking it to your account and cloning it locally. Not an install — a reference you'll return to constantly. Search here before building anything from scratch.
Step 1 — Fork the repo
Browser
github.com/hesreallyhim/awesome-claude-code

Click Fork → Create fork.

Step 2 — Clone your fork locally
Terminal
$ git clone https://github.com/YOUR-USERNAME/awesome-claude-code
Step 3 — Bookmark it

Open the README and save it to your browser. Return here whenever you need a skill, hook, command or integration. Search with Cmd+F before building anything from scratch.

Tip Search by category: Skills, MCP Servers, IDE Integrations, Hooks, Agents. The ecosystem moves fast — someone has almost certainly already built what you need.
Skill · coreyhaines31/marketingskills · Free

Marketing
Skills

A SKILL.md that gives Claude Code a full marketing brain — CRO, copywriting, SEO, analytics and growth engineering in one install.

What Forking and cloning a GitHub repo, then copying the skill folder into ~/.claude/skills/. Claude finds it automatically from there.
Step 1 — Fork on GitHub
Browser
github.com/coreyhaines31/marketingskills

Click Fork → Create fork.

Step 2 — Clone your fork
Terminal
# Clone into a temp folder first $ git clone https://github.com/YOUR-USERNAME/marketingskills ~/temp-marketing
Step 3 — Copy into your skills folder
Terminal
# Move to where Claude discovers it $ cp -r ~/temp-marketing ~/.claude/skills/marketing-skills # Clean up $ rm -rf ~/temp-marketing
Step 4 — Confirm
Terminal
$ ls ~/.claude/skills/
Tip Create a CLAUDE.md in your project root with your brand voice and target audience. The marketing skill reads this automatically — you stop briefing Claude from scratch each time.
Skill · anthropics/skills · Free

UI/UX
Pro Max

A SKILL.md that gives Claude a proper design system — layout principles, component patterns, spacing rules — baked in from the start.

Note This skill lives inside the Anthropic repo you forked in Step 01. If you completed Step 01, it's already on your machine.
Step 1 — Check if Step 01 is done
Terminal
# Look for a frontend-design folder $ ls ~/.claude/skills/anthropic-skills/

See frontend-design listed? Skip to Step 3. If not — complete Step 01 first.

Step 2 — Copy to skills root (optional)
Terminal
$ cp -r ~/.claude/skills/anthropic-skills/frontend-design ~/.claude/skills/frontend-design
Step 3 — Verify
Terminal
$ ls ~/.claude/skills/ # Should show: anthropic-skills frontend-design marketing-skills
Tip Pair with a screenshot of your brand or a Figma file. Tell Claude: "Follow the UI/UX Pro Max skill and match this reference." Output quality jumps immediately.
MCP · google-labs-code/stitch · Free

Google
Stitch MCP

Google's AI UI design tool connected directly to Claude Code. Describe a screen in plain language — get back production-ready HTML and CSS.

What MCPs are live connections between Claude Code and an external tool. One command registers it. No GitHub fork needed.
Step 1 — Add Stitch to Claude Code
Terminal
# Registers Stitch as an active MCP connection $ claude mcp add google-stitch
Step 2 — Confirm it's active
Terminal
$ claude mcp list

You should see google-stitch listed. If not, re-run Step 1.

Step 3 — Test it
Terminal
$ claude # Ask: "Use Stitch to build a hero section with headline, subhead and CTA"
Tip Use Stitch for exploration. Ask Claude to generate 3 layout variations from the same brief — pick the strongest direction, then refine. Faster than any design sprint.
MCP · op7418/NanoBanana2 · ~$0.04/image

Nano
Banana 2

Gemini 3.1 Flash image generation connected to Claude Code. On-brand visuals without leaving your workflow.

Step 1 — Get your free API key
Browser
aistudio.google.com

Sign in with Google → Get API key → Create API key. Copy the key.

Step 2 — Add the MCP
Terminal
$ claude mcp add nano-banana-2
Step 3 — Set your API key
Terminal
# Replace your_key_here with the key from aistudio.google.com $ export GEMINI_API_KEY=your_key_here
Step 4 — Make it permanent
Terminal
# For zsh (default on Mac) $ echo 'export GEMINI_API_KEY=your_key_here' >> ~/.zshrc # For bash $ echo 'export GEMINI_API_KEY=your_key_here' >> ~/.bashrc
Warning Keep your API key private. Never commit it to Git. If you accidentally expose it, revoke it immediately at aistudio.google.com and generate a new one.
Tip Ask Claude to write the image prompt before generating. It knows your content context — let it brief itself first. Output is significantly more on-brand than prompting from scratch.
MCP · 21st-dev/magic-mcp · Free tier

21st.dev
Magic

A live component library wired directly into Claude Code. Describe UI in plain language — Claude generates polished, production-ready React components using real patterns from 21st.dev's community of design engineers.

What Think of it as v0 but living inside your terminal. One /ui command and Claude builds components from 21st.dev's library — 3D elements, animated gradients, interactive forms, modals — all TypeScript-ready.
Step 1 — Get your API key
Browser
21st.dev/magic/console

Create a free account → go to the Magic Console → generate an API key. Copy it.

Step 2 — Install and configure in one command

Replace your_key_here with your 21st.dev key. The --scope user flag makes it available across all your projects:

Terminal
# Installs globally across all your projects $ claude mcp add magic --scope user \ --env API_KEY="your_key_here" \ -- npx -y @21st-dev/magic@latest
Step 3 — Confirm it's active
Terminal
# Should show: magic — connected $ claude mcp list
Step 4 — Generate your first component
Claude Code
$ claude # Use the /ui command to trigger Magic # /ui create a pricing card with animated gradient background

Claude opens a real-time preview. Select your variant → click Accept → the component lands in your project, wired up and ready.

Warning Keep your API key private. It's stored in ~/.claude.json — never commit that file to Git. Revoke and regenerate at 21st.dev/magic/console if exposed.
Tip Combine with UI/UX Pro Max skill for best results. Ask: "/ui build a hero section" — Magic pulls real component patterns from 21st.dev while the skill applies your layout and spacing principles on top.
MCP · perplexityai/modelcontextprotocol · Free tier

Perplexity
MCP

Real-time web research connected to Claude Code. Claude's knowledge has a cutoff — Perplexity removes that ceiling entirely.

What One command registers the MCP and passes your API key in a single step. The --env flag bakes the key directly into the MCP config — no separate export needed.
Step 1 — Get your API key
Browser
perplexity.ai/settings/api

Sign in or create a free account → API Keys → Generate. Copy the key — it starts with pplx-.

Step 2 — Install and configure in one command

Replace your_key_here with your Perplexity key:

Terminal
# Registers the MCP and stores the API key in one step $ claude mcp add perplexity \ --env PERPLEXITY_API_KEY="your_key_here" \ -- npx -y @perplexity-ai/mcp-server

This writes the config permanently to ~/.claude.json — no separate shell export needed, works across all sessions.

Step 3 — Confirm it's registered
Terminal
# Should show perplexity listed as active $ claude mcp list
Step 4 — Test it
Terminal
$ claude # Ask: "Use Perplexity to research the top 3 DTC brands in [your space]"
Warning Keep your key private. It's stored in ~/.claude.json — never commit that file to Git. If you accidentally expose it, revoke it at perplexity.ai/settings/api immediately.
Tip Use this at the start of any new project. Ask Claude: "Research the top 3 competitors in [your space] — summarise positioning, pricing and weaknesses." Done in 60 seconds. Current data. Cited sources.
MCP · Notion hosted server · Free

Notion
MCP

Your Notion workspace connected to Claude Code. This is how Claude stops being a general AI and starts knowing your business.

How it works Notion's hosted MCP server uses OAuth — no API key to copy. You run one command, then authenticate via your browser. Notion only exposes pages you've explicitly shared with the integration.
Step 1 — Register the Notion MCP
Terminal
# Registers Notion's official hosted MCP server $ claude mcp add --transport http notion https://mcp.notion.com/mcp
Step 2 — Authenticate via OAuth
Claude Code
# Inside Claude Code, run this command /mcp

Claude Code opens a browser window → log in to Notion → click Allow access. That's it. The token is stored securely in your system keychain — no manual copying.

Step 3 — Share pages with Claude

Notion is private by default. You choose what Claude can see. Open any page you want Claude to access → click ⋯ (top right) → Connections → find Claude Code → Connect. Repeat for each page.

Step 4 — Confirm it's active
Terminal
$ claude mcp list # Should show: notion — connected
Step 5 — Test the connection
Claude Code
# Ask Claude after launching $ claude # Ask: "Read my [page name] from Notion and summarise it"
Note Only pages shared in Step 3 are visible to Claude. The rest of your Notion stays completely private. You can connect or disconnect pages any time from Notion's Connections panel.
Common mistake If you used the old open-source makenotion/notion-mcp-server package with NOTION_API_KEY — that package is no longer maintained. The correct env var for the npm fallback is NOTION_TOKEN (not NOTION_API_KEY). Use the hosted server above instead — it's simpler and actively maintained.
Tip Build one page called "Brand Brain" — brand voice, audience, key messages, competitors. Share it with the integration. Start every session: "Read my Brand Brain before we start." You stop re-briefing Claude every time.
Verification · All 9 installs

Test Your
Stack

All 9 installs done. Paste this prompt into Claude Code to verify everything is working together.

"Read my Brand Brain from Notion. Then build me a landing page hero — use /ui to generate the hero component from 21st.dev, follow the UI/UX Pro Max skill for layout and design principles, reference Google Stitch for real pattern inspiration, and generate a hero image using Nano Banana 2. Write the copy using the Marketing Skills framework. Research one competitor first using Perplexity."
Good output looks like this
  1. Claude reads your Notion doc and acknowledges your brand context
  2. Claude applies the UI/UX Pro Max skill for layout decisions
  3. Claude pulls real design patterns from Google Stitch
  4. Claude generates a React component from 21st.dev via the /ui command
  5. Claude generates a branded hero image via Nano Banana 2
  6. Claude writes copy in your brand voice using the Marketing skill
  7. Claude cites a real competitor with current Perplexity data
Fix If anything is missing, run $ claude mcp list to see which connections are active. For skills, run $ ls ~/.claude/skills/ to confirm. Re-run the install for anything not showing.
That's
the stack.

Every install adds a specialist to your team. Zero salary. Zero onboarding. Just capability — added permanently.

Questions? maurits@maisoncler.com  ·  maisoncler.com  ·  @maisoncler