### Install and Build SLDS Source: https://www.lightningdesignsystem.com/2e1ef8501/p/014cb2-slds-scope-customizer Before using the customizer, install dependencies and build the project. This command is run from the root of the design system repository. ```bash npm install && npm run build ``` -------------------------------- ### Few-Shot + Chain-of-Thought Example Analysis Source: https://www.lightningdesignsystem.com/2e1ef8501/p/682769-prompting-techniques/b/975a38 This example demonstrates a Few-Shot Chain-of-Thought prompt. It provides an initial example with a detailed analysis and win probability, then presents a new scenario for the model to analyze step-by-step, incorporating the learned reasoning process. ```text Opportunity: Northeast Healthcare expansion Details: Existing customer, 3-month sales cycle, champion identified, technical review completed Analysis: This opportunity shows several positive indicators. The customer is already familiar with our products, reducing adoption concerns. The sales cycle is within normal range, suggesting standard decision processes. Having an identified champion provides internal advocacy. Technical review completion indicates we've passed a major hurdle. Win Probability: 75% ``` ```text Opportunity: Western Financial Services Details: New prospect, 6-month sales cycle so far, multiple competitors being evaluated, budget confirmed, no clear champion Please think through this step-by-step, considering all relevant factors before determining the final win probability. ``` -------------------------------- ### Density-Aware Styling Hooks - Example Usage Source: https://www.lightningdesignsystem.com/2e1ef8501/p/805bbe-display-density This example demonstrates how to use a density-aware styling hook (--slds-g-spacing-var-4) for padding, which automatically adjusts based on the system's density setting. ```APIDOC ## Density-Aware Styling Hooks - Example Usage ### Description This hook provides different values based on density setting. The padding that uses `--slds-g-spacing-var-4` automatically adapts with the appropriate values when the system detects a density change. ### Method Not applicable (CSS Example) ### Endpoint Not applicable (CSS Example) ### Request Body Not applicable (CSS Example) ### Request Example ```css .my-component { padding: var(--slds-g-spacing-var-4); } ``` ### Response Not applicable (CSS Example) ``` -------------------------------- ### Install and Run SLDS Linter Source: https://www.lightningdesignsystem.com/2e1ef8501/p/8184ad Use this command in a VS Code terminal to initiate the SLDS Linter installation and analysis process. ```bash npx @salesforce-ux/slds-linter@latest lint ``` -------------------------------- ### Grid Column Gutters with Padding Utilities Source: https://www.lightningdesignsystem.com/2e1ef8501/p/61d07d-grid/b/788fe9 Example demonstrating the use of padding utilities to create 16px gutters between columns. ```html https://slds2-metadata-stories-54d63ecb6c29.herokuapp.com/iframe.html?id=utilities-with-code-grid--grid-column-gutters-2-col-utilities ``` -------------------------------- ### Grid Column Reordering Source: https://www.lightningdesignsystem.com/2e1ef8501/p/61d07d-grid/b/788fe9 Example demonstrating column reordering while maintaining accessibility compliance. ```html https://slds2-metadata-stories-54d63ecb6c29.herokuapp.com/iframe.html?id=utilities-with-code-grid--grid-column-reordering-3-col ``` -------------------------------- ### Construct Prompt with Merge Fields Source: https://www.lightningdesignsystem.com/2e1ef8501/p/59dd9a-prompt-elements Example of a prompt template utilizing multiple merge fields to define persona and context. ```text You are a Sales Executive and your name is {!$Input:Sender.Name} from an organization called {!$Input:Sender.CompanyName}. Your customer is {!$Input:Recipient.Name}, who has the title/role of {!$Input:Recipient.Title}, from the company called {!$Input:Recipient.Account.Name}. Here's the Transcript: {!$Input:Transcript} ``` -------------------------------- ### Set Focus on First Interactive Element in Modal Body (Blueprint HTML) Source: https://www.lightningdesignsystem.com/2e1ef8501/p/92a50f-global-focus If a modal does not have a title or is not a wizard, focus the first interactive element within the modal body. This ensures users have a clear starting point. This example targets a `lightning-input` element. ```html
``` ```javascript ``` -------------------------------- ### Example: Responsive Sizing Source: https://www.lightningdesignsystem.com/2e1ef8501/p/927990-sizing/b/788fe9 Demonstrates how to apply responsive sizing utilities for different breakpoints. A default sizing class is required, and responsive classes are additive. ```html
``` -------------------------------- ### Confirm SLDS Linter Installation Source: https://www.lightningdesignsystem.com/2e1ef8501/p/8184ad-transition-to-slds-2 After running the install command, confirm the installation of the SLDS Linter package by typing 'y' when prompted. ```bash y ``` -------------------------------- ### Apply Responsive Sizing Classes Source: https://www.lightningdesignsystem.com/2e1ef8501/p/927990-sizing/b/0673b8 Demonstrates the structure for applying default and responsive sizing utility classes to an element. ```html
``` ```html
``` -------------------------------- ### Structure Instructions with Lists Source: https://www.lightningdesignsystem.com/2e1ef8501/p/59dd9a-prompt-elements Use numbered or bulleted lists to enforce step-by-step logic or collection-based output formats. ```text Instructions: """ - The email body and closing message must encourage excitement in the audience directly by defaulting to second person, using discourse markers, intensifiers, and refer to the recipient by name or using second person. - Demonstrate enthusiasm by using exclamation points that emphasize preceding phrases with the same significance. - Acknowledge regard of the audience with period marks.The salutation must only contain the recipient's first name. - You must strictly not use "I hope this email finds you well","I hope this email finds you doing well", or any other variation that expresses well-wishes for the recipient's well-being to open the email. """ ``` ```text Instructions: * Use Markdown syntax for the output * Headings for titles * Bold for section names and labels * Bullet points for lists * If any information is not available in the input data, strictly do not include that item in the output. *Determinecustomersentiment(Positive,Neutral,Negative)strictlybasedonthelastcasecommentandthelastdescriptionofthecaseactivity. ``` ```text English: 1. 1. Greeting: You must use a casual yet business-friendly greeting that emphasizes friendliness or polite professionalism. 1. Examples: "Hello", "Hi", "Good morning", or "Good afternoon" followed by the Lead First Name. 2. If the Lead First Name is blank, null, or includes a placeholder, you must omit it and use a general greeting without any name instead. 2. Opening: Open with a direct, value-driven statement or insight about the prospect’s company, work, or industry. 1. NEVER include generic pleasantries or cliche well wishes. Unacceptable openings: "I hope this message finds you well.", “We hope you’re having a great week”, "I trust you are well" or similar phrases. ``` -------------------------------- ### Direct Column Gutters Source: https://www.lightningdesignsystem.com/2e1ef8501/p/61d07d-grid/b/788fe9 Example using slds-gutters_direct to apply gutters only to direct child columns. ```html https://slds2-metadata-stories-54d63ecb6c29.herokuapp.com/iframe.html?id=utilities-with-code-grid--grid-direct-column-gutters ``` -------------------------------- ### All Children Column Gutters Source: https://www.lightningdesignsystem.com/2e1ef8501/p/61d07d-grid/b/788fe9 Example showing default gutter behavior where all nested columns receive gutters. ```html https://slds2-metadata-stories-54d63ecb6c29.herokuapp.com/iframe.html?id=utilities-with-code-grid--grid-all-children-column-gutters ```