Patterns.dev
Official@patternsdev
Offers architectural design patterns and performance optimization strategies for modern React and Vue frontend development ecosystems.
Agent Skills by Patterns.dev
Showing 57 vetted skills indexed across 1 GitHub repositories.
PatternsDevrenderless-components
Encapsulate Vue component logic without rendering markup using scoped slots.
PatternsDevprovide-inject
Share parent data to descendant components using provide() and inject().
PatternsDevcontainer-presentational
Separate data fetching and business logic from presentation in Vue applications.
PatternsDevcomposables
Create Vue composables that share reactive state and lifecycle logic across components.
PatternsDevasync-components
Lazy-load heavy Vue components with defineAsyncComponent and dynamic imports.
PatternsDevcomponents
Create reusable Vue single-file components with template, script setup, and styles.
PatternsDevstate-management
Create reactive Vue stores with Pinia defineStore for shared state.
PatternsDevscript-setup
Simplify Vue 3 component scripts using script setup, defineProps, and defineEmits.
PatternsDevrender-functions
Build Vue components programmatically using render functions and JSX.
PatternsDevdynamic-components
Switch Vue components dynamically using the is binding and KeepAlive.
PatternsDevdata-provider
Encapsulate data fetching and state in Vue 3 scoped slots.
PatternsDevobserver-pattern
Implement an Observable API with subscribe, unsubscribe, and notify methods.
PatternsDevfactory-pattern
Define object creation logic with factory functions using ES6 arrow syntax.
PatternsDevdynamic-import
Dynamically load React components with React.lazy and Suspense.
PatternsDevprpl
Prioritize critical resources and cache routes for faster initial page loads.
PatternsDevproxy-pattern
Intercept and standardize JavaScript object interactions with Proxy traps and Reflect.
PatternsDevvite-bundle-optimization
Optimizes Vite bundle size and build performance for React projects.
PatternsDevroute-based
Split React Router routes into dynamically imported code chunks.
PatternsDevmediator-pattern
Coordinate component interactions through a central mediator in JavaScript/TypeScript projects.
PatternsDevmodule-pattern
Organize JavaScript code into modular units using ES2015 imports and exports.
PatternsDevview-transitions
Implement DOM transitions with the View Transitions API.
PatternsDevloading-sequence
Optimizes the loading order of CSS, fonts, and JavaScript to improve Core Web Vitals.
PatternsDevprototype-pattern
Implement the prototype pattern with ES6 classes and Object.create.
PatternsDevimport-on-interaction
Defer non-critical modules until user interactions using dynamic import().
Frequently Asked Questions About Patterns.dev
FAQPage SchemaWhat specific frontend tasks are enabled by these patterns?▼
These patterns enable advanced state management, efficient code-splitting, server-side rendering optimization, and component composition. Developers can implement complex UI logic using render props, hooks, and provider patterns while ensuring high performance through tree-shaking and lazy-loading techniques.
Who is the target audience for these architectural patterns?▼
The content is designed for frontend engineers, software architects, and full-stack developers working with React or Vue. It is particularly useful for those building high-traffic web applications requiring strict performance budgets and scalable component architectures.
Are these patterns open-source or require specific licensing?▼
Patterns.dev is an educational resource providing architectural guidance and implementation examples. The patterns themselves are industry-standard design concepts and are free to implement in any commercial or personal project without licensing restrictions.