<!-- Extension API v0 — pre-1.0. Interfaces may change without notice until P2 seals the custom-code format. First-party extensions track HEAD. -->

# Tema geliştirme — bir mağazaya skin yazmak

> Third-party marketplace listing does not exist yet (M11). Today a theme you author installs **store-private** (vendor `local.`); FULL kits (your own TSX element implementations) wait for the P2 sealed runtime. Everything below works now, for designers and agents alike.

A Mozaik theme is three things ([the Element Contract](/reference/kit-contract)): an element **kit**, **variables**, and **page skeletons**. A **SKIN** theme ships no code — it is CSS + variables (+ presets + composites + packaged fonts) over a first-party parent kit (`extends`), so it is complete on day one: anything you don't style keeps the parent's look. Content never lives in a theme; switching is lossless by construction.

## The loop

```
mozaik open st_…                        # the store as a project
mozaik theme create acme.nordic --from vitrin
#  → theme/theme.json  theme/skin.css  theme/variables.json  (+ theme/fonts/*.woff2)
mozaik theme check                      # server-side: grammar, sizes, element coverage
mozaik theme push                       # installs it store-private (Ajan token → proposal)
mozaik theme preview                    # switches the workspace draft to it + preview URL
mozaik theme sink                       # the /_mz/kit style guide wearing your skin
```

[`theme`](/reference/cli)

## The CSS grammar

All theme CSS targets the DOM anatomy with **attribute selectors only** — classes are never a contract:

```css
[data-mz-el="button"] { border-radius: 999px; letter-spacing: .04em; }
[data-mz-section="header@1"] [data-mz-slot="nav"] [data-mz-part="link"] { text-transform: uppercase; }
[data-mz-el="product-card"]:hover [data-mz-el="image"] { transform: scale(1.03); }
```

No classes/ids/bare tags (except the `Prose` descendant allowlist), no `!important`, no `url()` (a packaged font or a `/_mz/a/` asset is the exception), breakpoints 480/768/1024 only, tokens from the registry (`--mz-*` core, `--mzt-*` theme variables). The full rule set with TR messages: `mozaik theme check` — the same gate a marketplace submission will face. The consent banner and the legal identity block are cascade-pinned; a theme cannot hide or unbalance them.

## Variables, presets, fonts

`theme/variables.json` declares owner-editable knobs (≤40, typed, TR labels) emitted as `--mzt-*`; presets (Varyasyon) are named value sets the owner applies without losing other edits. Packaged fonts go under `theme/fonts/*.woff2`, are declared in the manifest (`source: "pack"`, license required) and become immutable platform assets — the platform emits the `@font-face`; your CSS just uses the family name.

## Composites (kit-trees)

Sections beyond the platform set are **kit-trees** — JSON element trees rendered through the active kit ([reference](/reference/kit-trees)). Stores keep their own under `design/composites/` (type `c.<name>@1`); extensions contribute blocks into [storefront zones](/reference/storefront-zones) the same way. No code, no CSS, works in every theme.

## For agents

Everything above is command-shaped: `theme.push` and `theme.switch` on an Ajan token land as proposal items with the Geçiş raporu as the consent block — the owner approves in Öneriler. The Dev MCP serves `schema_get kind=kit-contract|theme` and `theme_check` offline of any store. Machine-readable schemas: [/schemas/kit-contract.json](/schemas/kit-contract.json), [/schemas/theme.schema.json](/schemas/theme.schema.json).