frontend-patterns
This skill provides a collection of React and Next.js development patterns, including component composition, state management, performance optimization, and accessibility best practices.
Is frontend-patterns safe to install?
Safe to install: our audit of frontend-patterns's source files found 0 shell commands, 1 external URL, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides code snippets and patterns for reference. It does not execute shell commands or perform file system operations.
How we audit skills: our security review methodology.
Who is this skill for?
Frontend developers using React and Next.js who want to implement standardized patterns for UI components, data fetching, and state management.
What can you do with it?
- Building reusable React components using composition and compound patterns
- Managing application state with Context and Reducer
- Implementing custom hooks for data fetching, debouncing, and toggling
- Optimizing performance through memoization, lazy loading, and list virtualization
- Handling form validation and error boundaries
- Adding animations with Framer Motion
- Implementing accessible UI patterns like keyboard navigation and focus management
How good is this skill?
Quality score: 5/10. The skill provides clear, well-documented code examples for common frontend tasks. It is highly focused and follows established React best practices.
What does the skill file contain?
# Frontend Development Patterns Modern frontend patterns for React, Next.js, and performant user interfaces. ## When to Activate - Building React components (composition, props, rendering) - Managing state (useState, useReducer, Zustand, Context) - Implementing data fetching (SWR, React Query, server components) - Optimizing performance (memoization, virtualization, code splitting) - Working with forms (validation, controlled inputs, Zod schemas) - Handling client-side routing and navigation - Building accessible, responsive UI patterns ## Component Patterns ### Composition Over Inheritan...
Frequently asked questions
Does this skill automatically refactor my existing code?
No. This skill provides code patterns and examples for you to implement manually.
What libraries are required to use these patterns?
The patterns reference React, Next.js, Framer Motion, and @tanstack/react-virtual.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
remotion-to-hyperframes
157.2KDevelopers migrating existing Remotion video projects to the HyperFrames framework
The remotion-to-hyperframes skill translates Remotion (React) video compositions into HyperFrames (HTML + GSAP) compositions. It uses a linting process to identify incompatible React patterns, maps Remotion APIs to HyperFrames equivalents, generates HTML/CSS/GSAP output, and validates the translation using SSIM-based image comparison against a tiered test corpus.
firebase-app-hosting-basics
99.2KDevelopers deploying full-stack web applications to Firebase App Hosting
This skill assists with deploying and managing full-stack web applications using Firebase App Hosting. It provides guidance on configuration, secret management, and deployment workflows for frameworks like Next.js and Angular.