card-deck-creation

Create themed card decks with AI-generated artwork, Puppeteer rendering, and web deployment. Use when asked to make a card deck, playing cards, tarot deck, or similar card-based content.

Jump to install

Repository: JDerekLomas/claude-code-skills
Last source activity: January 14, 2026 at 11:58
Detected SKILL.md language: English
Stars: 1
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Back to search Back to installation

name	card-deck-creation
description	Create themed card decks with AI-generated artwork, Puppeteer rendering, and web deployment. Use when asked to make a card deck, playing cards, tarot deck, or similar card-based content.

Card Deck Creation Skill

Create complete card decks with custom content, AI-generated artwork, and web deployment.

Overview

This skill creates card decks by:

Defining card content in JSON
Generating artwork via MuleRouter API (Wan2.6 text-to-image)
Rendering final cards with Puppeteer (HTML to PNG)
Deploying a web gallery with rules/instructions

Project Structure

my-deck/
├── src/
│   ├── cards.json              # Card definitions
│   ├── render-cards.js         # Web card renderer (900x1500px)
│   ├── render-print-cards.js   # Print renderer (1050x1750px) [optional]
│   └── generate-images.js      # MuleRouter artwork generator
├── assets/
│   ├── artwork/                # AI-generated artwork (1440x1440)
│   └── cards-final/            # Rendered cards with text
├── web/                        # Optional standalone web deploy
├── package.json
└── README.md

Step 1: Define Card Content (cards.json)

Structure cards by category with consistent fields:

{
  "category_name": [
    {
      "id": "card-01",
      "name": "Card Title",
      "subtitle": 
       
       
       
    
  
   ...

{
  "name": "my-deck",
  "type": "module",
  "scripts": {
    "generate": "node src/generate-images.js",
    "render": "node src/render-cards.js"
  },
  "dependencies": {
    "puppeteer": "^24.0.0"
  }
}

// Category color system
const categoryStyles = {
  category_name: {
    bg: 'linear-gradient(to bottom, #1a3d4a, #0f2830)',  // Dark gradient
    color: '#81D4FA',  // Accent color
    name: 'Display Name'
  }
};

// Card dimensions
const CARD_WIDTH = 900;
const CARD_HEIGHT = 1500;

<div class="card">
  <div class="artwork">
    <!-- 60% height, image or placeholder -->
  </div>
  <div class="text-panel">
    <div class="category">${categoryName}</div>
    <div class="title">${cardName}</div>
    <div class="subtitle">${subtitle}</div>
  </div>
  <div class="prompt-area">
    <!-- Category-specific content -->
  </div>
  <div class="quote">${quote}</div>
</div>

const API_KEY = process.env.MULEROUTER_API_KEY;
const API_BASE = 'https://api.mulerouter.ai/vendors/alibaba/v1/wan2.6-t2i/generation';

// Base style applied to all prompts
const BASE_STYLE = `Soft watercolor illustration, warm earth tones...`;

// Category-specific style modifiers
const CATEGORY_STYLES = {
  category_name: 'Two figures in warm setting, specific mood...'
};

// Individual card prompts
const CARD_PROMPTS = {
  'card-01': 'Specific visual description for this card...'
};

const response = await fetch(API_BASE, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    prompt: fullPrompt,
    size: '1440*1440',
    n: 1,
    prompt_extend: false
  })
});
const taskId = data.task_info.id;

const { status, images } = await checkTask(taskId);
// status: 'completed', 'failed', 'pending'

const imageUrl = images[0];
await downloadImage(imageUrl, outputPath);

# Generate artwork first (requires API key)
MULEROUTER_API_KEY=sk-mr-xxx npm run generate

# Render cards with artwork
npm run render

cd web && npx vercel --prod

// Example page structure
export function CardDeckContent() {
  const [activeCategory, setActiveCategory] = useState(null);
  const [selectedCard, setSelectedCard] = useState(null);

  return (
    <>
      <CategoryFilter />
      <CardGrid cards={filteredCards} onSelect={setSelectedCard} />
      <Modal card={selectedCard} onClose={() => setSelectedCard(null)} />
    </>
  );
}

# Install dependencies
npm install

# Generate artwork for all cards
MULEROUTER_API_KEY=sk-mr-xxx npm run generate

# Generate specific card
MULEROUTER_API_KEY=sk-mr-xxx npm run generate -- --card=card-01

# Generate specific category
MULEROUTER_API_KEY=sk-mr-xxx npm run generate -- --category=category_name

# Render all cards
npm run render

# Deploy web version
npx vercel --prod