### NestJS CLI Quick Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/nestjs/SKILL.md

Install the NestJS CLI globally and create a new NestJS application.

```bash
npm i -g @nestjs/cli
nest new my-app
```

--------------------------------

### Install TanStack Start and Router

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-start/SKILL.md

Install the necessary packages for TanStack Start and TanStack Router, including the Vite plugin for routing.

```bash
npm install @tanstack/react-start @tanstack/react-router
npm install -D @tanstack/router-plugin
```

--------------------------------

### Minimal Fastify Server Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/fastify/SKILL.md

A basic Fastify server to get started quickly. It includes logger configuration and a simple health check route.

```typescript
import Fastify from 'fastify'

const app = Fastify({ logger: true })

app.get('/health', async (request, reply) => {
  return { status: 'ok' }
})

const start = async () => {
  await app.listen({ port: 3000, host: '0.0.0.0' })
}
start()
```

--------------------------------

### Get shadcn/ui Project Info

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Use this command to retrieve the project configuration and installed components in JSON format. This is useful for understanding the current state of your shadcn/ui setup.

```bash
npx shadcn@latest info --json
```

--------------------------------

### Install Netlify Vite Plugin

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-start/rules/deployment.md

Install the Netlify plugin for Vite to integrate TanStack Start with Netlify deployments.

```bash
npm install -D @netlify/vite-plugin-tanstack-start
```

--------------------------------

### Fetch Component Documentation URLs

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Run this command to get the URLs for a component's documentation, examples, and API reference. Always fetch these URLs first to ensure you are using the correct API and usage patterns.

```bash
npx shadcn@latest docs button dialog select
```

--------------------------------

### Install TanStack Start Dependencies

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-start/rules/config-project-setup.md

Install the necessary packages for TanStack Start, including the core library, React Router, React, and Vite development dependencies.

```bash
npm install @tanstack/react-start @tanstack/react-router react react-dom
npm install -D @tanstack/router-plugin typescript vite @vitejs/plugin-react
```

--------------------------------

### Installation

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/plugins/openapi.md

Install the OpenAPI plugin using Bun.

```APIDOC
## Installation
```bash
bun add @elysiajs/openapi
```
```

--------------------------------

### Get shadcn/ui Component Documentation

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Fetch documentation and example URLs for a specific shadcn component. Replace `<component>` with the name of the component you need information on.

```bash
npx shadcn@latest docs <component>
```

--------------------------------

### Server Setup with Client Tool Definitions

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-ai/references/server-setup.md

Example of configuring a chat endpoint where tool definitions are passed to the LLM, but the execution of these tools is handled on the client-side.

```APIDOC
## POST /api/chat (with Client Tool Definitions)

### Description
Handles chat messages, providing the LLM with tool definitions for awareness, while the actual tool execution is delegated to the client.

### Method
POST

### Endpoint
/api/chat

### Request Body
- **messages** (array) - Required - An array of message objects for the chat.

### Response
#### Success Response (200)
- **stream** (ReadableStream) - A Server-Sent Events stream of the chat response, based on LLM's understanding of client-executable tools.

### Request Example
```json
{
  "messages": [
    {"role": "user", "content": "Update the UI with this data"}
  ]
}
```
```

--------------------------------

### Basic GitHub Actions CI Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/pnpm/references/best-practices-ci.md

Sets up a basic CI workflow in GitHub Actions using pnpm for installation and running tests/builds. Ensures Node.js and pnpm are configured.

```yaml
name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      
      - run: pnpm install --frozen-lockfile
      - run: pnpm test
      - run: pnpm build
```

--------------------------------

### Basic WebSocket Server Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/references/websocket.md

Sets up a basic WebSocket server on the '/chat' path that echoes back any received messages. Requires Elysia to be installed.

```typescript
import { Elysia } from 'elysia'

new Elysia()
  .ws('/chat', {
    message(ws, message) {
      ws.send(message)  // Echo back
    }
  })
  .listen(3000)
```

--------------------------------

### Install OpenTelemetry Plugin

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/plugins/opentelemetry.md

Install the OpenTelemetry plugin using Bun.

```bash
bun add @elysiajs/opentelemetry
```

--------------------------------

### Production-Ready Docker Compose Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/docker/SKILL.md

A detailed Docker Compose file demonstrating a production-ready setup with multi-service configuration, health checks, resource limits, secrets, volumes, and network isolation.

```yaml
services:
  app:
    build:
      context: .
      target: runtime
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started
    networks:
      - frontend
      - backend
    healthcheck:
      test: ["CMD", "wget", "-qO-", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s
    deploy:
      resources:
        limits:
          cpus: "1.0"
          memory: 512M
        reservations:
          cpus: "0.5"
          memory: 256M
    restart: unless-stopped
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

  db:
    image: postgres:17-alpine
    environment:
      POSTGRES_DB_FILE: /run/secrets/db_name
      POSTGRES_USER_FILE: /run/secrets/db_user
      POSTGRES_PASSWORD_FILE: /run/secrets/db_password
    secrets:
      - db_name
      - db_user
      - db_password
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - backend
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U postgres"]
      interval: 10s
      timeout: 5s
      retries: 5

  redis:
    image: redis:7-alpine
    command: redis-server --maxmemory 128mb --maxmemory-policy allkeys-lru
    volumes:
      - redis_data:/data
    networks:
      - backend

networks:
  frontend:
    driver: bridge
  backend:
    driver: bridge
    internal: true  # No external access

volumes:
  postgres_data:
  redis_data:

secrets:
  db_name:
    file: ./secrets/db_name.txt
  db_user:
    file: ./secrets/db_user.txt
  db_password:
    file: ./secrets/db_password.txt
```

--------------------------------

### Basic WebSocket Server Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/fastify/rules/websockets.md

Integrates the @fastify/websocket plugin and sets up a basic WebSocket endpoint to handle incoming messages and send echoes. Requires Fastify and the websocket plugin to be installed.

```typescript
import Fastify from 'fastify';
import websocket from '@fastify/websocket';

const app = Fastify();

app.register(websocket);

app.get('/ws', { websocket: true }, (socket, request) => {
  socket.on('message', (message) => {
    const data = message.toString();
    console.log('Received:', data);

    // Echo back
    socket.send(`Echo: ${data}`);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });

  socket.on('error', (error) => {
    console.error('WebSocket error:', error);
  });
});

await app.listen({ port: 3000 });
```

--------------------------------

### Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/better-auth/references/two-factor.md

Configuration for both server and client-side setup of the two-factor authentication plugin.

```APIDOC
## Setup

```ts
// Server
import { betterAuth } from "better-auth";
import { twoFactor } from "better-auth/plugins/two-factor";

export const auth = betterAuth({
  appName: "My App",
  plugins: [
    twoFactor({
      issuer: "My App", // shown in authenticator apps
    }),
  ],
});

// Client
import { createAuthClient } from "better-auth/react";
import { twoFactorClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  plugins: [
    twoFactorClient({
      onTwoFactorRedirect() {
        window.location.href = "/2fa";
      },
    }),
  ],
});
```

Run `npx @better-auth/cli migrate` after adding the plugin.
```

--------------------------------

### Full Example: TanStack Form with Zod Validation

Source: https://github.com/fellipeutaka/leon/blob/main/skills/kanpeki/references/form-tanstack-form.md

This example shows a complete React component for a bug report form, utilizing TanStack Form for state management and Zod for schema validation. It includes setup for form fields, validation, and submission. Install dependencies with `npm install @tanstack/react-form zod`.

```tsx
"use client";

import { useForm } from "@tanstack/react-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";
import { Textarea } from "~/components/ui/textarea";

const formSchema = z.object({
  title:
    z.string()
    .min(5, "Title must be at least 5 characters.")
    .max(32, "Title must be at most 32 characters."),
  description:
    z.string()
    .min(20, "Description must be at least 20 characters.")
    .max(200, "Description must be at most 200 characters."),
});

export function BugReportForm() {
  const form = useForm({
    defaultValues: { title: "", description: "" },
    validators: { onChange: formSchema },
    onSubmit: ({ value }) => {
      toast(JSON.stringify(value, null, 2));
    },
  });

  return (
    <form
      className="flex w-full max-w-md flex-col gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <form.Field name="title">
        {(field) => {
          const isInvalid =
            field.state.meta.isTouched && !field.state.meta.isValid;
          return (
            <Field.Root
              render={
                <TextField
                  id={field.name}
                  isInvalid={isInvalid}
                  name={field.name}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  value={field.state.value}
                />
              }
            >
              <Field.Label>Title</Field.Label>
              <Input placeholder="Bug report title" />
              <Field.Description>
                Provide a concise title for your report.
              </Field.Description>
              <Field.Error errors={field.state.meta.errors} />
            </Field.Root>
          );
        }}
      </form.Field>

      <form.Field name="description">
        {(field) => {
          const isInvalid =
            field.state.meta.isTouched && !field.state.meta.isValid;
          return (
            <Field.Root
              render={
                <TextField
                  id={field.name}
                  isInvalid={isInvalid}
                  name={field.name}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  value={field.state.value}
                />
              }
            >
              <Field.Label>Description</Field.Label>
              <Textarea
                className="min-h-15"
                placeholder="Describe the issue in detail..."
              />
              <Field.Description>
                Include steps to reproduce the issue.
              </Field.Description>
              <Field.Error errors={field.state.meta.errors} />
            </Field.Root>
          );
        }}
      </form.Field>

      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button onPress={() => form.reset()} type="reset" variant="outline">
          Reset
        </Button>
      </div>
    </form>
  );
}

```

--------------------------------

### Minimal Setup with Extensions Only

Source: https://github.com/fellipeutaka/leon/blob/main/skills/react-email/references/EDITOR.md

For users who require more granular control over the editor's functionality, a minimal setup can be achieved by directly utilizing `EditorProvider` from `@tiptap/react` along with `StarterKit` from `@react-email/editor/extensions`.

```APIDOC
## Minimal Setup (Extensions Only)

For more control, use `EditorProvider` from `@tiptap/react` directly with `StarterKit`:

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Start typing or edit this text.' }],
    },
  ],
};

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

This gives you a content-editable area with all core extensions (paragraphs, headings, lists, tables, code blocks, columns, buttons, etc.) but no UI overlays.
```

--------------------------------

### Bun.sql Connection Examples

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/database.md

Demonstrates how to establish database connections using Bun.sql, both globally and explicitly with different database URLs. It also shows how to configure connection pool options.

```typescript
import { sql, SQL } from "bun";

// Global singleton — reads env vars automatically
const rows = await sql`SELECT 1`;

// Explicit connection
const pg = new SQL("postgres://user:pass@localhost:5432/mydb");
const mysql = new SQL("mysql://user:pass@localhost:3306/mydb");
const sqlite = new SQL(":memory:");
const sqliteFile = new SQL("sqlite://app.db");
```

```typescript
const db = new SQL({
  url: "postgres://...",
  max: 20,                   // max pool connections
  idleTimeout: 30,           // seconds
  maxLifetime: 3600,         // seconds
  connectionTimeout: 10,     // seconds
  ssl: "prefer",             // "disable" | "require" | "verify-ca" | "verify-full"
  bigint: true,              // return large ints as BigInt
  prepare: false,            // disable prepared statements (for PGBouncer)
});
```

--------------------------------

### Install agent-browser CLI

Source: https://github.com/fellipeutaka/leon/blob/main/skills/agent-browser/SKILL.md

Install the agent-browser CLI globally and then run the install command to set up the necessary components. This is a prerequisite for using the tool.

```bash
npm i -g agent-browser && agent-browser install
```

--------------------------------

### Compare Install Times

Source: https://github.com/fellipeutaka/leon/blob/main/skills/pnpm/references/best-practices-performance.md

Provides commands to benchmark pnpm install times under different conditions: clean install, cached install with frozen lockfile, and install with store cache.

```bash
# Clean install
rm -rf node_modules pnpm-lock.yaml
time pnpm install

# Cached install (with lockfile)
rm -rf node_modules
time pnpm install --frozen-lockfile

# With store cache
time pnpm install --frozen-lockfile --prefer-offline
```

--------------------------------

### Install Prisma and prismabox

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/prisma.md

Install the necessary Prisma client, `prismabox`, and development dependencies using Bun.

```bash
bun add @prisma/client prismabox && \
bun add -d prisma
```

--------------------------------

### Basic ElysiaJS Server Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/SKILL.md

A minimal ElysiaJS server with GET and POST routes, including basic validation for the POST request body. This example uses TypeBox for schema definition.

```typescript
import { Elysia, t, status } from 'elysia'

const app = new Elysia()
  .get('/', () => 'Hello World')
  .post('/user', ({ body }) => body, {
    body: t.Object({
      name: t.String(),
      age: t.Number()
    })
  })
  .get('/id/:id', ({ params: { id } }) => {
    if(id > 1_000_000) return status(404, 'Not Found')

    return id
  }, {
    params: t.Object({
      id: t.Number({ minimum: 1 })
    }),
    response: {
      200: t.Number(),
      404: t.Literal('Not Found')
    }
  })
  .listen(3000)
```

--------------------------------

### Multi-Role Auth Setup Files

Source: https://github.com/fellipeutaka/leon/blob/main/skills/playwright/references/authentication.md

Implement separate setup functions within a single auth setup file to generate distinct storage states for different user roles. Each setup function handles login for its specific role.

```typescript
import { test as setup } from '@playwright/test';

setup('admin auth', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('admin@test.com');
  await page.getByLabel('Password').fill('adminpass');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.context().storageState({ path: '.auth/admin.json' });
});

setup('user auth', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@test.com');
  await page.getByLabel('Password').fill('userpass');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.context().storageState({ path: '.auth/user.json' });
});
```

--------------------------------

### Install Prisma CLI and Client

Source: https://github.com/fellipeutaka/leon/blob/main/skills/prisma/SKILL.md

Install Prisma as a development dependency and the Prisma Client package. Initializes the Prisma project.

```bash
npm install prisma --save-dev
npm install @prisma/client
npx prisma init
```

--------------------------------

### Create New Project with Preset

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Initialize a new project with a given name and preset. You can also specify a template.

```bash
npx shadcn@latest init --name my-app --preset base-nova
```

```bash
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
```

--------------------------------

### Initialize Project with Preset

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Initialize a new project with a specified preset. Use `--force` and `--no-reinstall` for merging or skipping presets.

```bash
npx shadcn@latest init --preset <code> --force --no-reinstall
```

--------------------------------

### Monorepo Migration: Install with pnpm

Source: https://github.com/fellipeutaka/leon/blob/main/skills/pnpm/references/best-practices-migration.md

Remove old node_modules and lockfiles, then run 'pnpm install' for monorepo setup.

```bash
rm -rf node_modules packages/*/node_modules package-lock.json
pnpm install
```

--------------------------------

### Testing Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/nuqs/references/setup-adapter.md

Import `NuqsAdapter` for testing purposes. Refer to `debug-testing.md` for more details.

```tsx
import { NuqsAdapter } from 'nuqs/adapters/testing'
// See debug-testing.md
```

--------------------------------

### Install and Initialize Biome

Source: https://github.com/fellipeutaka/leon/blob/main/skills/ai-repo-setup/references/feedback-loops.md

Install the Biome linter and formatter as a development dependency and initialize its configuration.

```bash
npm install --save-dev @biomejs/biome
npx biome init
```

--------------------------------

### onResolve Hook Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/bundler.md

An example of an onResolve hook that transforms import paths starting with 'env:' into environment variable lookups.

```typescript
build.onResolve({ filter: /^env:/ }, ({ path }) => ({
  path: path.slice(4),
  namespace: "env",
}));
```

--------------------------------

### User Feedback Synthesis Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/design-lab/SKILL.md

An example format to guide users when providing detailed feedback for synthesizing a new variant.

```markdown
- A: Love the card layout and spacing
- B: The color scheme feels right
- C: The interaction on hover is great
- D: Nothing stands out
- E: The typography hierarchy is clearest
```

--------------------------------

### Install Elysia Node.js Adapter

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/nodejs.md

Install the Elysia framework and the Node.js adapter using Bun.

```bash
bun add elysia @elysiajs/node
```

--------------------------------

### Install Dependencies for Elysia/Astro

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/astro.md

Manually install necessary packages like TypeBox and OpenAPI types if not already included in your project setup.

```bash
pnpm add @sinclair/typebox openapi-types
```

--------------------------------

### Common Examples

Source: https://github.com/fellipeutaka/leon/blob/main/skills/next-best-practices/functions.md

Illustrative examples of how to use Next.js functions.

```APIDOC
## Navigation Example

### Description
Demonstrates the recommended way to handle internal navigation using `next/link` and styling active links with `usePathname`.

### Code
```tsx
// Bad: Plain anchor tag
<a href="/about">About</a>

// Good: Next.js Link
import Link from 'next/link'

<Link href="/about">About</Link>

// Active link styling
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export function NavLink({ href, children }) {
  const pathname = usePathname()

  return (
    <Link href={href} className={pathname === href ? 'active' : ''}>
      {children}
    </Link>
  )
}
```
```

```APIDOC
## Static Generation Example

### Description
Shows how to use `generateStaticParams` to pre-render dynamic routes at build time.

### Code
```tsx
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}
```
```

```APIDOC
## After Response Example

### Description
Illustrates using the `after` function to execute code after the response has finished streaming, such as logging analytics.

### Code
```tsx
import { after } from 'next/server'

export async function POST(request: Request) {
  const data = await processRequest(request)

  after(async () => {
    await logAnalytics(data)
  })

  return Response.json({ success: true })
}
```
```

--------------------------------

### Install React Email

Source: https://github.com/fellipeutaka/leon/blob/main/skills/react-email/SKILL.md

Install the React Email package using npm. This is the first step to start building email templates.

```sh
npm i react-email
```

--------------------------------

### Full Denji Configuration Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/denji/references/configuration.md

A comprehensive example demonstrating various configuration options for Denji, including schema, framework, output, TypeScript, accessibility, source tracking, allowed libraries, React-specific settings, and hooks.

```json
{
  "$schema": "./node_modules/denji/configuration_schema.json",
  "framework": "react",
  "output": "./src/icons.tsx",
  "typescript": true,
  "a11y": "hidden",
  "trackSource": true,
  "allowedLibraries": ["lucide"],
  "react": {
    "forwardRef": true
  },
  "hooks": {
    "postAdd": ["npx biome check --write ./src/icons.tsx"],
    "postRemove": ["npx biome check --write ./src/icons.tsx"]
  }
}
```

--------------------------------

### TanStack Start POST Request

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-ai/references/server-setup.md

Example of setting up a POST endpoint for chat messages within TanStack Start, leveraging its routing capabilities.

```APIDOC
## POST /api/chat (TanStack Start)

### Description
Handles chat messages within a TanStack Start application and returns a Server-Sent Events stream.

### Method
POST

### Endpoint
/api/chat

### Request Body
- **messages** (array) - Required - An array of message objects for the chat.
- **conversationId** (string) - Optional - The ID of the conversation.

### Response
#### Success Response (200)
- **stream** (ReadableStream) - A Server-Sent Events stream of the chat response.

### Request Example
```json
{
  "messages": [
    {"role": "user", "content": "How can I help you?"}
  ],
  "conversationId": "another-conversation-id"
}
```
```

--------------------------------

### Create Server Function with GET Method

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-start/SKILL.md

Define a server function using `createServerFn` for handling GET requests. This example fetches data from a database.

```tsx
import { createServerFn } from '@tanstack/react-start'

const getUser = createServerFn({ method: 'GET' })
  .handler(async () => {
    return db.users.findFirst()
  })
```

--------------------------------

### WebSocket Server Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/http-server.md

Details how to set up a WebSocket server using Bun, including handling connection upgrades, and defining WebSocket event handlers.

```APIDOC
## WebSocket Server Setup

### Description
This section covers the setup and configuration of a WebSocket server within Bun.

### Server Configuration
```ts
Bun.serve({
  fetch(req, server) {
    // Upgrade the request to a WebSocket connection
    if (server.upgrade(req, { data: { userId: "123" } })) {
      return;
    }
    // Handle non-WebSocket requests
    return new Response("Not a WebSocket", { status: 400 });
  },
  websocket: {
    open(ws) {
      ws.subscribe("chat"); // Subscribe to a topic
      ws.send("Welcome!");   // Send a message to the client
    },
    message(ws, message) {
      // Broadcast message to all subscribers of the 'chat' topic (excluding sender)
      ws.publish("chat", message);
      // To broadcast to all including sender, use server.publish:
      // server.publish("chat", message);
    },
    close(ws, code, reason) {
      ws.unsubscribe("chat"); // Unsubscribe from the topic
    },
    drain(ws) {
      // Called when backpressure has been relieved, safe to send again
    },
  },
});
```
```

--------------------------------

### TanStack Start API Route for Chat

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-ai/references/server-setup.md

Set up a chat endpoint using TanStack Start's `createFileRoute`. This example integrates with OpenAI and streams responses.

```typescript
import { chat, toServerSentEventsResponse } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/api/chat")({
  server: {
    handlers: {
      POST: async ({ request }) => {
        const { messages, conversationId } = await request.json();
        const stream = chat({
          adapter: openaiText("gpt-5.2"),
          messages,
          conversationId,
        });
        return toServerSentEventsResponse(stream);
      },
    },
  },
});
```

--------------------------------

### Setup Passkey Plugin (Client)

Source: https://github.com/fellipeutaka/leon/blob/main/skills/better-auth/references/authentication.md

Initialize the Passkey client plugin for Better Auth on the client-side.

```typescript
import { passkeyClient } from "@better-auth/passkey/client";

const authClient = createAuthClient({
  plugins: [passkeyClient()],
});

```

--------------------------------

### Bun Package Manager Setup for GitHub Actions

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/ci/github-actions.md

Integrates the Bun JavaScript runtime and package manager into a GitHub Actions workflow. It installs Bun and then installs project dependencies.

```yaml
- uses: oven-sh/setup-bun@v1
  with:
    bun-version: latest

- run: bun install --frozen-lockfile
```

--------------------------------

### Initialize Denji Project

Source: https://github.com/fellipeutaka/leon/blob/main/skills/denji/SKILL.md

Initializes a Denji project, creating a configuration file and an icons template. Specify the framework and output path for the generated icons.

```bash
npx denji init --framework react --output ./src/icons.tsx
```

```bash
npx denji init
```

```bash
npx denji init --framework svelte --output ./src/icons --output-type folder
```

```bash
npx denji init --framework react --no-typescript --output ./src/icons.jsx
```

```bash
npx denji init --a11y hidden --forward-ref
```

--------------------------------

### Get Component Documentation URLs with shadcn CLI

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/cli.md

Use the 'docs' command to get resolved URLs for component documentation, examples, and API references. Provide one or more component names as arguments.

```bash
npx shadcn@latest docs <components...> [options]
```

--------------------------------

### Basic HTTP Server with Routes

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/http-server.md

Demonstrates setting up a basic HTTP server with different types of routes: per-method handlers, static responses, file routes, and asynchronous route handlers.

```APIDOC
## Basic HTTP Server Configuration

### Description
This example shows how to configure an HTTP server with various route types.

### Routes Configuration

**Per-Method Handlers:**
```ts
Bun.serve({
  routes: {
    "/api/users": {
      GET: () => Response.json(users),
      POST: async (req) => {
        const body = await req.json();
        return Response.json(body, { status: 201 });
      },
      PUT: async (req) => Response.json(await req.json()),
      DELETE: () => new Response(null, { status: 204 }),
    },
  },
});
```

**Static Response Routes:**
```ts
routes: {
  "/health": new Response("OK"),
  "/api/not-found": Response.json({ error: "Not found" }, { status: 404 }),
}
```

**File Routes:**
```ts
routes: {
  "/favicon.ico": Bun.file("./public/favicon.ico"), // streamed, per-request
}
```

**Async Routes:**
```ts
routes: {
  "/api/version": async () => {
    const [row] = await sql`SELECT version()`;
    return Response.json(row);
  },
}
```

### Export Default Syntax
```ts
export default {
  port: 3000,
  fetch(req) {
    return new Response("Hello");
  },
} satisfies Serve.Options<undefined>;
```
```

--------------------------------

### pnpm Package Manager Setup for GitHub Actions

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/ci/github-actions.md

Configures the pnpm package manager within a GitHub Actions workflow. Includes installing pnpm, setting up Node.js with pnpm caching, and installing dependencies.

```yaml
- uses: pnpm/action-setup@v3
  with:
    version: 9

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: "pnpm"

- run: pnpm install --frozen-lockfile
```

--------------------------------

### Setup Admin Plugin for Server and Client

Source: https://github.com/fellipeutaka/leon/blob/main/skills/better-auth/references/admin.md

Import and initialize the admin plugin for both the server and client-side authentication setup. Remember to run the migration command after adding the plugin.

```typescript
import { betterAuth } from "better-auth";
import { admin } from "better-auth/plugins/admin";

export const auth = betterAuth({
  plugins: [admin()],
});

// Client
import { createAuthClient } from "better-auth/react";
import { adminClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  plugins: [adminClient()],
});
```

--------------------------------

### Install OpenAPI Plugin

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/plugins/openapi.md

Install the OpenAPI plugin using Bun. This is the first step to enable OpenAPI documentation generation.

```bash
bun add @elysiajs/openapi
```

--------------------------------

### Remove Shadcn Defaults

Source: https://github.com/fellipeutaka/leon/blob/main/skills/kanpeki/references/installation-setup.md

Removes previously installed shadcn default packages if they conflict with the new setup.

```bash
npm remove class-variance-authority clsx tw-animate-css
```

--------------------------------

### Complete Turborepo Configuration Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/environment/RULE.md

A comprehensive example demonstrating the use of global and task-specific environment variables, including both hashed and runtime-only variables.

```json
{
  "$schema": "https://v2-9-7-canary-13.turborepo.dev/schema.json",
  "globalEnv": ["CI", "NODE_ENV"],
  "globalPassThroughEnv": ["GITHUB_TOKEN", "NPM_TOKEN"],
  "tasks": {
    "build": {
      "env": ["DATABASE_URL", "API_*"],
      "passThroughEnv": ["SENTRY_AUTH_TOKEN"]
    },
    "test": {
      "env": ["TEST_DATABASE_URL"]
    }
  }
}
```

--------------------------------

### Server and Client Setup for Organization Plugin

Source: https://github.com/fellipeutaka/leon/blob/main/skills/better-auth/references/organizations.md

Configure the organization plugin for both server and client applications. Remember to run the migration command after setup.

```typescript
import { betterAuth } from "better-auth";
import { organization } from "better-auth/plugins/organization";

export const auth = betterAuth({
  plugins: [
    organization({
      allowUserToCreateOrganization: true,
      organizationLimit: 5,
      membershipLimit: 100,
    }),
  ],
});

// Client
import { createAuthClient } from "better-auth/react";
import { organizationClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  plugins: [organizationClient()],
});
```

--------------------------------

### Setup Elysia with Node.js Adapter

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/nodejs.md

Apply the Node.js adapter to an Elysia application and start the server on port 3000.

```typescript
import { Elysia } from 'elysia'
import { node } from '@elysiajs/node'

const app = new Elysia({ adapter: node() })
  .get('/', () => 'Hello Elysia')
  .listen(3000)
```

--------------------------------

### Text Input and Textarea Form Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/kanpeki/references/form-react-hook-form.md

A full example of a bug report form using React Hook Form with Zod validation and Kanpeki's TextField and Textarea components. Ensure `react-hook-form` and `@hookform/resolvers/zod` are installed.

```tsx
"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";
import { Textarea } from "~/components/ui/textarea";

const formSchema = z.object({
  title: z.string().min(5, "Title must be at least 5 characters.").max(32),
  description: z.string().min(20, "Description must be at least 20 characters."),
});

export function BugReportForm() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: { title: "", description: "" },
  });

  const onSubmit = form.handleSubmit((value) => {
    toast(JSON.stringify(value, null, 2));
  });

  return (
    <form className="flex w-full max-w-md flex-col gap-4" onSubmit={onSubmit}>
      <Controller
        control={form.control}
        name="title"
        render={({ field: { ref, disabled, ...field }, fieldState }) => (
          <Field.Root
            render={
              <TextField isInvalid={fieldState.invalid} isDisabled={disabled} {...field} />
            }
          >
            <Field.Label>Title</Field.Label>
            <Input ref={ref} placeholder="Bug report title" />
            <Field.Description>Concise title for your report.</Field.Description>
            <Field.Error errors={[fieldState.error]} />
          </Field.Root>
        )}
      />
      <Controller
        control={form.control}
        name="description"
        render={({ field: { ref, disabled, ...field }, fieldState }) => (
          <Field.Root
            render={
              <TextField isInvalid={fieldState.invalid} isDisabled={disabled} {...field} />
            }
          >
            <Field.Label>Description</Field.Label>
            <Textarea ref={ref} className="min-h-15" placeholder="Describe in detail..." />
            <Field.Description>Include steps to reproduce.</Field.Description>
            <Field.Error errors={[fieldState.error]} />
          </Field.Root>
        )}
      />
      <div className="flex gap-2">
        <Button onPress={() => form.reset()} type="reset" variant="outline">Reset</Button>
        <Button isDisabled={form.formState.isSubmitting} type="submit">
          {form.formState.isSubmitting ? "Submitting..." : "Submit"}
        </Button>
      </div>
    </form>
  );
}

```

--------------------------------

### Install Server Timing Plugin

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/plugins/server-timing.md

Install the Server Timing plugin using bun.

```bash
bun add @elysiajs/server-timing
```

--------------------------------

### Tailwind CSS Plugin Configuration

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/http-server.md

Example configuration for integrating Tailwind CSS using a plugin within the Bun server setup.

```APIDOC
## Tailwind CSS Plugin Configuration

### Description
Example configuration for integrating Tailwind CSS using a plugin within the Bun server setup.

### Configuration File
`bunfig.toml`

### Code
```toml
[serve.static]
plugins = ["bun-plugin-tailwind"]
```
```

--------------------------------

### Server Setup with Server Tools

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-ai/references/server-setup.md

Demonstrates setting up a chat endpoint that utilizes server-side tools for enhanced functionality.

```APIDOC
## POST /api/chat (with Server Tools)

### Description
Handles chat messages and integrates server-side tools for dynamic responses. The LLM can decide to use these tools based on the conversation.

### Method
POST

### Endpoint
/api/chat

### Request Body
- **messages** (array) - Required - An array of message objects for the chat.

### Parameters
#### Request Body
- **messages** (array) - Required - An array of message objects for the chat.

### Response
#### Success Response (200)
- **stream** (ReadableStream) - A Server-Sent Events stream of the chat response, potentially including tool outputs.

### Request Example
```json
{
  "messages": [
    {"role": "user", "content": "Get my user data for ID 123"}
  ]
}
```
```

--------------------------------

### Install Virtualization Libraries

Source: https://github.com/fellipeutaka/leon/blob/main/skills/motion/SKILL.md

Install libraries like `react-window`, `react-virtuoso`, or `@tanstack/react-virtual` to handle large lists efficiently.

```bash
pnpm add react-window
# or
pnpm add react-virtuoso
# or
pnpm add @tanstack/react-virtual
```

--------------------------------

### Date Range Example with parseAsIsoDate

Source: https://github.com/fellipeutaka/leon/blob/main/skills/nuqs/references/parser-date-format.md

Demonstrates how to use `parseAsIsoDate` to manage a date range in the URL, setting both a start and end date.

```typescript
const [from, setFrom] = useQueryState('from', parseAsIsoDate)
const [to, setTo] = useQueryState('to', parseAsIsoDate)
// URL: ?from=2024-01-01&to=2024-01-31
```

--------------------------------

### Initialize Paraglide JS

Source: https://github.com/fellipeutaka/leon/blob/main/skills/paraglide-js/references/setup.md

Run this command to create the necessary configuration files and install dependencies.

```bash
npx @inlang/paraglide-js@latest init
```

--------------------------------

### DOM Testing Setup with happy-dom

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/testing.md

Integrate DOM testing by installing `@happy-dom/global-registerer` and preloading it in `bunfig.toml`. This provides a simulated DOM environment for your tests.

```bash
bun add -d @happy-dom/global-registerer
```

--------------------------------

### Next.js Dark Mode Setup with next-themes

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/customization.md

Integrate dark mode support in your Next.js application using the next-themes provider. Ensure 'next-themes' is installed.

```tsx
import { ThemeProvider } from "next-themes"

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>
```

--------------------------------

### Initialize Existing Project with shadcn/ui

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Initialize an existing project with shadcn/ui using a specified preset or default settings. The `--defaults` flag is a shortcut for common configurations.

```bash
npx shadcn@latest init --preset base-nova
```

```bash
npx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)
```

--------------------------------

### Turborepo Build and Cache Example

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/caching/RULE.md

Demonstrates the typical flow of running a Turborepo build. The first run executes tasks and caches results, while subsequent runs with identical inputs restore from the cache, resulting in a 'FULL TURBO' status.

```bash
# First run - executes build, caches result
turbo build
# → packages/ui: cache miss, executing...
# → packages/web: cache miss, executing...

# Second run - same inputs, restores from cache
turbo build
# → packages/ui: cache hit, replaying output
# → packages/web: cache hit, replaying output
# → FULL TURBO
```

--------------------------------

### Docker Non-Root User Setup

Source: https://github.com/fellipeutaka/leon/blob/main/skills/docker/SKILL.md

Shows how to create and switch to a non-root user in Dockerfiles for security. Includes examples for Alpine, Debian/Ubuntu, and distroless/scratch images.

```dockerfile
# Alpine
RUN addgroup -g 1001 -S app && adduser -S app -u 1001 -G app
USER app

# Debian/Ubuntu
RUN groupadd -g 1001 app && useradd -r -u 1001 -g app app
USER app

# Distroless/scratch (numeric only)
USER 65534:65534
```

--------------------------------

### Run Bun Deployment

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-start/rules/deployment.md

Build the application and run the server using Bun.

```bash
bun run build
bun run server.ts
```

--------------------------------

### Global Setup via Preload in bunfig.toml

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/testing.md

Configure global setup scripts using the `preload` option in `bunfig.toml`. This ensures setup code runs before tests, similar to the `--preload` command-line flag.

```toml
# bunfig.toml
[test]
preload = ["./test-setup.ts"]
```

--------------------------------

### Pages Router Quick Start

Source: https://github.com/fellipeutaka/leon/blob/main/skills/motion/references/nextjs-integration.md

For Next.js 12 Pages Router, Motion works out of the box with no special setup required. Simply import from 'motion/react'.

```tsx
// Works out of the box, no special setup needed
import { motion } from "motion/react"

export default function Page() {
  return <motion.div animate={{ opacity: 1 }}>Content</motion.div>
}
```

--------------------------------

### Start React Email Preview Server

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/react-email.md

Run this command to start the development server and preview your email templates in the browser.

```bash
bun email
```

--------------------------------

### Install Playwright

Source: https://github.com/fellipeutaka/leon/blob/main/skills/playwright/SKILL.md

Use these commands to set up Playwright in a new or existing project.

```bash
npm init playwright@latest
```

```bash
npm i -D @playwright/test
npx playwright install
```

--------------------------------

### Complete Turborepo GitHub Actions Workflow with pnpm and Remote Cache

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/ci/github-actions.md

A comprehensive GitHub Actions workflow for Turborepo using pnpm. It includes checkout, Node.js setup, pnpm installation, dependency installation, and Turborepo commands for build, test, and lint, with affected commands for efficiency.

```yaml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
      TURBO_TEAM: ${{ vars.TURBO_TEAM }}

    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v3
        with:
          version: 9

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build
        run: turbo run build --affected

      - name: Test
        run: turbo run test --affected

      - name: Lint
        run: turbo run lint --affected
```

--------------------------------

### Setup .pnpmfile.cjs with Hooks

Source: https://github.com/fellipeutaka/leon/blob/main/skills/pnpm/references/features-hooks.md

Create a .pnpmfile.cjs file at the workspace root to define custom hooks for package resolution and lockfile modification.

```javascript
// .pnpmfile.cjs
function readPackage(pkg, context) {
  // Modify package metadata
  return pkg
}

function afterAllResolved(lockfile, context) {
  // Modify lockfile
  return lockfile
}

module.exports = {
  hooks: {
    readPackage,
    afterAllResolved
  }
}
```

--------------------------------

### Elysia Server Export for Vercel

Source: https://github.com/fellipeutaka/leon/blob/main/skills/elysia/integrations/vercel.md

Export your Elysia server as a default import in `src/index.ts` for Vercel deployment. This example includes a basic GET and POST route.

```typescript
import { Elysia, t } from 'elysia'

export default new Elysia()
  .get('/', () => 'Hello Vercel Function')
  .post('/', ({ body }) => body, {
    body: t.Object({ name: t.String() })
  })
```

--------------------------------

### Test Hono Endpoints with CLI

Source: https://github.com/fellipeutaka/leon/blob/main/skills/hono/SKILL.md

Use `hono request` to test endpoints without starting a server. Supports GET, POST with JSON bodies, and other methods.

```bash
npx hono request [file] -P /path
```

```bash
npx hono request [file] -X POST -P /api/users -d '{"name": "test"}'
```

--------------------------------

### Initialize Monorepo Project with shadcn/ui

Source: https://github.com/fellipeutaka/leon/blob/main/skills/shadcn/SKILL.md

Use these commands to initialize a new monorepo project with shadcn/ui, specifying a name, preset, and template.

```bash
npx shadcn@latest init --name my-app --preset base-nova --monorepo
```

```bash
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
```

--------------------------------

### Fuzzy Filtering with Custom `globalFilterFn`

Source: https://github.com/fellipeutaka/leon/blob/main/skills/tanstack-table/rules/filt-global-filtering.md

Implement fuzzy filtering for global search by installing a fuzzy matching library and using it as a custom `globalFilterFn`. This example uses `@tanstack/match-sorter-utils`.

```tsx
import { rankItem } from '@tanstack/match-sorter-utils'

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
  const itemRank = rankItem(row.getValue(columnId), value)
  addMeta({ itemRank })
  return itemRank.passed
}

const table = useReactTable({
  // ...
  globalFilterFn: fuzzyFilter,
})
```

--------------------------------

### Yarn Package Manager Setup for GitHub Actions

Source: https://github.com/fellipeutaka/leon/blob/main/skills/turborepo/references/ci/github-actions.md

Sets up the Yarn package manager in a GitHub Actions workflow. It configures Node.js with Yarn caching and installs project dependencies.

```yaml
- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: "yarn"

- run: yarn install --frozen-lockfile
```

--------------------------------

### Initialize Oxlint and Oxfmt Configs

Source: https://github.com/fellipeutaka/leon/blob/main/skills/ai-repo-setup/references/feedback-loops.md

Initialize configuration files for Oxlint (`.oxlintrc.json`) and Oxfmt (`.oxfmtrc.json`) using their respective CLI commands.

```bash
npx oxlint --init
npx oxfmt --init
```

--------------------------------

### Minimal Editor Setup with Extensions Only

Source: https://github.com/fellipeutaka/leon/blob/main/skills/react-email/references/EDITOR.md

For more control, use EditorProvider from @tiptap/react directly with StarterKit. This provides core extensions without UI overlays.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Start typing or edit this text.' }],
    },
  ],
};

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Global Install Directories

Source: https://github.com/fellipeutaka/leon/blob/main/skills/bun/references/configuration.md

Configure global installation and binary directories for Bun packages.

```toml
[install]
globalDir = "~/.bun/install/global"
globalBinDir = "~/.bun/bin"
```