# Just Progress Bar Skill

> Design, select, generate, and audit accessible creative progress bars for React, HTML/CSS, Gallery demos, recipes, CLI workflows, and Agent/MCP integrations.

- Skill: `just-agent/just-progress-bar-skill` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add just-agent/just-progress-bar-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/just-agent/just-progress-bar-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Just-Agent (https://skillmd.com/u/just-agent)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/just-agent/just-progress-bar-skill

---


# just-progress-bar-skill

Use this Skill when a user asks for a progress bar, loader, upload state, download button, checkout flow, media scrubber, circular metric, game loading UI, dashboard progress, or an accessibility audit for progressbar markup.

## What this Skill does

- Selects a suitable progress bar pattern from the 24-item catalog.
- Generates React or HTML/CSS source from catalog IDs, prompts, or recipe JSON files.
- Explains design tokens and props.
- Audits accessibility: label, semantics, determinate values, indeterminate behavior, status text, and reduced motion.
- Helps other Agents integrate the catalog through MCP-style tools and resources.
- Uses Roadmap-driven iteration when modifying this repository: completed work must be checked in `ROADMAP.md` and recorded in logs.

## When to use

Use this Skill for:

- loading, uploading, downloading, installing, processing, generating, checking out, onboarding, media playback, game loading, dashboard metrics, or status feedback;
- requests that mention creative progress bars, `progressbar`, `aria-valuenow`, `prefers-reduced-motion`, React progress components, HTML/CSS snippets, recipes, CLI generation, or MCP tools;
- repository iteration work for `Just-Agent/just-progress-bar-skill`.

Do not use it for unrelated charts, full data dashboards, third-party visual asset copying, or copyrighted Dribbble/PSD replication.

## Pattern selection

Use these defaults:

| User request | Preferred catalog ID | Reason |
|---|---|---|
| Upload/build progress | `gradient-loading` | Clear determinate status with easy value display. |
| Download CTA | `download-button` | Combines action and progress feedback. |
| Checkout/order flow | `order-steps` | Step semantics are easier to understand than a raw bar. |
| Unknown wait time | `gradient-loading` with `indeterminate: true` | Indeterminate progress should omit `aria-valuenow`. |
| Neon / sci-fi | `neon-ring` or `lightsaber` | Strong visual identity for AI/generation flows. |
| Game loading | `cute-game-loading` | Playful loading pattern. |
| Media playback | `music-player` or `player-progress` | Timeline/scrubber model. |
| Dashboard metric | `circular-dashboard` | Compact KPI ring. |
| Emotional waiting state | `happy-heart` | Soft waiting state. |
| Vertical dashboard rail | `vertical-progress` | Fits side panels and cards. |

## How to generate code

1. Choose by explicit `id` when the user names a pattern.
2. Choose by prompt when the user describes a use case.
3. Choose by recipe when repeatability matters.
4. Generate `react` or `html-css` only unless the user explicitly accepts future targets.
5. Include a label and reduced-motion note.
6. For indeterminate progress, set `indeterminate` in React or omit `aria-valuenow` in HTML/CSS.

Useful commands:

```bash
just-progress-bar list --category circular
just-progress-bar generate --id neon-ring --target react --out ./NeonRing.tsx
just-progress-bar generate --prompt "做一个上传文件时使用的霓虹环形进度条" --target react --out ./UploadProgress.tsx
just-progress-bar recipe ./recipes/upload-progress.json --out ./tmp/upload
just-progress-bar audit ./src/MyProgressBar.tsx
just-progress-bar skill export --out ./dist/just-progress-bar-skill
just-progress-bar mcp --stdio
pnpm --filter @just-progress-bar/mcp-server sdk:stdio
pnpm --filter @just-progress-bar/mcp-server sdk:http
```

## Runtime validation

For release or GitHub upload checks, run:

```bash
pnpm verify:runtime
JPB_REQUIRE_BROWSER=1 pnpm test:browser
JPB_REQUIRE_BROWSER=1 pnpm test:visual
pnpm --filter @just-progress-bar/mcp-server test:sdk
```

Use `packages/mcp-server/src/sdk-server.ts` for official MCP SDK stdio and Streamable HTTP runtime.

## Recipe-aware generation

When a user provides or requests a repeatable generation spec, use a recipe shape with:

```json
{
  "id": "upload-progress",
  "target": "react",
  "progressBarId": "gradient-loading",
  "label": "Uploading assets",
  "value": 72,
  "animation": { "reducedMotion": "static fill" },
  "accessibility": { "label": "Uploading assets", "determinate": true },
  "output": "./src/UploadProgress.tsx"
}
```

Run `packages/skill/scripts/generate-progressbar.mjs ./recipes/upload-progress.json` or `just-progress-bar recipe ./recipes/upload-progress.json --out ./tmp/upload`.

## How to audit accessibility

Check all generated or user-provided progress bars for:

- `role="progressbar"` or native `<progress>`;
- accessible label through `label`, visible text, `aria-label`, or `aria-labelledby`;
- `aria-valuenow` for determinate progress;
- no `aria-valuenow` for indeterminate progress;
- `prefers-reduced-motion` or an imported core stylesheet that provides it;
- status text or icon labels so feedback is not color-only.

## Output format

When generating a progress bar, return:

1. selected catalog ID;
2. short reason for selection;
3. React or HTML/CSS code;
4. accessibility checklist;
5. reduced-motion note;
6. CLI command or recipe suggestion when useful.

When iterating this repository, return:

1. zip link;
2. completed tasks;
3. known issues;
4. next plan.

## Constraints

- Do not copy third-party visual assets, images, PSDs, Dribbble shots, or trademarked designs.
- Use original implementations inspired by common progress UI patterns.
- Determinate progress must expose `aria-valuenow`.
- Indeterminate progress must omit `aria-valuenow`.
- Animated progress must support `prefers-reduced-motion`.
- Status feedback must not rely on color alone.
- Roadmap tasks may only be checked when actually completed.

## Examples

User: “做一个上传文件时使用的霓虹环形进度条。”

Use `neon-ring`, generate React, include `CircularProgress`, label text, and reduced-motion note.

User: “做一个下单流程进度条。”

Use `order-steps`, generate `StepProgress` with `Cart`, `Payment`, `Packing`, `Shipped`, `Delivered`.

User: “检查这个进度条是否规范。”

Run accessibility checks for semantics, label, determinate value, indeterminate behavior, reduced motion, and color-only status.

User: “按照 recipe 生成上传进度条。”

Read the recipe JSON, resolve `progressBarId`, generate the requested target, and report warnings instead of silently ignoring missing accessibility metadata.