just-progress-bar-skill

name	just-progress-bar-skill
description	Design, select, generate, and audit accessible creative progress bars for React, HTML/CSS, Gallery demos, recipes, CLI workflows, and Agent/MCP integrations.

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