Frontend Development Patterns

Modern frontend patterns for React, Next.js, and performant user interfaces.

Component Patterns

Composition Over Inheritance

// ✅ GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

related skills

semantically similar in the cross-vendor index

skills.sh

63% match

building-components

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs,…

don't have the plugin yet? install it then click "run inline in claude" again.

implexa · skills ranked by SkillRank

top skills resources guides install github llms.txt x / twitter privacy

Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React…

by @yonatangross

skills.sh

61% match

presentational-container-pattern

Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for…

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI…

This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color…

by @ailabs-393