How does this skill handle Web APIs?

It adapts vanilla APIs like Intersection Observer to work within Plaited's bProgram lifecycle, ensuring proper setup and cleanup.

What is the Plaited framework?

Plaited is a frontend architecture where you design the system and the AI generates screens using the bElement component model.

Where are the extracted patterns saved?

Extracted patterns and adapted implementations are saved to the references/ directory in a standardized markdown format.

Does it support Shadow DOM?

Yes, it specifically focuses on Shadow DOM compatible patterns and framework-specific query selectors like p-target.

Plaited Web Patterns

Name: Plaited Web Patterns
Author: plaited

byplaited

•

デザインツール

Adapts modern HTML features and Web APIs into optimized patterns for the Plaited bElement architecture.

概要

This skill empowers developers using the Plaited framework to seamlessly integrate modern web standards like Intersection Observer, Dialog, and View Transitions into their bElement components. It automates the process of extracting documentation from sources like MDN and web.dev, then translates those patterns into framework-specific implementations that leverage Plaited's built-in systems like p-trigger, p-target, and BProgramArgs, ensuring high-performance, Shadow DOM-compatible, and accessible web components.

主な機能

Modern HTML feature integration (Dialog, Popover, Invokers)
Framework-first adaptation for bElement architecture
Performance-optimized reference generation for bProgram
Shadow DOM compatibility and lifecycle management
Automated pattern extraction from external web documentation
6 GitHub stars

ユースケース

Extracting and documenting performance optimization strategies for a project
Converting a vanilla MDN Web API example into a Plaited bElement component
Implementing accessible ARIA patterns within a Shadow DOM context

概要

主な機能

Modern HTML feature integration (Dialog, Popover, Invokers)
Framework-first adaptation for bElement architecture
Performance-optimized reference generation for bProgram
Shadow DOM compatibility and lifecycle management
Automated pattern extraction from external web documentation
6 GitHub stars

ユースケース

Extracting and documenting performance optimization strategies for a project
Converting a vanilla MDN Web API example into a Plaited bElement component
Implementing accessible ARIA patterns within a Shadow DOM context