{"id":"c53481bd-c259-4976-a217-6a4bb3fa788d","shortId":"2SAMa9","kind":"skill","title":"scrollback-freeze-optimization","tagline":"Cache and reuse animated children once they slide into scrollback so terminal resets never occur.","description":"# SKILL: Scrollback Freeze Optimization\n**Domain:** terminal-ui\n**Trigger:** Apply whenever you render active widgets that can scroll into terminal history and would otherwise force full-screen updates.\n**Source Pattern:** Distilled from reviewed terminal rendering, layout, animation, and accessibility implementations.\n\n## Core Method\nWrap any timer-driven subtree with a viewport-aware container that caches the last visible React element in a ref. When the viewport reports hidden, always return the cached node instead of the live children; React's diffing sees no change and the terminal renderer skips the expensive full-screen redraw.\n\n## Key Rules\n- Use viewport visibility for the specific widget you are freezing and keep an explicit reference to the last rendered children.\n- Only update the cache while the element is visible; otherwise return the cached subtree so React can reuse the same reference.\n- Disable memoization on the freeze wrapper (explicit `'use no memo'`) so React doesn't bail out before the cached reference is read.\n- Keep the cached node simple so it can be safely reused after long pauses and still produce the correct layout.\n\n## Example Application\nWrap a spinner in scrollback with the freeze wrapper so once you scroll past it, log-update never touches the spinner subtree even though its timer continues running when visible.\n\n## Anti-Patterns (What NOT to do)\n- Let the spinner still re-render while offscreen, which triggers repeated full-screen resets.\n- Put the cache update inside a memoized component that never reads the cached ref.\n- Assume scrollback nodes can simply be hidden with CSS; the terminal renderer still re-renders them.","tags":["scrollback","freeze","optimization","cskill","agents","ychampion","agent-skills","ai-agents","cli","coding-agents","context-engineering","developer-tools"],"capabilities":["skill","source-ychampion","skill-scrollback-freeze-optimization","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/scrollback-freeze-optimization","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,681 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-22T00:56:55.869Z","embedding":null,"createdAt":"2026-04-18T22:21:13.294Z","updatedAt":"2026-04-22T00:56:55.869Z","lastSeenAt":"2026-04-22T00:56:55.869Z","tsv":"'access':59 'activ':33 'alway':90 'anim':8,57 'anti':236 'anti-pattern':235 'appli':29 'applic':203 'assum':272 'awar':73 'bail':174 'cach':5,76,93,142,151,178,184,260,270 'chang':105 'children':9,99,138 'compon':265 'contain':74 'continu':231 'core':61 'correct':200 'css':280 'dif':102 'disabl':160 'distil':51 'doesn':172 'domain':24 'driven':67 'element':81,145 'even':227 'exampl':202 'expens':112 'explicit':132,166 'forc':44 'freez':3,22,128,164,211 'full':46,114,255 'full-screen':45,113,254 'hidden':89,278 'histori':40 'implement':60 'insid':262 'instead':95 'keep':130,182 'key':117 'last':78,136 'layout':56,201 'let':242 'live':98 'log':220 'log-upd':219 'long':194 'memo':169 'memoiz':161,264 'method':62 'never':18,222,267 'node':94,185,274 'occur':19 'offscreen':250 'optim':4,23 'otherwis':43,148 'past':217 'pattern':50,237 'paus':195 'produc':198 'put':258 're':247,286 're-rend':246,285 'react':80,100,154,171 'read':181,268 'redraw':116 'ref':84,271 'refer':133,159,179 'render':32,55,109,137,248,283,287 'repeat':253 'report':88 'reset':17,257 'return':91,149 'reus':7,156,192 'review':53 'rule':118 'run':232 'safe':191 'screen':47,115,256 'scroll':37,216 'scrollback':2,14,21,208,273 'scrollback-freeze-optim':1 'see':103 'simpl':186 'simpli':276 'skill':20 'skill-scrollback-freeze-optimization' 'skip':110 'slide':12 'sourc':49 'source-ychampion' 'specif':124 'spinner':206,225,244 'still':197,245,284 'subtre':68,152,226 'termin':16,26,39,54,108,282 'terminal-ui':25 'though':228 'timer':66,230 'timer-driven':65 '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' 'touch':223 'trigger':28,252 'ui':27 'updat':48,140,221,261 'use':119,167 'viewport':72,87,120 'viewport-awar':71 'visibl':79,121,147,234 'whenev':30 'widget':34,125 'would':42 'wrap':63,204 'wrapper':165,212","prices":[{"id":"d1a286f9-4c6b-4987-bb60-4979d2230c84","listingId":"c53481bd-c259-4976-a217-6a4bb3fa788d","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:21:13.294Z"}],"sources":[{"listingId":"c53481bd-c259-4976-a217-6a4bb3fa788d","source":"github","sourceId":"ychampion/cskill-agents/scrollback-freeze-optimization","sourceUrl":"https://github.com/ychampion/cskill-agents/tree/main/skills/scrollback-freeze-optimization","isPrimary":false,"firstSeenAt":"2026-04-18T22:21:13.294Z","lastSeenAt":"2026-04-22T00:56:55.869Z"}],"details":{"listingId":"c53481bd-c259-4976-a217-6a4bb3fa788d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"ychampion","slug":"scrollback-freeze-optimization","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":"f9f460c61091dafb279e8deb5f4a1848cad5e802","skill_md_path":"skills/scrollback-freeze-optimization/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/ychampion/cskill-agents/tree/main/skills/scrollback-freeze-optimization"},"layout":"multi","source":"github","category":"cskill-agents","frontmatter":{"name":"scrollback-freeze-optimization","description":"Cache and reuse animated children once they slide into scrollback so terminal resets never occur."},"skills_sh_url":"https://skills.sh/ychampion/cskill-agents/scrollback-freeze-optimization"},"updatedAt":"2026-04-22T00:56:55.869Z"}}