ascii-progress-and-spinner
$
npx mdskill add partme-ai/full-stack-skills/ascii-progress-and-spinnerCreates ASCII progress bars and spinners for CLI UX with determinate/indeterminate modes and TTY refresh.
- Helps developers add terminal progress indicators, loading animations, or CLI feedback elements to applications.
- Depends on Python version 3.8 or higher for execution and integration.
- Activates only when the user explicitly mentions the exact skill name in specific trigger phrases.
- Outputs style specs, render rules, and fallback protocols for both interactive and non-interactive environments.
SKILL.md
.github/skills/ascii-progress-and-spinnerView on GitHub ↗
--- name: ascii-progress-and-spinner description: "Design ASCII progress bars and spinners for CLI UX (determinate/indeterminate, TTY single-line refresh, non-interactive log fallback) with copy-pastable style specs. Use when the user needs terminal progress indicators, loading animations, or CLI feedback elements." license: Complete terms in LICENSE.txt dependencies: - python>=3.8 --- ## When to use this skill **CRITICAL TRIGGER RULE** - Use this skill ONLY when the user explicitly mentions the exact skill name: `ascii-progress-and-spinner`. **Trigger phrases include:** - "ascii-progress-and-spinner" - "use ascii-progress-and-spinner" - "用 ascii-progress-and-spinner 生成 ASCII 进度条" - "使用 ascii-progress-and-spinner 做 spinner / loading" ## Boundary - Do not integrate a specific UI framework; output styles + refresh rules + fallback protocol + examples. - Must cover: - determinate progress bars - indeterminate spinners - non-TTY / redirected-output fallback (log lines, no carriage-return updates) ## How to use this skill ### Inputs - mode (determinate | indeterminate) - width (default 40) - showPercent (default true) - showEta (optional) - multiTask (optional) - colorMode (none | ansi256, default none) ### Outputs (required) - progressBarStyles (>= 3) - spinnerStyles (>= 2) - renderRules (TTY single-line refresh vs logLines) - fallbackRules (non-interactive / redirected output) ### Recommended render rules - **TTY (interactive):** single-line refresh (overwrite previous line), avoid log spam - **Non-TTY (logs):** print log lines (no overwrite). Each line may include task name + percent. ### Inline Style Examples **Progress bar styles:** ``` Style 1 (block): [████████░░░░░░░░░░░░] 42% ETA 3s Style 2 (hash): [########............] 42% ETA 3s Style 3 (arrow): [========>-----------] 42% ETA 3s ``` **Spinner styles:** ``` Style 1 (braille): ⠋ Loading... → ⠙ Loading... → ⠹ Loading... Style 2 (pipe): | Loading... → / Loading... → - Loading... ``` **Non-TTY log fallback:** ``` [task-1] 25% complete [task-1] 50% complete [task-1] 75% complete [task-1] 100% complete - done (4.2s) ``` ### Workflow 1. Determine mode: `determinate` (known total) or `indeterminate` (spinner) 2. Select styles from the style gallery (>= 3 progress, >= 2 spinner) 3. Define render rules: TTY uses single-line refresh, non-TTY uses log lines 4. Define fallback rules for redirected output (no carriage returns) 5. **Validate**: Fixed-width percent field, no jitter, grep-friendly log mode ## Script - `scripts/demo.py`: local demo for progress bar + spinner shapes ## Examples - `examples/styles.md` ## Quality checklist 1. Fixed width (percent field is fixed-width to avoid jitter) 2. Log mode is grep-friendly (no overwrite) 3. ASCII-only defaults are available (avoid ambiguous-width Unicode) ## Keywords **English:** ascii-progress-and-spinner, progress bar, spinner, loading, tty, non-interactive, log output, ascii **中文:** ascii-progress-and-spinner, 进度条, Spinner, Loading, 终端, TTY, 日志降级, ASCII
More from partme-ai/full-stack-skills
- adobe-xd"Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD. Use when the user asks about Adobe XD artboards, prototype links, repeat grids, component states, design tokens export, or developer handoff."
- angular"Provides comprehensive guidance for Angular framework including components, modules, services, dependency injection, routing, forms, and TypeScript integration. Use when the user asks about Angular, needs to create Angular applications, implement Angular components, or work with Angular features."
- ansible"Provides comprehensive guidance for Ansible automation including playbooks, roles, inventory, and module usage. Use when the user asks about Ansible, needs to automate IT tasks, create Ansible playbooks, or manage infrastructure with Ansible."
- ant-design-mini"Builds mini-program UIs with Ant Design Mini components for Alipay and WeChat mini-programs. Covers Button, Form, List, Modal, Tabs, NavBar, and 60+ components with theme customization and CSS variable theming. Use when the user needs to create mini-program interfaces with Ant Design Mini, configure themes, or implement mini-program-specific UI patterns."
- ant-design-mobile"Builds React mobile UIs with Ant Design Mobile (antd-mobile) components including Button, Form, List, Modal, Picker, Tabs, PullToRefresh, InfiniteScroll, and 50+ mobile-optimized components. Use when the user needs to create mobile-first React interfaces, implement mobile navigation, forms, or data display with Ant Design Mobile."
- ant-design-react"Builds enterprise React UIs with Ant Design (antd) including 60+ components (Button, Form, Table, Select, Modal, Message), design tokens, TypeScript support, and ConfigProvider theming. Use when the user needs to create React applications with Ant Design, build forms with validation, display data tables, or customize the Ant Design theme."
- ant-design-vueProvides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
- api-doc-generator"Generate API documentation by scanning Controller classes, extracting endpoint URLs, HTTP methods, parameters, and response structures, then producing standardized docs from templates. Use when the user explicitly mentions generating API documentation, creating API docs, scanning interfaces, or documenting REST APIs. Do not trigger for generic documentation requests without explicit API mention."
- appium"Provides comprehensive guidance for Appium mobile testing including mobile app automation, element location, gestures, and cross-platform testing. Use when the user asks about Appium, needs to test mobile applications, automate mobile apps, or write Appium test scripts."
- ascii-ansi-colorizer"Add an ANSI color layer to existing ASCII/plain-text output (gradient/rainbow/highlights) with alignment-safe rules and a required no-color fallback. Use when the user wants to colorize terminal output, add rainbow effects to CLI text, or style ASCII art with ANSI colors."