create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-sdk/references/devtools.md

@@ -0,0 +1,52 @@
+---
+title: AI SDK DevTools
+description: Debug AI SDK calls by inspecting captured runs and steps.
+---
+
+# AI SDK DevTools
+
+## Why Use DevTools
+
+DevTools captures all AI SDK calls (`generateText`, `streamText`, `ToolLoopAgent`) to a local JSON file. This lets you inspect LLM requests, responses, tool calls, and multi-step interactions without manually logging.
+
+## Setup
+
+Requires AI SDK 6. Install `@ai-sdk/devtools` using your project's package manager.
+
+Wrap your model with the middleware:
+
+```ts
+import { wrapLanguageModel, gateway } from "ai";
+import { devToolsMiddleware } from "@ai-sdk/devtools";
+
+const model = wrapLanguageModel({
+  model: gateway("anthropic/claude-sonnet-4.5"),
+  middleware: devToolsMiddleware(),
+});
+```
+
+## Viewing Captured Data
+
+All runs and steps are saved to:
+
+```
+.devtools/generations.json
+```
+
+Read this file directly to inspect captured data:
+
+```bash
+cat .devtools/generations.json | jq
+```
+
+Or launch the web UI:
+
+```bash
+npx @ai-sdk/devtools
+# Open http://localhost:4983
+```
+
+## Data Structure
+
+- **Run**: A complete multi-step interaction grouped by initial prompt
+- **Step**: A single LLM call within a run (includes input, output, tool calls, token usage)

package/dist/templates/claude-config/app/.agents/skills/ai-sdk/references/type-safe-agents.md

@@ -0,0 +1,200 @@
+---
+title: Type-Safe useChat with Agents
+description: Build end-to-end type-safe agents by inferring UIMessage types from your agent definition.
+---
+
+# Type-Safe useChat with Agents
+
+Build end-to-end type-safe agents by inferring `UIMessage` types from your agent definition for type-safe UI rendering with `useChat`.
+
+## Recommended Structure
+
+```
+lib/
+  agents/
+    my-agent.ts       # Agent definition + type export
+  tools/
+    weather-tool.ts   # Individual tool definitions
+    calculator-tool.ts
+```
+
+## Define Tools
+
+```ts
+// lib/tools/weather-tool.ts
+import { tool } from "ai";
+import { z } from "zod";
+
+export const weatherTool = tool({
+  description: "Get current weather for a location",
+  inputSchema: z.object({
+    location: z.string().describe("City name"),
+  }),
+  execute: async ({ location }) => {
+    return { temperature: 72, condition: "sunny", location };
+  },
+});
+```
+
+## Define Agent and Export Type
+
+```ts
+// lib/agents/my-agent.ts
+import { ToolLoopAgent, InferAgentUIMessage } from "ai";
+import { weatherTool } from "../tools/weather-tool";
+import { calculatorTool } from "../tools/calculator-tool";
+
+export const myAgent = new ToolLoopAgent({
+  model: "anthropic/claude-sonnet-4",
+  instructions: "You are a helpful assistant.",
+  tools: {
+    weather: weatherTool,
+    calculator: calculatorTool,
+  },
+});
+
+// Infer the UIMessage type from the agent
+export type MyAgentUIMessage = InferAgentUIMessage<typeof myAgent>;
+```
+
+### With Custom Metadata
+
+```ts
+// lib/agents/my-agent.ts
+import { z } from "zod";
+
+const metadataSchema = z.object({
+  createdAt: z.number(),
+  model: z.string().optional(),
+});
+
+type MyMetadata = z.infer<typeof metadataSchema>;
+
+export type MyAgentUIMessage = InferAgentUIMessage<typeof myAgent, MyMetadata>;
+```
+
+## Use with `useChat`
+
+```tsx
+// app/chat.tsx
+import { useChat } from "@ai-sdk/react";
+import type { MyAgentUIMessage } from "@/lib/agents/my-agent";
+
+export function Chat() {
+  const { messages } = useChat<MyAgentUIMessage>();
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <Message key={message.id} message={message} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Rendering Parts with Type Safety
+
+Tool parts are typed as `tool-{toolName}` based on your agent's tools:
+
+```tsx
+function Message({ message }: { message: MyAgentUIMessage }) {
+  return (
+    <div>
+      {message.parts.map((part, i) => {
+        switch (part.type) {
+          case "text":
+            return <p key={i}>{part.text}</p>;
+
+          case "tool-weather":
+            // part.input and part.output are fully typed
+            if (part.state === "output-available") {
+              return (
+                <div key={i}>
+                  Weather in {part.input.location}: {part.output.temperature}F
+                </div>
+              );
+            }
+            return <div key={i}>Loading weather...</div>;
+
+          case "tool-calculator":
+            // TypeScript knows this is the calculator tool
+            return <div key={i}>Calculating...</div>;
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+```
+
+The `part.type` discriminant narrows the type, giving you autocomplete and type checking for `input` and `output` based on each tool's schema.
+
+## Splitting Tool Rendering into Components
+
+When rendering many tools, you may want to split each tool into its own component. Use `UIToolInvocation<TOOL>` to derive a typed invocation from your tool and export it alongside the tool definition:
+
+```ts
+// lib/tools/weather-tool.ts
+import { tool, UIToolInvocation } from "ai";
+import { z } from "zod";
+
+export const weatherTool = tool({
+  description: "Get current weather for a location",
+  inputSchema: z.object({
+    location: z.string().describe("City name"),
+  }),
+  execute: async ({ location }) => {
+    return { temperature: 72, condition: "sunny", location };
+  },
+});
+
+// Export the invocation type for use in UI components
+export type WeatherToolInvocation = UIToolInvocation<typeof weatherTool>;
+```
+
+Then import only the type in your component:
+
+```tsx
+// components/weather-tool.tsx
+import type { WeatherToolInvocation } from "@/lib/tools/weather-tool";
+
+export function WeatherToolComponent({ invocation }: { invocation: WeatherToolInvocation }) {
+  // invocation.input and invocation.output are fully typed
+  if (invocation.state === "output-available") {
+    return (
+      <div>
+        Weather in {invocation.input.location}: {invocation.output.temperature}F
+      </div>
+    );
+  }
+  return <div>Loading weather for {invocation.input?.location}...</div>;
+}
+```
+
+Use the component in your message renderer:
+
+```tsx
+function Message({ message }: { message: MyAgentUIMessage }) {
+  return (
+    <div>
+      {message.parts.map((part, i) => {
+        switch (part.type) {
+          case "text":
+            return <p key={i}>{part.text}</p>;
+          case "tool-weather":
+            return <WeatherToolComponent key={i} invocation={part} />;
+          case "tool-calculator":
+            return <CalculatorToolComponent key={i} invocation={part} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+```
+
+This approach keeps your tool rendering logic organized while maintaining full type safety, without needing to import the tool implementation into your UI components.

package/dist/templates/claude-config/app/.agents/skills/better-auth-best-practices/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: better-auth-best-practices
+description: Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
+---
+
+# Better Auth Integration Guide
+
+**Always consult [better-auth.com/docs](https://better-auth.com/docs) for code examples and latest API.**
+
+Better Auth is a TypeScript-first, framework-agnostic auth framework supporting email/password, OAuth, magic links, passkeys, and more via plugins.
+
+---
+
+## Quick Reference
+
+### Environment Variables
+- `BETTER_AUTH_SECRET` - Encryption secret (min 32 chars). Generate: `openssl rand -base64 32`
+- `BETTER_AUTH_URL` - Base URL (e.g., `https://example.com`)
+
+Only define `baseURL`/`secret` in config if env vars are NOT set.
+
+### File Location
+CLI looks for `auth.ts` in: `./`, `./lib`, `./utils`, or under `./src`. Use `--config` for custom path.
+
+### CLI Commands
+- `npx @better-auth/cli@latest migrate` - Apply schema (built-in adapter)
+- `npx @better-auth/cli@latest generate` - Generate schema for Prisma/Drizzle
+- `npx @better-auth/cli mcp --cursor` - Add MCP to AI tools
+
+**Re-run after adding/changing plugins.**
+
+---
+
+## Core Config Options
+
+| Option | Notes |
+|--------|-------|
+| `appName` | Optional display name |
+| `baseURL` | Only if `BETTER_AUTH_URL` not set |
+| `basePath` | Default `/api/auth`. Set `/` for root. |
+| `secret` | Only if `BETTER_AUTH_SECRET` not set |
+| `database` | Required for most features. See adapters docs. |
+| `secondaryStorage` | Redis/KV for sessions & rate limits |
+| `emailAndPassword` | `{ enabled: true }` to activate |
+| `socialProviders` | `{ google: { clientId, clientSecret }, ... }` |
+| `plugins` | Array of plugins |
+| `trustedOrigins` | CSRF whitelist |
+
+---
+
+## Database
+
+**Direct connections:** Pass `pg.Pool`, `mysql2` pool, `better-sqlite3`, or `bun:sqlite` instance.
+
+**ORM adapters:** Import from `better-auth/adapters/drizzle`, `better-auth/adapters/prisma`, `better-auth/adapters/mongodb`.
+
+**Critical:** Better Auth uses adapter model names, NOT underlying table names. If Prisma model is `User` mapping to table `users`, use `modelName: "user"` (Prisma reference), not `"users"`.
+
+---
+
+## Session Management
+
+**Storage priority:**
+1. If `secondaryStorage` defined → sessions go there (not DB)
+2. Set `session.storeSessionInDatabase: true` to also persist to DB
+3. No database + `cookieCache` → fully stateless mode
+
+**Cookie cache strategies:**
+- `compact` (default) - Base64url + HMAC. Smallest.
+- `jwt` - Standard JWT. Readable but signed.
+- `jwe` - Encrypted. Maximum security.
+
+**Key options:** `session.expiresIn` (default 7 days), `session.updateAge` (refresh interval), `session.cookieCache.maxAge`, `session.cookieCache.version` (change to invalidate all sessions).
+
+---
+
+## User & Account Config
+
+**User:** `user.modelName`, `user.fields` (column mapping), `user.additionalFields`, `user.changeEmail.enabled` (disabled by default), `user.deleteUser.enabled` (disabled by default).
+
+**Account:** `account.modelName`, `account.accountLinking.enabled`, `account.storeAccountCookie` (for stateless OAuth).
+
+**Required for registration:** `email` and `name` fields.
+
+---
+
+## Email Flows
+
+- `emailVerification.sendVerificationEmail` - Must be defined for verification to work
+- `emailVerification.sendOnSignUp` / `sendOnSignIn` - Auto-send triggers
+- `emailAndPassword.sendResetPassword` - Password reset email handler
+
+---
+
+## Security
+
+**In `advanced`:**
+- `useSecureCookies` - Force HTTPS cookies
+- `disableCSRFCheck` - ⚠️ Security risk
+- `disableOriginCheck` - ⚠️ Security risk  
+- `crossSubDomainCookies.enabled` - Share cookies across subdomains
+- `ipAddress.ipAddressHeaders` - Custom IP headers for proxies
+- `database.generateId` - Custom ID generation or `"serial"`/`"uuid"`/`false`
+
+**Rate limiting:** `rateLimit.enabled`, `rateLimit.window`, `rateLimit.max`, `rateLimit.storage` ("memory" | "database" | "secondary-storage").
+
+---
+
+## Hooks
+
+**Endpoint hooks:** `hooks.before` / `hooks.after` - Array of `{ matcher, handler }`. Use `createAuthMiddleware`. Access `ctx.path`, `ctx.context.returned` (after), `ctx.context.session`.
+
+**Database hooks:** `databaseHooks.user.create.before/after`, same for `session`, `account`. Useful for adding default values or post-creation actions.
+
+**Hook context (`ctx.context`):** `session`, `secret`, `authCookies`, `password.hash()`/`verify()`, `adapter`, `internalAdapter`, `generateId()`, `tables`, `baseURL`.
+
+---
+
+## Plugins
+
+**Import from dedicated paths for tree-shaking:**
+```
+import { twoFactor } from "better-auth/plugins/two-factor"
+```
+NOT `from "better-auth/plugins"`.
+
+**Popular plugins:** `twoFactor`, `organization`, `passkey`, `magicLink`, `emailOtp`, `username`, `phoneNumber`, `admin`, `apiKey`, `bearer`, `jwt`, `multiSession`, `sso`, `oauthProvider`, `oidcProvider`, `openAPI`, `genericOAuth`.
+
+Client plugins go in `createAuthClient({ plugins: [...] })`.
+
+---
+
+## Client
+
+Import from: `better-auth/client` (vanilla), `better-auth/react`, `better-auth/vue`, `better-auth/svelte`, `better-auth/solid`.
+
+Key methods: `signUp.email()`, `signIn.email()`, `signIn.social()`, `signOut()`, `useSession()`, `getSession()`, `revokeSession()`, `revokeSessions()`.
+
+---
+
+## Type Safety
+
+Infer types: `typeof auth.$Infer.Session`, `typeof auth.$Infer.Session.user`.
+
+For separate client/server projects: `createAuthClient<typeof auth>()`.
+
+---
+
+## Common Gotchas
+
+1. **Model vs table name** - Config uses ORM model name, not DB table name
+2. **Plugin schema** - Re-run CLI after adding plugins
+3. **Secondary storage** - Sessions go there by default, not DB
+4. **Cookie cache** - Custom session fields NOT cached, always re-fetched
+5. **Stateless mode** - No DB = session in cookie only, logout on cache expiry
+6. **Change email flow** - Sends to current email first, then new email
+
+---
+
+## Resources
+
+- [Docs](https://better-auth.com/docs)
+- [Options Reference](https://better-auth.com/docs/reference/options)
+- [LLMs.txt](https://better-auth.com/llms.txt)
+- [GitHub](https://github.com/better-auth/better-auth)
+- [Init Options Source](https://github.com/better-auth/better-auth/blob/main/packages/core/src/types/init-options.ts)

package/dist/templates/claude-config/app/.agents/skills/building-components/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: building-components
+description: Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.
+---
+
+# Building Components
+
+## When to use this skill
+
+Use when the user is:
+
+- Building new UI components (primitives, components, blocks, templates)
+- Implementing accessibility features (ARIA, keyboard navigation, focus management)
+- Creating composable component APIs (slots, render props, controlled/uncontrolled state)
+- Setting up design tokens and theming systems
+- Publishing components to npm or a registry
+- Writing component documentation
+- Implementing polymorphism or as-child patterns
+- Working with data attributes for styling/state
+
+## References
+
+- [definitions.mdx](./references/definitions.mdx) - Artifact taxonomy (primitives, components, blocks, templates)
+- [principles.mdx](./references/principles.mdx) - Core principles for component design
+- [accessibility.mdx](./references/accessibility.mdx) - ARIA, keyboard navigation, WCAG compliance
+- [composition.mdx](./references/composition.mdx) - Composable component patterns
+- [as-child.mdx](./references/as-child.mdx) - The as-child pattern for element polymorphism
+- [polymorphism.mdx](./references/polymorphism.mdx) - Polymorphic component patterns
+- [types.mdx](./references/types.mdx) - TypeScript typing patterns for components
+- [state.mdx](./references/state.mdx) - Controlled vs uncontrolled state management
+- [data-attributes.mdx](./references/data-attributes.mdx) - Using data attributes for styling and state
+- [design-tokens.mdx](./references/design-tokens.mdx) - Design token systems and theming
+- [styling.mdx](./references/styling.mdx) - Component styling approaches
+- [registry.mdx](./references/registry.mdx) - shadcn-style registry distribution
+- [npm.mdx](./references/npm.mdx) - Publishing components to npm
+- [marketplaces.mdx](./references/marketplaces.mdx) - Component marketplace distribution
+- [docs.mdx](./references/docs.mdx) - Writing component documentation