Rithvik Manikandan
Community@rithm84
Rithvik Manikandan's skill registry covers frontend animation craft, Chrome DevTools debugging, architecture diagramming, and GitHub CLI operations for web developers.
Agent Skills by Rithvik Manikandan
Showing 16 vetted skills indexed across 1 GitHub repositories.
gh-cli
Reference GitHub CLI commands for repositories, issues, pull requests, Actions, and releases.
excalidraw
Generate architecture diagrams on a live Excalidraw canvas via MCP tools.
auto-diagram
Analyze a codebase and generate an Excalidraw architecture diagram automatically.
agent-browser
Automates browser navigation, interaction, and verification for web pages and dev servers.
debug-optimize-lcp
Diagnose and optimize Largest Contentful Paint using Chrome DevTools MCP performance traces.
troubleshooting
Diagnoses and fixes Chrome DevTools MCP server connection and configuration issues.
chrome-devtools
Automates browser debugging and interaction through Chrome DevTools MCP tools.
memory-leak-debugging
Diagnose JavaScript and Node.js memory leaks using Chrome DevTools MCP heap snapshot tools.
a11y-debugging
Audit web page accessibility using Chrome DevTools MCP and web.dev guidelines.
pick-ui-library
Recommends curated frontend libraries for UI, animation, charts, state, and styling tasks.
animate
Implements UI animations using CSS transitions, WAAPI, or Motion with defined easing and duration rules.
prototype
Builds multiple divergent UI variants behind a keyboard-driven visual picker for live comparison.
apple-design
Applies Apple's fluid interface and spring animation principles to web UI development.
review-animations
Reviews animation and motion code against Emil Kowalski's design engineering standards.
animation-vocabulary
Maps vague descriptions of web motion effects to their exact animation terminology.
emil-design-eng
Reviews and improves UI animation, easing, and interaction code using design engineering principles.
Frequently Asked Questions About Rithvik Manikandan
FAQPage SchemaWhat tasks can I accomplish with rithm84's skills?ā¼
You can debug LCP and Core Web Vitals, trace memory leaks via heap snapshots, audit accessibility (ARIA, focus, contrast), generate Excalidraw architecture diagrams, automate browser interactions, build and review UI animations, prototype component variants, pick frontend libraries, and run full GitHub CLI operations.
Who are these skills designed for?ā¼
Frontend engineers, design engineers, and web developers focused on UI polish, motion craft, and performance. The animation skills encode Emil Kowalski's and Apple's design philosophies, while the Chrome DevTools skills target developers debugging page speed, memory, and accessibility issues.
How do the diagramming skills differ from each other?ā¼
The auto-diagram skill analyzes a codebase and generates an architecture diagram with zero configuration. The excalidraw skill renders diagrams from user-provided components, sample diagrams, or textual descriptions, and exports .excalidraw files to PNG or SVG formats.
What are the prerequisites for the debugging skills?ā¼
The LCP, troubleshooting, memory-leak, and a11y skills require Chrome DevTools via MCP (Model Context Protocol) server integration. The chrome-devtools skill explicitly does not apply to --slim mode MCP configurations, and browser automation triggers on dev servers like Vite, Next.js, or localhost ports.
Which skills require explicit invocation versus automatic triggering?ā¼
pick-ui-library, prototype, and review-animations have disable-model-invocation set to true, so they only run when explicitly called. Others like agent-browser, auto-diagram, and the Chrome DevTools debugging skills trigger automatically based on context, file patterns, or dev server activity.