# arckode-ui

> Frontend framework con `.ark` SFCs, signals, file-system router, SSG y analyzer estático con sugerencias de fix concretas.

Primer punto de contacto. Si vas a escribir código `.ark`, **leé `AIREF.md` ANTES de generar nada**.

## Tier 1 — lookup mínimo (cargar siempre)

- [AIREF.md](./AIREF.md): stack obligatorio, bootstrap copy/paste, componente canónico, store/service/router/SSG quick refs, decision tree. Cargar de golpe (~6 KB).

## Tier 2 — sub-skills (cargar SOLO si la tarea lo amerita)

- [components/SKILL.md](./skills/components/SKILL.md) — 18 patrones canónicos (form, async, modal, slots, teleport) + gotchas
- [analyzer/SKILL.md](./skills/analyzer/SKILL.md) — 63 reglas + troubleshooting + cómo agregar regla nueva
- [runtime/SKILL.md](./skills/runtime/SKILL.md) — signals, lifecycle, renderer, Proxy auto-unwrap, keyed reconciliation
- [compiler/SKILL.md](./skills/compiler/SKILL.md) — directivas, scoped CSS, vite plugin pipeline
- [testing/SKILL.md](./skills/testing/SKILL.md) — vitest + happy-dom + patrones de test
- [cli/SKILL.md](./skills/cli/SKILL.md) — extender CLI / bin construction
- [ai-doc-style/SKILL.md](./skills/ai-doc-style/SKILL.md) — replicar este patrón AIREF en OTRO proyecto

## Catálogos auto-generados en cada proyecto (por `ark stubs`)

- `UI.ref` — API surface de cada primitivo
- `STORES.ref` — state + getters + actions de cada store
- `SERVICES.ref` — métodos con signature
- `ROUTES.ref` — paths + params

## Reglas inviolables

1. NO `vue`/`react`/`solid` — framework es `arckode-ui`
2. NO `ref`/`reactive`/`v-model` — usar `signal`/`:value + @input`
3. NO `fetch()` directo en componentes — `createService()`
4. NO inventar componentes — leer `UI.ref`
5. Vite ^5.4 (NO 6+), Tailwind ^4, TypeScript ^5
6. Dudas: `npx ark analyze` → leer `violation.fix`
7. NO `Cargando...` / `Loading...` como texto — usar `<Skeleton>` o `<Spinner>`
8. NO `No hay...` / `Sin datos` como texto — usar `<EmptyState>`
9. NO `href="/..."` interno — usar `navigateTo()` via `@click`
10. NO `<table>` nativo — usar `<DataTable>`
11. TODA page necesita `useSeoMeta({ title, description })`
12. NO `<textarea>` — usar `<Textarea>`
13. NO `<input type="checkbox/radio/file/range">` — usar `<Checkbox>/<RadioGroup>/<FileUpload>/<Slider>`
14. NO 3+ signals + @submit — usar `defineForm({ schema, submit })`
15. NO `v-if="state.tab === 'x'"` x2+ — usar `<Tabs :items>`
16. NO signal() para toast — usar `useToast()`
17. NO `confirm()` nativo — usar `useConfirm()`
18. NO paginacion manual — usar `<Pagination>`
19. NO `<input type="number/date/time">` — usar `<NumberInput>/<DatePicker>/<TimePicker>`
20. NO `<input type="email/password/tel">` — usar `<Input type="email/password/tel">`
21. NO `<hr>/<progress>/<details>/<dialog>/<select multiple>` — usar primitivos
22. NO `@mouseenter` — usar `<Tooltip>`
23. NO `fixed inset-0 z-50` — usar `<Dialog>` o `<Drawer>`
24. NO div.border.rounded.shadow — usar `<Card>`
25. NO img.rounded-full — usar `<Avatar>`
26. NO div.bg-red/green.rounded — usar `<Alert>`
27. NO span.rounded-full.text-xs — usar `<Badge>`