Skill UI

A portable, framework-agnostic architecture style for React and React Native frontends. Organizes apps into feature modules with page/screen directories, a strict server-state vs UI-state split, barrel-only cross-module imports, co-located styles, and clear component-promotion rules. Applies to Next.js, Vite, Remix, Expo, and any state/styling stack.

A framework-agnostic discipline ensuring type safety at the network edge of React apps. It establishes a single typed API client as the fetch boundary, enforcing parse-don't-validate rules to transform wire JSON into trusted domain types. Unified error handling and branded identifiers prevent silent bugs, creating a robust foundation for frontend architecture.

This skill enforces strict architectural and performance standards for senior frontend engineers. It guides the creation of scalable React applications using Suspense-first data fetching, feature-based organization, and strict TypeScript discipline. Use it when building components, adding features, fetching data, or refactoring code to ensure maintainability and performance.

Expert in React 19, Next.js 15, and modern frontend architecture. Builds responsive, accessible, high-performance UI components and handles state management, data fetching, and full-stack integration.

A portable CI gate designed to enforce Core Web Vitals (LCP, CLS, INP) budgets and category score floors on production frontend builds. It integrates into CI pipelines to automatically block pull requests if the performance metrics fall below defined Google standards, ensuring consistently fast and reliable user experiences.

This skill specializes in scaffolding production-ready, accessible, and performant React and React Native components. It generates complete component implementations including TypeScript interfaces, tests, styles, and documentation following modern best practices. Ideal for creating consistent, type-safe components with proper structure, hooks, styling, and test coverage.

This skill acts as a frontend security specialist to detect Cross-Site Scripting (XSS) vulnerabilities in React, Vue, Angular, and vanilla JavaScript code. It performs static analysis to identify unsafe DOM manipulation, improper sanitization, and injection points. The tool helps developers secure client-side applications by highlighting dangerous patterns like innerHTML usage, URL injection risks, and framework-specific security issues such as dangerouslySetInnerHTML or v-html directives. It provides severity ratings and remediation suggestions for CWE-79 vulnerabilities.

A portable, framework-agnostic observability system for React and React Native apps. It defines typed event taxonomies, implements non-blocking analytics fan-out, reports real-user Core Web Vitals, and manages user consent. Ensures SSR safety and prevents vendor failures from breaking the application.

A portable discipline for the write path in React or React Native apps using a query/cache layer. It codifies the optimistic-update lifecycle including canceling in-flight queries, snapshotting affected caches, patching instantly, rolling back verbatim on error, and invalidating on success. Ensures the UI feels instant, remains safe on failure, and maintains cache coherence across detail and list views.

Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Provides guidance on CSP configuration, safe DOM manipulation, input validation, clickjacking protection, and secure redirects.

This skill provides a portable, framework-agnostic SEO system for React or React Native-for-web frontends. It centralizes site metadata in a constants module, derives canonical URLs, and generates per-route metadata including titles, descriptions, Open Graph, and Twitter cards. It also produces sitemaps, robots rules, RSS feeds, and typed JSON-LD without requiring manual meta tag copy-pasting.

Create stunning, animation-rich HTML presentations from scratch or convert PowerPoint files. Ideal for talks, pitches, and reports. Zero-dependency, browser-based, with distinctive design and fixed 16:9 stage.