{
  "markdown": "![Patterns.dev Skills](https://res.cloudinary.com/ddxwdqwkr/image/upload/v1770936713/patterns.dev/patterns-cover.webp)\n\n# Patterns.dev Skills\n\n[Agent Skills](https://agentskills.io) for JavaScript, React, and Vue development. From [patterns.dev](https://patterns.dev).\n\n58 individual skills. Install only the patterns you need.\n\n## Quick Start\n\n**By technology** — install skills in a stack:\n\n```bash\nnpx skills add PatternsDev/skills/javascript\nnpx skills add PatternsDev/skills/react\nnpx skills add PatternsDev/skills/vue\n```\n\n**By skill name** — install only the specific patterns you want:\n\n```bash\nnpx skills add PatternsDev/skills --skill hooks-pattern\nnpx skills add PatternsDev/skills --skill singleton-pattern\nnpx skills add PatternsDev/skills --skill composables\nnpx skills add PatternsDev/skills --skill ai-ui-patterns\n```\n\n> Individual `--skill` values use the skill folder name (e.g. `hooks-pattern`, `ai-ui-patterns`), not the path (`react/hooks-pattern`).\n\n## Manual Installation\n\nClone the repo and copy the skill directories you want:\n\n```bash\ncp -r react/hooks-pattern ~/.cursor/skills/\ncp -r javascript/singleton-pattern ~/.cursor/skills/\ncp -r vue/composables ~/.cursor/skills/\n```\n\nWorks with `.cursor/skills/`, `.claude/skills/`, or `.codex/skills/`.\n\n## [JavaScript Skills](javascript/)\n\n| Skill | Type | Description |\n|-------|------|-------------|\n| [`singleton-pattern`](javascript/singleton-pattern/SKILL.md) | Design | Share a single global instance throughout our application |\n| [`observer-pattern`](javascript/observer-pattern/SKILL.md) | Design | Use observables to notify subscribers when an event occurs |\n| [`proxy-pattern`](javascript/proxy-pattern/SKILL.md) | Design | Intercept and control interactions to target objects |\n| [`prototype-pattern`](javascript/prototype-pattern/SKILL.md) | Design | Share properties among many objects of the same type |\n| [`module-pattern`](javascript/module-pattern/SKILL.md) | Design | Split up your code into smaller, reusable pieces |\n| [`mixin-pattern`](javascript/mixin-pattern/SKILL.md) | Design | Add functionality to objects or classes without inheritance |\n| [`mediator-pattern`](javascript/mediator-pattern/SKILL.md) | Design | Use a central mediator object to handle communication between components |\n| [`flyweight-pattern`](javascript/flyweight-pattern/SKILL.md) | Design | Reuse existing instances when working with identical objects |\n| [`factory-pattern`](javascript/factory-pattern/SKILL.md) | Design | Use a factory function in order to create objects |\n| [`command-pattern`](javascript/command-pattern/SKILL.md) | Design | Decouple methods that execute tasks by sending commands to a commander |\n| [`provider-pattern`](javascript/provider-pattern/SKILL.md) | Design | Make data available to multiple child components |\n| [`loading-sequence`](javascript/loading-sequence/SKILL.md) | Performance | Optimize your loading sequence to improve how quickly your app is usable |\n| [`static-import`](javascript/static-import/SKILL.md) | Performance | Import code that has been exported by another module |\n| [`dynamic-import`](javascript/dynamic-import/SKILL.md) | Performance | Import parts of your code on demand |\n| [`import-on-visibility`](javascript/import-on-visibility/SKILL.md) | Performance | Load non-critical components when they are visible in the viewport |\n| [`import-on-interaction`](javascript/import-on-interaction/SKILL.md) | Performance | Load non-critical resources when a user interacts with UI requiring it |\n| [`route-based`](javascript/route-based/SKILL.md) | Performance | Dynamically load components based on the current route |\n| [`bundle-splitting`](javascript/bundle-splitting/SKILL.md) | Performance | Split your code into small, reusable pieces |\n| [`prpl`](javascript/prpl/SKILL.md) | Performance | Optimize initial load through precaching, lazy loading, and minimizing roundtrips |\n| [`tree-shaking`](javascript/tree-shaking/SKILL.md) | Performance | Reduce the bundle size by eliminating dead code |\n| [`preload`](javascript/preload/SKILL.md) | Performance | Inform the browser of critical resources before they are discovered |\n| [`prefetch`](javascript/prefetch/SKILL.md) | Performance | Fetch and cache resources that may be requested some time soon |\n| [`third-party`](javascript/third-party/SKILL.md) | Performance | Reduce the performance impact third-party scripts have on your site |\n| [`virtual-lists`](javascript/virtual-lists/SKILL.md) | Performance | Optimize list performance with list virtualization |\n| [`compression`](javascript/compression/SKILL.md) | Performance | Reduce the time needed to transfer scripts over the network |\n| [`islands-architecture`](javascript/islands-architecture/SKILL.md) | Rendering | Small, focused chunks of interactivity within server-rendered web pages |\n| [`view-transitions`](javascript/view-transitions/SKILL.md) | Rendering | Animate page transitions using the View Transitions API |\n\n## [React Skills](react/)\n\n| Skill | Type | Description |\n|-------|------|-------------|\n| [`hooks-pattern`](react/hooks-pattern/SKILL.md) | Design | Use functions to reuse stateful logic among multiple components |\n| [`hoc-pattern`](react/hoc-pattern/SKILL.md) | Design | Pass reusable logic down as props to components |\n| [`compound-pattern`](react/compound-pattern/SKILL.md) | Design | Create multiple components that work together to perform a single task |\n| [`render-props-pattern`](react/render-props-pattern/SKILL.md) | Design | Pass JSX elements to components through props |\n| [`presentational-container-pattern`](react/presentational-container-pattern/SKILL.md) | Design | Enforce separation of concerns by separating the view from the application logic |\n| [`ai-ui-patterns`](react/ai-ui-patterns/SKILL.md) | Design | Design patterns for building AI-powered interfaces like chatbots and assistants |\n| [`react-2026`](react/react-2026/SKILL.md) | Design | Comprehensive guide to building React apps with a modern 2026 stack |\n| [`client-side-rendering`](react/client-side-rendering/SKILL.md) | Rendering | Render your application's UI on the client |\n| [`server-side-rendering`](react/server-side-rendering/SKILL.md) | Rendering | Generate HTML to be rendered on the server in response to a user request |\n| [`static-rendering`](react/static-rendering/SKILL.md) | Rendering | Deliver pre-rendered HTML content that was generated when the site was built |\n| [`incremental-static-rendering`](react/incremental-static-rendering/SKILL.md) | Rendering | Update static content after you have built your site |\n| [`streaming-ssr`](react/streaming-ssr/SKILL.md) | Rendering | Stream HTML to the client as it is generated on the server |\n| [`progressive-hydration`](react/progressive-hydration/SKILL.md) | Rendering | Delay loading JavaScript for less important parts of the page |\n| [`react-server-components`](react/react-server-components/SKILL.md) | Rendering | Server Components compliment SSR, rendering without adding to the JS bundle |\n| [`react-selective-hydration`](react/react-selective-hydration/SKILL.md) | Rendering | Combine streaming server-side rendering with selective hydration |\n\n## [Vue Skills](vue/)\n\n| Skill | Type | Description |\n|-------|------|-------------|\n| [`components`](vue/components/SKILL.md) | Design | Self-contained modules that couple markup, logic, and styles |\n| [`composables`](vue/composables/SKILL.md) | Design | Functions to encapsulate and reuse stateful logic among multiple components |\n| [`script-setup`](vue/script-setup/SKILL.md) | Design | Compile-time syntactic sugar for using the Composition API |\n| [`state-management`](vue/state-management/SKILL.md) | Design | Manage application level state between components |\n| [`provide-inject`](vue/provide-inject/SKILL.md) | Design | Have nested components access data without using props |\n| [`dynamic-components`](vue/dynamic-components/SKILL.md) | Design | Dynamically switch between components with the special component element |\n| [`async-components`](vue/async-components/SKILL.md) | Performance | Optimize web app performance by asynchronously loading components |\n| [`render-functions`](vue/render-functions/SKILL.md) | Design | Create component templates with programmatic JavaScript |\n| [`renderless-components`](vue/renderless-components/SKILL.md) | Design | Components that don't render their own markup |\n| [`container-presentational`](vue/container-presentational/SKILL.md) | Design | Enforce separation of concerns by separating the view from the application logic |\n| [`data-provider`](vue/data-provider/SKILL.md) | Design | Utilize renderless components for managing and providing data |\n\n## How skills differ from patterns.dev documentation\n\nThe [patterns.dev](https://patterns.dev) website includes interactive CodeSandbox embeds, animated videos, diagrams, and visual walkthroughs. The skills here are **agent-optimized**, stripped down to just prose and code blocks. No images, no iframes, no visual assets.\n\nFor the full visual learning experience, visit [patterns.dev](https://patterns.dev).\n\nIf you want a more explicit comparison of positioning and scope, see [KEY-DIFFS.md](KEY-DIFFS.md) for notes on how these skills differ from Vercel's skills approach.\n\n## Resources\n\n- [github.com/PatternsDev/skills](https://github.com/PatternsDev/skills) — source repository\n- [patterns.dev](https://patterns.dev) — the full pattern library with interactive examples\n- [Agent Skills Specification](https://agentskills.io/specification)\n- [Agent Skills Overview](https://agentskills.io)\n",
  "bytes": 9552,
  "sha": "fa6b0eb7aa063019f2baefb6921d18e35699ed04505a9d6e2684d99bd7afe997",
  "repo_slug": "patternsdev/skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_patternsdev_skills_bundle_splitting_1260580b/readme"
}