### Complete Page Setup Example

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-docx/references/openxml_encyclopedia_part2.md

Sets up an A4 portrait page with moderate margins and a two-column layout including a separator. This must be the last child of the Body.

```csharp
// =============================================================================
// COMPLETE PAGE SETUP — PUTTING IT ALL TOGETHER
// =============================================================================
// A4 portrait, moderate margins, 2-column layout with separator

using var doc = WordprocessingDocument.Create(
    "PageSetupDemo.docx", WordprocessingDocumentType.Document);

var mainPart = doc.MainDocumentPart!;
var body = mainPart.Document.Body!;

// Add content paragraphs ...
body.AppendChild(new Paragraph(
    new Run(new Text("This is a two-column document on A4 paper."))));

// Section properties — MUST be last child of Body
var sectPr = new SectionProperties();

// Page size: A4 portrait
sectPr.AppendChild(new PageSize
{
    Width = 11906U,
    Height = 16838U
});

// Margins: moderate
sectPr.AppendChild(new PageMargin
{
    Top = 1440, Bottom = 1440,
    Left = 1080U, Right = 1080U,
    Header = 720U, Footer = 720U, Gutter = 0U
});

// 2-column with separator
sectPr.AppendChild(new Columns
{
    EqualWidth = true,
    ColumnCount = 2,
    Space = "720",
    Separator = true
});

// Line grid for CJK
sectPr.AppendChild(new DocGrid
{
    Type = DocGridValues.Lines,
    LinePitch = 312
});

body.AppendChild(sectPr);
mainPart.Document.Save();

```

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

### Basic Presentation Setup with PptxGenJS

Source: https://github.com/minimax-ai/skills/blob/main/plugins/pptx-plugin/skills/slide-making-skill/pptxgenjs.md

Initializes a new presentation, sets layout and metadata, adds a simple text slide, and saves the presentation to a file. Ensure 'pptxgenjs' is installed.

```javascript
const pptxgen = require("pptxgenjs");

let pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';  // or 'LAYOUT_16x10', 'LAYOUT_4x3', 'LAYOUT_WIDE'
pres.author = 'Your Name';
pres.title = 'Presentation Title';

let slide = pres.addSlide();
slide.addText("Hello World!", { x: 0.5, y: 0.5, fontSize: 36, color: "363636" });

pres.writeFile({ fileName: "Presentation.pptx" });
```

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

### Install Dependencies

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-pdf/README.md

Run these commands to verify and install necessary dependencies for the minimax-pdf skill.

```bash
bash scripts/make.sh check   # verify deps
bash scripts/make.sh fix     # auto-install missing deps
bash scripts/make.sh demo    # → demo.pdf
```

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

### Install Python Dependencies

Source: https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/references/env-setup.md

Install the 'requests' library using pip. FFmpeg is optional but recommended for audio post-processing; installation instructions for macOS and Ubuntu are provided.

```bash
pip install requests
```

```bash
# FFmpeg (optional, for audio post-processing)
# macOS:
brew install ffmpeg
# Ubuntu:
sudo apt install ffmpeg
```

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

### Install MMX CLI

Source: https://github.com/minimax-ai/skills/blob/main/skills/buddy-sings/SKILL.md

Provides instructions for installing and authenticating the MMX CLI, necessary for certain functionalities.

```bash
npm install -g mmx-cli && mmx auth login
```

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

### Install Frontend Animation Libraries

Source: https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/SKILL.md

Installs necessary libraries for UI animation, scrolling, icons, and 3D rendering. Lazy-load GSAP, Lottie, and Three.js for performance.

```bash
npm install framer-motion           # UI (keep at top level)
npm install gsap                    # Scroll (lazy-load)
npm install lottie-react            # Icons (lazy-load)
npm install three @react-three/fiber @react-three/drei  # 3D (lazy-load)
```

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

### Install MMX CLI

Source: https://github.com/minimax-ai/skills/blob/main/skills/buddy-sings/SKILL.md

Install the MiniMax CLI tool, which is required for music generation. This command should be run globally.

```bash
npm install -g mmx-cli
```

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

### Diverse Prompt Examples

Source: https://github.com/minimax-ai/skills/blob/main/skills/buddy-sings/SKILL.md

These examples demonstrate how to apply the prompt structure to different themes and moods, providing concrete illustrations for generating varied songs.

```text
# Encouragement for the workday
A deep warm androgynous voice with cozy delivery. An energetic synth-pop track
with a fiery, uplifting mood, driven by pulsing synthesizers and electronic drums
at a fast tempo, capturing the rush of a morning commute.
```

```text
# Waiting for the owner to come home
A deep warm androgynous voice with cozy delivery. A warm city pop song with sweet,
tender feelings, featuring electric piano and groovy bass at a mid-tempo pace,
set on a sunny afternoon windowsill waiting for someone to come home.
```

```text
# Complaining about overtime
A deep warm androgynous voice with cozy delivery. A playful funk track with a
humorous, laid-back vibe, featuring slap bass and brass at a groovy mid-tempo,
capturing the absurdity of working late in a dim office.
```

```text
# Late-night companionship
A deep warm androgynous voice with cozy delivery. A calm lo-fi hip-hop piece with
a healing, dreamy atmosphere, featuring sampled piano and soft electronic drums
at a slow tempo, evoking a quiet late-night desk with warm lamp light.
```

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

### Per-Section Page Setup in OpenXML

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-docx/references/openxml_encyclopedia_part2.md

Shows how to configure independent page setup properties for individual sections, such as page size, orientation, and margins.

```csharp
// =============================================================================
// PER-SECTION PAGE SETUP
// =============================================================================
// Each section independently controls its own:
//   - PageSize (portrait vs landscape, paper size)
//   - PageMargin
//   - Columns
//   - Headers/Footers
//   - PageNumberType (restart numbering)
//   - LineNumbering
//   - DocGrid

// Example: Section with landscape A4 and narrow margins
var landscapeSection = new SectionProperties(
    new PageSize
    {
        Width = 16838U,    // A4 long edge (landscape: swap W/H)
        Height = 11906U,   // A4 short edge
        Orient = PageOrientationValues.Landscape
    },
    new PageMargin
    {
        Top = 720, Bottom = 720,
        Left = 720U, Right = 720U,
        Header = 720U, Footer = 720U, Gutter = 0U
    },
    new SectionType { Val = SectionMarkValues.NextPage }
);
```

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

### Install MiniMax Skills with Codex

Source: https://github.com/minimax-ai/skills/blob/main/README.md

Clone the repository and create a symbolic link for Codex to discover the skills. Restart Codex after installation.

```bash
git clone https://github.com/MiniMax-AI/skills.git ~/.codex/minimax-skills

mkdir -p ~/.agents/skills
ln -s ~/.codex/minimax-skills/skills ~/.agents/skills/minimax-skills
```

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

### Prompt Building: Production Elements Examples

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-gen/references/prompt_guide.md

Examples of phrases specifying instruments and production techniques to include in a prompt.

```text
"mellow beats with lo-fi elements"
```

```text
"featuring a warm fretless bassline, shimmering Rhodes piano, and brushed jazz drums"
```

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

### Install Dependencies

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/forms.md

Install the necessary packages for React Hook Form, Zod, and their resolvers.

```bash
npx expo install react-hook-form zod @hookform/resolvers
```

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

### Prompt Building: Mood and Genre Examples

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-gen/references/prompt_guide.md

Examples demonstrating how to combine mood, BPM, genre, and regional/era descriptors in the initial part of a prompt.

```text
"A melancholic R&B song"
```

```text
"A melancholic yet defiant Pop-House song"
```

```text
"A smoky 74 BPM Neo-Soul fusion"
```

```text
"A laid-back 90 BPM Island Reggae"
```

```text
"An Avant-Garde Jazz and Neo-Soul fusion"
```

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

### Install PPTXGenJS for Presentation Creation

Source: https://github.com/minimax-ai/skills/blob/main/plugins/pptx-plugin/skills/ppt-orchestra-skill/SKILL.md

Install the Node.js package for creating PowerPoint presentations from scratch. This is required for generating presentations programmatically.

```bash
npm install -g pptxgenjs
```

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

### Install and Authenticate MMX CLI

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-playlist/SKILL.md

Install the MMX CLI tool globally using npm and authenticate with your API key.

```bash
npm install -g mmx-cli
mmx auth login --api-key <key>
```

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

### Install ReportLab for PDF Rendering

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-pdf/README.md

Command to install the ReportLab library, used for rendering body pages of the PDF documents.

```bash
pip install reportlab
```

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

### Environment Variable Examples (.env.local)

Source: https://github.com/minimax-ai/skills/blob/main/skills/fullstack-dev/references/environment-management.md

Examples of environment variable configurations for local development, staging, and production. Local development uses a `.env.local` file which should be gitignored.

```dotenv
# .env.local (gitignored, for local dev)
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_WS_URL=ws://localhost:3001

# Staging (set in Vercel/CI)
NEXT_PUBLIC_API_URL=https://api-staging.example.com

# Production (set in Vercel/CI)
NEXT_PUBLIC_API_URL=https://api.example.com
```

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

### Basic GET and POST API Route Handlers

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/networking.md

Example of defining GET and POST request handlers for an API route in Expo Router, including JSON parsing and database interaction.

```typescript
// app/api/projects+api.ts
export async function GET(req: Request) {
  const url = new URL(req.url);
  const cursor = url.searchParams.get("cursor");
  const rows = await db.query("SELECT * FROM projects WHERE id > ? LIMIT 20", [cursor ?? 0]);
  return Response.json(rows);
}

export async function POST(req: Request) {
  const { name, description } = await req.json();
  const [row] = await db.insert(projectsTable).values({ name, description }).returning();
  return Response.json(row, { status: 201 });
}
```

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

### React/Next.js scroll-reveal component

Source: https://context7.com/minimax-ai/skills/llms.txt

Example of a scroll-reveal component generated by the frontend-dev skill. Ensure Framer Motion is installed.

```tsx
"use client";
import { motion } from "framer-motion";

export function RevealSection({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
    >
      {children}
    </motion.div>
  );
}
```

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

### Main Entry Point Setup

Source: https://github.com/minimax-ai/skills/blob/main/skills/flutter-dev/references/project-structure.md

Configures the application's entry point, initializing Flutter services and essential packages like Hive before running the main app widget.

```dart
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize services
  await Hive.initFlutter();
  
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

```

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

### Connecting to Development Client

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/engineering.md

Command to start the Expo development server with the `--dev-client` flag, used after installing a custom development build on a device or simulator.

```bash
npx expo start --dev-client
```

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

### Install MiniMax Skills with OpenCode

Source: https://github.com/minimax-ai/skills/blob/main/README.md

Clone the repository and link the skills to the OpenCode configuration directory. Restart OpenCode to recognize the skills.

```bash
git clone https://github.com/MiniMax-AI/skills.git ~/.minimax-skills

mkdir -p ~/.config/opencode/skills
ln -s ~/.minimax-skills/skills/* ~/.config/opencode/skills/
```

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

### IdlingResource for Asynchronous Operations

Source: https://github.com/minimax-ai/skills/blob/main/skills/android-native-dev/references/testing.md

Provides a mechanism to inform Espresso when asynchronous operations are complete. This example shows a simple `CountingIdlingResource` wrapper and its registration/unregistration in test setup.

```kotlin
import androidx.test.espresso.IdlingRegistry
import androidx.test.espresso.IdlingResource
import androidx.test.espresso.base.IdlingResourceRegistry
import androidx.test.espresso.idling.CountingIdlingResource
import org.junit.Before
import org.junit.After

// In production code (thin wrapper)
object NetworkIdlingResource {
    private val counter = CountingIdlingResource("Network")
    fun increment() = counter.increment()
    fun decrement() = counter.decrement()
    fun get(): IdlingResource = counter
}

// In test setup
@Before
fun registerIdling() {
    IdlingRegistry.getInstance().register(NetworkIdlingResource.get())
}

@After
fun unregisterIdling() {
    IdlingRegistry.getInstance().unregister(NetworkIdlingResource.get())
}
```

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

### Environment Variables Configuration

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/engineering.md

Example of environment variable setup for different environments (.env, .env.development, .env.production). These are used to configure application settings like API URLs.

```bash
# .env (committed, non-sensitive defaults)
EXPO_PUBLIC_APP_NAME=MyApp
EXPO_PUBLIC_API_VERSION=v1

# .env.development (local only, gitignored)
EXPO_PUBLIC_API_URL=http://localhost:3000

# .env.production (CI/CD only, gitignored)
EXPO_PUBLIC_API_URL=https://api.production.example.com
```

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

### GoRouter Basic Setup with Redirects

Source: https://github.com/minimax-ai/skills/blob/main/skills/flutter-dev/references/gorouter-navigation.md

Configure GoRouter with initial location, debug logging, and a redirect function for authentication flows. Define routes for home and details screens, including dynamic path parameters.

```dart
import 'package:go_router/go_router.dart';

final goRouter = GoRouter(
  initialLocation: '/',
  debugLogDiagnostics: true,
  redirect: (context, state) {
    final isLoggedIn = /* check auth state */;
    final isAuthRoute = state.matchedLocation.startsWith('/auth');
    
    if (!isLoggedIn && !isAuthRoute) {
      return '/auth/login';
    }
    if (isLoggedIn && isAuthRoute) {
      return '/';
    }
    return null;
  },
  routes: [
    GoRoute(
      path: '/',
      name: 'home',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'details/:id',
          name: 'details',
          builder: (context, state) {
            final id = state.pathParameters['id']!;
            final extra = state.extra as Map<String, dynamic>?;
            return DetailsScreen(id: id, title: extra?['title']);
          },
        ),
      ],
    ),
    GoRoute(
      path: '/auth/login',
      name: 'login',
      builder: (context, state) => const LoginScreen(),
    ),
  ],
);
```

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

### Basic Mode Preview Template

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-gen/SKILL.md

This is an example template for showing the user a preview before generation. All labels and the description should be localized at runtime.

```text
About to generate:
Type: Vocal / Instrumental
Description: indie folk, melancholy, acoustic guitar, gentle female voice
Lyrics: Auto-generated (--lyrics-optimizer)

Confirm? (press enter to confirm, or tell me what to change)
```

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

### Define Custom Property Wrapper in Swift

Source: https://github.com/minimax-ai/skills/blob/main/skills/ios-application-dev/references/swift-coding-standards.md

Example of creating a custom property wrapper `Clamped` that restricts a value to a specified range. It includes `get` and `set` accessors for the `wrappedValue`.

```swift
@propertyWrapper
struct Clamped<Value: Comparable> {
    private var value: Value
    let range: ClosedRange<Value>
    
    var wrappedValue: Value {
        get { value }
        set { value = min(max(newValue, range.lowerBound), range.upperBound) }
    }
    
    init(wrappedValue: Value, _ range: ClosedRange<Value>) {
        self.range = range
        self.value = min(max(wrappedValue, range.lowerBound), range.upperBound)
    }
}

struct Settings {
    @Clamped(0...100) var volume: Int = 50
}
```

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

### Complete DocDefaults Setup in C#

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-docx/references/openxml_encyclopedia_part1.md

Sets up document-wide default styles for runs and paragraphs, including font, size, language, and spacing. Ensure all necessary script fonts are specified for fallback.

```csharp
// =============================================================================
// DOCDEFAULTS: DOCUMENT-WIDE DEFAULTS
// =============================================================================
// DocDefaults lives inside Styles and provides fallback values when:
// 1. No explicit style is applied
// 2. No direct formatting is applied
// It contains RunPropertiesDefault and/or ParagraphPropertiesDefault.
//
// CRITICAL: DocDefaults applies to the entire document. Any explicit style
// or direct formatting will override it.

// --- COMPLETE DOCDEFAULTS SETUP ---
var docDefaults = new DocDefaults(
    // Run properties defaults: default font, size, language for all runs
    new RunPropertiesDefault(
        new RunPropertiesBaseStyle(
            // RunFonts: which font to use for each script
            // Word will fall back through these: ASCII -> HighAnsi -> EastAsia -> ComplexScript
            // Always specify at minimum Ascii and HighAnsi
            new RunFonts
            {
                Ascii = "Calibri",           // Western/Latin font (primary)
                HighAnsi = "Calibri",        // Latin characters (often same as Ascii)
                EastAsia = "SimSun",         // East Asian font (CJK)
                ComplexScript = "Arial",     // Complex scripts (Arabic, Hebrew, Thai)
                ASCIITheme = ThemeFontValues.Minor,
                HighAnsiTheme = ThemeFontValues.Minor,
                EastAsiaTheme = ThemeFontValues.Minor,
                ComplexScriptTheme = ThemeFontValues.Minor
            },
            // FontSize: in HALF-POINTS (24 = 12pt, 22 = 11pt, 20 = 10pt)
            new FontSize { Val = "22" },         // 11pt for body
            new FontSizeComplexScript { Val = "22" },
            // Languages: required for proper hyphenation and spell checking
            new Languages { Val = "en-US" },     // Default language
            new Languages { EastAsia = "zh-CN", Val = "en-US" }  // Can set multiple
        )
    ),
    // Paragraph properties defaults: default spacing, etc.
    new ParagraphPropertiesDefault(
        new ParagraphPropertiesBaseStyle(
            // SpacingBetweenLines: default paragraph spacing
            // After = "200" = 200 DXA = 10pt after each paragraph
            new SpacingBetweenLines
            {
                After = "200",
                Line = "276",
                LineRule = LineSpacingRuleValues.Auto  // Auto = 1.15x line height
            }
        )
    )
);
```

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

### Achieve Bilateral Symmetry with opSymX

Source: https://github.com/minimax-ai/skills/blob/main/skills/shader-dev/reference/sdf-3d.md

Mirrors across the X axis using `abs(p.x)`. Model only one half of the shape to get bilateral symmetry. Place this at the start of your `map()` function.

```glsl
vec2 map(vec3 p) {
    p = opSymX(p); // Mirror: only model x >= 0 side
    float d = sdSphere(p - vec3(1.0, 0.5, 0.0), 0.3);
    // Automatically appears at both x=+1 and x=-1
    return vec2(d, 1.0);
}
```

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

### Visual Flow Example (Good Hierarchy)

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-docx/references/design_principles.md

Illustrates a good visual flow for document elements, showing how Title, Subtitle, H1, Body, and Caption should be visually distinct to guide the reader's eye.

```text
  Visual flow (good):

  +----------------------------------+
  |                                  |
  |     ANNUAL REPORT 2025           |  <- Title: 26pt bold navy centered
  |     Acme Corporation             |  <- Subtitle: 15pt regular blue
  |                                  |
  |                                  |
  +----------------------------------+

  +----------------------------------+
  |                                  |
  |  1. Executive Summary            |  <- H1: 20pt bold navy (page break)
  |                                  |
  |  Body text introducing the       |  <- Body: 11pt regular gray
  |  main findings of the year.      |
  |                                  |
  |  1.1 Revenue Highlights          |  <- H2: 16pt bold navy
  |                                  |
  |  Revenue grew by 23% year        |  <- Body
  |  over year, driven by...         |
  |                                  |
  |  Figure 1: Revenue Growth        |  <- Caption: 9pt italic gray
  |                                  |
  +----------------------------------+

  Each level is immediately identifiable. The eye flows naturally
  from title -> heading -> body -> caption.
```

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

### Install MiniMax Skills with Cursor

Source: https://github.com/minimax-ai/skills/blob/main/README.md

Clone the repository to the specified directory for Cursor integration. Ensure your Cursor settings point to the correct skills path.

```bash
git clone https://github.com/MiniMax-AI/skills.git ~/.cursor/minimax-skills
```

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

### Complete ShaderToy Template with Matrix Transforms and Camera

Source: https://github.com/minimax-ai/skills/blob/main/skills/shader-dev/techniques/matrix-transform.md

This comprehensive ShaderToy example showcases matrix transformations for object rotation and scaling, a LookAt camera setup, and interactive mouse controls. It defines SDF primitives and combines them to create a dynamic scene with animated objects.

```glsl
// === Matrix Transforms & Camera - Complete Template ===

#define PI 3.14159265
#define MAX_STEPS 128
#define MAX_DIST 50.0
#define SURF_DIST 0.001
#define FOCAL_LENGTH 2.0
#define CAM_DIST 6.0
#define AUTO_SPEED 0.4

// ---------- Rotation Matrix Utilities ----------

mat2 rot2D(float a) {
    float c = cos(a), s = sin(a);
    return mat2(c, s, -s, c);
}

mat3 rotX(float a) {
    float s = sin(a), c = cos(a);
    return mat3(1,0,0, 0,c,s, 0,-s,c);
}

mat3 rotY(float a) {
    float s = sin(a), c = cos(a);
    return mat3(c,0,s, 0,1,0, -s,0,c);
}

mat3 rotZ(float a) {
    float s = sin(a), c = cos(a);
    return mat3(c,s,0, -s,c,0, 0,0,1);
}

mat3 rotAxis(vec3 axis, float angle) {
    axis = normalize(axis);
    float s = sin(angle), c = cos(angle), oc = 1.0 - c;
    return mat3(
        oc*axis.x*axis.x+c,         oc*axis.x*axis.y-axis.z*s, oc*axis.z*axis.x+axis.y*s,
        oc*axis.x*axis.y+axis.z*s,  oc*axis.y*axis.y+c,        oc*axis.y*axis.z-axis.x*s,
        oc*axis.z*axis.x-axis.y*s,  oc*axis.y*axis.z+axis.x*s, oc*axis.z*axis.z+c
    );
}

// ---------- LookAt Camera ----------

mat3 setCamera(vec3 ro, vec3 ta, float cr) {
    vec3 cw = normalize(ta - ro);
    vec3 cp = vec3(sin(cr), cos(cr), 0.0);
    vec3 cu = normalize(cross(cw, cp));
    vec3 cv = normalize(cross(cu, cw));
    return mat3(cu, cv, cw);
}

// ---------- SDF Primitives ----------

float sdSphere(vec3 p, float r) { return length(p) - r; }

float sdBox(vec3 p, vec3 b) {
    vec3 q = abs(p) - b;
    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

float sdTorus(vec3 p, vec2 t) {
    vec2 q = vec2(length(p.xz) - t.x, p.y);
    return length(q) - t.y;
}

// ---------- Scene (Domain Transform Demo) ----------

float map(vec3 p) {
    float d = p.y + 1.0; // Ground plane

    // Static sphere
    d = min(d, sdSphere(p, 0.5));

    // Rotating box (spinning around Y-axis)
    vec3 p2 = p - vec3(2.5, 0.0, 0.0);
    p2 = rotY(iTime * 0.8) * p2;
    d = min(d, sdBox(p2, vec3(0.6)));

    // Arbitrary-axis rotating torus
    vec3 p3 = p - vec3(-2.5, 0.5, 0.0);
    p3 = rotAxis(vec3(1,1,0), iTime * 0.6) * p3;
    d = min(d, sdTorus(p3, vec2(0.6, 0.2)));

    // Scaled + rotated sphere
    vec3 p4 = p - vec3(0.0, 0.5, 2.5);
    p4 = rotZ(iTime * 1.2) * rotX(iTime * 0.7) * p4;
    float scale = 1.5;
    d = min(d, sdSphere(p4 / scale, 0.4) * scale);

    return d;
}

// ---------- Normal ----------

vec3 calcNormal(vec3 p) {
    vec2 e = vec2(0.001, 0.0);
    return normalize(vec3(
        map(p + e.xyy) - map(p - e.xyy),
        map(p + e.yxy) - map(p - e.yxy),
        map(p + e.yyx) - map(p - e.yyx)
    ));
}

// ---------- Ray March ----------

float rayMarch(vec3 ro, vec3 rd) {
    float t = 0.0;
    for (int i = 0; i < MAX_STEPS; i++) {
        vec3 p = ro + rd * t;
        float d = map(p);
        if (d < SURF_DIST) break;
        t += d;
        if (t > MAX_DIST) break;
    }
    return t;
}

// ---------- Main Function ----------

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;

    // Mouse-interactive orbit camera
    float angleH, angleV;
    if (iMouse.z > 0.0) {
        vec2 m = iMouse.xy / iResolution.xy;
        angleH = m.x * 2.0 * PI;
        angleV = (m.y - 0.5) * PI;
    } else {
        angleH = iTime * AUTO_SPEED;
        angleV = 0.35;
    }

    vec3 ro = vec3(
        CAM_DIST * cos(angleH) * cos(angleV),
        CAM_DIST * sin(angleV) + 1.0,
        CAM_DIST * sin(angleH) * cos(angleV)
    );
    vec3 ta = vec3(0.0);

    mat3 cam = setCamera(ro, ta, 0.0);
    vec3 rd = cam * normalize(vec3(uv, FOCAL_LENGTH));

    float t = rayMarch(ro, rd);

    vec3 col = vec3(0.0);
    if (t < MAX_DIST) {
        vec3 p = ro + rd * t;
        vec3 n = calcNormal(p);
        vec3 lightDir = normalize(vec3(1.0, 2.0, -1.0));
        float diff = max(dot(n, lightDir), 0.0);
        col = vec3(0.8, 0.85, 0.9) * (diff + 0.15);
        if (p.y < -0.99) {
            float checker = mod(floor(p.x) + floor(p.z), 2.0);
            col *= 0.5 + 0.3 * checker;
        }
    } else {
        col = vec3(0.4, 0.6, 0.9) - rd.y * 0.3;
    }

    col = pow(col, vec3(0.4545));
    fragColor = vec4(col, 1.0);
}

```

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

### Environment Variable Configuration

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/networking.md

Example of setting up environment variables for development, specifically the API URL.

```bash
# .env.development
EXPO_PUBLIC_API_URL=http://localhost:3000
```

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

### Install FFmpeg

Source: https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/references/troubleshooting.md

Install FFmpeg using package managers for macOS and Ubuntu. Verify the installation.

```bash
# macOS
brew install ffmpeg

# Ubuntu
sudo apt install ffmpeg

# Verify
ffmpeg -version
```

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

### Build Backend and Frontend

Source: https://github.com/minimax-ai/skills/blob/main/skills/fullstack-dev/SKILL.md

Commands to build both the backend and frontend projects. Ensure you are in the correct directories before running.

```bash
# Backend
cd server && npm run build
```

```bash
# Frontend
cd client && npm run build
```

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

### Dio Setup and Configuration

Source: https://github.com/minimax-ai/skills/blob/main/skills/flutter-dev/references/networking.md

Sets up a singleton Dio instance with base options for URL, timeouts, and headers. Includes adding custom interceptors for enhanced network request handling.

```dart
import 'package:dio/dio.dart';

class ApiClient {
  static final ApiClient _instance = ApiClient._internal();
  factory ApiClient() => _instance;

  late final Dio dio;

  ApiClient._internal() {
    dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com/v1',
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 30),
      sendTimeout: const Duration(seconds: 30),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
    ));

    dio.interceptors.addAll([
      AuthInterceptor(),
      LoggingInterceptor(),
      RetryInterceptor(dio: dio),
    ]);
  }
}
```

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

### NativeWind Installation

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/styling.md

Install NativeWind and related packages using npx expo install. Ensure you are using NativeWind v4 for new projects.

```bash
npx expo install nativewind tailwindcss@3 \
  tailwind-merge clsx
```

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

### Check mmx CLI Installation

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-gen/SKILL.md

Verify if the mmx CLI tool is installed and check its version. If not found, it indicates that the tool needs to be installed.

```bash
command -v mmx && mmx --version || echo "mmx not found"
```

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

### WebGL2 Shader Setup and Render Loop

Source: https://github.com/minimax-ai/skills/blob/main/skills/shader-dev/techniques/shadow-techniques.md

Sets up a WebGL2 canvas, handles mouse input, window resizing, and initiates a render loop for displaying shader output. Ensures the canvas dimensions and viewport are correctly managed.

```javascript
const uResolution = gl.getUniformLocation(program, 'iResolution');
        const uMouse = gl.getUniformLocation(program, 'iMouse');

        // Mouse tracking
        let mouseX = 0, mouseY = 0;
        canvas.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = canvas.height - e.clientY;
        });

        // Window resize
        function resize() {
            const dpr = Math.min(window.devicePixelRatio, 2);
            canvas.width = window.innerWidth * dpr;
            canvas.height = window.innerHeight * dpr;
            gl.viewport(0, 0, canvas.width, canvas.height);
        }
        window.addEventListener('resize', resize);
        resize();

        // Render loop
        function render(time) {
            time *= 0.001;
            gl.useProgram(program);
            gl.uniform1f(uTime, time);
            gl.uniform2f(uResolution, canvas.width, canvas.height);
            gl.uniform4f(uMouse, mouseX, mouseY, mouseX, mouseY);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);
    </script>
</body>
</html>
```

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

### Path Camera Setup in mainImage

Source: https://github.com/minimax-ai/skills/blob/main/skills/shader-dev/reference/matrix-transform.md

Sets up camera position, target, and up vectors for an animated camera moving along a predefined path. It then calculates the view-to-world matrix and the ray direction.

```glsl
// In mainImage:
float z_offset = iTime * 10.0; // Speed
vec3 camPos = vec3(pathCenter(z_offset), 0.0);
vec3 camTarget = vec3(pathCenter(z_offset + 5.0), 5.0);
vec3 camUp = vec3(sin(iTime * 0.3), cos(iTime * 0.3), 0.0);

mat4 viewToWorld = LookAt(camPos, camTarget, camUp);
vec3 rd = (viewToWorld * normalize(vec4(uv, 1.0, 0.0))).xyz;
```

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

### Install Expo Dependencies

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/SKILL.md

Install necessary Expo and React Native libraries for enhanced features like image handling and animations. Ensure these are installed before configuring the project.

```bash
npx expo install expo-image react-native-reanimated react-native-gesture-handler
```

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

### Install Python Packages

Source: https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/references/troubleshooting.md

Install the 'requests' Python package using pip.

```bash
pip install requests
```

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

### Install MiniMax Skills for OpenCode

Source: https://context7.com/minimax-ai/skills/llms.txt

Clone the MiniMax Skills repository and create symbolic links for OpenCode integration.

```bash
git clone https://github.com/MiniMax-AI/skills.git ~/.minimax-skills
mkdir -p ~/.config/opencode/skills
ln -s ~/.minimax-skills/skills/* ~/.config/opencode/skills/
```

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

### Install Testing Dependencies

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/testing.md

Install Jest and React Native Testing Library using Expo.

```bash
npx expo install jest-expo @testing-library/react-native
```

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

### Integral, Summation, and Product Operators in OpenXML

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-docx/references/openxml_encyclopedia_part3.md

Demonstrates how to create integral, summation, and product symbols using the M.Nary class. Configure properties like type, base, subscript, and superscript for mathematical notation.

```csharp
// Integral ∫ from a to b of f(x) dx
new M.Nary(
    new M.NaryProperties(
        new M.NaryType { Val = M.NaryValues.Integral }  // ∫
    )
    {
        SubSuperscript = M.SubSuperscriptValues.NoSubSuperscript
    },
    new M.Base(
        new M.Run(new M.Text("f(x)"))))
    ),
    new M.Subscript(
        new M.Run(new M.Text("a")))
    ),
    new M.Superscript(
        new M.Run(new M.Text("b")))
    )
);
```

```csharp
// Summation Σ from i=1 to n of i²
new M.Nary(
    new M.NaryProperties(
        new M.NaryType { Val = M.NaryValues.Sum },  // Σ
        new M.GrowBindings = true
    ),
    new M.Base(
        new M.SubscriptSuperscript(
            new M.Base(new M.Run(new M.Text("i"))),
            new M.Subscript(new M.Run(new M.Text("1"))),
            new M.Superscript(new M.Run(new M.Text("n")))
        )
    ),
    new M.Subscript(
        new M.Run(new M.Text("i")))
    ),
    new M.Superscript(
        new M.Run(new M.Text("2")))
    )
);
```

```csharp
// Product ∏ from i=1 to n
new M.Nary(
    new M.NaryProperties(
        new M.NaryType { Val = M.NaryValues.Product }  // ∏
    ),
    new M.Base(
        new M.SubscriptSuperscript(
            new M.Base(new M.Run(new M.Text("i"))),
            new M.Subscript(new M.Run(new M.Text("1"))),
            new M.Superscript(new M.Run(new M.Text("n")))
        )
    ),
    new M.Subscript(
        new M.Run(new M.Text("i")))
    ),
    new M.Superscript(
        new M.Run(new M.Text("2")))
    )
);

// N-ary type values: Integral, Sum, Product, Union, Intersection, etc.
```

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

### Prompt Building: Atmosphere/Mood Examples

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-music-gen/references/prompt_guide.md

Examples of phrases used to set the mood or atmosphere of the music.

```text
"bittersweet but healing mood"
```

```text
"empowering and self-loving mood"
```

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

### Install and Authenticate MiniMax CLI

Source: https://github.com/minimax-ai/skills/blob/main/skills/minimax-multimodal-toolkit/SKILL.md

Install the mmx CLI globally using npm. Authenticate your account using a login command, which persists credentials to a file. Alternatively, provide the API key directly in per-call commands.

```bash
# Install
npm install -g mmx-cli

# Auth (persisted to ~/.mmx/credentials.json)
mmx auth login --api-key sk-xxxxx

# Or pass per-call
mmx text chat --api-key sk-xxxxx --message "Hello"
```

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

### Install Reanimated and Gesture Handler

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/animations.md

Install the necessary packages for Reanimated and Gesture Handler using Expo CLI.

```bash
npx expo install react-native-reanimated react-native-gesture-handler
```

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

### Router Provider Setup with GoRouter

Source: https://github.com/minimax-ai/skills/blob/main/skills/flutter-dev/references/project-structure.md

Sets up a `GoRouter` instance for navigation, including initial location, debug logging, and a basic redirect for authentication guards.

```dart
// routes/app_router.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

final routerProvider = Provider<GoRouter>((ref) {
  return GoRouter(
    initialLocation: '/',
    debugLogDiagnostics: true,
    redirect: (context, state) {
      // Auth guard logic
      return null;
    },
    routes: [
      GoRoute(
        path: '/',
        name: 'home',
        builder: (context, state) => const HomeScreen(),
      ),
      // Add more routes
    ],
  );
});

```

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

### Buffer Setup and Attribute Pointer

Source: https://github.com/minimax-ai/skills/blob/main/skills/shader-dev/techniques/particle-system.md

Sets up a vertex buffer with quad coordinates and configures the vertex attribute pointer for 'aPosition'. This prepares the geometry for rendering.

```javascript
const buf = gl.createBuffer();
glt.bindBuffer(gl.ARRAY_BUFFER, buf);
glt.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
const aPos = gl.getAttribLocation(program, 'aPosition');
glt.enableVertexAttribArray(aPos);
glt.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
```

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

### Install Jotai for Atomic State

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/state-management.md

Install the `jotai` library using npm or yarn for managing state in an atomic manner.

```bash
npx expo install jotai
```

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

### Install Zustand for Shared State

Source: https://github.com/minimax-ai/skills/blob/main/skills/react-native-dev/references/state-management.md

Install the `zustand` library using npm or yarn for managing shared application state.

```bash
npx expo install zustand
```

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

### Feature-First vs. Layer-First Project Structure

Source: https://github.com/minimax-ai/skills/blob/main/skills/fullstack-dev/SKILL.md

Illustrates the recommended feature-first organization compared to the traditional layer-first approach for backend projects.

```text
✅ Feature-first                    ❌ Layer-first
src/                                src/
  orders/                             controllers/
    order.controller.ts                 order.controller.ts
    order.service.ts                    user.controller.ts
    order.repository.ts               services/
    order.dto.ts                        order.service.ts
    order.test.ts                       user.service.ts
  users/                              repositories/
    user.controller.ts                  ...
    user.service.ts
  shared/
    database/
    middleware/
```