Skill File

Create Lwc Tab

Name: Create Lwc Tab
Author: MenachemShanowitz

Creates a new Lightning Web Component with a tab and flexipage for display. Use when you need to create a new standalone page/tab with an LWC component.

MenachemShanowitz0 starsJan 18, 2026

Occupation
Categories: Frontend

Skill Content

Create LWC with Tab

Creates a new Lightning Web Component along with the necessary tab and flexipage metadata to make it accessible as a standalone page.

Arguments

$ARGUMENTS should be the component name in camelCase (e.g., pledgeList)

Files to Create

1. LWC Component

Create directory: force-app/main/default/lwc/{componentName}/

{componentName}.js:

import { LightningElement } from 'lwc';

export default class ComponentName extends LightningElement {
    // Component logic
}

{componentName}.html:

Related Skills

Create Lwc Tab | Skills Pool

<template>
    <!-- Component template -->
</template>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>
<CustomTab xmlns="http://soap.sforce.com/2006/04/metadata">
    <label>Tab Label</label>
    <lwcComponent>{componentName}</lwcComponent>
    <motif>Custom70: Handsaw</motif>
</CustomTab>

<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
    <flexiPageRegions>
        <itemInstances>
            <componentInstance>
                <componentName>c:{componentName}</componentName>
                <identifier>{componentName}1</identifier>
            </componentInstance>
        </itemInstances>
        <name>main</name>
        <type>Region</type>
    </flexiPageRegions>
    <masterLabel>Page Label</masterLabel>
    <template>
        <name>flexipage:defaultAppHomeTemplate</name>
    </template>
    <type>AppPage</type>
</FlexiPage>

sf project deploy start \
  --source-dir force-app/main/default/lwc/{componentName} \
  --source-dir force-app/main/default/flexipages/{Page_Name}.flexipage-meta.xml \
  --target-org lubavitchrv_partial \
  --wait 10

Create Lwc Tab

Create LWC with Tab

Arguments

Files to Create

1. LWC Component

Create Lwc Tab

Create LWC with Tab

Arguments

Files to Create

1. LWC Component

2. Custom Tab (Optional)

3. Lightning App Page (Recommended)

Deploy

After Deployment

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns