[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEK80NX19MDA9B65QHT4S5":3,"skill-same:01M6FEK80NX19MDA9B65QHT4S5":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":40,"updatedAt":41,"install":42,"resources":55},"01M6FEK80NX19MDA9B65QHT4S5","terminal-ui",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fterminal-ui\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师",[26,27,28],"terminal","ui","terminal ui","2026-11-10 10:12:30",false,"# DevEx Developer Experience TUI Best Practices\n\nComprehensive developer experience guide for building TypeScript terminal user interfaces using Ink (React for CLIs) and Clack prompts. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Building CLI tools with interactive prompts using @clack\u002Fprompts\n- Creating React-based terminal UIs with Ink\n- Handling keyboard input and user interactions\n- Optimizing terminal rendering and preventing flicker\n- Designing developer-friendly CLI experiences\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Rendering & Output | CRITICAL | `render-` |\n| 2 | Input & Keyboard | CRITICAL | `input-` |\n| 3 | Component Patterns | HIGH | `tuicomp-` |\n| 4 | State & Lifecycle | HIGH | `tuistate-` |\n| 5 | Prompt Design | MEDIUM-HIGH | `prompt-` |\n| 6 | UX & Feedback | MEDIUM | `ux-` |\n| 7 | Configuration & CLI | MEDIUM | `tuicfg-` |\n| 8 | Robustness & Compatibility | LOW-MEDIUM | `robust-` |\n\n## Quick Reference\n\n### 1. Rendering & Output (CRITICAL)\n\n- `render-single-write` - Batch Terminal Output in Single Write\n- `render-overwrite-dont-clear` - Overwrite Content Instead of Clear and Redraw\n- `render-synchronized-output` - Use Synchronized Output Protocol for Animations\n- `render-60fps-baseline` - Target 60fps for Smooth Animation\n- `render-partial-updates` - Update Only Changed Regions\n- `render-escape-sequence-batching` - Defer ANSI Escape Code Generation to Final Output\n\n### 2. Input & Keyboard (CRITICAL)\n\n- `input-useinput-hook` - Use useInput Hook for Keyboard Handling\n- `input-immediate-feedback` - Provide Immediate Visual Feedback for Input\n- `input-modifier-keys` - Handle Modifier Keys Correctly\n- `input-isactive-focus` - Use isActive Option for Focus Management\n- `input-escape-routes` - Always Provide Escape Routes\n\n### 3. Component Patterns (HIGH)\n\n- `tuicomp-box-flexbox` - Use Box Component with Flexbox for Layouts\n- `tuicomp-text-styling` - Use Text Component for All Visible Content\n- `tuicomp-measure-element` - Use measureElement for Dynamic Sizing\n- `tuicomp-static-for-logs` - Use Static Component for Log Output\n- `tuicomp-percentage-widths` - Use Percentage Widths for Responsive Layouts\n- `tuicomp-border-styles` - Use Border Styles for Visual Structure\n\n### 4. State & Lifecycle (HIGH)\n\n- `tuistate-useapp-exit` - Use useApp Hook for Application Lifecycle\n- `tuistate-cleanup-effects` - Always Clean Up Effects on Unmount\n- `tuistate-functional-updates` - Use Functional State Updates to Avoid Stale Closures\n- `tuistate-usecallback-stable` - Stabilize Callbacks with useCallback\n- `tuistate-usememo-expensive` - Memoize Expensive Computations with useMemo\n\n### 5. Prompt Design (MEDIUM-HIGH)\n\n- `prompt-group-flow` - Use Clack group() for Multi-Step Prompts\n- `prompt-validation` - Validate Input Early with Descriptive Messages\n- `prompt-cancellation` - Handle Cancellation Gracefully with isCancel\n- `prompt-spinner-tasks` - Use Spinner and Tasks for Long Operations\n- `prompt-custom-render` - Build Custom Prompts with @clack\u002Fcore\n\n### 6. UX & Feedback (MEDIUM)\n\n- `ux-progress-indicators` - Show Progress for Operations Over 1 Second\n- `ux-color-semantics` - Use Colors Semantically and Consistently\n- `ux-error-messages` - Write Actionable Error Messages\n- `ux-next-steps` - Show Next Steps After Completion\n- `ux-intro-outro` - Use Intro and Outro for Session Framing\n\n### 7. Configuration & CLI (MEDIUM)\n\n- `tuicfg-sensible-defaults` - Provide Sensible Defaults for All Options\n- `tuicfg-env-vars` - Support Standard Environment Variables\n- `tuicfg-flags-over-args` - Prefer Flags Over Positional Arguments\n- `tuicfg-help-system` - Implement Comprehensive Help System\n- `tuicfg-json-output` - Support Machine-Readable Output Format\n\n### 8. Robustness & Compatibility (LOW-MEDIUM)\n\n- `robust-tty-detection` - Detect TTY and Adjust Behavior Accordingly\n- `robust-signal-handling` - Handle Process Signals Gracefully\n- `robust-exit-codes` - Use Meaningful Exit Codes\n- `robust-terminal-restore` - Always Restore Terminal State on Exit\n- `robust-graceful-degradation` - Degrade Gracefully for Limited Terminals\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n- [render-single-write](references\u002Frender-single-write.md) - Example rule file\n- [input-useinput-hook](references\u002Finput-useinput-hook.md) - Example rule file\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Fterminal-ui",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill terminal-ui",{"tool":48,"command":49},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill terminal-ui",{"tool":51,"command":52},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill terminal-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fterminal-ui\u002FSKILL.md",true,[],[57,71,81,90,96,103],{"skillNo":58,"name":59,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":67,"publishedAt":29},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[62],{"categoryNo":63,"categoryName":64,"taxonomyType":65,"taxonomyTypeDesc":66},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[68,69,70],"model","model hierarchy","model hierarchy skill",{"skillNo":72,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":77,"publishedAt":29},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[76],{"categoryNo":63,"categoryName":64,"taxonomyType":65,"taxonomyTypeDesc":66},[78,79,80],"MCP","zoom","zoom mcp",{"skillNo":82,"name":83,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":29},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[87,88,89,79],"sdk","zoom apps sdk","apps",{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":29},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[92],{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":102,"publishedAt":29},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[101],{"categoryNo":63,"categoryName":64,"taxonomyType":65,"taxonomyTypeDesc":66},[98],{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":29},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[105]]