Frontend

Refactors high-complexity React components when complexity > 50 or lines > 300. Provides patterns for extracting hooks, splitting sub-components, simplifying conditionals, and separating API logic. Use before testing to improve maintainability. Not for simple components or third-party wrappers.

Creates distinctive, production-grade frontend interfaces with bold aesthetic choices. Use when building web components, pages, or applications that need memorable, non-generic design.

Comprehensive toolkit for building modern, performant web apps with React, Next.js, TypeScript, and Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and frontend best practices.

Comprehensive design guide with searchable database of 67+ styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 stacks. Generates design systems with priority-based recommendations.

Comprehensive performance optimization guidelines for React and Next.js applications, covering 57 rules across 8 categories. Use when writing, reviewing, or refactoring code to ensure optimal performance patterns.

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, applications, or any UI that needs to stand out with bold aesthetics and avoid generic AI-generated design.

Comprehensive toolkit for building modern React and Next.js apps with TypeScript and Tailwind CSS. Includes automated scripts for component generation, bundle analysis, and project scaffolding.

Generates complete design systems with colors, typography, effects, and accessibility rules using a searchable database. Use when designing or reviewing UI components, pages, or full applications.

Creates a DESIGN.md specification from your inputs (PRD, URL, screenshot) and then generates complete, production-ready frontend code for landing pages, portfolios, blogs, product pages, and more.

Craft distinctive, product-native interfaces using grid-based structural logic and brand-aligned design decisions. Use when creating, redesigning, or reviewing web interfaces that need clear hierarchy and relief from generic SaaS aesthetics.

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Provides nodes and resources for Solana blockchain integration in Godot 4, enabling transactions, wallet connections, NFT minting, and Anchor smart contract calls directly from GDScript.