flexcard-container-composition
Design FlexCard composition: parent/child state flow, layout modes, actions, event wiring, and data source selection. Trigger keywords: flexcard, flex card composition, parent child flexcard, flexcard state, flexcard events, flexcard datasource. Does NOT cover: the first-time FlexCard Hello-World (trailhead), LWC-native alternatives, or Experience Cloud theming.
Best use case
flexcard-container-composition is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Design FlexCard composition: parent/child state flow, layout modes, actions, event wiring, and data source selection. Trigger keywords: flexcard, flex card composition, parent child flexcard, flexcard state, flexcard events, flexcard datasource. Does NOT cover: the first-time FlexCard Hello-World (trailhead), LWC-native alternatives, or Experience Cloud theming.
Teams using flexcard-container-composition should expect a more consistent output, faster repeated execution, less prompt rewriting, better workflow continuity with your supporting tools.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
- You already have the supporting tools or dependencies needed by this skill.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/flexcard-container-composition/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How flexcard-container-composition Compares
| Feature / Agent | flexcard-container-composition | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Design FlexCard composition: parent/child state flow, layout modes, actions, event wiring, and data source selection. Trigger keywords: flexcard, flex card composition, parent child flexcard, flexcard state, flexcard events, flexcard datasource. Does NOT cover: the first-time FlexCard Hello-World (trailhead), LWC-native alternatives, or Experience Cloud theming.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# FlexCard Container Composition ## Decision: One Card Or Many? - **One FlexCard** — a single record context, 1-2 actions, minimal internal state. - **Parent + Child FlexCards** — master/detail, list → drilldown, or tabs where child state is independent. - **FlexCard inside OmniScript** — only when the card is purely presentational within a flow step. Never reach up and trigger the parent OmniScript directly from a deeply nested FlexCard. ## Data Source Selection | Data Source | Use When | Avoid When | |---|---|---| | Integration Procedure | Aggregating 2+ sources or needing caching | Single field read | | DataRaptor (Extract) | Simple SObject read | Aggregation across objects | | Apex REST | Custom logic or external hop | Simple read with DR | | REST | Direct callout (rare from UI) | Anything with PII headers | | SOQL (direct) | Lightweight, read-only | Anything needing FLS enforcement by IP | Prefer Integration Procedure as the default — it gives you one place to cache and centralise errors. ## Parent/Child State Flow Pattern: parent FlexCard loads the **list**, child FlexCard loads the **detail**. Parent fires a `flexcardevent` with the selected id, child subscribes and reloads. - Parent does NOT push row data into the child via state — child fetches its own detail (fresh, cache-aware). - Child does NOT mutate parent state directly. On action, child fires event → parent reacts. - Shared immutables (record id, layout flags) travel via input parameters, not events. ## Action Types - **OmniScript launch** — inline modal or new tab. - **Update record** — DR Update or Integration Procedure; never a direct UI → DML without FLS enforcement. - **Navigate** — Lightning nav, not hardcoded URL. - **Fire event** — for parent/child composition or cross-component wiring. - **Custom LWC action** — for behaviour that does not fit the built-in action types. ## Layout Modes | Mode | When to use | |---|---| | Card | Single-record detail. | | List | Collection of card-shaped items, client-side pagination. | | Table | Tabular view. Avoid when mobile is a primary target. | | None | Purely a state/event container (rare). | ## Recommended Workflow 1. Sketch the UI with a clear parent/child boundary. 2. Pick one data source per card. Prefer Integration Procedure. 3. Define input parameters (immutables) and event contract (mutables). 4. Choose layout mode. 5. List actions and pick action types per action. 6. Wire events parent → child; child → parent via event name + payload. 7. Preview in multiple form factors (Desktop/Tablet/Phone) before shipping. ## Performance Notes - A FlexCard that calls an IP on every input change can destroy responsiveness. Use cacheable IPs where inputs are stable (see `omnistudio/integration-procedure-cacheable-patterns`). - Nested FlexCards each make their own data call. Flatten when parent already has the data. ## Official Sources Used - FlexCards Overview — https://help.salesforce.com/s/articleView?id=sf.os_flexcards_overview.htm - FlexCard Events — https://help.salesforce.com/s/articleView?id=sf.os_flexcard_events.htm - FlexCard Data Sources — https://help.salesforce.com/s/articleView?id=sf.os_flexcard_data_sources.htm
Related Skills
flexcard-state-management
Use when designing FlexCard actions, conditional visibility, and state that must survive navigation, refresh, or parent/child card transitions. Triggers: 'flexcard state', 'flexcard conditional visibility', 'flexcard actions', 'flexcard refresh', 'child flexcard state'. NOT for raw LWC state or for OmniScript step state.
flexcard-design-patterns
Use when designing, building, or reviewing OmniStudio FlexCards — including data source selection, card states, actions, conditional visibility, flyout configuration, and child card iteration. Triggers: 'FlexCard', 'card template', 'flyout', 'card action', 'card state', 'data source', 'child card', 'conditional visibility'. NOT for OmniScript design, standalone LWC development, or Apex controller architecture outside the FlexCard context.
lwc-slots-composition
Use when a Lightning Web Component needs to let a parent inject markup into predefined regions using `<slot>` — default and named slots, `slotchange` wiring, fallback content, and detecting slot emptiness. NOT for rendering a dynamic component whose tag name is chosen at runtime — that is `lwc-dynamic-components` — and NOT for cross-component messaging via Lightning Message Service.
apex-class-decomposition-pattern
When and how to split an Apex class into Domain / Service / Selector layers using this repo's lightweight base classes (BaseDomain, BaseService, BaseSelector). Covers splitting signals, ordering of extraction, and naming conventions. NOT for full fflib migration — see fflib-enterprise-patterns. NOT for trigger framework choice — see trigger-framework.
flexcard-requirements
Use this skill to gather, document, and validate FlexCard layout requirements before development begins — covering data visualization needs, action requirements, embedded component specifications, and user context mapping. Trigger keywords: FlexCard requirements, FlexCard BA, FlexCard layout design, FlexCard data sources, FlexCard actions. NOT for FlexCard development implementation, Card Designer configuration, or standard Lightning component requirements.
xss-and-injection-prevention
Use when writing or reviewing Visualforce pages, Apex controllers, or LWC components that output user-supplied data, build dynamic queries, or construct HTTP responses. Triggers: 'XSS in Visualforce', 'SOQL injection vulnerability', 'how to encode output in Apex', 'JSENCODE Visualforce', 'open redirect prevention'. NOT for Apex CRUD/FLS enforcement (use soql-security or apex-crud-and-fls), NOT for Shield encryption (use shield-encryption-key-management), NOT for AppExchange security review process (use secure-coding-review-checklist).
visualforce-security-and-modernization
Use when hardening or modernizing legacy Visualforce pages — covers the platform CSRF token model and when disabling it is a security regression, view state encryption guarantees and the 170 KB ceiling, FLS/CRUD enforcement gaps on `<apex:outputField>` and on getters that return sObjects, `<apex:includeScript>` interaction with the org Content Security Policy, hosting LWC inside a VF page via `lightning:container` / `lightning-out`, and the retire-vs-harden-vs-leave-alone decision for an inventory of legacy pages. Triggers: 'should I rewrite this Visualforce page in LWC', 'CSRF protection disabled on Visualforce page is that safe', 'community user sees a field they should not on a Visualforce page', 'view state encryption is that enough for sensitive data', 'how do I host an LWC inside a Visualforce page', 'apex:dynamicComponent and apex:actionFunction safe to keep'. NOT for greenfield Visualforce architecture (use apex/visualforce-fundamentals — controller types, view state pattern selection, PDF rendering); NOT for Visualforce email template authoring (use apex/visualforce-email-templates if/when that skill is authored); NOT for general Apex security review across triggers and async (use apex/soql-security and security/secure-coding-review-checklist).
transaction-security-policies
Transaction Security policy creation and configuration: condition builder, enhanced policies, enforcement actions (block, MFA, notification, end session), real-time monitoring mode, and policy troubleshooting. NOT for Event Monitoring log analysis or Shield Event Monitoring setup (use event-monitoring). NOT for Apex testing or debug-log analysis.
sso-saml-troubleshooting
Diagnosing broken SAML SSO into Salesforce — IdP-initiated vs SP-initiated flows, signing-certificate validity / expiry, NameID format mismatches, RelayState handling, audience / entityId / issuer mismatches, clock skew, the SAML Assertion Validator in Setup, the Login History debug log, and the My Domain prerequisite for SSO. Covers the standard diagnostic loop: read the SAML response, identify which check failed, fix at the IdP or SP. NOT for OAuth / OpenID Connect SSO (see security/oauth-openid-troubleshooting), NOT for setting up SSO from scratch (see security/sso-saml-setup).
shield-kms-byok-setup
Configure Shield Platform Encryption with customer-supplied (BYOK) or customer-held (Cache-Only Key Service) tenant secrets, rotate them, and recover. NOT for Classic Encryption or field masking.
shield-event-log-retention-strategy
Use when designing Salesforce Shield Event Monitoring retention, SIEM routing, and storage-tier strategy — which event types to keep, for how long, where, and how to answer audit queries across hot/warm/cold tiers. Triggers: 'shield event log retention', 'route event monitoring to splunk', 'how long to keep login history', 'siem salesforce integration', 'event monitoring storage tier'. NOT for enabling Shield (see salesforce-shield-deployment).
session-management-and-timeout
Use this skill when configuring session timeout values, concurrent session limits, session IP locking, or logout behavior in Salesforce. Covers org-wide session settings, profile-level overrides, Connected App session policies, and Metadata API SecuritySettings deployment. NOT for OAuth token refresh flows, login IP ranges, or MFA/identity-provider configuration.