Rithvik Manikandan avatar

Rithvik Manikandan

Community

@rithm84

7Followers
|
7Public Repos
|
16Published Skills

Rithvik Manikandan's skill registry covers frontend animation craft, Chrome DevTools debugging, architecture diagramming, and GitHub CLI operations for web developers.

Skills Distribution
DomainUI/UX & Crea...Animation & Motion.. (35%)Browser Debugging .. (30%)Architecture Diagr.. (15%)Frontend Component.. (12%)

Agent Skills by Rithvik Manikandan

Showing 16 vetted skills indexed across 1 GitHub repositories.

rithm84rithm84

gh-cli

Reference GitHub CLI commands for repositories, issues, pull requests, Actions, and releases.

Community
Intermediate
rithm84rithm84

excalidraw

Generate architecture diagrams on a live Excalidraw canvas via MCP tools.

Community
Advanced
rithm84rithm84

auto-diagram

Analyze a codebase and generate an Excalidraw architecture diagram automatically.

Community
Advanced
rithm84rithm84

agent-browser

Automates browser navigation, interaction, and verification for web pages and dev servers.

Community
Intermediate
rithm84rithm84

debug-optimize-lcp

Diagnose and optimize Largest Contentful Paint using Chrome DevTools MCP performance traces.

Community
Intermediate
rithm84rithm84

troubleshooting

Diagnoses and fixes Chrome DevTools MCP server connection and configuration issues.

Community
Intermediate
rithm84rithm84

chrome-devtools

Automates browser debugging and interaction through Chrome DevTools MCP tools.

Community
Intermediate
rithm84rithm84

memory-leak-debugging

Diagnose JavaScript and Node.js memory leaks using Chrome DevTools MCP heap snapshot tools.

Community
Advanced
rithm84rithm84

a11y-debugging

Audit web page accessibility using Chrome DevTools MCP and web.dev guidelines.

Community
Intermediate
rithm84rithm84

pick-ui-library

Recommends curated frontend libraries for UI, animation, charts, state, and styling tasks.

Community
Basic
rithm84rithm84

animate

Implements UI animations using CSS transitions, WAAPI, or Motion with defined easing and duration rules.

Community
Intermediate
rithm84rithm84

prototype

Builds multiple divergent UI variants behind a keyboard-driven visual picker for live comparison.

Community
Intermediate
rithm84rithm84

apple-design

Applies Apple's fluid interface and spring animation principles to web UI development.

Community
Intermediate
rithm84rithm84

review-animations

Reviews animation and motion code against Emil Kowalski's design engineering standards.

Community
Intermediate
rithm84rithm84

animation-vocabulary

Maps vague descriptions of web motion effects to their exact animation terminology.

Community
Basic
rithm84rithm84

emil-design-eng

Reviews and improves UI animation, easing, and interaction code using design engineering principles.

Community
Intermediate

Frequently Asked Questions About Rithvik Manikandan

FAQPage Schema
What 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.