Cursor & Claude Code

# Neural Draft project rules

This codebase is a frontend whose backend is **Neural Draft**. Treat Neural
Draft as the source of truth for content (CMS), blog, social posts, bookings
and commerce — never persist those domains to your own database.

## Stack

- Frontend: {Next.js / Astro / Nuxt / vanilla} (delete the others)
- Backend: Neural Draft v1 Project API
- SDK: `@neuraldraft/sdk` for server-side calls
- MCP: `@neuraldraft/mcp` for editor-time codegen
- Webhooks: `app/api/neural-draft` (or framework equivalent) — HMAC verified

## Conventions (always follow)

1. Every visible text node gets `data-translate="<key>"`. Keys are
   dot-namespaced and lowercase (e.g. `hero.headline`,
   `pricing.tiers.0.name`).
2. Every `<img>` gets `data-image-key="<key>"` and a real `alt`. The CMS
   resolves the URL at build time.
3. Server-side reads use `@neuraldraft/sdk` with the env var
   `NEURALDRAFT_API_KEY`. Never put the key in browser code.
4. Public reads from the browser (e.g. product catalogue) use the
   `/v1/public/*` endpoints with `?project_id=...` — never the authenticated
   endpoints.
5. Webhook receivers must read the **raw** body and verify the HMAC. Use
   the helpers in `lib/neural-draft.ts` (or generate one matching the language
   we're in).

## Where things live

- `lib/neural-draft.ts` — shared client and webhook verifier.
- `app/blog/page.tsx` and `app/blog/[slug]/page.tsx` — blog index and detail.
- `app/api/neural-draft/route.ts` — webhook receiver.
- `components/` — UI components, all annotated with `data-translate` /
  `data-image-key`.

## Brand context

Brand voice, colors, fonts and audience live in Neural Draft and can be
fetched by calling `GET /v1/brand`. Mirror them into Tailwind config or CSS
variables at build time. The MCP server's `brand://current` resource is the
canonical source while you're coding.

## API reference

Full spec: https://docs.neuraldraft.io/api-reference.

When adding a new feature:

1. Find the endpoint in the API reference.
2. Use the SDK's typed wrapper (preferred) or `fetch` (fallback).
3. Add the necessary scope to the API key the project uses.
4. If the endpoint emits webhooks (e.g. `order.paid`), wire them in
   `app/api/neural-draft/route.ts`.

## Don't

- Don't hard-code translatable text — use `data-translate`.
- Don't expose `ndsk_live_*` keys to the browser.
- Don't call private (`/v1/...`) endpoints from the browser.
- Don't store Neural Draft entities (posts, products, bookings) in a local
  database. The frontend is a thin client.
- Don't generate inline migrations for Neural Draft entities. The backend is
  managed.

---
description: Neural Draft project conventions (CMS, blog, social, booking, commerce)
globs:
  - "**/*.{ts,tsx,js,jsx,vue,astro,html,php}"
alwaysApply: true
---

# Neural Draft project rules

(Same content as the `CLAUDE.md` template above.)

import { NeuralDraftClient } from "@neuraldraft/sdk";

if (!process.env.NEURALDRAFT_API_KEY) {
  throw new Error("Missing NEURALDRAFT_API_KEY");
}

export const nd = new NeuralDraftClient({
  apiKey: process.env.NEURALDRAFT_API_KEY,
});

import { nd } from "@/lib/neural-draft";

export async function generateMetadata() {
  const home = await nd.pages.get("home");
  return {
    title: home.meta_title ?? home.title,
    description: home.meta_description ?? undefined,
    openGraph: {
      title: home.og_title ?? home.meta_title ?? home.title,
      description: home.og_description ?? home.meta_description ?? undefined,
      images: home.og_image ? [home.og_image] : undefined,
    },
    alternates: home.canonical_url ? { canonical: home.canonical_url } : undefined,
  };
}

export default async function Home() {
  const brand = await nd.brand.get();
  return (
    <main style={{ background: brand.colors?.primary?.hex }}>
      <h1 data-translate="home.headline">Welcome</h1>
      <p data-translate="home.subhead">Built with Neural Draft.</p>
    </main>
  );
}