Frontend skills

This skill helps you implement and orchestrate Hotwire patterns (Turbo Frames, Streams, Stimulus) for real-time, interactive Rails UIs.

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

This skill helps you break down feature requests into actionable, implementable plans with tasks, timelines, and clear integration points.

This skill audits Web Audio API code for sound synthesis best practices, helping you improve audio quality and reliability across projects.

This skill analyzes animation code to guide spring vs easing choices and reports findings as file:line notes.

This skill helps review CSS pseudo-element usage and View Transitions API to ensure accessible hover effects, decorative layers, and smooth page transitions.

This skill audits AnimatePresence usage in TypeScript projects, delivering file:line findings and actionable improvements for exit animations and presence

This skill helps you design morphing icons by transforming three-line SVGs between states, enabling smooth, scalable icon transitions.

This skill helps reviewers audit audio feedback in UI for accessibility and UX, outputting file:line findings to guide improvements.

This skill helps you build WebGPU-enabled Three.js apps using TSL shaders, node materials, and compute pipelines for GPU acceleration.

This skill automates browser tasks using minimal CDP tools to start Chrome, navigate pages, run scripts, take screenshots, and extract DOM data.

This skill enforces Flutter design system adherence by replacing hardcoded values with project tokens, enhancing consistency and maintainability.

This skill ensures type-safe navigation with go_router in Flutter apps, providing typed routes, redirection, and transitions for reliable routing.

This skill helps you implement Convex realtime patterns including subscriptions, optimistic updates, intelligent caching, and cursor-based pagination for

This skill enables automated browser interactions using Chrome DevTools Protocol to navigate pages, extract data, and debug frontends.

This skill converts Figma designs to production-ready React components with Tailwind CSS, generating TSX files and assets from a provided Figma URL.

This skill helps you master TanStack Query v5 patterns for server state, including keys, transforms, suspense, and optimistic mutations.

This skill helps you implement accessible shadcn/ui components with Tailwind, Vite, and TanStack Router setup for rapid, consistent UIs.

This skill helps you implement modern React with TypeScript patterns including components, hooks, TanStack Query, forms, and performance optimizations.

This skill automatically interprets scope and executes Plans.md tasks, choosing strategy and parallelizing work to deliver features end-to-end.

This skill automates browser tasks such as opening pages, clicking elements, filling forms, and taking screenshots to streamline web interactions.