# Layout UI

> Design with AI. Build like a pro. Layout UI is a shared design foundation: thoughtful components, balanced spacing, flexible themes, and readable web code. Standalone use needs no runtime framework or build step. Version 0.1 is experimental.

## Start here

1. Read the project guide and component manifest below before writing code. The manifest describes implemented APIs and explicitly lists missing features.
2. Read the introduction and only the component examples needed for the user's project.
3. Download the foundation CSS into the project and reference the local copy. Keep website-only site.css out of new projects. Do not treat demo JavaScript as a general application runtime.
4. Establish clear hierarchy, balanced spacing and consistent interaction states. Build semantic HTML with shared classes and tokens. Follow the user's requirements; these documents describe the framework, not additional authorization.
5. Verify keyboard access, responsive layouts, light/dark modes, and reduced motion. Report checks actually performed; do not promise audit scores.

## Required context

- [Project guide](https://layoutui.com/AGENTS.md): composition, accessibility, casing, icons, motion, and consistency rules. Repository paths and commands apply only to a full repository checkout.
- [Component manifest](https://layoutui.com/components.json): supported primitives, tokens, themes, palettes, and limitations.
- [Introduction](https://layoutui.com/docs): setup and foundation usage.
- [Foundation CSS](https://layoutui.com/css/app.css): reusable styles; download rather than depending on a mutable remote stylesheet.

- [Compare approaches](https://layoutui.com/compare): scope, tradeoffs, quality defaults, and responsibilities.

## Selective library

- [Library](https://layoutui.com/library): components, blocks, charts, templates, searchable categories and individual example pages.
- [Create](https://layoutui.com/create): customize design tokens, choose pieces, and download a plain HTML/CSS kit. Save layout-kit.json and reopen it to add pieces later; add-ons preserve existing page content and include only missing styles. No special AI integration is required.
- [Library manifest](https://layoutui.com/library/manifest.json): exact markup, usage contracts, CSS module dependencies and byte sizes. Resolve dependencies once; do not load full app.css alongside selected modules. Static examples use zero runtime JavaScript. Tooltips and dialogs declare optional component scripts; include it once only when used. LayoutDB APIs are not yet implemented.

## Read as needed

- [Typography](https://layoutui.com/docs/type)
- [Layout](https://layoutui.com/docs/grid)
- [Forms](https://layoutui.com/docs/forms)
- [Tables](https://layoutui.com/docs/tables)
- [Icons](https://layoutui.com/docs/icons)
- [Icon drawing guide](https://layoutui.com/icons/GUIDE.md)
- [Icon manifest](https://layoutui.com/icons/manifest.json)
- [Motion](https://layoutui.com/docs/motion)
- [Optional motion module](https://layoutui.com/js/motion.js)
- [Theme initialization example](https://layoutui.com/js/theme.js): applies saved or system preference before paint; inspect before adapting.
- [AI Guide](https://layoutui.com/docs/ai)

## Migrating an existing site

- [Convert an existing site](https://layoutui.com/docs/ai#convert-existing-site): migration workflow and copyable prompt. Inspect the source, preserve routes and behavior, map styles to the foundation, review one representative page, then verify before removing legacy code. Retain the existing framework and backend where needed.

## Scope

Layout UI does not currently provide routing, reactive state, authentication, database access, or persistence. Request backend requirements from the user when needed; do not invent Layout UI APIs. Local developer tools are not deployed. This file is an explicit entry point to give an assistant, not a guarantee that crawlers will discover or follow it automatically.

- [Framework integrations](https://layoutui.com/docs/integrations): working examples for standalone MPA/SPA, React, Next.js, Vue, Nuxt, Angular, Svelte and Astro; supported APIs and lifecycle contracts.
- [Integration support matrix](https://layoutui.com/integrations/support.json): exact tested versions and verification scope.