Creative Component Compliance Checklist

Use this checklist before treating a creative component as MyronCMS-compatible. A compliant component preserves the content binding invariant: PHP renders the readable content, and the creative layer adds decoration, motion, or behavior around it.

Human Path

A human reviewer checks the four artifacts together:

Component definition JSON entry.
PHP render method.
CSS additions.
Optional JavaScript behavior registration.

Do not approve one artifact in isolation. The component is compliant only when the definition, render output, styling, and runtime behavior agree.

AI Path

An AI agent can read mcp://creative-component-sdk through MCP resources/read, inspect the local artifacts in the repository, and apply this checklist as a review aid.

An installed MCP client cannot create component files in the running install. File creation and edits remain local-authoring work under a repository contract.

Scopes

No runtime scope is required to read this checklist or mcp://creative-component-sdk.

If a separate workflow applies imported design state or mutates site settings, use that workflow's action scope. Do not borrow authority from this checklist.

Checklist

Check	Required state
Component id	Globally unique, stable, and kebab-case. Creative examples normally use `creative-[name]`.
Definition shape	Entry has `id`, `label`, `classification`, `composedOf`, `tokenDependencies`, `editableTokens`, `slots`, and `creativeLayer` when creative effects are supported.
Token dependencies	Every `--myron-*` token used in CSS appears in `tokenDependencies`.
Editable tokens	Operator-editable tokens are declared in `editableTokens`; undeclared tokens are not implied editable.
Content source	PHP extracts readable content from `$section['content']`, not hard-coded component text.
Escaping	Dynamic content is escaped before interpolation into HTML.
Section wrapper	Render output includes a section wrapper that can receive renderer attributes.
Creative attributes	Render methods do not manually invent `data-mc-*` behavior outside the renderer contract.
Scene layering	Decorative scene output is behind content and `aria-hidden` when injected by runtime behavior.
CSS naming	Classes use a stable component block and BEM-style elements/modifiers.
CSS tokens	Raw colors, font sizes, spacing, shadows, and motion values are avoided when `--myron-*` tokens exist.
Static fallback	The component remains readable without `creative-runtime.js`.
Reduced motion	Motion is skipped or simplified when `prefers-reduced-motion: reduce` is active.
JavaScript behavior	Optional JS uses `window.mcRuntime.registerBehavior()`, not standalone global loops or unmanaged event listeners.
Performance	Canvas, particles, and external dependencies stay inside the SDK performance budget.

Artifacts

Review these local artifact families:

app/data/runtime-definitions/components/components-atoms-v0.2.0.json
app/modules/content/public/DefinitionTemplateRenderer.php
app/modules/content/public/DefinitionTemplateRenderer.php
app/assets/runtime/css/components.css
app/assets/runtime/js/creative-runtime.js

Review this MCP resource when an agent needs the live install context:

mcp://creative-component-sdk

Safety Boundary

Do not accept a component that hides readable content until JavaScript runs. Do not accept a component that puts links, form controls, body copy, or headings inside a decorative scene layer.

Do not accept unescaped PHP output. Do not accept CSS framework imports or runtime framework dependencies as part of the creative component artifact unless a later contract creates a supported dependency pathway for that exact use.

Do not treat custom CSS as a way to add new design tokens to the canonical token catalog. Component CSS can consume tokens; it does not expand the design-system schema.

Verification

For documentation and source review:

rg -n "creativeLayer|tokenDependencies|editableTokens" app/data/runtime-definitions/components/components-atoms-v0.2.0.json
rg -n "data-mc-motion|data-mc-scene|data-mc-params|data-myron-component-id" app/modules/content/public/DefinitionTemplateRenderer.php app/assets/runtime/js/creative-runtime.js

For a concrete component review:

render a page that contains the component,
disable JavaScript and confirm all readable content remains visible,
enable reduced motion and confirm no reveal effect hides content,
inspect the section element for renderer-owned data-mc-* attributes,
inspect CSS for token consumption and namespaced selectors,
check that any optional behavior is registered through window.mcRuntime.registerBehavior().

Failure Modes

Failure	What it means	Safe response
Content disappears when JavaScript is disabled	The creative layer owns readable content.	Move content into PHP-rendered DOM.
Token dependency list is incomplete	Definition and CSS can drift.	Add every consumed `--myron-*` token to `tokenDependencies`.
Operator can override an undeclared token	`editableTokens` is incomplete or validation was bypassed.	Declare the token or remove the override path.
Raw colors dominate component CSS	Component bypasses the design-token substrate.	Use current tokens or route missing token needs through Evaluate.
JavaScript starts its own continuous animation loop	Behavior bypasses the runtime loop model.	Register through the creative runtime and reuse its scheduling patterns.
Scene contains links or text	Decorative layer became content.	Move interactive/readable elements into the PHP render output.