Just Progress Bar Skill

What It Is

just-progress-bar-skill is a source-first progress UI toolkit for agents and frontend projects. It includes a catalog, React wrappers, standalone HTML/CSS snippets, a CLI, recipe generation, an Agent Skill package, accessibility checks, and MCP-ready runtime adapters.

Progress Levels

The README now shows the progress bars at different value levels and complexity levels, not only a single gallery screenshot.

Quick Start

This repository is meant to be published and validated through GitHub Actions. For local exploration, install dependencies and run the gallery:

pnpm install
pnpm dev

Use the CLI directly from source:

node packages/cli/src/index.mjs list --limit 8
node packages/cli/src/index.mjs generate --id neon-ring --target react
node packages/cli/src/index.mjs generate --prompt "upload progress" --target react --out ./UploadProgress.tsx
node packages/cli/src/index.mjs audit ./src/MyProgressBar.tsx
node packages/cli/src/index.mjs skill export --out ./dist/just-progress-bar-skill

30-Second React Example

import { JustProgressBar, CircularProgress, StepProgress, NeonRingProgress } from '@just-progress-bar/react';
import '@just-progress-bar/core/styles.css';

export function UploadProgress() {
  return <JustProgressBar value={72} label="Uploading design assets" variant="gradient" showValue />;
}

export function BuildRing() {
  return <CircularProgress value={82} label="Generating preview" variant="neon" showValue />;
}

export function CheckoutSteps() {
  return <StepProgress steps={['Cart', 'Payment', 'Packing', 'Delivered']} currentStep={2} />;
}

export function AgentSelectedPattern() {
  return <NeonRingProgress label="Agent is generating" value={82} />;
}

Catalog

The v0.5.0 catalog includes 24 original patterns:

gradient-loading, icon-progress, dot-line-minimal, line-number-progress,
download-button, status-feedback, vertical-progress, circular-basic,
circular-dashboard, neon-ring, emoji-schedule, apple-watch-rings,
happy-heart, cute-game-loading, music-player, bubble-slider,
three-d-capsule, step-progress, lightsaber, order-steps,
color-ball, player-progress, helix-bar, thai-pattern-progress

Agent And MCP Workflows

MCP tools include:

list_progress_bars
get_progress_bar
get_progress_bar_source
generate_progress_bar
validate_progress_bar_recipe
generate_progress_bar_from_recipe
audit_progress_bar_accessibility
create_gallery_demo
get_design_tokens
suggest_progress_bar_by_prompt

Resources include progressbar://catalog, progressbar://component/{id}, progressbar://tokens/default, progressbar://a11y/checklist, progressbar://recipes/{id}, and progressbar://roadmap.

Accessibility Baseline

Generated progress bars follow these rules:

• use native <progress> or role="progressbar";
• provide a visible or ARIA-linked label;
• expose aria-valuenow for determinate progress;
• omit aria-valuenow for indeterminate progress;
• avoid color-only status feedback;
• include prefers-reduced-motion handling or import the core stylesheet.

See docs/accessibility.md.

Repository Map

apps/gallery/          Vite gallery published by GitHub Pages
packages/core/         catalog, registry, types, tokens, source generation, a11y audit
packages/react/        React components and pattern wrappers
packages/cli/          just-progress-bar command
packages/skill/        Agent Skill package and resources
packages/mcp-server/   dependency-light helpers and official MCP SDK runtime
examples/              React and HTML/CSS examples
recipes/               repeatable generation specs
docs/                  architecture, release, runtime, visual, CLI, Skill, MCP docs
docs/readme-assets/    README showcase screenshots and thumbnail assets

GitHub Actions Release Path

Local full builds are not required for release preparation. Push the repository to Just-Agent/just-progress-bar-skill; GitHub Actions owns the heavy checks:

Useful zero-install checks when editing source files:

node scripts/smoke-test.mjs
node scripts/validate-roadmap.mjs
node scripts/validate-catalog.mjs
node scripts/html-css-snippet-smoke.mjs
node scripts/release-readiness.mjs

Showcase Assets

README and social preview assets are generated from a static source at docs/readme-assets/showcase.html.

Originality And License

The included examples are original implementations inspired by common progress UI patterns. Do not copy third-party Dribbble shots, PSDs, PNGs, animation files, source code, or trademarked assets into this repository.

MIT licensed. See LICENSE, CONTRIBUTING.md, SECURITY.md, and CHANGELOG.md.