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

- **Type:** Skill
- **Install:** `agentstack add skill-just-agent-just-progress-bar-skill-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Just-Agent](https://agentstack.voostack.com/s/just-agent)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Just-Agent](https://github.com/Just-Agent)
- **Source:** https://github.com/Just-Agent/just-progress-bar-skill/tree/main/packages/skill
- **Website:** https://just-agent.github.io/just-progress-bar-skill/

## Install

```sh
agentstack add skill-just-agent-just-progress-bar-skill-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 ``;
- 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Just-Agent](https://github.com/Just-Agent)
- **Source:** [Just-Agent/just-progress-bar-skill](https://github.com/Just-Agent/just-progress-bar-skill)
- **License:** MIT
- **Homepage:** https://just-agent.github.io/just-progress-bar-skill/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-just-agent-just-progress-bar-skill-skill
- Seller: https://agentstack.voostack.com/s/just-agent
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.