Create Adaptable Composable
Skill Verified ActiveCreate a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.
To help developers create adaptable and reusable Vue composables that can seamlessly handle both reactive and non-reactive inputs, ensuring predictable behavior within reactive effects.
Features
- Guides creation of adaptable Vue composables
- Normalizes MaybeRef/MaybeRefOrGetter inputs
- Utilizes toValue()/toRef() within reactive effects
- Provides type utilities (MaybeRef, MaybeRefOrGetter)
- Includes runnable code examples
Use Cases
- Creating reusable Vue composables with flexible input types
- Developing composables that accept plain values, refs, or getters
- Ensuring predictable reactivity when handling various input types
- When user asks for creating adaptable or reusable composables
Non-Goals
- General Vue 3 development best practices (covered by other skills)
- Specific state management patterns beyond input normalization
- UI implementation details not related to composable input handling
Installation
First, add the marketplace
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Learn
100Capture a lesson as a structured knowledge entry. Use when you discover a non-obvious bug, workaround, or pattern worth preserving for future sessions. Use when user says "remember this", "save this lesson", or "this is worth noting".
Typescript Advanced Types
100Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Trader Regime
100Detect current market regime using npx neural-trader — bull/bear/ranging/volatile classification with recommended strategy
Aws Cdk Development
100AWS Cloud Development Kit (CDK) expert for building cloud infrastructure with TypeScript/Python. Use when creating CDK stacks, defining CDK constructs, implementing infrastructure as code, or when the user mentions CDK, CloudFormation, IaC, cdk synth, cdk deploy, or wants to define AWS infrastructure programmatically. Covers CDK app structure, construct patterns, stack composition, and deployment workflows.