### Clone and Install figdeck Dependencies

Source: https://github.com/7nohe/figdeck/blob/main/CONTRIBUTING.md

This snippet covers cloning the figdeck repository and installing its dependencies using bun. It's the initial setup step for any contributor.

```bash
git clone https://github.com/7nohe/figdeck.git
cd figdeck
bun install
```

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

### Start Figdeck CLI Server

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/plugin-setup.md

Starts the Figdeck CLI in serve mode to host a WebSocket server for connecting with the Figma plugin. It takes a Markdown file as input and specifies the output directory for slides. This command enables slide generation by facilitating communication between the CLI and the plugin.

```bash
bun run packages/cli/dist/index.js serve examples/sample.md
```

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

### Quick Start figdeck CLI

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Initializes a template Markdown file for figdeck slides and starts the figdeck server to watch for changes and update slides in Figma.

```bash
# Create a template slides.md with all syntax examples
npx figdeck@latest init

# Start the server
npx figdeck@latest slides.md
```

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

### CLI Command: init

Source: https://context7.com/7nohe/figdeck/llms.txt

Initializes a new figdeck project by creating a template Markdown file. This command helps users start quickly by providing examples of all supported syntax.

```APIDOC
## CLI Command: init

### Description
Creates a template Markdown file with examples of all supported syntax.

### Method
CLI Command

### Endpoint
figdeck init

### Parameters
#### Query Parameters
- **-o** (string) - Optional - Specifies a custom filename for the template. Defaults to `slides.md`.
- **--force** (boolean) - Optional - Overwrites the existing file if it already exists.

### Request Example
```bash
# Create default slides.md template
figdeck init

# Create with custom filename
figdeck init -o presentation.md

# Overwrite existing file
figdeck init --force
```

### Response
#### Success Response
- **output** (string) - Confirmation message indicating the file creation and next steps.

#### Response Example
```
Created slides.md
Next steps:
  1. Run: figdeck serve slides.md
  2. Connect the Figma plugin to generate slides
```
```

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

### Figdeck YAML Frontmatter Syntax (Example)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Illustrates the general syntax for YAML frontmatter used in Figdeck presentations, showing examples of solid colors, gradients, local images, remote images, and text colors.

```yaml
---
background: "#1a1a2e"           # Solid color
gradient: "#0d1117:0%,#58a6ff:100%@45"  # Gradient
backgroundImage: "./bg.png"     # Local image
backgroundImage: "https://..."  # Remote image URL
color: "#ffffff"                # Text color
---
```

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

### Install figdeck CLI

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Installs the figdeck command-line interface globally using npm. Alternatively, it can be run directly using npx or bunx without global installation.

```bash
npm install -g figdeck

npx figdeck@latest your-slides.md
bunx figdeck@latest your-slides.md
```

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

### Complete Figdeck Presentation Example (Markdown)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/markdown-spec.md

A comprehensive Markdown example demonstrating the structure of a Figdeck presentation, including title slides, content slides with bullet points and paragraphs, and section dividers.

```markdown
---
# figdeck Presentation

From Markdown to Figma Slides

---
## Table of Contents

- Overview
- Feature Introduction
- Demo
- Summary

---
## Overview

figdeck is a tool that converts
Markdown files to Figma Slides.

The CLI and Figma Plugin work together.

---
## Features

- Markdown parsing
- WebSocket communication
- Automatic slide generation

---
# Thank You

Any questions?

```

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

### figdeck CLI 'init' Command

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Initializes a template `slides.md` file with examples of all supported Markdown syntax. Options include specifying an output path and forcing overwrites.

```bash
figdeck init [options]

Options:
  -o, --out <path>  Output file path (default: "slides.md")
  -f, --force       Overwrite existing file
  -h, --help        Show help
```

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

### Install figdeck CLI

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/README.md

This snippet shows how to install the figdeck CLI globally using npm or execute it directly using npx. It's the first step to using the tool for converting Markdown to Figma slides.

```bash
# Global install
npm install -g figdeck

# Or use directly with npx
npx figdeck your-slides.md
```

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

### Start Figdeck CLI with Remote Access

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/plugin-setup.md

Starts the Figdeck CLI server with remote access enabled, allowing connections from other machines on the network. It automatically generates an authentication secret displayed in the CLI output, which is required for the plugin to connect securely.

```bash
bun run packages/cli/dist/index.js serve examples/sample.md --host 0.0.0.0 --allow-remote
```

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

### Initialize Figdeck Presentation (`init` command)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/api-reference.md

Creates a `slides.md` template file with examples of supported Markdown syntax. It supports options for specifying the output file path and overwriting existing files.

```bash
figdeck init [options]

# Examples:
# Create slides.md in current directory
figdeck init

# Create with custom filename
figdeck init -o presentation.md

# Overwrite existing file
figdeck init --force
```

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

### CLI Command: serve

Source: https://context7.com/7nohe/figdeck/llms.txt

Starts a WebSocket server to facilitate live updates in Figma as Markdown files change. Supports custom hosts, ports, and authentication.

```APIDOC
## CLI Command: serve

### Description
Starts WebSocket server with file watching and authentication support.

### Method
CLI Command

### Endpoint
figdeck serve [markdown_file]

### Parameters
#### Path Parameters
- **markdown_file** (string) - Required - The path to the Markdown file to serve.

#### Query Parameters
- **--host** (string) - Optional - The host address to bind the server to. Defaults to `127.0.0.1`.
- **--port** (number) - Optional - The port number to use for the WebSocket server. Defaults to `4141`.
- **--no-watch** (boolean) - Optional - Disables file watching mode.
- **--allow-remote** (boolean) - Optional - Enables remote access to the server.
- **--secret** (string) - Optional - Sets a secret key for authentication.

### Request Example
```bash
# Basic usage (localhost:4141)
figdeck serve slides.md

# Custom host and port
figdeck serve slides.md --host 127.0.0.1 --port 8080

# Disable watch mode
figdeck serve slides.md --no-watch

# Enable remote access with authentication
figdeck serve slides.md --host 0.0.0.0 --allow-remote

# Custom authentication secret
figdeck serve slides.md --secret my-secret-key
```

### Response
#### Success Response
- **output** (string) - Log messages indicating the server status, parsed slides count, and WebSocket connection details.

#### Response Example
```
Parsed 5 slides from slides.md
WebSocket server started on ws://127.0.0.1:4141
CLI version: 1.0.0, Protocol version: 1
Watching slides.md for changes...
Press Ctrl+C to stop the server.
```
```

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

### Function: startServer

Source: https://context7.com/7nohe/figdeck/llms.txt

Initializes and starts a WebSocket server to communicate with the Figma plugin. It handles broadcasting slide updates and graceful shutdowns.

```APIDOC
## Function: startServer

### Description
Creates WebSocket server for Plugin communication with authentication.

### Method
Import from `@figdeck/cli`

### Endpoint
`startServer(slides: SlideContent[], options?: ServerOptions): Promise<WebSocketServer>`

### Parameters
#### Arguments
- **slides** (Array<SlideContent>) - Required - An array of slide content objects to be served.
- **options** (object) - Optional - Server configuration options.
  - **host** (string) - Optional - The host address for the server.
  - **port** (number) - Optional - The port number for the server.
  - **secret** (string) - Optional - Authentication secret key.
  - **cliVersion** (string) - Optional - The version of the CLI.

### Request Example
```typescript
import { startServer } from '@figdeck/cli';
import { SlideContent } from '@figdeck/shared';

const slides: SlideContent[] = [
  {
    blocks: [
      { kind: "heading", level: 1, text: "Title", spans: [{ text: "Title" }] }
    ]
  }
];

const server = await startServer(slides, {
  host: '127.0.0.1',
  port: 4141,
  secret: 'my-secret',
  cliVersion: '1.0.0'
});

// Broadcast updated slides to all connected clients
server.broadcast(updatedSlides);

// Graceful shutdown
server.close();
```

### Response
#### Success Response
- **server** (WebSocketServer) - An object representing the WebSocket server instance with methods like `broadcast` and `close`.

#### Response Example
```typescript
// Example of accessing server methods
// server.broadcast(newSlides);
// server.close();
```
```

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

### Build Figdeck Plugin

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/plugin-setup.md

Builds the Figma plugin using the 'bun run build' command within the 'packages/plugin' directory. This step is essential for development and preparing the plugin for loading into Figma.

```bash
cd packages/plugin
bun run build
```

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

### Start figdeck WebSocket Server

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Starts the figdeck CLI as a WebSocket server. This enables live reloading of Figma slides as the Markdown file is edited. The server watches for file changes by default, but this can be disabled.

```bash
# Start WebSocket server with CLI (watch mode enabled by default)
npx figdeck@latest your-slides.md

# Or explicitly use serve command
npx figdeck@latest serve your-slides.md

# Disable watch mode
npx figdeck@latest your-slides.md --no-watch
```

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

### TypeScript: Start WebSocket Server

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/api-reference.md

The `startServer` function initializes a WebSocket server to facilitate communication with the plugin. It returns functions to broadcast slide data and to close the server.

```typescript
function startServer(
  slides: SlideContent[],
  options: { host: string; port: number }
): Promise<{
  broadcast: (slides: SlideContent[]) => void;
  close: () => void;
}>
```

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

### figdeck CLI 'serve' Command

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Starts a WebSocket server for live reloading of Figma slides. It allows configuring the host and port, and disabling the default file watching.

```bash
figdeck serve <file> [options]

Options:
  --host <host>      WebSocket host (default: "localhost")
  -p, --port <port>  WebSocket port (default: "4141")
  --no-watch         Disable file watching (enabled by default)
  -h, --help         Show help
```

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

### JavaScript Console Log Example

Source: https://github.com/7nohe/figdeck/blob/main/examples/rich-formatting.md

A simple JavaScript code snippet that demonstrates how to print a "Hello!" message to the console. This is a basic example often used for testing or introductory programming tasks.

```javascript
console.log("Hello!");
```

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

### figdeck Markdown Syntax Example

Source: https://github.com/7nohe/figdeck/blob/main/README.md

Demonstrates the basic Markdown syntax supported by figdeck for creating slides, including title slides, content slides, lists, and slide separators.

```markdown
---
# Title Slide

Subtitle or message

---
## Content Slide

Body text

- Bullet point 1
- Bullet point 2
- Bullet point 3

---
# Summary

Thank you for your attention
```

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

### Apply Default Background & Text Color (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Sets the default background and text color for the entire presentation using global YAML frontmatter at the start of the file. This provides a consistent theme across slides unless overridden.

```yaml
---
background: "#1a1a2e"
color: "#ffffff"
---
```

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

### Debug figdeck CLI Serve Command

Source: https://github.com/7nohe/figdeck/blob/main/CONTRIBUTING.md

This command sequence demonstrates how to debug the figdeck CLI using the 'serve' command. It first builds the CLI and then runs it to start a WebSocket server on port 4141, typically used for live previewing.

```bash
cd packages/cli && bun run build
bun run packages/cli/dist/index.js serve examples/sample.md
```

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

### Image Size Specification Example (Markdown)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/release-notes.md

Demonstrates various ways to specify image dimensions directly within markdown syntax, similar to Marp. Supports width, height, fixed sizes, and percentage-based sizing.

```markdown
![w:400](./image.png)
![h:300](./image.png)
![w:400 h:300](./image.png)
![w:50%](./image.png)
![w:400 Logo](./image.png)

```

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

### Serve Figdeck Presentation with WebSocket (`serve` command)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/api-reference.md

Starts a WebSocket server to listen for Plugin connections and automatically updates presentations. It requires a Markdown file path and allows configuration of the host, port, and watch mode for automatic updates on file changes.

```bash
figdeck serve <file> [options]

# Examples:
# Basic usage
figdeck serve slides.md

# Specify port
figdeck serve slides.md --port 8080

# Specify host (allow external connections)
figdeck serve slides.md --host 0.0.0.0

# File watch mode (auto-resend on changes)
figdeck serve slides.md -w
```

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

### Serve Markdown as Figma Slides (WebSocket)

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/README.md

Starts a WebSocket server to connect with the figdeck Figma Plugin, enabling live updates as you edit your Markdown file. You can customize the host, port, and watch behavior. The default command is 'serve', which can be omitted.

```bash
# Default command - serve can be omitted
figdeck your-slides.md

# Or explicitly
figdeck serve your-slides.md
```

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

### TypeScript Code Snippet Example

Source: https://github.com/7nohe/figdeck/blob/main/examples/font-sizes.md

A simple TypeScript code snippet demonstrating a variable declaration. This snippet is intended for basic code display within the Figdeck project.

```typescript
// Code at 14px
const hello = "world";
```

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

### Bullet Item Spacing Configuration Example (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/release-notes.md

Shows how to customize the spacing between bullet list items using the 'spacing' property in YAML frontmatter. The 'size' property controls the overall bullet size.

```yaml
---
bullets:
  size: 20
  spacing: 12  # Gap between items in pixels
---

```

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

### Markdown Frontmatter for Slide Configuration

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/README.md

Example of Markdown frontmatter used by figdeck to configure slide properties like background color. This allows for easy styling and customization directly within the Markdown source.

```markdown
---
background: "#1a1a2e"
---

# Title Slide

Creates a title slide with H1.

---

## Content Slide

Creates a content slide with H2.

- Bullet points
- **Bold** and *italic*
- `inline code`
```

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

### Basic Text Positioning with YAML

Source: https://github.com/7nohe/figdeck/blob/main/examples/absolute-position.md

This snippet defines basic text styling and absolute positioning for headings and paragraphs using YAML. It sets font sizes, colors, and x/y coordinates for elements. The background color and alignment are also configured.

```yaml
---
headings:
  h1:
    size: 96
    color: "#ffffff"
paragraphs:
  size: 24
  color: "#cccccc"
  x: 960
  y: 800
background: "#1a1a2e"
align: center
valign: middle
---

```

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

### YAML Frontmatter for Slide Configuration

Source: https://github.com/7nohe/figdeck/blob/main/CLAUDE.md

Provides an example of YAML frontmatter used for configuring presentation slides. It covers global settings and per-slide options such as background, text styles, fonts, slide numbers, transitions, and alignment.

```yaml
---
background: "#1a1a2e"           # Solid color
gradient: "#0d1117:0%,#1f2937:50%,#58a6ff:100%@45"  # Gradient with angle
template: "Style Name"          # Figma paint style name
backgroundImage: "./bg.png"     # Local image (PNG, JPEG, GIF)
backgroundImage: "https://..."  # Remote image URL
color: "#ffffff"                # Base text color for all elements
headings:
  h1: { size: 72, color: "#fff" }
  h2: { size: 56 }
paragraphs: { size: 24, color: "#ccc", x: 100, y: 400 }  # Absolute position (slide is 1920x1080)
bullets: { size: 20, x: 100, y: 600, spacing: 12 }  # spacing: gap between bullet items
fonts:                              # Custom font configuration
  h1:                               # Full font variant config
    family: "Roboto"
    style: "Medium"                 # Base style (default: "Regular")
    bold: "Bold"                    # Bold variant (default: "Bold")
    italic: "Italic"                # Italic variant (default: "Italic")
    boldItalic: "Bold Italic"       # Bold Italic variant
  h2: "Open Sans"                   # Shorthand: just family name (uses "Regular")
  body:
    family: "Source Sans Pro"
    style: "Regular"
    bold: "Semibold"                # Custom bold variant
  bullets:
    family: "Inter"
    style: "Regular"
code: { size: 14 }
slideNumber:
  show: true
  position: bottom-right        # bottom-right, bottom-left, top-right, top-left
  size: 14
  color: "#888"
  format: "{{current}} / {{total}}"
  link: "https://www.figma.com/design/xxx?node-id=789-012"  # Custom Frame design (optional)
  startFrom: 2                  # Start showing from slide 2 (default: 2, skips cover)
  # offset is auto-calculated so slide 2 displays as "1"
titlePrefix:
  link: "https://www.figma.com/design/xxx?node-id=123-456"  # Figma component link
  spacing: 16                   # Gap between prefix and title (default: 16)
titlePrefix: false              # Disable inherited prefix for this slide
align: center                   # Horizontal: left, center, right (default: left)
valign: middle                  # Vertical: top, middle, bottom (default: top)
transition: dissolve            # Shorthand: style only
transition: slide-from-right 0.5  # Shorthand: style and duration
transition:                     # Full configuration
  style: slide-from-right       # Animation style (see list below)
  duration: 0.5                 # Duration in seconds (0.01-10)
  curve: ease-out               # Easing curve
  timing:
    type: after-delay           # on-click (default) or after-delay
    delay: 3                    # Auto-advance delay in seconds (0-30)
---

```

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

### Custom Font Configuration Example (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/release-notes.md

Illustrates how to define custom font families and variants for different text elements (headings, body, bullets, code) in YAML frontmatter. Supports both shorthand and detailed configuration for font styles.

```yaml
---
fonts:
  h1:
    family: "Roboto"
    style: "Medium"        # Base style
    bold: "Bold"           # Bold variant
    italic: "Italic"       # Italic variant
    boldItalic: "Bold Italic"  # Bold Italic variant
  h2: "Open Sans"          # Shorthand notation (uses "Regular")
  body:
    family: "Source Sans Pro"
    style: "Regular"
    bold: "Semibold"       # Custom bold variant
  bullets:
    family: "Inter"
    style: "Regular"
  code:
    family: "Fira Code"
    style: "Regular"
---

```

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

### Apply Per-Slide Styles with YAML Frontmatter

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/api-reference.md

Demonstrates how to apply specific styles to individual slides using YAML frontmatter within the Markdown content. This example changes the background and text color for a single slide.

```yaml
---

background: "#0d1117"
color: "#58a6ff"
---
## This slide only has different background
```

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

### Apply Light Theme (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Sets a light background color and dark text color for a specific slide using per-slide YAML frontmatter. This demonstrates theme switching within a presentation.

```yaml
---
background: "#f0f4f8"
color: "#020202"
---
```

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

### Figdeck Plugin Manifest Configuration

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/plugin-setup.md

Defines the configuration for the Figdeck Figma plugin, including its name, ID, API version, main script, UI file, supported editor types, document access, and network access permissions. The `networkAccess.allowedDomains` setting is crucial for WebSocket connections.

```json
{
  "name": "figdeck",
  "id": "figdeck-plugin",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma", "figjam"],
  "documentAccess": "dynamic-page",
  "networkAccess": {
    "allowedDomains": ["*"]
  }
}
```

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

### Markdown Syntax for Blockquotes

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/templates/init.md

This markdown example illustrates how to create blockquotes. Blockquotes are used to quote text from another source and are typically indented. They are created by prefixing lines with a greater-than symbol (`>`). Blockquotes can span multiple lines.

```markdown
> Blockquotes start with `>`. 
> They can span multiple lines.

Regular text follows the quote.
```

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

### Start WebSocket Server for Figma Plugin (TypeScript)

Source: https://context7.com/7nohe/figdeck/llms.txt

Creates and manages a WebSocket server to communicate with the Figma plugin, enabling live updates. It accepts slide content, configuration options, and provides methods for broadcasting updates and graceful shutdown. Requires `@figdeck/cli` and `@figdeck/shared`.

```typescript
import { startServer } from '@figdeck/cli';
import { SlideContent } from '@figdeck/shared';

const slides: SlideContent[] = [
  {
    blocks: [
      { kind: "heading", level: 1, text: "Title", spans: [{ text: "Title" }] }
    ]
  }
];

const server = await startServer(slides, {
  host: '127.0.0.1',
  port: 4141,
  secret: 'my-secret',
  cliVersion: '1.0.0'
});

// Broadcast updated slides to all connected clients
server.broadcast(updatedSlides);

// Graceful shutdown
server.close();
```

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

### Figma Link Rich Text Formatting Example (Markdown)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/release-notes.md

Demonstrates how to apply rich text formatting within Figma link text overrides using markdown syntax. Supports bold, italic, strikethrough, links, bullet lists, and blockquotes.

```markdown
:::figma
link=https://www.figma.com/design/xxx?node-id=1234-5678
text.title=Cart Feature
text.body=Use this for **cart** and *confirmation* flows.
text.list=
  - Variation A
  - Variation B
:::

```

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

### YAML Frontmatter: Per-Slide Styles

Source: https://context7.com/7nohe/figdeck/llms.txt

Overrides global styles for individual slides using YAML frontmatter. This example shows how to apply a different background, gradient, text color, and alignment to a specific slide.

```yaml
---

---
background: "#0d1117"
gradient: "#0d1117:0%,#1f2937:50%,#58a6ff:100%@45"
color: "#58a6ff"
headings:
  h2:
    size: 64
align: center
valign: middle
---

## Special Slide

This slide has unique styling that overrides the global defaults.
```

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

### Markdown Syntax for Tables

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/templates/init.md

This markdown example demonstrates creating tables with defined columns and rows. It includes syntax for column alignment (left, center, right) using colons within the separator line. The table supports basic formatting within cells like bold, italic, and code.

```markdown
| Feature | Status | Notes |
|:--------|:------:|------:|
| Bold | Y | **Supported** |
| Italic | Y | *Supported* |
| Code | Y | `Supported` |
| Links | Y | Clickable |

Column alignment: left `:---`, center `:---:`, right `---:`
```

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

### Multiple Element Positioning with YAML

Source: https://github.com/7nohe/figdeck/blob/main/examples/absolute-position.md

This YAML configuration demonstrates positioning different text elements (headings, paragraphs, bullets) at distinct x/y coordinates. It allows for complex layouts by specifying individual positions for each element type within the slide.

```yaml
---
headings:
  h2:
    size: 48
paragraphs:
  x: 1400
  y: 300
bullets:
  x: 100
  y: 500
---

```

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

### Nested Bullet List Markdown Example

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/release-notes.md

Demonstrates the syntax for creating multi-level nested bullet lists in Markdown, as supported by Figdeck. This format utilizes indentation and specific markers to represent list hierarchy, supporting up to 4 levels with inline formatting.

```markdown
- Level 0 item
  - Level 1 item (indented with 2 spaces)
  - Another level 1 item
    - Level 2 item
    - Another level 2 item
      - Level 3 item
- Back to level 0
```

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

### Markdown Syntax for Text Formatting

Source: https://github.com/7nohe/figdeck/blob/main/packages/cli/templates/init.md

This markdown example illustrates various inline text formatting options. It covers bolding text using double asterisks, italicizing with single asterisks, strikethrough with double tildes, inline code using backticks, and creating hyperlinks with square brackets for text and parentheses for the URL. Combinations of these styles are also shown.

```markdown
- **Bold** with `**text**`
- *Italic* with `*text*`
- ~~Strikethrough~~ with `~~text~~`
- `Inline code` with `code`
- [Links](https://figma.com) with `[text](url)`

Combine them: **bold with `code`** or *italic [link](https://example.com)*
```

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

### Configure Slide Numbers in YAML

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/api-reference.md

Demonstrates how to configure slide number display using YAML frontmatter. Examples include showing from the first slide, hiding on individual slides, and starting from the third slide.

```yaml
slideNumber:
  show: true
  startFrom: 1
```

```yaml
---
slideNumber: false  # Hide on this slide
---
# Section Break
```

```yaml
slideNumber:
  show: true
  startFrom: 3  # Third slide displays as "1"
```

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

### YAML Frontmatter: Slide Numbers Configuration

Source: https://context7.com/7nohe/figdeck/llms.txt

Configures slide numbering using YAML frontmatter, allowing customization of visibility, position, size, color, format, and starting number. Also demonstrates how to hide slide numbers on specific slides or reset the start number.

```yaml
---
slideNumber:
  show: true
  position: bottom-right
  size: 14
  color: "#888888"
  format: "{{current}} / {{total}}"
  startFrom: 2
  paddingX: 20
  paddingY: 20
  link: "https://www.figma.com/design/xxx?node-id=123-456"
---

---
# Hide slide number on this slide
slideNumber: false
---

---
# Show from first slide (default: start from slide 2)
slideNumber:
  show: true
  startFrom: 1
---
```

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

### Build figdeck Packages

Source: https://github.com/7nohe/figdeck/blob/main/CONTRIBUTING.md

This command builds all packages within the figdeck project. It's a crucial step after installing dependencies to ensure all components are compiled and ready for use or further development.

```bash
bun run build
```

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

### Syntax Highlighting for Code Blocks (Markdown)

Source: https://github.com/7nohe/figdeck/blob/main/docs/en/markdown-spec.md

Enclose code within triple backticks (```) and optionally specify the programming language for syntax highlighting. This is useful for displaying code examples within presentations.

```markdown
` ```typescript
const message: string = "Hello, World!";
console.log(message);
` ```

```

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

### Initialize figdeck Markdown Template (CLI)

Source: https://context7.com/7nohe/figdeck/llms.txt

Creates a template Markdown file for figdeck, allowing for custom filenames and forceful overwriting of existing files. This is the first step in creating a new presentation.

```bash
# Create default slides.md template
figdeck init

# Create with custom filename
figdeck init -o presentation.md

# Overwrite existing file
figdeck init --force
```

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

### Running Figdeck CLI Commands

Source: https://github.com/7nohe/figdeck/blob/main/CLAUDE.md

Instructions for executing the Figdeck CLI to initialize slides, serve Markdown content via WebSocket, or build JSON output. Covers options for custom filenames, overwriting, host/port configuration, disabling watch mode, remote access, and authentication.

```bash
# Initialize a new slides.md template with all syntax examples
bun run packages/cli/dist/index.js init
bun run packages/cli/dist/index.js init -o my-slides.md  # custom filename
bun run packages/cli/dist/index.js init --force          # overwrite existing

# WebSocket mode: Start CLI server (waits for Plugin connection on port 4141)
# Watch mode is enabled by default - auto-reloads on file changes
bun run packages/cli/dist/index.js serve examples/sample.md

# WebSocket options (default host is 127.0.0.1 for security)
bun run packages/cli/dist/index.js serve slides.md --host 127.0.0.1 --port 4141

# Disable watch mode
bun run packages/cli/dist/index.js serve slides.md --no-watch

# Remote access (requires explicit flag for non-loopback hosts)
bun run packages/cli/dist/index.js serve slides.md --host 0.0.0.0 --allow-remote

# Authentication (auto-generated secret shown in CLI output for remote connections)
bun run packages/cli/dist/index.js serve slides.md --secret my-secret

# JSON output mode: Parse Markdown and output JSON (no server)
bun run packages/cli/dist/index.js build examples/sample.md              # stdout
bun run packages/cli/dist/index.js build examples/sample.md -o out.json  # file
```

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

### WebSocket Protocol - Hello Handshake

Source: https://context7.com/7nohe/figdeck/llms.txt

Establishes version compatibility between the CLI and the Plugin upon connection using a 'hello' message.

```APIDOC
## WebSocket Protocol: Hello Handshake

### Description
Initiates a connection handshake to check protocol and version compatibility between the CLI and the Plugin.

### Method
WebSocket

### Endpoint
N/A (Connection initiated upon WebSocket connection)

### Parameters
#### Outgoing (CLI to Plugin)
- **type** (string) - Required - Must be "hello".
- **protocolVersion** (string) - Required - The protocol version the CLI supports.
- **cliVersion** (string) - Required - The version of the CLI.

#### Incoming (Plugin to CLI)
- **type** (string) - Required - Must be "hello".
- **protocolVersion** (string) - Required - The protocol version the Plugin supports.
- **pluginVersion** (string) - Required - The version of the Plugin.

### Request Example (CLI -> Plugin)
```json
{
  "type": "hello",
  "protocolVersion": "1",
  "cliVersion": "1.0.0"
}
```

### Response Example (Plugin -> CLI)
```json
{
  "type": "hello",
  "protocolVersion": "1",
  "pluginVersion": "1.0.0"
}
```

### Compatibility Check:
- Protocol mismatch results in a WARNING.
- Version difference results in an INFO message.
- A successful match indicates compatibility.
```

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

### Set Remote Background Image (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Uses a remote image URL specified in per-slide YAML frontmatter as the slide background. The Figma plugin fetches and applies this image.

```yaml
---
backgroundImage: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&h=1080&fit=crop"
color: "#ffffff"
---
```

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

### Establish WebSocket Connection and Handle Messages (JavaScript)

Source: https://github.com/7nohe/figdeck/blob/main/packages/plugin/src/ui.html

Establishes a WebSocket connection to a specified host and port. It handles connection events (open, message, close, error), authentication, and processing of 'hello', 'auth-ok', 'auth-error', and 'generate-slides' messages. It also includes logic for reconnection and displays connection status. Dependencies include global variables like `currentHost`, `currentPort`, `currentSecret`, `authenticated`, `autoConnect`, `activeTab`, `log`, `startHelloTimeout`, `handleHelloMessage`, `validateSlides`, `setStatus`, `clearHelloTimeout`, `dismissVersionWarning`, and `setImportStatus`.

```javascript
tPort); try { ws = new WebSocket('ws://' + currentHost + ':' + currentPort); ws.onopen = function() { log('Connected to CLI'); // Start timeout to detect old CLI that doesn't send hello startHelloTimeout(); // Send auth message if secret is provided if (currentSecret) { log('Sending authentication...'); setStatus('Authenticating...', 'waiting'); ws.send(JSON.stringify({ type: 'auth', secret: currentSecret })); } else { // No secret - server may or may not require auth // Try to auth anyway (server will respond with auth-ok even without secret if no auth required) ws.send(JSON.stringify({ type: 'auth', secret: '' })); setStatus('Connected to ws://' + currentHost + ':' + currentPort + ' - Waiting for slides...', 'connected'); authenticated = true; } }; ws.onmessage = function(event) { try { var msg = JSON.JSON.parse(event.data); log('Received: ' + msg.type); // Handle hello message from CLI (version check) if (msg.type === 'hello' && msg.cliVersion) { handleHelloMessage(msg); return; } // Handle auth responses if (msg.type === 'auth-ok') { authenticated = true; setStatus('Connected to ws://' + currentHost + ':' + currentPort + ' - Waiting for slides...', 'connected'); log('Authentication successful'); return; } if (msg.type === 'auth-error') { authenticated = false; setStatus('Authentication failed: ' + (msg.message || 'Invalid secret'), 'error'); log('Authentication failed: ' + (msg.message || 'Invalid secret')); return; } // Only process slides if authenticated if (msg.type === 'generate-slides') { if (!Array.isArray(msg.slides)) { log('Invalid message: slides is not an array'); return; } // Validate incoming slides var validation = validateSlides(msg.slides); if (!validation.valid) { log('Rejected payload: ' + validation.error); return; } log('Generating ' + msg.slides.length + ' slides...'); parent.postMessage({ pluginMessage: msg }, '*'); } } catch (e) { log('Error parsing message: ' + e); } }; ws.onclose = function(event) { authenticated = false; clearHelloTimeout(); dismissVersionWarning(); if (event.code === 4001) { setStatus('Authentication timeout', 'error'); log('Authentication timeout - provide the secret from CLI'); return; } if (event.code === 4002) { setStatus('Invalid secret', 'error'); log('Invalid secret - check the secret displayed in CLI'); return; } if (autoConnect && activeTab === 'websocket') { setStatus('Disconnected - Reconnecting to ws://' + currentHost + ':' + currentPort + '...', 'disconnected'); log('Disconnected, retrying in 3s...'); setTimeout(function() { connect(currentHost, currentPort, currentSecret); }, 3000); } else { setStatus('Disconnected', 'disconnected'); } }; ws.onerror = function() { log('WebSocket error'); }; } catch (e) { log('Connection failed: ' + e); if (autoConnect && activeTab === 'websocket') { setTimeout(function() { connect(currentHost, currentPort, currentSecret); }, 3000); } } }
```

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

### Build figdeck Plugin

Source: https://github.com/7nohe/figdeck/blob/main/CONTRIBUTING.md

This command is used to build the figdeck plugin. It compiles the plugin code, preparing it for testing or deployment.

```bash
cd packages/plugin && bun run build
```

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

### Develop figdeck CLI in Watch Mode

Source: https://github.com/7nohe/figdeck/blob/main/CONTRIBUTING.md

This command starts the CLI development process in watch mode for the figdeck project. Changes made to the CLI code will automatically trigger a rebuild, facilitating rapid development.

```bash
cd packages/cli && bun run dev
```

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

### Configure Slide Transitions with YAML

Source: https://context7.com/7nohe/figdeck/llms.txt

Defines how to set slide transition animations and their timing using YAML frontmatter. Supports shorthand, style and duration, and full configuration with style, duration, curve, and timing options.

```yaml
---
# Shorthand: style only
transition: dissolve
---

---
# Style and duration
transition: slide-from-right 0.5
---

---
# Full configuration
transition:
  style: slide-from-left
  duration: 0.8
  curve: ease-out
  timing:
    type: after-delay
    delay: 3
---

# Available styles:
# - none, dissolve, smart-animate
# - slide-from-* (left, right, top, bottom)
# - push-from-* (left, right, top, bottom)
# - move-from-* (left, right, top, bottom)
# - slide-out-to-* (left, right, top, bottom)
# - move-out-to-* (left, right, top, bottom)

# Available curves:
# - ease-in, ease-out, ease-in-and-out
# - linear, gentle, quick, bouncy, slow

```

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

### Set Local Background Image (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Applies a local image file as the slide background by providing its path in per-slide YAML frontmatter. The CLI tool reads and embeds the image as base64.

```yaml
---
backgroundImage: "./local-bg.png"
color: "#ffffff"
---
```

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

### Slide Transitions Configuration

Source: https://context7.com/7nohe/figdeck/llms.txt

Configure slide transition animations, including style, duration, timing, and curves for dynamic presentation effects.

```APIDOC
## Slide Transitions

### Description
Configure slide transition animations with timing control. Supports various styles, durations, curves, and timing options like 'after-delay'.

### Method
Not Applicable (Configuration within Markdown Frontmatter)

### Endpoint
Not Applicable

### Parameters
#### YAML Frontmatter
- **transition** (string or object) - Required - Defines the slide transition.
  - **style** (string) - Optional - The transition animation style (e.g., 'dissolve', 'slide-from-right').
  - **duration** (number) - Optional - The duration of the transition in seconds.
  - **curve** (string) - Optional - The timing function for the transition (e.g., 'ease-out', 'linear').
  - **timing** (object) - Optional - Defines timing options for the transition.
    - **type** (string) - Optional - The type of timing (e.g., 'after-delay').
    - **delay** (number) - Optional - The delay in seconds before the transition starts.

### Request Example
```yaml
---
transition: dissolve
---

---
transition: slide-from-right 0.5
---

---
transition:
  style: slide-from-left
  duration: 0.8
  curve: ease-out
  timing:
    type: after-delay
    delay: 3
---
```

### Response
Not Applicable (Configuration applies to presentation rendering)

### Available Styles:
- `none`, `dissolve`, `smart-animate`
- `slide-from-*` (left, right, top, bottom)
- `push-from-*` (left, right, top, bottom)
- `move-from-*` (left, right, top, bottom)
- `slide-out-to-*` (left, right, top, bottom)
- `move-out-to-*` (left, right, top, bottom)

### Available Curves:
- `ease-in`, `ease-out`, `ease-in-and-out`
- `linear`, `gentle`, `quick`, `bouncy`, `slow`
```

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

### Apply Gradient Background (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Applies a gradient background to a slide by specifying colors and their positions using per-slide YAML frontmatter. Gradients override solid background colors and global defaults.

```yaml
---
gradient: "#0d1117:0%,#1f2937:50%,#3b82f6:100%@45"
---
```

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

### Override Slide Background Color (YAML)

Source: https://github.com/7nohe/figdeck/blob/main/examples/backgrounds.md

Overrides the default slide background color using per-slide YAML frontmatter. This allows for individual slide customization, taking precedence over global settings.

```yaml
---
background: "#16213e"
---
```