@sanity-labs/slides 0.0.0

package/src/scaffold/template-base/README.md

@@ -0,0 +1,134 @@
+# **NAME**
+
+A react-pptx template. The brand lives in JSX; an LLM (Claude, anything that
+speaks MCP) drives it through the generic `react-pptx-mcp` server without
+ever touching fonts, colors, or layout.
+
+## Develop
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Opens the hot-reloading viewer at <http://localhost:5173>. Edit anything
+under `src/` and the page updates.
+
+## Anatomy
+
+```
+src/
+├── index.ts             # Template value — tokens, fonts, components map
+├── preview.tsx          # Canonical slide order shown in the viewer
+└── components/          # Slide components, each one a Zod schema + JSX
+```
+
+The Zod schema on every component is what Claude sees as the tool input
+schema. Field descriptions become the LLM-facing documentation. Drop a
+new component into `src/components/` and `defineTemplateComponent({...})`
+in `src/index.ts` — that's the entire authoring loop.
+
+## Generate a deck from the CLI
+
+After editing, build once and then invoke the generic CLI against your
+template:
+
+```bash
+pnpm build
+echo '{
+  "title": "Q2 Review",
+  "slides": [{ "component": "Cover", "props": { "title": "Q2 Review" } }]
+}' | pnpm generate --output ~/Desktop
+# /Users/you/Desktop/Q2-Review.pptx
+```
+
+`pnpm generate` is a thin wrapper around `react-pptx-mcp generate --template
+./dist/index.js`.
+
+## Plug this template into Claude Desktop
+
+No global install. No per-template binary. Use `npx` so Claude pulls the
+generic MCP server straight from npm.
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`
+(or the equivalent on your OS):
+
+```json
+{
+  "mcpServers": {
+    "__NAME__-slides": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "react-pptx-mcp",
+        "serve",
+        "--template",
+        "/absolute/path/to/__NAME__/dist/index.js",
+        "--output",
+        "/Users/you/Desktop"
+      ]
+    }
+  }
+}
+```
+
+Restart Claude. Three tools appear, auto-derived from this template:
+
+| Tool                | Purpose                                                          |
+| ------------------- | ---------------------------------------------------------------- |
+| `slides_list`       | Lists every slide type, with descriptions.                       |
+| `slides_add_<type>` | Validates a single slide's props against the Zod schema.         |
+| `slides_create`     | Takes `{ title, slides }`, writes the `.pptx`, returns the path. |
+
+Ask Claude:
+
+> "Make me a 5-slide Q2 review deck with this template."
+
+Whenever you edit the template, run `pnpm build` and Claude will pick up
+the changes on its next request.
+
+### Want Claude to know the conventions up front?
+
+Drop the bundled skill into your Claude project. Print it with:
+
+```bash
+npx react-pptx-mcp skill
+```
+
+…and paste into your Claude project's knowledge sources.
+
+## API in 30 seconds
+
+```ts
+import { defineTemplate, defineTemplateComponent, CANVAS_16_9 } from 'react-pptx';
+import { Cover, CoverSchema } from './components/Cover.js';
+import { preview } from './preview.js';
+
+export const __IDENT__ = defineTemplate({
+  name: '__NAME__',
+  canvas: CANVAS_16_9,
+  fonts: { display: ['Inter'], body: ['Inter'], mono: ['IBM Plex Mono'] },
+  colors: {},
+  typography: {},
+  spacing: {},
+  components: {
+    Cover: defineTemplateComponent({
+      component: Cover,
+      schema: CoverSchema,
+      description: 'Use as the first slide of a deck.',
+    }),
+  },
+  preview,
+});
+```
+
+Add a new component:
+
+1. Create `src/components/MySlide.tsx` exporting a Zod schema and a React
+   component. Keep all styling token-locked through your tokens map.
+2. Register it in `src/index.ts` under `components` with a clear
+   description (LLMs read it).
+3. Add a sample call in `src/preview.tsx` so the viewer shows it.
+
+Run `pnpm build` and the new component appears as `slides_add_my_slide` the
+next time Claude talks to your MCP server.

package/src/scaffold/template-base/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.tsbuildinfo
+.vite

package/src/scaffold/template-base/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "__NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "description": "A react-pptx template.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "slides-dev",
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "serve": "react-pptx-mcp serve --template ./dist/index.js",
+    "generate": "react-pptx-mcp generate --template ./dist/index.js"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-pptx": "^0.0.0"
+  },
+  "dependencies": {
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "19.2.5",
+    "react-pptx": "^0.0.0",
+    "react-pptx-dev": "^0.0.0",
+    "react-pptx-mcp": "^0.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/src/scaffold/template-base/src/components/Cover.tsx

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import { Slide, Box, Text } from '../../../../core/index.js';
+import { z } from 'zod';
+
+export const CoverSchema = z
+  .object({
+    title: z.string().min(1).describe('The deck title.'),
+    subtitle: z.string().optional().describe('Optional subtitle.'),
+  })
+  .strict();
+
+type CoverProps = z.infer<typeof CoverSchema>;
+
+export const Cover = ({ title, subtitle }: CoverProps): ReactElement => (
+  <Slide>
+    <Box rect={{ x: 0, y: 0, w: 960, h: 540 }} fill={{ kind: 'solid', color: '#0b0b0b' }} />
+    <Box rect={{ x: 60, y: 200, w: 800, h: 120 }}>
+      <Text textStyle={{ fontFamily: 'display', fontSize: 64, foregroundColor: '#ffffff' }}>
+        {title}
+      </Text>
+    </Box>
+    {subtitle ? (
+      <Box rect={{ x: 60, y: 320, w: 800, h: 40 }}>
+        <Text textStyle={{ fontFamily: 'body', fontSize: 20, foregroundColor: '#cccccc' }}>
+          {subtitle}
+        </Text>
+      </Box>
+    ) : null}
+  </Slide>
+);

package/src/scaffold/template-base/src/index.ts

@@ -0,0 +1,27 @@
+import { CANVAS_16_9, defineTemplate, defineTemplateComponent } from '../../../core/index.js';
+import { Cover, CoverSchema } from './components/Cover.js';
+import { preview } from './preview.js';
+
+export const __IDENT__ = defineTemplate({
+  name: '__NAME__',
+  canvas: CANVAS_16_9,
+  fonts: {
+    display: ['Inter', 'Arial'],
+    body: ['Inter', 'Arial'],
+    mono: ['IBM Plex Mono', 'Courier New'],
+  },
+  colors: {
+    'fg.base': '#0b0b0b',
+    'bg.surface': '#ffffff',
+  },
+  typography: {},
+  spacing: { md: 12, lg: 24 },
+  components: {
+    Cover: defineTemplateComponent({
+      component: Cover,
+      schema: CoverSchema,
+      description: 'Use as the first slide of a deck. Sets the title.',
+    }),
+  },
+  preview,
+});

package/src/scaffold/template-base/src/preview.tsx

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import { Cover } from './components/Cover.js';
+
+export const preview = (): ReactElement => (
+  <>
+    <Cover title="Hello, __NAME__" subtitle="A react-pptx template." />
+    <Cover title="Edit me" subtitle="src/preview.tsx" />
+  </>
+);

package/src/scaffold/template-base/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"]
+}

package/src/scaffold/template-base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}