skills.rest
bennypowers
bennypowersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose

Propose compatible custom element compositions and generate combined HTML.

46|4|Updated May 27, 2025
Search Tags:#html#guidance#ui-design#compose#web-components#custom-elements#component-assembly
One-click install
npx skills add https://github.com/bennypowers/cem --skill compose-bennypowers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose
Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/compose
Command: npx skills add https://github.com/bennypowers/cem --skill compose-bennypowers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps plan and generate UI compositions by selecting and arranging multiple custom elements to achieve a design goal, saving time in UI assembly and prototyping.

Core Features & Use Cases

  • Semantic fit: identify elements that match the desired role and validate their compatibility.
  • Slot and composition guidance: check slot expectations, nesting permissions, and attribute harmony for reliable layouts.
  • HTML generation and styling: produce joined HTML and provide guidance on styling, variants, and responsive behavior.
  • Quick-start examples: illustrate a minimal composition and optional enhancements for common UI patterns.

Quick Start

Describe your UI goal and let Compose propose a compatible set of custom elements and generate the combined HTML.

Frequently Asked Questions about compose

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

FAQPage Schema
How do I assemble multiple custom elements into a single UI layout?▼

You can assemble custom elements by defining a UI goal, prompting a survey of compatible elements, and generating joined HTML. The process validates slot expectations, nesting permissions, and attribute harmony for reliable layouts.

What is the best way to check web component compatibility before generating HTML?▼

Checking web component compatibility involves validating slot expectations, nesting permissions, and attribute harmony before HTML generation. This phase-driven workflow ensures elements interoperate reliably within the chosen design pattern.

Can I use custom elements to build complex web dashboards and forms?▼

Yes, you can build complex web dashboards and forms by aligning multiple custom elements. The tool proposes a compatible composition, validates interoperability, and generates the resulting HTML for delivery.

Does this approach provide styling guidance for responsive web component layouts?▼

Yes, this approach provides styling guidance for responsive web component layouts. After generating joined HTML, it delivers instructions on styling, variants, and responsive behavior to ensure the composition adapts correctly.

When should I evaluate alternatives for custom element composition?▼

You should evaluate alternatives for custom element composition during the final phase of the workflow. After surveying elements, checking compatibility, and generating HTML, the process includes alternatives evaluation to explore other viable UI patterns.

Related Skills

Explore More Design & Creative Skills→
bradtaylorsfbradtaylorsf
8

component-architecture

Design component architectures in frontend frameworks like React.

Community
Intermediate
ak-eytherak-eyther

tailwind-advanced-patterns

Standardize advanced Tailwind CSS styling with custom themes, responsive layouts, dark mode, and component variants.

Community
Intermediate
ProfPowellProfPowell
4

custom-elements

Define custom HTML elements and generate custom-elements.json documentation.

Community
Intermediate
SufficientDaikonSufficientDaikon
8

wireframing

Generate wireframe HTML templates with layout grids and responsive breakpoints.

Community
Intermediate