web-patterns

Curate foundational web patterns for Shadow DOM-based UI generation.

10|1|Updated Nov 26, 2022

Search Tags:#accessibility #training-data #ui-patterns #shadow-dom #aria-patterns #bElement #web-patterns

Ready to run

npx skills add https://github.com/plaited/plaited --skill web-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-patterns
Source: https://github.com/plaited/plaited/tree/main/.claude/skills/web-patterns
Command: npx skills add https://github.com/plaited/plaited --skill web-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a canonical repository of foundational web patterns to guide AI-driven UI generation, ensuring consistent, accessible, and Shadow DOM–compatible components across projects.

Core Features & Use Cases

Training data foundation for Plaited's agent world model to learn web APIs, patterns, and accessibility practices
Native HTML-first patterns and Shadow DOM–friendly templates to accelerate code generation
ARIA patterns and accessibility guidance for common widgets (accordion, dialog, breadcrumb, listbox, etc.)
Pattern documentation and references to support design-system integration and learning workflows

Quick Start

Review the references directory to understand foundational web patterns and begin integrating them into your UI components.

Frequently Asked Questions about web-patterns

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

FAQPage Schema

What are foundational web patterns for accessible UI components?▼

Foundational web patterns provide canonical, native HTML-first templates and ARIA guidance for accessible widgets like dialogs and listboxes, ensuring consistent UI generation across projects.

How do I build accessible UI patterns that work with Shadow DOM?▼

To build accessible UI patterns with Shadow DOM, apply curated foundational web patterns that use a native HTML-first approach, ensuring ARIA roles and semantics remain intact within shadow boundaries.

Can I use these web patterns as training data for AI-driven UI generation?▼

Yes, these web patterns serve as a training data foundation for AI agents to learn web APIs, ARIA accessibility practices, and Shadow DOM-compatible templates to accelerate code generation.

Do I need bElement to implement these Shadow DOM UI patterns?▼

Yes, bElement is required to apply this curated collection of foundational web patterns, specifically guiding the generation of Shadow DOM-compatible and accessible web components.

What is the best way to standardize ARIA patterns for common widgets across projects?▼

The best way to standardize ARIA patterns is to reference a canonical repository of foundational web patterns, which provides accessibility guidance for common widgets like accordions, breadcrumbs, and listboxes.

What limitations exist when using native HTML-first web patterns for AI UI generation?▼

Native HTML-first web patterns focus strictly on foundational accessibility and Shadow DOM compatibility, meaning they provide structural templates and ARIA guidance rather than complex business logic or state management.