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:

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:

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:

{
  "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
• Source: 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.