AI for Frontend

At Terra, we use AI tools to speed up repetitive tasks, improve workflows, and help developers focus on higher-value work.

Using AI does not replace understanding how our frontend workflow works. Everything documented in TerraDocs still applies: architecture, components, accessibility, performance, code quality, and project conventions remain essential.

AI should be treated as a tool that helps you work faster and smarter — not as a replacement for frontend knowledge or critical thinking.

What you need to know first

Before using AI in a frontend workflow, there are three main concepts to understand: Skills, the Terra plugin, and Figma MCP.

Skills

Skills are reusable workflows, prompts, or automation patterns that help standardize how we use AI across projects.

At Terra, skills are used to guide Claude through specific frontend tasks, helping maintain consistency across projects and teams.

Current Terra skills:

/terra:foundation
/terra:component
/terra:handler
/terra:commit

Each skill is designed for a specific type of task. Always choose the skill that best matches what you are trying to accomplish. Either way, AI will know what skill to use if you don’t specify any.

`Terra` Plugin

The Terra plugin contains all the skills created by the team. It is built from our existing skills and will continue evolving as our workflows improve.

The plugin can be installed directly from the Claude Marketplace. Please follow the instructions in the md for the setup.

Keep Plugins Updated

The Terra plugin is continuously improved as new skills and workflows are added.

To check for updates:

/plugins

Then:

Open Installed
Select the plugin
Click Update now

Keeping plugins updated ensures you are using the latest Terra AI workflows and skills.

Figma MCP

Figma MCP allows Claude to read designs directly from Figma and understand:

Layouts
Components
Spacing
Typography
Design structure

This provides Claude with much more context when generating frontend code from a design.

To use it, install and configure the Figma MCP plugin in the Figma file of the project.

How to Start

Before using AI in your frontend workflow, you need to:

Install Claude.
Install the corresponding Terra plugin in your project. For that:
```
/plugin
```
And search for terra plugin.
Make sure you install the terra/stack you need for each project.
Configure the Figma MCP

How to Use It

Start by ensuring the Terra plugin is installed and enabled. Then, inside Claude, you can run the skills: For example:

Create card-b, follow the /terra:component skill.

Figma link: [paste section link]

Because Claude has access to Figma through MCP, it can read the design and follow the workflow defined by the selected skill.

During the process, Claude may ask follow-up questions if additional context is needed.

Best Practices

Use AI as an Assistant, not a sustitution.
Always review the output generated by Claude. AI can accelerate implementation, but developers remain responsible for validating the final result.
Use the Terra Skills
If you identify something that should be improved, added, or updated, discuss it with the team so the skill can evolve.
Keep the plugin updated

Knowledge Check

Test your understanding of this section

Loading questions...