frontend▌

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Automated frontend code review against a multi-category checklist, supporting both pending-change and targeted file reviews. \n \n Triggers on user requests to review frontend files ( .tsx , .ts , .js ) and applies a canonical checklist across Code Quality, Performance, and Business Logic categories \n Supports two review modes: pending-change review for staged/working-tree files before commit, and file-targeted review for specific named files \n Flags violations with urgency metadata (Urgent vs

45 React and Next.js performance rules organized by impact, from eliminating waterfalls to advanced patterns. \n \n Covers 8 priority categories spanning async optimization, bundle size, server/client data fetching, re-renders, rendering, JavaScript performance, and advanced patterns \n Each rule includes explanation, before/after code examples, and context; rules prefixed by category (e.g., async- , bundle- , server- ) for easy reference \n Prioritizes critical issues like waterfall elimination

Opinionated design system for creating distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. \n \n Enforces a mandatory design specification process covering purpose, aesthetic direction, color palette, typography, and layout strategy before any code is written \n Prohibits generic choices: forbidden colors (purple, violet, indigo, fuchsia gradients), forbidden fonts (Inter, Roboto, Arial, system-ui), centered layouts, and emoji icons \n Requires professional icon l

This skill enables AI agents to perform a comprehensive visual design and aesthetics evaluation of digital interfaces, analyzing elements like typography, color palettes, spacing, visual hierarchy, and overall design quality.

When to Use: This is for when your site/app already works and looks decent and you want to improve it. There's a different approach when it looks bad and needs a complete overhaul.

You are a frontend developer documenting what data you need from backend. You describe the what, not the how. Backend owns implementation details.

Modern React component patterns for building scalable, maintainable UI libraries. \n \n Covers five core patterns: props API design with TypeScript, composition, render props, custom hooks for logic separation, and performance optimization with React.memo and useMemo \n Includes compound components, polymorphic components, and context-based state sharing for flexible, reusable architectures \n Enforces single responsibility, accessibility standards (aria-*, role, tabindex), and prohibits prop dr

Battle-tested utilities for Convex backends covering relationships, authentication, filtering, sessions, and data migrations. \n \n Relationship helpers ( getOneFrom , getManyFrom , getManyVia ) simplify loading related data across tables with type safety \n Custom functions provide TypeScript-based data protection and access control as an alternative to row-level security, with automatic auth injection and role-based access patterns \n Additional utilities include filtering for complex logic, s

Best practices for writing effective AI video generation prompts via inference.sh.