Purpose: Complete walkthrough for setting up the component-based build system — from initial tooling through building production-ready components to deploying client sites.
Node.js (v18+) — Astro requires it. If you already have it from your WordPress workflow, you're good.
Claude Code CLI — The command-line agent that reads your codebase, generates code, and interfaces with Figma via MCP. Install via npm install -g @anthropic-ai/claude-code. You'll authenticate with your Anthropic account.
Figma — You already have this. The key addition is ensuring the Figma MCP server is connected in Claude Code so it can read your design files programmatically.
Git + GitHub — Version control for the component library and client projects. Each client gets their own repo forked from the base library.
Storyblok Account — Free tier works for development. You'll create one "space" per client project. The visual editor, component schemas, and content all live here.
Netlify Account — For hosting and automated deploys. You already have the MCP connected.
This is the most important configuration step. Claude Code's effectiveness depends entirely on how well it understands your project context.
In your terminal, create the master component library repo:
mkdir client-component-library
cd client-component-library
git init
This is the file Claude Code reads to understand your project. It lives at the root of your repo and acts as persistent instructions. This is where you define your conventions so Claude Code follows them consistently across every component it generates.
A strong CLAUDE.md for this workflow should include:
Project overview — "This is a reusable Astro + Storyblok component library for building marketing websites. Components are designed in Figma and generated via Claude Code with Figma MCP."