> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frontic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Project Context

When you work against Frontic from your editor, everything Frontic knows about your project can flow into your local setup — **the typed API surface, the rules and skills that guide your agent, and the tools your agent can call on your behalf.** That's your project context in the editor: one cohesive view of the Frontic project your code is being written against.

This page is the concept. The [Frontic CLI](/ide/frontic-cli) and [MCP Tools](/ide/mcp-tools) pages cover the mechanics.

## What flows into the editor

<CardGroup cols={2}>
  <Card title="Typed Client SDK" icon="code">
    A generated JavaScript client that matches your project's current API — every block, listing, and page as a typed method. Written to `.frontic/` by `frontic generate`, imported by your frontend code at runtime.
  </Card>

  <Card title="Rules" icon="gavel">
    **Project Rules** (a monolithic always-applied document from Studio Settings) plus **Context Rules** (individual rule files with per-rule `applyTo` targeting). Synced to the agent's rules directory by `frontic context init`.
  </Card>

  <Card title="Skills" icon="star">
    Reusable task patterns your team has captured — "build a category page", "wire up a new locale". Your editor agent picks a matching skill when the task shape fits. Synced alongside the rules.
  </Card>

  <Card title="MCP tools" icon="microchip-ai">
    Live access to your Frontic project — your agent can read configuration, inspect Data Storages, create or update blocks / listings / pages, and query the Frontic docs. Wired via `frontic mcp init`.
  </Card>
</CardGroup>

## How it fits together

Three commands set everything up, each touching a different surface:

<Steps>
  <Step title="Generate the typed SDK" icon="code">
    `frontic generate` pulls the current API and writes the typed client into `.frontic/`. The client is the contract between your frontend code and the Frontic API at the version you targeted. Regenerate whenever the project's API surface changes.
  </Step>

  <Step title="Sync rules and skills" icon="brain">
    `frontic context init` pulls Project Rules, Context Rules, and Skills from Frontic and writes them to `.claude/` (or `.cursor/`) in your repo. Safe to re-run — unchanged files aren't touched. `--force` overwrites local edits.
  </Step>

  <Step title="Wire up MCP" icon="microchip-ai">
    `frontic mcp init --client <name>` adds the Frontic project MCP and the Frontic Docs MCP to your editor's MCP config. Your agent can now act on your project live and query the docs as it works.
  </Step>
</Steps>

## Who reads what

* **Your editor agent** (Claude Code, Cursor, any MCP-compatible client) reads the synced rules and skills on every session and calls MCP tools when it needs project state. It writes frontend code using the typed SDK.
* **Your frontend code** imports the typed SDK at runtime — no rules or skills involved, just a contract against the API.

## Staying in sync

Run these commands **locally, not in CI** — the committed output is your stable contract. When the API surface changes (new block, renamed field, adjusted filter), run `frontic generate` against `develop`, typecheck against the regenerated client, and commit it alongside the code that uses it. When Rules or Skills change in the Context Base, run `frontic context init` and commit the updated files. Teammates and CI read what you committed; nothing is regenerated on their side.

## Related

<CardGroup cols={3}>
  <Card title="Frontic CLI" icon="terminal" href="/ide/frontic-cli">
    Install, log in, generate the SDK, sync the Context Base, wire up MCP.
  </Card>

  <Card title="MCP Tools" icon="microchip-ai" href="/ide/mcp-tools">
    Full configuration for Claude Code, Cursor, and other MCP-compatible clients.
  </Card>

  <Card title="Context Base" icon="brain" href="/context-base/overview">
    The source of truth for Rules and Skills that sync into your editor.
  </Card>
</CardGroup>