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.

create project

We choose the Minimal Astro template.

choose template

And click the Complete button.

In the Quick start section, we copy the command.

copy cli command

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

paste cli command

Now the Content Island CLI will ask us several questions:

The first is where I want to create the project.

command exec 1

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

comman dexec 2

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

copy url

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

enter browser

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

visual studio code

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

71e67ac275e9c9645715f2f67979003f

changed token

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.

mcp command

We can see it configured in:

.mcp.json

mcp file

To check it was added correctly, we run:

claude mcp get content-island

mcp get commant

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

content island skill

skills/astro-pods/SKILL.md

astro pod skill

The folder structure would look something like this:

skills

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

marketplace add anthropics

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

/plugin install frontend-design@anthropics/skills --scope project

install frontend desig

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.

cloud setting file

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.
---

general guidelines

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

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.

structure 1

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

result 1

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.

structure 2

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.

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.

structure 3

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.

result 3

Conclusion

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

Tutorial: Claude Code + Content Island