Skill UI

Learn practical, type-safe patterns for building complex React applications using fp-ts. This guide covers key functional programming concepts like handling optional values (Option), managing failure states (Either), and structuring data fetching and forms, ensuring your code is predictable and robust for React 18/19 and Next.js 14/15.

This comprehensive guide establishes strict architectural and performance standards for senior frontend engineers working with React, TypeScript, and Suspense. It dictates best practices for component design, feature implementation, data fetching (useSuspenseQuery), and code structure (feature-based organization). Use this when building any new component, feature, or handling data mutation to ensure the resulting application is scalable, predictable, and maintainable.

Mastery of modern frontend development using React 19+ and Next.js 15. This skill covers building scalable, high-performance user interfaces, managing complex client-server state, implementing advanced features like Server Components (RSC), and ensuring WCAG accessibility compliance. Ideal for architecting full-stack web applications and optimizing Core Web Vitals.

Guides React Server Components workflows, streaming SSR, code splitting, bundle/image/font optimizations, and Core Web Vitals monitoring to keep Next.js frontends fast and responsive.

This expert specializes in scaffolding complete, production-ready, accessible, and performant React and React Native components. It generates full boilerplate code including TypeScript definitions, unit tests, styles (CSS Modules, Styled-Components, Tailwind), and accessibility hooks, ensuring adherence to modern best practices for scalable frontend architecture.

This skill acts as a comprehensive security scanner specializing in detecting Cross-Site Scripting (XSS) vulnerabilities in client-side code. It performs static analysis across React, Vue, Angular, and vanilla JavaScript, specifically identifying unsafe practices like direct HTML manipulation (innerHTML), raw rendering (v-html), and insecure URL handling. Use it when auditing frontend code for security flaws and needing best practices for secure coding.

Frontend Patterns documents modern React and Next.js UI best practices, covering component composition, compound components, render-props, reusable hooks, and context-reducer state management to build performant interfaces.

A modern, dark-themed UI component library built with React, Tailwind CSS, and Framer Motion. It provides a comprehensive set of components and styles ideal for developing professional dashboards, admin panels, and data-rich applications. Features include advanced glassmorphism effects and tasteful, smooth animations to enhance user experience.

This guide demonstrates how to build a resilient, event-driven architecture for Gamma API integrations when native webhooks are unavailable. It utilizes a poll-based pattern, creating synthetic application-level events (start, completed, failed) by wrapping polling logic within an EventEmitter or message queue. Ideal for building background workers that reliably track and react to the full lifecycle of content generation.

Implements event-driven architecture by integrating Guidewire App Events and webhooks. This allows developers to build event consumers that process critical InsuranceSuite state changes—such as claim creation or policy issuance—in near-real-time, enabling robust, reactive business logic.

Guides Claude Code plugin authors through creating event-driven hooks that validate tool usage, react to outcomes, and gate completion with prompt-based or command hooks, covering PreToolUse, PostToolUse, Stop, Session events, and session context loading.

A comprehensive guide covering Internationalization (i18n) and Localization (L10n) best practices. It details how to build applications that can support multiple languages, regions, and text directions (RTL). Covers implementation patterns for React, Next.js, and Python, along with essential guidelines for handling date/number formats and managing translation keys.