How are UI elements tested in this framework?

UI elements are tested using story files (.stories.tsx) which are executed via the Plaited workshop CLI using browser automation.

Does this skill support CSS-in-JS?

Yes, it provides patterns for createStyles and createHostStyles to implement atomic CSS with TypeScript support and design tokens.

Why use FunctionalTemplates instead of components?

Plaited emphasizes 'templates' because they are static definitions that render once; updates are handled via attributes, ensuring high performance and predictable UI state.

How does Plaited handle cross-island communication?

Plaited uses three patterns: 'trigger' for parent-to-child calls, 'emit' for child-to-parent event bubbling, and 'useSignal' for global pub/sub actor patterns between isolated islands.

What is a bElement in Plaited?

A bElement is a behavioral custom element used to create stateful, interactive UI islands within the Plaited ecosystem, supporting the decorator pattern and form integration.

Plaited UI Patterns

Name: Plaited UI Patterns
Author: plaited

byplaited

•

Design Tools

Builds high-performance, interactive user interfaces using behavioral elements, islands architecture, and atomic CSS-in-JS.

About

This skill provides a specialized framework for developing complex user interfaces within the Plaited ecosystem by leveraging behavioral programming principles. It guides users through creating custom elements (bElements), functional templates, and form-associated controls while managing sophisticated cross-island communication via signals. Optimized for the Bun runtime, it includes patterns for atomic CSS styling, design tokens, story-based testing with browser automation, and performance optimization through web workers.

Key Features

Form-associated custom element integration using native ElementInternals API
6 GitHub stars
Islands architecture implementation via bElement and FunctionalTemplates
Atomic CSS-in-JS styling with createStyles and design token management
Triple-pattern communication: Parent-Child (trigger/emit) and Cross-island (signals)
Automated story-based testing and UI documentation with .stories.tsx

Use Cases

Developing interactive, stateful UI islands that maintain high performance through behavioral programming
Implementing complex frontend logic with background computation offloaded to Web Workers
Creating accessible, custom-styled form controls that integrate seamlessly with native HTML form validation

About

Key Features

Form-associated custom element integration using native ElementInternals API
6 GitHub stars
Islands architecture implementation via bElement and FunctionalTemplates
Atomic CSS-in-JS styling with createStyles and design token management
Triple-pattern communication: Parent-Child (trigger/emit) and Cross-island (signals)
Automated story-based testing and UI documentation with .stories.tsx

Use Cases

Developing interactive, stateful UI islands that maintain high performance through behavioral programming
Implementing complex frontend logic with background computation offloaded to Web Workers
Creating accessible, custom-styled form controls that integrate seamlessly with native HTML form validation