explore-directions

explore-directions is a skill for Claude Code, Codex from melodic-software/claude-code-plugins. It costs 209 tokens per session (3,722 once invoked), scanned C, original, MIT.

A temporary UI prototyping tool that creates several substantially different page layouts on one web route and lets you switch between them in a browser.

In plain words
What is it for?
Use it to compare dashboard layouts, settings screens, or other interface concepts and keep the parts that work best.
Why use it?
It makes visual alternatives concrete, so you can choose a direction before investing in a final interface.

Skill for Claude CodeCodex

Installs and runs on its own, but its text points at files inside its plugin — anything it tells you to read at a ${CLAUDE_PLUGIN_ROOT} path is only there once the plugin is installed. Installing the plugin gets both.

Part of the prototype plugin — 2 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/melodic-software/claude-code-plugins/explore-directions
Any agent
npx skills add melodic-software/claude-code-plugins --skill explore-directions
Clone the repo
git clone --depth 1 https://github.com/melodic-software/claude-code-plugins

Made for: Claude Code, Codex.

Or install prototype, the plugin that ships this one along with the rest of its 2 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for explore-directions

README.md
[![agentmods](https://agentmods.dev/badge/skills/melodic-software/claude-code-plugins/explore-directions.svg)](https://agentmods.dev/skills/melodic-software/claude-code-plugins/explore-directions)
Your own site
<a href="https://agentmods.dev/skills/melodic-software/claude-code-plugins/explore-directions"><img src="https://agentmods.dev/badge/skills/melodic-software/claude-code-plugins/explore-directions.svg" alt="Measured on agentmods" height="20"></a>
Per session 209 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,722 The whole file, excluding the scripts and references it only reads on demand.
Security scan C 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00209 $0.03722
Opus 5 $0.00105 $0.01861
Sonnet 5 $0.00042 $0.00744
Haiku 4.5 $0.00021 $0.00372

Measured yesterday against content hash 7aa228418a5c, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade C, and why

explore-directions scanned grade C with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/detect-ecosystems.sh, scripts/detect-ecosystems.test.sh), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Hidden instructionshighPrompt injection

Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.

slightly-tweaked card grids isn't a UI prototype, it's wallpaper. <!-- ai-slop-ignore: deliberate voice; the contrast is the operative point --> Structure is the floor, not the
plugins/prototype/skills/explore-directions/SKILL.md · 262 lines

How it starts

The opening of the file, as written. The whole thing — 262 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Pre-computed context

Current branch: !git branch --show-current 2>/dev/null || echo "unknown" Working tree status (empty = clean): !{ git status --porcelain 2>/dev/null || echo "(git status unavailable)"; } | head -10 Project ecosystems: !${CLAUDE_SKILL_DIR}/scripts/detect-ecosystems.sh 2>/dev/null || echo "none detected"

Variables

Arguments: $ARGUMENTS

Purpose

Generate several radically different visual variations on a single route, switchable from a floating control bar. The user flips between variants in the browser, picks one (or steals bits from each), then throws the rest away.

The shared throwaway rules, the auto-invoke gate, and how to capture the answer live in ${CLAUDE_PLUGIN_ROOT}/context/discipline.md. Read it before you start. This file covers only the UI facet.

If the question is about logic/state rather than appearance. Wrong facet. Invoke /prototype:pressure-test via the Skill tool.

When this is the right shape

  • "What should this page look like?"
  • "Show me a few options for this dashboard."
  • "Try a different layout for the settings screen."
  • Any time the user would otherwise spend a day picking between vague mockups in their head

Two sub-shapes. Prefer A

UI prototypes are easier to judge against the rest of the app. Real header, real sidebar, real data, real density. Default to sub-shape A whenever a plausible existing page exists.

Two substrates back these variants, the real stack (default) and a self-contained HTML mockup. Both run the same variant-comparison process below; only the substrate swaps. Pick by intent, not by mount target:

  • Existing page (or a new thing that naturally lives inside one) → real-stack sub-shape A (the default).
  • No existing page, want it judged in the real app. Real components, real density, needs the app plus a dev server → real-stack sub-shape B.
  • No existing page, want the fastest standalone feel. No app or dev server running, no app yet, or a non-dev exploring → the HTML mockup substrate (below).
  • Explicit override wins both ways. Ask for a real-stack page or an HTML mockup directly and that beats the default routing.

Read the full file on GitHub · 262 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 262 lines · 209 tokens per session scan C 7aa228418a5c

Subscribe to this mod's changes

explore-directions is a skill published in the GitHub repository melodic-software/claude-code-plugins (14 stars, last pushed yesterday), licensed MIT. It adds 209 tokens to every session and 3,722 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

ux-interaction-patterns

UX laws as code — micro-interactions, animation choreography, skeleton UIs, optimistic UI, and performance UX patterns for world-class user experience.

systempromptio/systemprompt-marketplace · 34 tokens

von-restorff-effect

Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use visual-hierarchy.

Owl-Listener/designer-skills · 49 tokens

handoff-spec

Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use design-qa-checklist; for reusable library components use component-spec (design-systems).

Owl-Listener/designer-skills · 57 tokens

animation-principles

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.

Owl-Listener/designer-skills · 59 tokens

readable-measure

Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use typography-scale.

Owl-Listener/designer-skills · 44 tokens

dark-mode-design

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.

Owl-Listener/designer-skills · 48 tokens