skills.rest
mambisi
mambisiCOMMUNITY
Explore all skills by this author →
𝕏@mambisiGitHub

slots-and-composition

Build and integrate pocopine components using slots and the pp-as directive.

Updated Jun 1, 2026
Search Tags:#ui development#component composition#slots#scoped slots#pocopine
One-click install
npx skills add https://github.com/mambisi/pocopine-skills --skill slots-and-composition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slots-and-composition
Source: https://github.com/mambisi/pocopine-skills/tree/main/slots-and-composition
Command: npx skills add https://github.com/mambisi/pocopine-skills --skill slots-and-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers to create and integrate complex pocopine components with ease, leveraging slots, directives, and scoped bindings.

Core Features & Use Cases

  • Component Composition: Build reusable components using slots for insertion points.
  • Scoped Slots: Share and use child state within slots.
  • Polymorphic Rendering: Use pp-as for wrapping user-provided elements instead of imposing your own template wrapper.
  • Use Case: Imagine you are building a multi-functional UI with headers, footers, and dynamic content. This Skill allows you to define a flexible and maintainable component structure.

Quick Start

To define a header slot in a pocopine component, use <slot name="header">Header Content</slot>.

Frequently Asked Questions about slots-and-composition

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

FAQPage Schema
How do I compose pocopine components using slots for dynamic UI content?▼

You can compose pocopine components by defining named, default, and scoped slots as insertion points within your template, allowing you to build reusable UI structures with dynamic header, footer, and body content.

What are scoped slots and how do they share child state in pocopine?▼

Scoped slots in pocopine allow you to pass child component state or data upstream to the parent, enabling the parent template to render content dynamically based on data exposed by the child component during component composition.

Can I use a directive for polymorphic rendering instead of a wrapper element in pocopine?▼

Yes, you can achieve polymorphic rendering in pocopine by using the `pp-as` directive, which wraps user-provided elements directly without imposing an additional template wrapper element in the final DOM structure.

What is the best way to structure a multi-functional UI layout with pocopine?▼

The best way to structure a multi-functional pocopine UI is by combining default and named slots for fixed insertion points with scoped slots for dynamic state sharing, ensuring a flexible and maintainable component architecture.

Does pocopine support named slots for specific component insertion points?▼

Pocopine supports named slots to target specific component insertion points, allowing you to define distinct areas like `<slot name="header">` to inject specialized content into reusable UI components.

Related Skills

Explore More Software Engineering Skills→
mambisimambisi

poco-templates

Create and optimize pocopine .poco templates with SVG namespace support.

Community
Intermediate
vincent119vincent119

react-component-patterns

Implement reusable React component patterns with Compound Components, Render Props, and Polymorphic Components.

Community
Advanced
mambisimambisi

poco-directives

Apply pocopine template directives for reactive attributes and event handling.

Community
Intermediate
WesleyMarinhoWesleyMarinho

angular-directives

Develop custom Angular directives for UI enhancement and DOM manipulation.

Community
Intermediate