Product surfacesLocal editorial record

Comparison tool design

Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features.

Catalog record

Installable source artifact

This page explains the direction locally, then links to the exact upstream artifact and its verified install command.

What this gives you

A clearer brief for the agent.

Maps product UI decisions to useful hierarchy, states, controls, and feedback.

Expected result

Interfaces that are easier to scan, operate, and extend across real product states.

Use it when

You are designing dashboards, workspaces, settings, or other functional screens.

Source repository stars

553

Source repository · verified 2026-08-17

Install status

Installable source artifact

comparison-tool-design · Skills CLI

Install this skill with one command.

This exact source artifact can be installed in your project with the Skills CLI.

$npx skills add https://github.com/rampstackco/claude-skills --skill comparison-tool-design

Skill name: comparison-tool-design · installs into the agent directory selected by the CLI.

Open source SKILL.md Read install guidance

Related directions

Continue inside DesignMD.

SlidesCreate strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.Beam glow statesCreate React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.Editorial service bookingCreate or redesign appointment-based service websites for salons, barbers, spas, wellness studios, clinics, and hospitality brands.Operational enterprise AICreate or redesign enterprise AI, automation, security, and operations product pages that explain system boundaries, approvals, auditability, exceptions, and rollback.