{"id":"94c848f8-9ff4-40ae-9be1-030e23d5b328","shortId":"SdUUj8","kind":"skill","title":"capability-based-spinner-glyph-selection","tagline":"Select spinner glyphs and colors dynamically based on terminal capability, motion preference, and stall state.","description":"# SKILL: Capability Based Spinner Glyph Selection\n**Domain:** spinner-states\n**Trigger:** Use when building a spinner glyph that must adapt to reduced-motion settings, theme colors, and stalled intensity while keeping the animation loop small.\n**Source Pattern:** Distilled from reviewed terminal rendering, layout, animation, and accessibility implementations.\n\n## Core Method\nBuild the spinner glyph as a small composable component that decides on its character set and color per frame rather than swapping the whole spinner. Keep the spinner polymorphic: one glyph for the normal cycle, a single-dot fallback under reduced-motion, and an interpolated color path when the state is stalled. Have the component recompute only what changed (glyph, color, dimming flag) so the Ink renderer can reuse cached Box/Text nodes.\n\n## Key Rules\n- Drive the glyph selection from shared state (frame count, reduced-motion flag, stall intensity) and avoid new timers per spinner.\n- Only swap glyphs/text nodes when the computed glyph, color, or reduced-motion dim state differs from the cached values.\n- Interpolate colors through the theme lookup when stall intensity is positive; fall back to semantic names such as `error` if the RGB parse fails.\n- Provide a single-dot glyph for reduced-motion and let dimColor toggle per half-cycle so motion is still perceivable without rapid frames.\n\n## Example Application\nWhen writing a database CLI spinner, reuse this skill by feeding the shared 50ms clock, the stalledIntensity derived from tool activity, and the host theme, and let the spinner component pick a glyph and color per frame instead of re-rendering the entire line.\n\n## Anti-Patterns (What NOT to do)\n- Don’t hardcode a single glyph or color and rerender the whole spinner on every frame.\n- Don’t duplicate the timer logic inside each spinner; share the clock and only recompute derived glyph/color values when the inputs change.","tags":["capability","based","spinner","glyph","selection","cskill","agents","ychampion","agent-skills","ai-agents","cli","coding-agents"],"capabilities":["skill","source-ychampion","skill-capability-based-spinner-glyph-selection","topic-agent-skills","topic-ai-agents","topic-cli","topic-coding-agents","topic-context-engineering","topic-developer-tools","topic-mcp","topic-multi-agent","topic-terminal-ui"],"categories":["cskill-agents"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/ychampion/cskill-agents/capability-based-spinner-glyph-selection","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add ychampion/cskill-agents","source_repo":"https://github.com/ychampion/cskill-agents","install_from":"skills.sh"}},"qualityScore":"0.467","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 34 github stars · SKILL.md body (1,925 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:56:46.760Z","embedding":null,"createdAt":"2026-04-18T22:20:02.438Z","updatedAt":"2026-04-22T06:56:46.760Z","lastSeenAt":"2026-04-22T06:56:46.760Z","tsv":"'50ms':254 'access':68 'activ':261 'adapt':41 'anim':55,66 'anti':287 'anti-pattern':286 'applic':240 'avoid':164 'back':201 'base':3,13,24 'box/text':144 'build':35,72 'cach':143,187 'capability-based-spinner-glyph-select':1 'capabl':2,16,23 'chang':132,330 'charact':85 'cli':245 'clock':255,320 'color':11,48,88,119,134,177,190,275,300 'compon':80,128,270 'compos':79 'comput':175 'core':70 'count':156 'cycl':106,230 'databas':244 'decid':82 'deriv':258,324 'differ':184 'dim':135,182 'dimcolor':225 'distil':60 'domain':28 'dot':110,217 'drive':148 'duplic':311 'dynam':12 'entir':284 'error':207 'everi':307 'exampl':239 'fail':212 'fall':200 'fallback':111 'feed':251 'flag':136,160 'frame':90,155,238,277,308 'glyph':5,9,26,38,75,102,133,150,176,218,273,298 'glyph/color':325 'glyphs/text':171 'half':229 'half-cycl':228 'hardcod':295 'host':264 'implement':69 'ink':139 'input':329 'insid':315 'instead':278 'intens':51,162,197 'interpol':118,189 'keep':53,97 'key':146 'layout':65 'let':224,267 'line':285 'logic':314 'lookup':194 'loop':56 'method':71 'motion':17,45,115,159,181,222,232 'must':40 'name':204 'new':165 'node':145,172 'normal':105 'one':101 'pars':211 'path':120 'pattern':59,288 'per':89,167,227,276 'perceiv':235 'pick':271 'polymorph':100 'posit':199 'prefer':18 'provid':213 'rapid':237 'rather':91 're':281 're-rend':280 'recomput':129,323 'reduc':44,114,158,180,221 'reduced-mot':43,113,157,179,220 'render':64,140,282 'rerend':302 'reus':142,247 'review':62 'rgb':210 'rule':147 'select':6,7,27,151 'semant':203 'set':46,86 'share':153,253,318 'singl':109,216,297 'single-dot':108,215 'skill':22,249 'skill-capability-based-spinner-glyph-selection' 'small':57,78 'sourc':58 'source-ychampion' 'spinner':4,8,25,30,37,74,96,99,168,246,269,305,317 'spinner-st':29 'stall':20,50,125,161,196 'stalledintens':257 'state':21,31,123,154,183 'still':234 'swap':93,170 'termin':15,63 'theme':47,193,265 'timer':166,313 'toggl':226 'tool':260 'topic-agent-skills' 'topic-ai-agents' 'topic-cli' 'topic-coding-agents' 'topic-context-engineering' 'topic-developer-tools' 'topic-mcp' 'topic-multi-agent' 'topic-terminal-ui' 'trigger':32 'use':33 'valu':188,326 'whole':95,304 'without':236 'write':242","prices":[{"id":"238a1bcb-6e2b-4aa8-986c-712fb1318143","listingId":"94c848f8-9ff4-40ae-9be1-030e23d5b328","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"ychampion","category":"cskill-agents","install_from":"skills.sh"},"createdAt":"2026-04-18T22:20:02.438Z"}],"sources":[{"listingId":"94c848f8-9ff4-40ae-9be1-030e23d5b328","source":"github","sourceId":"ychampion/cskill-agents/capability-based-spinner-glyph-selection","sourceUrl":"https://github.com/ychampion/cskill-agents/tree/main/skills/capability-based-spinner-glyph-selection","isPrimary":false,"firstSeenAt":"2026-04-18T22:20:02.438Z","lastSeenAt":"2026-04-22T06:56:46.760Z"}],"details":{"listingId":"94c848f8-9ff4-40ae-9be1-030e23d5b328","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"ychampion","slug":"capability-based-spinner-glyph-selection","github":{"repo":"ychampion/cskill-agents","stars":34,"topics":["agent-skills","ai-agents","cli","coding-agents","context-engineering","developer-tools","mcp","multi-agent","terminal-ui"],"license":"mit","html_url":"https://github.com/ychampion/cskill-agents","pushed_at":"2026-04-04T14:13:23Z","description":"Agent skills for coding CLIs, multi-agent runtimes, context engines, MCP extensions, and terminal tooling. Instead of using claude code's source code, give your agent skills to create your own!","skill_md_sha":"703a320ac36555f90007cba07cef707346cfddfc","skill_md_path":"skills/capability-based-spinner-glyph-selection/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/ychampion/cskill-agents/tree/main/skills/capability-based-spinner-glyph-selection"},"layout":"multi","source":"github","category":"cskill-agents","frontmatter":{"name":"capability-based-spinner-glyph-selection","description":"Select spinner glyphs and colors dynamically based on terminal capability, motion preference, and stall state."},"skills_sh_url":"https://skills.sh/ychampion/cskill-agents/capability-based-spinner-glyph-selection"},"updatedAt":"2026-04-22T06:56:46.760Z"}}