Terra Workshop

AI at Terra

Claude Code, Skills, MCPs & Beyond

A practical guide for developers

Claude Code Skills MCPs Beyond

How We Focus AI at Terra

AI is a powerful tool. To use it well, we need clear principles — not rules that limit us, but a shared understanding that keeps quality high and roles meaningful.

✓

What we're doing

Amplify expertise within your domain

✗

What we're not doing

Replacing domain experts or working outside your area

→

How we're doing it

Clear ownership, AI proposes, you decide

📄

Experts write the spec

Document your domain so others can build it right

Domain Ownership

AI is most powerful when it stays within your area of expertise.

✓ What we ARE doing

Backend developers: write better code, debug faster, automate the repetitive
Designers: explore ideas faster, execute with precision
Engineers: test more, ship with more confidence
Everyone: remove friction from the work you already own

AI is an amplifier of your expertise — not a replacement for it.

✗ What we are NOT doing

Backend developer producing final editorial content with AI Lacks brand context, tone, and audience understanding — the output won't feel like Terra.
Editor making architecture decisions with AI Their expertise lives in narrative and communication, not in system design.
Designer writing production code with AI and shipping without review Design expertise covers composition and experience, not architecture, performance, or maintainability.

Experts write the spec

Document Your Domain

An editor doesn't need to know how a CMS works. But if you are the expert on tone, voice, and content structure — you need to be able to transmit that to the person who will build it, such as a designer, marketer, or developer.

Without a spec

"Make it sound like us."

→ Developer guesses. Result misses the mark. Multiple revision rounds.

With a spec

"Tone is direct and warm. Sentences under 20 words. No jargon. Always address the reader as 'you'. See examples in /brand/voice.md."

→ Developer builds it right the first time.

AI helps here too. Use Claude to draft the spec from your knowledge — you provide the expertise, Claude structures it into a document the team can act on.

Real examples from a marketing agency

Editorial → Developer

"Our evergreen articles perform better when the publish date isn't the first thing readers see — it signals 'old content' before they even start reading. Would it be possible to move the date below the byline, or make it optional per article type?"

Designer → Developer

"The CTA button only appears below the fold on mobile, and our audience tends to drop off fast. I think pinning it at the bottom of the screen on mobile would help — would that be feasible without breaking the desktop layout?"

SEO / Content → Developer

"When someone shares one of our articles on LinkedIn, the preview pulls the first image in the body instead of the featured image — and sometimes that's just a random inline photo. Could we make the OG image always use the featured image we set in the CMS? It would make a big difference for how our content looks when it's shared."

Which AI should I use?

Not every task needs the same tool. Here's how to think about it.

ChatGPT General purpose

Brainstorming ideas and concepts
Drafting or editing copy
Research and summarising information
Explaining things in plain language
Quick one-off questions not tied to a codebase
Generating images or presentations

Claude Code Code & project-aware

Anything touching your codebase
Building features, components, foundations
Debugging and refactoring
Working within a framework (e.g. Punky)
Running commands, tests, migrations
Connecting to real tools via MCPs

When in doubt: if it lives in a repo, use Claude Code. If it's a standalone question or task, ChatGPT works fine.

Getting started as a developer

The most comfortable way to use Claude Code is from your terminal or directly inside VS Code.

Install

Terminal

npm install -g @anthropic-ai/claude-code

Start a session

claude

For VS Code, install the Claude Code extension from the marketplace and it integrates directly into your editor.

Credentials

Access to Claude Code requires an API key. Speak to your manager — they will coordinate with the responsible person to get your credentials set up.

Once you have them, add your key to your environment:

export ANTHROPIC_API_KEY=your_key_here

Working in a session

Useful session tips

Drag a folder into the session to give Claude context about a specific part of the project
Paste a screenshot directly — Claude reads images and can work from visual context
@ a file to reference something specific without Claude searching for it
Escape to interrupt Claude mid-task if it's going in the wrong direction

Plan vs Act

Plan mode

Claude reads your codebase and lays out a step-by-step approach before touching anything. You review, adjust, and approve — then it executes. Use this when the task has multiple steps or touches important files.

Act mode

Claude reads and writes directly, no plan shown upfront. Good for small, isolated tasks where the scope is clear and the risk is low.

💡 Ask before doing You can also use Claude as an advisor — "how would you approach this?" or "what's the best way to implement X?" — and it will explain options without writing a single line of code.

Prompting well

Too generic

"Create a component for me"

Claude guesses. Result may not follow conventions.

→

Specific & directed

"Create a Card component using the Punky pattern, with title, description and a CTA that uses our Button component"

Claude has context. Result follows your conventions.

This is exactly what skills solve — they bring the right context automatically, so you don't have to explain how we build things every time.

What to build with AI at Terra

These are the operations we expect developers to use AI for. Everything runs through skills — available in every project.

🏗️

Create foundations

Project scaffolding, folder structure, base config

🧩

Create components

UI and logic components following project conventions

⚡

Register handlers

Punky framework — event handlers, routes, actions

AI at Terra is for everyone, without barriers. Every developer has access to the same tools, the same skills, and the same level of support — no gatekeeping, no approvals needed to use it.

Skills live in a separate repo — added as extras to each project

Frontend Maintained by Amaia & Diego

Backend Maintained by Mara & Nerea

Just like the core framework, suggestions are welcome — but only these maintainers have write access. This keeps every project on the same set of skills, so there's no inconsistency between projects.

Amaia, Diego, Mara, and Nerea have been part of Terra for years. They helped build Punky, the framework we work with every day, and they've contributed to the design system we've refined over eight years. They are part of the team that maintains how we build things — and that's why they maintain this too.

How to use it

Example prompt

The prompt

"Create a new Card component following the project conventions. It should accept a title, a description, an optional image, and a CTA. Use the existing Button component for the CTA."

What happens

1 Claude reads the project structure and existing components

2 Matches conventions (naming, file location, imports)

3 Proposes the implementation — you review before it writes

Developer plugin setup

If you're a developer, this is for you. All Terra skills live in a single private repo — add it once per project and Claude will know exactly how we build things. Choose your stack, and skills update automatically whenever the repo is versioned. Full setup instructions and stack-specific configs are in the terra-hq/site-skills repository.

Watch it in action

▶

Plugin setup How to wire up the skill marketplace in any project — done once, works everywhere.

▶

Foundation skill Setting up SCSS foundations — colors, fonts, spacing and grid — from a Figma file.

▶

Commit skill Structured git commits with type, emoji, description and ClickUp ticket — enforced by the skill.

▶

Component skill Building a frontend component following Punky conventions — BEM naming, SCSS registration, and showcase page demo.

▶

Handler skill Creating a JS handler in the Punky framework — file structure, registration in resources.js, and wiring to Main.js.

Stay within these limits. Using AI outside the operations listed above, or outside your domain, goes against how we work at Terra. When in doubt, ask.

What Are MCPs?

MCP — Model Context Protocol. An open standard that connects any AI to your real infrastructure.

Without MCP

Claude only knows what's in your conversation and local files.

→

With MCP

Claude can read and write Sanity, Contentful, Supabase, Figma, Chrome DevTools, and any other tool you connect.

Configure MCPs once. After that, Claude uses them naturally in conversation.

How MCPs Work

Claude Code (Your AI)

MCP Protocol ◄──────────────►

MCP Server (Sanity, Figma, Supabase…)

You ask Claude to do something involving an external tool
Claude calls the MCP server via a standard protocol
The MCP server communicates with the real service
Results come back into your conversation

MCPs — Real Examples

Sanity

"Show me all published articles missing a meta description"
→  Claude queries Sanity directly and lists them

Contentful

"Find all entries of type 'campaign' updated in the last 7 days"
→  Claude reads Contentful and returns the list

Supabase

"Show me the last 10 signups and their plan type"
→  Claude queries the database directly

WordPress via DB

"Get all posts published this month with their slugs"
→  No native MCP — Claude connects through the database

Chrome DevTools

"Open staging and check for console errors"
→  Claude controls a browser, takes screenshots

Figma

"Implement the dashboard design from this Figma file"
→  Claude reads components and writes the code

MCPs at Terra

MCP	Purpose
Sanity	Query and manage content — entries, assets, schemas
Contentful	Read and update content entries and content models
Supabase	PostgreSQL + auth — query data, manage users
WordPress	No native MCP — connect via the database directly
Chrome DevTools	Browser automation, screenshots, performance audits
Figma	Read and write Figma files and components

Skills in Practice — Terra

Real examples of how we use AI skills at Terra — coming soon.

Examples per role and use case will go here

Summary

🏛️

Terra Pillars

Own your domain. Test & suggest freely. Domain expert signs off.

🤖

Claude Code

AI with real tool access — files, commands, databases, browsers

⚡

Skills

Expert modes — /command or plain description

🔌

MCPs

Live connections to Sanity, Contentful, Supabase, Figma, Chrome DevTools

AI is most powerful when it makes you more of what you already are.
Use it to go deeper — not sideways.