Agent skill

arena-cli

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]".

View SKILL.md on GitHub Repository
Stars 19
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/rohunvora/cool-claude-skills/tree/main/skills/arena-cli

SKILL.md

arena-cli

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

Setup

First-time setup requires:

bash
# 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

bash
# 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

bash
# 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

bash
# 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):

bash
# 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):

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

bash
# 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

json
{
  "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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

rohunvora/cool-claude-skills

comment-mode

Granular feedback on drafts without rewriting. Generates highlighted HTML with click-to-reveal inline comments. Use when user says "comment on this", "leave comments on", "give feedback on", or asks for feedback on a draft. Supports multiple lenses—editor feedback, POV simulation ("as brian would react"), or focused angles ("word choice only", "weak arguments"). A granular alternative to rewrites that lets users review feedback incrementally without losing their voice.

19 1
Explore
rohunvora/cool-claude-skills

ai-loading-ux

Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.

19 1
Explore
rohunvora/cool-claude-skills

unified-messages

Cross-platform messaging aggregator. Use as DEFAULT when user does NOT specify a platform (telegram/imessage). Provides unified inbox, search, and triage across both platforms. Triggers: "check messages" (no platform), "inbox", "who messaged me", "all my messages", "triage". NOT for platform- specific requests - use tg-ingest for "telegram X" or imsg-ingest for "imessage X".

19 1
Explore
rohunvora/cool-claude-skills

imsg-ingest

Primary iMessage interface. Full-featured CLI for message export, conversation management, contact resolution, and thread state. Use when user mentions "imessage", "imsg", "text message", "iphone messages", or phone numbers. Triggers: "imessage messages", "export imessage", "text from john", "imessage contacts", "sync imessage". This is STANDALONE - do not defer to unified-messages for iMessage operations.

19 1
Explore
rohunvora/cool-claude-skills

html-style

Apply opinionated styling to barebones HTML. Use when user has plain/unstyled HTML and wants to apply consistent visual styling. Triggers: style this HTML, apply styling, make this look good, /html-style, or when user shares HTML that needs CSS. Transforms tables, lists, status indicators, buttons, and layouts into a cohesive design system.

19 1
Explore
rohunvora/cool-claude-skills

mobbin-ux

Research-driven UI/UX improvement using Mobbin. Use when user explicitly requests design pattern research ("use Mobbin", "research design patterns", "find UX patterns for X"). Requires Mobbin account and browser automation (claude-in-chrome MCP). Searches Mobbin for relevant UI patterns, extracts design principles, generates a spec document for approval, then implements. NOT for general UI work—only when user wants research-backed design.

19 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results