Tutorial: Claude Code + Content Island

Content Island has native support for integrating with Claude Code. This allows you to both scaffold a project structure and implement full features by accessing your Content Island project data directly from the agent. In this tutorial we will go through how to set up that integration step by step and build a functional web portal from scratch.

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

Real Estate Portal.

As an example, let's imagine we want to develop a simple portal for a local real estate agency. We will implement:

• A navigation bar with links to the different sections of the portal.
• A Hero section where we add the name of the real estate agency and main actions.
• A featured properties section, where the most relevant properties are displayed.
• And, when clicking on a featured property, a page is shown with the property details, including images, description, price, and a contact form.

This is modeled in Content Island.

If we go to the Model tab, we can see all the entities that make up the project:

• If we go to Property, we can see all the fields that make up a property for sale or rent.
• We have modeled the Hero section:
  • We have the call to actions.
  • The background image.

Regarding data, we can go to the Content tab, switch to tree view (Tree), and in Property see the details of a property:

• Title.
• Slug for the URL.
• Internal reference.
• Description.
• Long description.
• City area.
• Property type.
• Square meters.

Project Setup

Before starting with Claude, let's start from a blank template. For this, we can use the Content Island template from Add Project.

We give the project a name (test-real-state), start from a template, and click Next.

We choose the Minimal Astro template.

And click the Complete button.

In the Quick start section, we copy the command.

We move to Visual Studio Code, to an empty folder, paste and run the command.

Now the Content Island CLI will ask us several questions:

The first is where I want to create the project.

The second step will ask if we want to install dependencies, that is, to run npm install for us.

And now we have it ready to start the project. We type the command npm run dev and copy the address.

We go to a browser, paste the URL, and see that it works.

Now we delete the example code and change the token to the one from the real estate project.

and we will change the token to the one from the real estate project.

71e67ac275e9c9645715f2f67979003f

If we go back to the browser, we will see it is still blank because we have not added data yet.

Configuring the Project for Claude Code

Next step, let's configure the project so Claude has tools and MCPs to work better.

MCPs

Content Island exposes an MCP that allows Claude Code to access the project data.

To configure it, we run:

claude mcp add content-island \
  --transport stdio \
  --scope project \
  -e CONTENT_ISLAND_ACCESS_TOKEN=YOUR_PROJECT_CONTENT_ISLAND_ACCESS_TOKEN \
  -- npx -y @content-island/mcp

Note change YOUR_PROJECT_CONTENT_ISLAND_ACCESS_TOKEN to the value of the Content Island access token. You can find this value either in the environment variable we created a few steps ago or by copying the Token value from the General section of Content Island.

We can see it configured in:

.mcp.json

To check it was added correctly, we run:

claude mcp get content-island

Skills

Skills allow us to give Claude specialized instructions.

We will define:

• A skill so it learns to interact with the Content Island Client API, this skill can be copied and pasted from the documentation of Content Island.

• Another interesting skill is the one that explains to Claude how to work following the Pods architecture, to better structure the project, this is also available in the documentation of Content Island.

To do this, we just have to go to the skill documentation link, select the Raw option, copy the content, create the following folders, and paste the corresponding content.

skills/content-island/SKILL.md

skills/astro-pods/SKILL.md

The folder structure would look something like this:

• Finally, we will add a skill so Claude improves its frontend design capabilities, this we will install from the Claude skills marketplace, it is the "Frontend Design" skill from Anthropic.

How is it installed?

First, we have to add the Anthropic skills repository from the marketplace:

/plugin marketplace add anthropics/skills

And now we install the frontend-design from anthropics (we indicate Install for all collaborators on this repository (project scope)).

/plugin install frontend-design@claude-plugins-official

Note if you have Claude Code running, it is a good idea to restart the Claude Code session so the new skill is available.

If we go to the .claude folder in the settings.json file, we see that the plugin is enabled.

Claude md

We will also define a Claude.md configuration file, here we indicate a series of general instructions for Claude to take into account when generating code, for example, telling it to use TypeScript, or to use Tailwind for styles.

Here we will incorporate the most important things, it is not advisable to write the whole bible, because otherwise we would overload Claude's context and it could consume too many tokens.

We create a file called Claude.md and paste the following content.

## General guidelines

- Use Tailwind CSS v4 and DaisyUI for all styling needs.
- Use semantic HTML5 elements and follow accessibility best practices.
- Design for mobile-first, ensuring a responsive experience across all devices.
- Use the astro-pods skill to structure the codebase and define responsibilities by layer.
- Use the content-island skill to fetch and render content, strictly following its security rules and allowed API surface.
- Use colors and theming like a professional designer, ensuring good contrast and a visually appealing palette, do not use IA like apporach.
---

Let's get started.

For this demo, we follow the "Human in the loop" approach, we will explain one step and then review and define the next steps for Claude.

We initialize a repository:

git init

And add the current code. We ask Claude:

The project you are working on is created with Astro and has access to the Content Island API, where you have modeled a neighborhood real estate agency, with information about the navigation menu, the hero section, and a list of properties among others.

Let's start with the initial structure:

- You will create a layout with a header and a footer.

- In the header, you will create a top navigation bar with the links indicated in the Content Island project, specifically the type `Header` and here you have a series of links (use the `includeRelatedContent` flag to get all related information for each link).

- Below the header, on the main page, you will add a Hero Section, the data you will read from the Content Island type `Hero` which only has one entry, from there you can get even the background image, and it has main actions which are Buy and Rent that you can put as buttons.

For the design use the frontend design skill, to access Content Island data use the skill you defined for the Content Island Client API, and to structure the project use the Content Island Astro Pods skill.

Before running it, we press the keyboard shortcut shift + tab and switch to plan mode since we want to see what it will do.

Once the step is completed, we can review and run.

npm run dev

It may generate a file structure similar to this.

Here we can see the page header that we are generating.

Let's go for the next step, we run the following prompt to generate the featured properties section:

Now I want to show just below the Hero Section, a featured properties section, for this you have to read the list of properties from the Content Island project, and show only those that have the featured flag, for each featured property show its main image, title, price, whether it is for sale or rent, and a link to the property detail page (about the property detail page, for now you can put a text that says "here will go the property detail", which we will implement later).

It may generate a file structure similar to this.

Here we have the list of properties it generates for us:

Hey, not bad at all. If we click on one of the properties, it will navigate to the detail view which for now only has the property detail.

And finally:

Generate the property detail page, where we indicate it to show all the property information, including an image carousel, description, price, and a contact form.

It may generate a file structure similar to this.

We go to the browser, click on one of the properties and here we can see it has generated a carousel, a contact form (we would have to check if it works or not). The property type, location, etc.

Conclusion

And with this, we have seen that integrating a project you have created in Content Island with Claude Code is really simple.