When should I use arena-cli?

arena-cli is useful in the following scenarios: • AI-Powered Visual Tagging: Automatically analyze and label UI components (e.g., 'metric cards', 'dashboards') within your Are.na channels using Vision AI for better organization. • Local Research Archiving: Export and sync Are.na blocks to a local environment to maintain a permanent, offline-accessible backup of visual research and inspiration. • Advanced Visual Discovery: Generate custom HTML views and perform visual searches based on AI-generated patterns and descriptions when standard platform search tools are insufficient. • Design System Auditing: Use the enrichment feature to categorize and audit UI patterns across multiple channels, creating a structured reference for design teams.

arena-cli

from rohunvora

CLI tools for Are.na: export blocks, enrich with vision AI, generate views. Use when: (1) exporting Are.na blocks incrementally, (2) enriching images with AI-generated titles/tags/patterns, (3) generating browsable HTML views, (4) searching blocks by UI patterns or tags, (5) visual search results when terminal output is insufficient. Triggers: "export arena", "enrich arena", "sync arena", "arena view", "search arena for [pattern]", "show me [pattern]".

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026

When & Why to Use This Skill

The arena-cli skill is a powerful automation toolset designed for Are.na users to streamline visual research and asset management. It enables users to incrementally export blocks, leverage Vision AI (Gemini) to automatically enrich images with descriptive titles, tags, and UI patterns, and generate searchable, browsable HTML galleries. By transforming raw visual collections into structured, AI-enhanced local databases, it significantly improves the efficiency of design inspiration and knowledge retrieval.

Use Cases

AI-Powered Visual Tagging: Automatically analyze and label UI components (e.g., 'metric cards', 'dashboards') within your Are.na channels using Vision AI for better organization.
Local Research Archiving: Export and sync Are.na blocks to a local environment to maintain a permanent, offline-accessible backup of visual research and inspiration.
Advanced Visual Discovery: Generate custom HTML views and perform visual searches based on AI-generated patterns and descriptions when standard platform search tools are insufficient.
Design System Auditing: Use the enrichment feature to categorize and audit UI patterns across multiple channels, creating a structured reference for design teams.

name	arena-cli
description	>
CLI tools for Are.na	export blocks, enrich with vision AI, generate views.
Use when	(1) exporting Are.na blocks incrementally, (2) enriching images with
terminal output is insufficient. Triggers	"export arena", "enrich arena",

name

arena-cli

description

CLI tools for Are.na

export blocks, enrich with vision AI, generate views.

Use when

(1) exporting Are.na blocks incrementally, (2) enriching images with

terminal output is insufficient. Triggers

"export arena", "enrich arena",

arena-cli

CLI tools to export, enrich, and browse Are.na blocks locally.

Setup

First-time setup requires:

# In your project directory
echo "ARENA_TOKEN=your_token_here" >> .env
echo "ARENA_USER_SLUG=your_username" >> .env
echo "GEMINI_API_KEY=your_key_here" >> .env

Get your Are.na token from: https://dev.are.na/oauth/applications

Workflow

1. Export    →    2. Enrich    →    3. View/Search
   (blocks)       (vision AI)        (HTML + grep)

1. Export Blocks

# First run - exports all channels
npx ts-node scripts/export-blocks.ts

# Incremental update (only new blocks)
npx ts-node scripts/export-blocks.ts

# Specific channel
npx ts-node scripts/export-blocks.ts --channel=ui-ux-abc123

# With local image download
npx ts-node scripts/export-blocks.ts --images

Output: arena-export/blocks/{id}.json

2. Enrich with Vision AI

# Enrich all image blocks
npx ts-node scripts/enrich-blocks.ts

# Specific channel
npx ts-node scripts/enrich-blocks.ts --channel=ui-ux-abc123

# Preview without saving
npx ts-node scripts/enrich-blocks.ts --dry-run

# Re-enrich already processed
npx ts-node scripts/enrich-blocks.ts --force

Adds to each block:

vision.suggested_title - Clean title
vision.description - What's notable
vision.tags - Searchable tags
vision.ui_patterns - UI component patterns

3. Generate View

# Generate HTML
node scripts/gen-view.cjs

# Generate and open
node scripts/gen-view.cjs --open

Output: arena-export/view.html

4. Visual Search Results

When terminal output is insufficient (need to see actual images):

# Ad-hoc search - comma-separated patterns
node scripts/gen-search-view.cjs "dashboard,metric-cards" --open

# Multiple search groups
node scripts/gen-search-view.cjs "avatar,profile" "chart,graph" --open

# From config file
node scripts/gen-search-view.cjs --config=searches.json --open

Config file format (searches.json):

[
  { "name": "Dashboards", "patterns": ["dashboard", "metric-cards", "kpi"] },
  { "name": "Charts", "patterns": ["chart", "graph", "visualization"] }
]

Output: arena-export/search-results.html with image grid, grouped by category.

Searching

# Search by UI pattern
grep -l "inline-stats" arena-export/blocks/*.json

# Search by tag
grep -l '"dashboard"' arena-export/blocks/*.json

# Search with context
grep -B2 -A2 "leaderboard" arena-export/blocks/*.json

Block Schema

{
  "id": 12345,
  "title": "original-filename.png",
  "class": "Image",
  "image_url": "https://...",
  "channels": ["ui-ux-abc"],
  "vision": {
    "suggested_title": "Dark Trading Dashboard",
    "description": "Crypto dashboard with real-time charts",
    "tags": ["dashboard", "dark-mode", "trading"],
    "ui_patterns": ["metric-cards", "time-series-chart"]
  }
}

Environment Variables

Variable	Required	Description
`ARENA_TOKEN`	Yes	Are.na API token
`ARENA_USER_SLUG`	Yes	Your Are.na username
`GEMINI_API_KEY`	Yes	Google AI API key
`ARENA_EXPORT_DIR`	No	Export path (default: ./arena-export)

Customization

To customize the vision enrichment prompt, see references/enrichment-prompt.md.