# Framework Adapters
How to apply agent-friendly transformations per framework.
## Table of Contents
- [React (JSX/TSX)](#react-jsx--tsx)
- [Vue (SFC)](#vue-sfc)
- [Svelte](#svelte)
- [General Rules](#general-rules)
---
## React (JSX / TSX)
### Syntax mapping
| HTML | JSX |
|------|-----|
| `class` | `className` |
| `for` | `htmlFor` |
| `tabindex` | `tabIndex` |
| `aria-*` | `aria-*` (same) |
| `data-*` | `data-*` (same) |
### data-testid
```jsx
// Component that forwards props
// Component that doesn't forward — wrap
```
### JSON-LD
```jsx
```
### Considerations
- Don't add `aria-label` to non-DOM components
- ARIA booleans: `aria-expanded={isOpen ? "true" : "false"}` (string, not boolean)
- Keep `key` props untouched
- Don't modify `ref` callbacks
---
## Vue (SFC)
### Template syntax
```vue
{{ item.name }}
```
### JSON-LD (Nuxt / @vueuse/head)
```vue
```
### Considerations
- Don't modify `v-model`, `v-if`, `v-show`, `v-for` logic
- Use `:aria-expanded` (v-bind) for dynamic states
- Don't interfere with `` definitions
- Don't modify `defineProps`, `defineEmits`
---
## Svelte
### Template syntax
```svelte
{#each items as item (item.id)}
{item.name}
{/each}
```
### JSON-LD
```svelte
{@html ``}
```
### Considerations
- Don't modify `bind:` directives
- Don't change `{#if}`, `{#each}`, `{#await}` blocks
- Use string values for ARIA: `'true'`/`'false'`
- Don't modify `$:` reactive declarations
- Don't interfere with `` elements
---
## General Rules
**Do:**
- Add `data-testid` directly on HTML elements
- Use framework's head management for JSON-LD
- Keep ARIA values as strings "true"/"false"
- Preserve all existing attributes, directives, event handlers
- Match existing code style
**Don't:**
- Add HTML attributes to abstract components that don't render DOM
- Modify state management, lifecycle hooks, or logic
- Change import statements or add dependencies
- Modify CSS/style blocks
- Wrap elements in new containers unless necessary for semantics
- Touch framework config files