Export output reference

Misaki Studio generates React/TypeScript, CSS Modules, project modules, and assets from current project files. Most generated files are replaceable output; inspect their actual exports/imports before integrating them.

Visual Component output

A visual Component normally emits a .tsx and .module.scss pair. Depending on its declarations, TSX can export:

• Symbol: Props · Meaning: authored caller-supplied property type

• Symbol: DefaultProps · Meaning: authored default property values

• Symbol: States or callbacks · Meaning: internal-state typing/notification where generated

• Symbol: Variants · Meaning: named style-variant key → generated class mapping

• Symbol: Children · Meaning: named React-node slot contract

• Symbol: Component · Meaning: reusable generated React Component

The Component input shape can include properties, variant, children, className, style, and divProps as applicable. Properties remain nested under properties; use the current generated type rather than spreading assumed fields.

Generated visual files normally include:

// This file is generated by Misaki Studio. Do not edit.

and can include "use client" plus misaki-studio-internal runtime imports when hooks, interaction, responsiveness, looping, timelines, or runtime helpers are needed.

Page output

A Page produces a route-oriented default React export with its CSS Module and Page/SEO dependencies. It can compose generated Components and project modules. A Document Page can emit a nested route set from its attached tree.

Mockups produce no runtime code. Code Components include the authored source plus their generated integration/wrapper output.

Class and style output

Visual element classes use an E prefix plus a stable hash derived from the element ID. They are scoped through CSS Modules and remain stable across ordinary re-export of that same node, but are generator-owned internals—not semantic selectors for application code.

SCSS can include:

• base layout, typography, fills, borders, effects, and transforms;

• Component variant and combination selectors;

• hover/focus/active selectors;

• container queries for responsive screens;

• design-system variables and asset references;

• animation/runtime classes and data where supported.

Use a generated root input or a handwritten wrapper for integration styling. Do not patch hashes inside generated SCSS.

Other project modules

Whole-project export can also write:

• Colors, Fonts, Images, Themes, Radius, Spacing, Audio, and media helpers/assets;

• API contract/request modules;

• Storage modules;

• Content and database client structures;

• Environment modules;

• Documents and Document Page route/navigation output;

• authored Script TypeScript;

• linked-library dependencies;

• SEO files and optional backend manifest/output.

Imports are use-driven. Copying one TSX file can omit project modules and assets it expects.

Semantics and attributes

Use a Link node for a real exported anchor. General containers/text do not automatically infer every semantic HTML role from their visual appearance. Supported static custom attributes are restricted to data-*, aria-*, and role; dedicated node/configuration routes own links and other behavior. Inspect the actual generated markup for accessibility.

Ownership and re-export

Script files are user-authored and may not carry the generated-file header, but their destination copy is still refreshed from Misaki source. Keep handwritten application adapters outside configured generated paths.

The folder exporter writes current output but does not generally delete every stale destination file left by a renamed/removed project file. Compare destination paths against the current project tree.

Inspect and trace

Use export-code for current Page/Component TSX/SCSS, get-diagnostics for recognized checker issues, and locate-source to map a generated snippet back to producing design nodes. Diagnostics are lossy; the destination's build is authoritative.