Integrations
AI agents
How a coding agent, such as Claude Code, builds a project's screens with Pelatform UI, and the lines to put in its instructions.
A coding agent writes Pelatform UI as these pages do when it reads them before writing markup: the library is newer than what agents learned, so its class names, parts and props come from the guides, not from memory.
Project instructions
Paste these lines into the instructions the project gives its agent, such as CLAUDE.md or AGENTS.md, with where the agent finds these docs. Where the project shares CSS (Setup), write Prefixed in place of Clean, with @pelatform/ui/css/prefixed and @pelatform/react/prefixed.
## UI: Pelatform UI
- Build the UI with Pelatform UI in Clean mode: `@pelatform/ui/css` and `@pelatform/react`, everything inside `<div data-plf-root>`.
- Before using a component, read its page in the Pelatform UI docs and start from its closest example.
- Compose from blocks, components, utilities and `--plf-*` tokens; write no CSS for what they already do.
- When nothing fits, style it in our own stylesheet with tokens and note it as a gap.| Choice | Rule |
|---|---|
| CSS mode | Clean where the page’s CSS is yours alone; Prefixed, with plf: classes, where it shares CSS with WordPress, Elementor, Tailwind CSS or another framework (Choose a CSS mode) |
| Root | Every component inside a data-plf-root element, whose data-plf-theme sets the theme (Root) |
| CSS order | Preflight if used, then the library CSS, extensions and icons, and your own CSS last (CSS order) |
| JavaScript | The Full script or init starts the HTML components; React components need neither (Core and lifecycle) |
| Icons | Icon classes, <span class="icon icon-heart"></span>, or React’s <Icon name="heart" />, named as on the Icons page |
Before writing a screen
- Find a whole page among the Blocks, or the component on the Components overview.
- Read its page: the class table for classes and modifiers, the examples’ HTML or React tab, and the JavaScript section for hooks, methods, events and CSS variables.
- Start from the closest example and change its content, keeping its elements, classes and ARIA.
Compose in this order
- A block, for a whole page or its frame, such as Sign in or the application shell.
- Components, written as their pages write them.
- Utilities, for layout and spacing, with Tailwind CSS’s names, such as
flex,gap-4andmd:grid-cols-2(Utilities); any other comes from your own Tailwind CSS (Beyond the set). - Tokens,
--plf-*, for a value of your own, so it follows the root’s theme and overrides (Tokens and themes).
Keep native elements as the examples have them, such as <button>, <dialog> and <details>, and add no ARIA or state attributes they leave out: the components set their own.
When nothing fits
Build it from utilities and tokens in your own stylesheet, loaded after the library’s, with class names no component uses. Note what it does, where it is used and the closest components, so a component can replace it later.