container-presentational
OfficialUncouples data logic from UI in Vue components.
AuthorPatternsDev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Data-heavy Vue components often mix business logic with presentation, making testing and reuse harder. This skill teaches a clear separation using container/presentational patterns, improving maintainability and scalability of Vue interfaces.
Core Features & Use Cases
- Presentational components render UI and are stateless, while container components manage data fetching and state.
- Composables offer a lightweight alternative for sharing logic without wrappers, supporting clean architecture.
- Use cases include refactoring legacy Vue components into reusable, testable units and designing scalable UI architectures.
Quick Start
Refactor your Vue app to separate data logic from presentation by introducing container and presentational components.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: container-presentational Download link: https://github.com/PatternsDev/skills/archive/main.zip#container-presentational Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.