skills.rest
sfdc-brendan
sfdc-brendanCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc-page-composition

Build App Builder-aware Lightning Web Components with configurable targets and responsive layouts.

15|Updated Jan 27, 2026
Search Tags:#lwc#lms#page-layout#component-design#app-builder#design-time#lightning-web-components
One-click install
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-page-composition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc-page-composition
Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-page-composition
Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-page-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

App Builder-aware LWC design standardizes component behavior across Salesforce page layouts, ensuring predictable rendering in record, app, and home pages.

Core Features & Use Cases

  • App Builder column-aware layouts (1-3 columns) with configurable targets via meta.xml
  • Consistent height, alignment, and cross-component communication using LMS and events
  • Design-time previews that show meaningful content without live data and easy reusability across pages

Quick Start

Create an App Builder–aware LWC that supports responsive 1–3 column layouts and configurable targets via meta.xml.

Frequently Asked Questions about sf-lwc-page-composition

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

FAQPage Schema
How do I make a Lightning Web Component responsive for App Builder page layouts?▼

To make a Lightning Web Component responsive for App Builder, you configure metadata-driven targets via meta.xml and apply responsive styling to maintain alignment across 1-3 column widths.

What is the best way to communicate between LWC components on a Salesforce record page?▼

The best way to communicate between LWC components on a Salesforce record page is using Lightning Message Service (LMS) and events to ensure consistent cross-component behavior.

How do I show a design-time preview for an LWC in App Builder without live data?▼

You can show a design-time preview for an LWC without live data by building App Builder-aware components that display meaningful placeholder content during design-time configuration.

Can I use meta.xml to configure where my LWC appears in Salesforce App Builder?▼

Yes, you can use meta.xml to configure where your LWC appears by defining metadata-driven targets that expose the component to specific App Builder page scenarios like Record Pages or App Pages.

Why does my LWC render inconsistently across different App Builder column widths?▼

Your LWC might render inconsistently across App Builder column widths if it lacks responsive styling and consistent card sizing rules needed to maintain alignment across 1-3 column layouts.

Related Skills

Explore More Software Engineering Skills→
forcedotcomforcedotcom
803

micro-frontends

Generate a Micro Frontend LWC shell with iframe communication for Salesforce pages.

Official
Intermediate
dmckeeSFdmckeeSF

generating-flexipage

Create and modify Salesforce Lightning FlexiPages using Salesforce CLI commands.

Community
Intermediate
duc01226duc01226
7

message-bus

Publish and consume RabbitMQ messages with standardized schemas and naming conventions.

Community
Advanced
jiten-singh-shahijiten-singh-shahi
13

sf-lwc-testing

Write and debug LWC Jest tests with component mounting and Apex mocking.

Community
Intermediate