code-patterns-library

Name: code-patterns-library
Availability: InStock
Author: lunacy

Provide reusable code patterns and design templates for React hooks and API responses.

4|1|Updated Jan 4, 2026

Search Tags:#design patterns #code patterns #repository pattern #react hooks #reusable code #glue coding

Ready to run

npx skills add https://github.com/hebertzhu/vibecoding-rules-skills --skill code-patterns-library

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: code-patterns-library
Source: https://github.com/hebertzhu/vibecoding-rules-skills/tree/main/cn/skills/code-patterns-library
Command: npx skills add https://github.com/hebertzhu/vibecoding-rules-skills --skill code-patterns-library

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers avoid reinventing the wheel by providing a curated collection of reusable code patterns and design templates, promoting efficiency and consistency.

Core Features & Use Cases

Glue Coding Philosophy: Prioritizes searching, reusing, and connecting existing solutions over creating new code.
Pattern Library: Offers examples for API response formats, custom React hooks (useDebounce, useLocalStorage, useAsync), the Repository pattern, and UI component composition.
Skeleton Projects: Guides on selecting and integrating mature starter projects for new features.
Use Case: When starting a new feature that requires user authentication, search for and adapt a well-established authentication boilerplate instead of building it from scratch.

Quick Start

Use the code-patterns-library skill to find examples of custom React hooks for debouncing input.

Frequently Asked Questions about code-patterns-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the glue coding philosophy for reusing code patterns?▼

Glue coding prioritizes searching, reusing, and connecting existing solutions over creating new code. It helps developers avoid reinventing the wheel by adapting curated code patterns and design templates to promote efficiency and consistency.

How do I implement custom React hooks for debouncing input and local storage?▼

You can implement custom React hooks for debouncing input by searching the pattern library for existing useDebounce, useLocalStorage, and useAsync templates. These reusable code patterns provide standardized logic for managing asynchronous operations and browser storage.

Can I use the repository pattern for structuring API response formats in React?▼

Yes, the repository pattern can structure API response formats by abstracting data access logic into reusable modules. This UI component composition pattern separates data fetching from presentation, making it easier to swap out API endpoints without modifying React hooks.

What's the best way to start new features without building from scratch?▼

The best way to start new features without building from scratch is integrating mature skeleton projects. Search for and adapt well-established boilerplates, such as authentication starters, then connect modules using reusable code patterns instead of writing new logic.

When should I not use skeleton projects for UI component composition?▼

You should not use skeleton projects for UI component composition when your feature requires highly specialized logic not covered by mature starters. If existing boilerplates introduce excessive dependencies that conflict with your React hooks, building custom code patterns is preferable.