Frontend skills

This skill helps you optimize decision speed by reducing choices in navigation, onboarding, and forms, applying Hick's Law to improve user flow.

This skill helps implement art direction for Next.js images using getImageProps to serve viewport-specific compositions and assets.

This skill generates clean, data-focused HTML dashboards from compact JSON or markdown specs using mviz and ECharts.

This skill helps you review React code and avoid useEffect misuse by suggesting better patterns for derived state, event handling, and performance.

This skill helps you implement responsive components using CSS container queries and Tailwind, enabling components to adapt to their container size.

This skill analyzes a project and implements purposeful UI animations for Next.js and Tailwind to enhance hero scenes, hover, and navigation.

This skill helps you manage shadcn/ui components, generate install commands, and assemble multi-component UI features efficiently.

This skill converts a webpage into production-ready Next.js 16 code by scraping and proposing a detailed analysis before code generation.

This skill implements UI workflows in a React TypeScript frontend, wiring to existing APIs with design system compliance and accessible components.

This skill converts slow client-side data fetching to server-side rendering with React Server Components to speed up initial load and improve SEO.

This skill analyzes any website's UI style using ChromeDevTools to extract CSS tokens, animations, and interaction states, then generates a design system

This skill helps you build robust terminal UIs with OpenTUI, guiding framework selection, components, layout, input, and testing practices.

This skill guides you to add robust authentication in TypeScript/JavaScript apps using Better Auth across frontend, backend, and migrations.

This skill provides a systematic Playwright debugging workflow to diagnose flaky tests, timeouts, and element interactability issues quickly.

This skill helps you internationalize Next.js sites with SEO-ready hreflang, localized sitemaps, and language-specific content to improve global reach.

This skill automates GitHub repository creation and Vercel deployment for Next.js projects, streamlining production go-lives and CI/CD setup.

This skill helps you implement Stripe payments and subscriptions in Next.js projects, including checkout, webhooks, and customer management.

This skill helps you build production-quality Rails UIs with maquina_components, using Tailwind and data attributes to ensure consistent, accessible interfaces.

This skill helps you implement and optimize Turborepo monorepos, enabling efficient task pipelines, caching, and cross-package orchestration.

This skill helps you implement RemixIcon icons across web, React, and Vue projects with line and fill variants for consistent UI.

This skill helps you implement accessible shadcn/ui components in React apps using Tailwind and Radix, speeding UI development and design system integration.