skills.rest
plaited
plaitedOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/plaited/plaited --skill web-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
techwithanirudhtechwithanirudh
3

ai-elements

Provide composable UI components for AI chat interfaces in React.

Community
Advanced
gil00pitagil00pita

web-components

Define and register framework-agnostic web components using Custom Elements and Shadow DOM.

Community
Intermediate
plaitedplaited
10

ui-patterns

Generate structured training data for Plaited UI patterns and testing workflows.

Official
Advanced
yw662yw662
6

rikka

Build reactive web components with TC39 Signals and native custom elements.

Community
Advanced