README EXTRA

<h3 align="center">Pick Your Style:</h3> <p align="center"> <a href="../"><img src="../assets/badge-style-awesome.svg" alt="Awesome" height="28"></a> <a href="README_EXTRA.md"><img src="../assets/badge-style-extra.svg" alt="Extra" height="28" style="border: 2px solid #6a6a8a; border-radius: 4px;"></a> <a href="README_CLASSIC.md"><img src="../assets/badge-style-classic.svg" alt="Classic" height="28"></a> <a href="README_FLAT_ALL_AZ.md"><img src="../assets/badge-style-flat.svg" alt="Flat" height="28"></a> </p> <div align="center" id="awesome-claude-code">

</div> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/terminal-header.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/terminal-header-light-anim-lineprint.svg"> <img src="../assets/terminal-header-light-anim-lineprint.svg" alt="Awesome Claude Code Terminal"> </picture> <div align="center"> <br /> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/repo-ticker.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/repo-ticker-light.svg"> <img src="../assets/repo-ticker-light.svg" alt="Featured Claude Code Projects" width="100%"> </picture> </div> <br> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/info-terminal.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/info-terminal-light-vintage.svg"> <img src="../assets/info-terminal-light-vintage.svg" alt="System Info Terminal" width="100%"> </picture> <br> <div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/intro-terminal.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/intro-terminal-light-vintage.svg"> <img src="../assets/intro-terminal-light-vintage.svg" alt="About Claude Code" width="100%" style="max-width: 900px;"> </picture> </div> <div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/designed-by-badge.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/designed-by-badge-light.svg"> <img src="../assets/designed-by-badge-light.svg" alt="Designed by Claude Code Web" width="280"> </picture> <br> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/disclaimer.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/disclaimer-light.svg"> <img src="../assets/disclaimer-light.svg" alt="Disclaimer: Not affiliated or endorsed by Anthropic PBC. Claude Code is a product of Anthropic." width="320"> </picture> </div> <div align="center"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../assets/thinking-asterisk.svg" alt="*" width="18" /> <a href="https://git.io/typing-svg"><img align="center" src="https://readme-typing-svg.demolab.com/?font=Fira+Code&weight=600&duration=3000&pause=100&color=F7080D&width=300&lines=Lollygagging...;Skedaddling...;Bumbershooting...;Widdershinning...;Higgledy-piggledying...;Doodlebugging...;Fiddle-faddling...;Whimwhamming...;Dilly-dallying...;Flapdoodling...;Ballyhooing...;Galumphing...;Razzle-dazzling...;Tiddle-taddling...;Zigzagging...;Twinkletoeing...;Puddle-jumping...;Snicker-snacking...;Jibber-jabbering...;Frabjoussing...;Piffle-puffling...;Whirligigging...;Bibbity-bobbitying...;" /></a> </div> <div align="center">

⚡ TERMINAL NAVIGATION ⚡

<table> <tr> <td align="center"> <a href="#agent-skills-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-skills.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-skills-light-anim-lineprint.svg"> <img src="../assets/card-skills-light-anim-lineprint.svg" alt="Agent Skills" width="200"/> </picture> </a> </td> <td align="center"> <a href="#workflows--knowledge-guides-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-workflows.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-workflows-light-anim-lineprint.svg"> <img src="../assets/card-workflows-light-anim-lineprint.svg" alt="Workflows" width="200"/> </picture> </a> </td> <td align="center"> <a href="#tooling-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-tooling.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-tooling-light-anim-lineprint.svg"> <img src="../assets/card-tooling-light-anim-lineprint.svg" alt="Tooling" width="200"/> </picture> </a> </td> </tr> <tr> <td align="center"> <a href="#status-lines-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-statusline.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-statusline-light-anim-lineprint.svg"> <img src="../assets/card-statusline-light-anim-lineprint.svg" alt="Status Lines" width="200"/> </picture> </a> </td> <td align="center"> <a href="#hooks-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-custom.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-custom-light-anim-lineprint.svg"> <img src="../assets/card-custom-light-anim-lineprint.svg" alt="Hooks" width="200"/> </picture> </a> </td> <td align="center"> <a href="#slash-commands-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-commands.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-commands-light-anim-lineprint.svg"> <img src="../assets/card-commands-light-anim-lineprint.svg" alt="Slash Commands" width="200"/> </picture> </a> </td> </tr> <tr> <td align="center"> <a href="#claudemd-files-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-config.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-config-light-anim-lineprint.svg"> <img src="../assets/card-config-light-anim-lineprint.svg" alt="CLAUDE.md Files" width="200"/> </picture> </a> </td> <td align="center"> <a href="#alternative-clients-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-clients.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-clients-light-anim-lineprint.svg"> <img src="../assets/card-clients-light-anim-lineprint.svg" alt="Alternative Clients" width="200"/> </picture> </a> </td> <td align="center"> <a href="#official-documentation-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/card-docs.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/card-docs-light-anim-lineprint.svg"> <img src="../assets/card-docs-light-anim-lineprint.svg" alt="Documentation" width="200"/> </picture> </a> </td> </tr> </table> </div> <br> <div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/latest-additions-header.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/latest-additions-header-light.svg"> <img src="../assets/latest-additions-header-light.svg" alt="LATEST ADDITIONS"> </picture> </div>

<a href="https://github.com/jarrodwatts/claude-hud"><img src="../assets/badge-claude-hud.svg" alt="Claude HUD"></a>
A really stacked status line that exposes just about everything you might need - context usage, tools, agents, todos, etc. Highly configurable and actively maintained at the time of writing - code quality is strong.

<a href="https://github.com/Astro-Han/claude-pace"><img src="../assets/badge-claude-pace.svg" alt="claude-pace"></a>
A lightweight Bash + jq statusline for Claude Code that displays rate limit pace delta (burn rate vs. time remaining), 5h/7d usage percentage, context window usage, git branch and diff stats. Compares current consumption rate against time remaining in each rate limit window to indicate whether quota is being used faster or slower than the window allows. Single file with no external dependencies beyond jq.

<a href="https://github.com/rullerzhou-afk/clawd-on-desk"><img src="../assets/badge-clawd-on-desk.svg" alt="Clawd on Desk"></a>
A desktop pet that reacts to your Claude Code sessions in real-time — thinking, typing, juggling, sleeping, and more. Yep. It's undeniably endearing. And at the end of the day, isn't that what Claude Code is all about?

<br> <div align="left"> <div style="overflow-x:auto;white-space:nowrap;text-align:left;"> <div style="height:48px;width:400px;overflow:hidden;display:block;"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-header.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-header-light-anim-scanline.svg"> <img src="../assets/toc-header-light-anim-scanline.svg" alt="Directory Listing" height="48" style="height:48px;max-width:none;"> </picture></div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#agent-skills-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-row-skills.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-row-skills-light-anim-scanline.svg"> <img src="../assets/toc-row-skills-light-anim-scanline.svg" alt="Agent Skills" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#skills-general"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-general.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-general-light-anim-scanline.svg"> <img src="../assets/toc-sub-general-light-anim-scanline.svg" alt="General" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#workflows--knowledge-guides-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-row-workflows.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-row-workflows-light-anim-scanline.svg"> <img src="../assets/toc-row-workflows-light-anim-scanline.svg" alt="Workflows & Knowledge Guides" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#workflows-general"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-general.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-general-light-anim-scanline.svg"> <img src="../assets/toc-sub-general-light-anim-scanline.svg" alt="General" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#teams"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-teams.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-teams-light-anim-scanline.svg"> <img src="../assets/toc-sub-teams-light-anim-scanline.svg" alt="Teams" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#ralph-wiggum"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-ralph-wiggum.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-ralph-wiggum-light-anim-scanline.svg"> <img src="../assets/toc-sub-ralph-wiggum-light-anim-scanline.svg" alt="Ralph Wiggum" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#tooling-"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-row-tooling.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-row-tooling-light-anim-scanline.svg"> <img src="../assets/toc-row-tooling-light-anim-scanline.svg" alt="Tooling" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#tooling-general"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-general.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-general-light-anim-scanline.svg"> <img src="../assets/toc-sub-general-light-anim-scanline.svg" alt="General" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#ide-integrations"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-ide.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-ide-light-anim-scanline.svg"> <img src="../assets/toc-sub-ide-light-anim-scanline.svg" alt="IDE Integrations" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#usage-monitors"> <picture> <source media="(prefers-color-scheme: dark)" srcset="../assets/toc-sub-monitors.svg"> <source media="(prefers-color-scheme: light)" srcset="../assets/toc-sub-monitors-light-anim-scanline.svg"> <img src="../assets/toc-sub-monitors-light-anim-scanline.svg" alt="Usage Monitors" height="40" style="height:40px;max-width:none;"> </picture> </a> </div> <div style="height:40px;width:400px;overflow:hidden;display:block;"> <a href="#orchestrators"> <pict