Salesforce Component Standards
github/awesome-copilot
Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.
OmniStudio FlexCard creation and validation with 130-point scoring.
Install Omnistudio Flexcard Generate
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .claude/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .claude/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .agents/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .agents/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .cursor/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .cursor/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/forcedotcom/sf-skills.git --path skills/omnistudio-flexcard-generate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .gemini/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .gemini/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .github/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .github/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install forcedotcom/sf-skills omnistudio-flexcard-generate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/omnistudio-flexcard-generate .opencode/skills/omnistudio-flexcard-generate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "omnistudio-flexcard-generate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/omnistudio-flexcard-generate into .opencode/skills/omnistudio-flexcard-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omnistudio-flexcard-generate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
omnistudio-flexcard-generate- GitHub stars
- 1.1k
- Token cost
- ~4.7k tokens
- SKILL.md length
- 2,000 words
- Files
- 6 (incl. scripts, references, assets)
- Skills in repo
- 252
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
OmniStudio FlexCard creation and validation with 130-point scoring.
- Works in 5 steps: Requirements Gathering → Design & Layout → Generation & Validation → …
- Building at-a-glance UI cards
- SKILL.md covers Scope, Core Responsibilities, Document Map and CRITICAL: Orchestration Order, plus 14 more sections
- Runs Shell scripts from its folder; calls sf
What it does
Omnistudio Flexcard Generate is an agent skill from forcedotcom/sf-skills. OmniStudio FlexCard creation and validation with 130-point scoring. Use when building at-a-glance UI cards, configuring data source bindings to Integration Procedures, or reviewing existing FlexCard definitions for accessibility and performance. TRIGGER when: user creates FlexCards, configures data sources, designs card layouts, or asks about OmniUiCard metadata. DO NOT TRIGGER when: building OmniScripts (use omnistudio-omniscript-generate), creating Integration Procedures (use…
Its SKILL.md is about 4.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts, reference files and assets (for example `assets/omni-ui-card.json`, `references/best-practices.md` and `references/data-binding-guide.md`).
It sits in Frontend & Design, covering Accessibility. It works with Salesforce. The repository describes itself as: Salesforce's curated collection of agent skills for building applications. Optimized for Agentforce Vibes, compatible with all AI tools. The licence is Apache-2.0.
When your agent uses it
- Building at-a-glance UI cards
- Configuring data source bindings to Integration Procedures
- Reviewing existing FlexCard definitions for accessibility and performance
- : user creates FlexCards
Example prompts
- “/omnistudio-flexcard-generate”
Requirements
- A Bash shell
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 4bbae5c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
sf
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Omnistudio Flexcard Generate loads about 4.7k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 155 tokens; SKILL.md has 2,000 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from forcedotcom/sf-skills at commit 4bbae5c, republished under its Apache-2.0 licence (© forcedotcom). 2,000 words, ~4,705 tokens.
Download SKILL.mdSave it as
.claude/skills/omnistudio-flexcard-generate/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.- name
- omnistudio-flexcard-generate
- description
- OmniStudio FlexCard creation and validation with 130-point scoring. Use when building at-a-glance UI cards, configuring data source bindings to Integration Procedures, or reviewing existing FlexCard definitions for accessibility and performance. TRIGGER when: user creates FlexCards, configures data sources, designs card layouts, or asks about OmniUiCard metadata. DO NOT TRIGGER when: building OmniScripts (use omnistudio-omniscript-generate), creating Integration Procedures (use omnistudio-integration-procedure-generate), or analyzing dependencies (use omnistudio-dependencies-analyze).
- metadata.version
- 1.0
- metadata.domains
- OmniStudio
- metadata.minApiVersion
- 60.0
- metadata.relatedSkills
- experience-lwc-generate, omnistudio-datamapper-generate, omnistudio-dependencies-analyze, omnistudio-integration-procedure-generate…
omnistudio-flexcard-generate: OmniStudio FlexCard Creation and Validation
Expert OmniStudio engineer specializing in FlexCard UI components for Salesforce Industries. Generate production-ready FlexCard definitions that display at-a-glance information with declarative data binding, Integration Procedure data sources, conditional rendering, and proper SLDS (Salesforce Lightning Design System) styling. All FlexCards are validated against a 130-point scoring rubric across 7 categories.
Scope
- In scope: Creating and validating OmniStudio FlexCard definitions (
OmniUiCard); configuring Integration Procedure data sources; designing card layouts, states, and action buttons; scoring against the 130-point rubric; deployment and activation - Out of scope: Building OmniScripts (use
omnistudio-omniscript-generate), creating Integration Procedures (useomnistudio-integration-procedure-generate), mapping full dependency trees (useomnistudio-dependencies-analyze), deploying metadata to org (useplatform-metadata-deploy)
Core Responsibilities
- FlexCard Authoring: Design and build FlexCard definitions with proper layout, states, and field mappings
- Data Source Binding: Configure Integration Procedure data sources with correct field mapping and error handling
- Test Generation: Validate cards against multiple data states (populated, empty, error, multi-record)
- Documentation: Produce deployment-ready documentation with data source lineage and action mappings
Document Map
| Need | Document | Description |
|---|---|---|
| Best practices | references/best-practices.md | Layout patterns, SLDS, accessibility, performance |
| Data binding | references/data-binding-guide.md | IP sources, field mapping, conditional rendering |
CRITICAL: Orchestration Order
FlexCards sit at the presentation layer of the OmniStudio stack. Ensure upstream components exist before building a FlexCard that depends on them.
omnistudio-dependencies-analyze → omnistudio-datamapper-generate → omnistudio-integration-procedure-generate → omnistudio-omniscript-generate → omnistudio-flexcard-generate (you are here)FlexCards consume data from Integration Procedures and can launch OmniScripts. Build the data layer first, then the presentation layer.
Key Insights
| Insight | Detail |
|---|---|
| Configuration fields | OmniUiCard uses DataSourceConfig for data source bindings and PropertySetConfig for card layout, states, and actions. There is NO Definition field on OmniUiCard in Core namespace. |
| Data source binding | Data sources bind to Integration Procedures for live data; the IP must be active and deployed before the FlexCard can retrieve data |
| Child card embedding | FlexCards can embed other FlexCards as child cards, enabling composite layouts with shared or independent data sources |
| OmniScript launching | FlexCards can launch OmniScripts via action buttons, passing context data from the card's data source into the OmniScript's input |
| Designer virtual object | The FlexCard Designer uses OmniFlexCardView as a virtual list object (/lightning/o/OmniFlexCardView/home), separate from the OmniUiCard sObject where card records are stored. Cards created via API may not appear in "Recently Viewed" until opened in the Designer. |
Workflow (5-Phase Pattern)
Phase 1: Requirements Gathering
Before building, clarify these with the stakeholder:
| Question | Why It Matters |
|---|---|
| What is the card's purpose? | Determines layout type and data density |
| Which data sources are needed? | Identifies required Integration Procedures |
| What object context does it run in? | Determines record-level vs. list-level display |
| What actions should the card expose? | Drives button/link configuration and OmniScript integration |
| What layout best fits the use case? | Single card, list, tabbed, or flyout |
| Are there conditional display rules? | Fields or sections that appear/hide based on data values |
Phase 2: Design & Layout
Read references/best-practices.md for layout patterns, SLDS compliance, accessibility requirements, and performance guidance before designing.
Card Layout Options
| Layout Type | Use Case | Description |
|---|---|---|
| Single Card | Record summary | One card displaying fields from a single record |
| Card List | Related records | Repeating cards bound to an array data source |
| Tabbed Card | Multi-context | Multiple states displayed as tabs within one card |
| Flyout Card | Detail on demand | Expandable detail panel triggered from a summary card |
Data Source Configuration
Each FlexCard data source connects to an Integration Procedure (or other source type) and maps response fields to display elements.
FlexCard → Data Source (type: IntegrationProcedure)
→ IP Name + Input Mapping
→ Response Field Mapping → Card Elements- Map IP response fields to card display elements using
{datasource.fieldName}merge syntax - Configure input parameters to pass record context (e.g.,
{recordId}) to the IP - Set data source order when multiple sources feed the same card
Action Button Design
| Action Type | Purpose | Configuration |
|---|---|---|
| Launch OmniScript | Start a guided process | OmniScript Type + SubType, pass context params |
| Navigate | Go to record or URL | Record ID or URL template with merge fields |
| Custom Action | Platform event, LWC, etc. | Custom action handler with payload mapping |
Conditional Visibility
- Show/hide fields based on data values using visibility conditions
- Show/hide entire card states based on data source results
- Display empty-state messaging when data source returns no records
Phase 3: Generation & Validation
Read references/data-binding-guide.md for merge field syntax, data source types, and multi-source coordination before generating.
Read references/scoring-rubric.md for the full point-by-point breakdown when running the 130-point validation.
- Generate the FlexCard definition JSON
- Validate all data source references resolve to active Integration Procedures
- Run the 130-point scoring rubric (see Scoring section below)
- Verify merge field syntax matches IP response structure
- Check accessibility attributes on all interactive elements
Phase 4: Deployment
- Ensure all upstream Integration Procedures are deployed and active
- Run a dry-run check: use the
platform-metadata-deployskill with--dry-runbefore committing - Deploy the FlexCard metadata (
OmniUiCard) —sf project deploy startis safe to re-run; it upserts existing records - Activate the FlexCard in the target org
- Embed the FlexCard in the target Lightning page, OmniScript, or parent FlexCard
- If deploy fails: check error output for specific cause — common issues: upstream IP not deployed (
Cannot find OmniIntegrationProcedure), missing namespace prefix (Entity not found), or FlexCard still in Draft status (activate before retrieving)
Phase 5: Testing
Test each FlexCard against multiple data scenarios:
| Scenario | What to Verify |
|---|---|
| Populated data | All fields render correctly, merge fields resolve |
| Empty data | Empty-state message displays, no broken merge fields |
| Error state | Graceful handling when IP returns an error or times out |
| Multi-record | Card list renders correct number of items, pagination works |
| Action buttons | OmniScript launches with correct pre-populated data |
| Conditional fields | Visibility rules toggle correctly based on data values |
| Mobile | Card layout adapts to smaller viewport widths |
Generation Guardrails
Avoid these patterns when generating FlexCard definitions:
| Anti-Pattern | Why It's Wrong | Correct Approach |
|---|---|---|
| Referencing non-existent IP data sources | Card fails to load data at runtime | Verify IP exists and is active before binding |
| Hardcoded colors in styles | Breaks SLDS theming and dark mode | Use SLDS design tokens and CSS custom properties |
| Missing accessibility attributes | Fails WCAG compliance | Add aria-label, role, and keyboard handlers |
| Excessive nested child cards | Performance degrades with deep nesting | Limit to 2 levels of nesting; flatten where possible |
| Ignoring empty states | Broken UI when data source returns no records | Configure explicit empty-state messaging |
| Hardcoded record IDs | Card breaks across environments | Use merge fields and context-driven parameters |
Scoring Rubric (130 Points)
All FlexCards are validated against 7 categories. Thresholds: [PASS] 90+ (Deploy) | [VERIFY] 67-89 (Review) | [BLOCK] <67 (Block - fix required)
| Category | Points | Criteria |
|---|---|---|
| Design & Layout | 25 | Appropriate layout type, logical field grouping, responsive design, consistent spacing, clear visual hierarchy |
| Data Binding | 20 | Correct IP references, proper merge field syntax, input parameter mapping, multi-source coordination |
| Actions & Navigation | 20 | Action buttons configured correctly, OmniScript launch params mapped, navigation targets valid, action labels descriptive |
| Styling | 20 | SLDS tokens used (no hardcoded colors), consistent typography, proper use of card/tile patterns, dark mode compatible |
| Accessibility | 15 | aria-label on interactive elements, keyboard navigable actions, sufficient color contrast, screen reader friendly field labels |
| Testing | 15 | Verified with populated data, empty state, error state, multi-record scenario, and mobile viewport |
| Performance | 15 | Data source calls minimized, child card nesting limited (max 2 levels), no redundant IP calls, lazy loading for non-visible states |
Read references/scoring-rubric.md for the full per-criterion breakdown of all 7 categories.
CLI Commands
Read scripts/flexcard-commands.sh for all FlexCard CLI commands (query, retrieve, deploy). Replace <org> with your org alias and <Name> with the FlexCard API name.
Show full SKILL.md (790 more words)Show less
Data Source Binding
FlexCard Data Source Configuration
The DataSourceConfig field on OmniUiCard contains the data source bindings as JSON. The PropertySetConfig field contains the card layout, states, and field definitions.
IMPORTANT: There is NO
Definitionfield onOmniUiCardin Core namespace. UseDataSourceConfigfor data sources andPropertySetConfigfor layout.
Read assets/omni-ui-card.json for the complete OmniUiCard record template including the DataSourceConfig JSON structure.
Data Source Types
| Type | dataSource.type | When to Use |
|---|---|---|
| Integration Procedure | IntegrationProcedures (plural, capital P) | Primary pattern; calls an IP for live data |
| SOQL | SOQL | Direct query (use sparingly; prefer IP for abstraction) |
| Apex Remote | ApexRemote | Custom Apex class invocation |
| REST | REST | External API call via Named Credential |
| Custom | Custom | Custom data provider (pass JSON body directly) |
Field Mapping from IP Response
Map IP response fields to card display elements using merge field syntax:
IP Response: FlexCard Merge Field:
───────────── ─────────────────────
{ "Name": "Acme Corp" } → {Name}
{ "Account": { → {Account.Name}
"Name": "Acme Corp"
}
}
{ "records": [ → {records[0].Name} (single)
{ "Name": "Acme" } or iterate with Card List layout
]
}Input Parameter Mapping
Pass context from the hosting page into the IP data source:
| Context Variable | Source | Example |
|---|---|---|
{recordId} | Current record page | Pass to IP to query related data |
{userId} | Running user | Filter data by current user |
{param.customKey} | URL parameter or parent card | Pass from parent FlexCard or URL |
Cross-Skill Integration
| Skill | Relationship to omnistudio-flexcard-generate |
|---|---|
| omnistudio-integration-procedure-generate | Build the IP data sources that FlexCards consume |
| omnistudio-omniscript-generate | Build the OmniScripts that FlexCard action buttons launch |
| omnistudio-datamapper-generate | Build DataRaptors/DataMappers that IPs use under the hood |
| omnistudio-dependencies-analyze | Analyze dependency chains across FlexCards, IPs, and OmniScripts |
| platform-metadata-deploy | Deploy FlexCard metadata along with upstream dependencies |
| experience-lwc-generate | Build custom LWC components embedded within FlexCards |
Gotchas
| Scenario | Handling |
|---|---|
| Empty data | Configure an explicit empty-state with a user-friendly message; do not show raw "No data" or blank card |
| Error states | Display a meaningful error message when the IP data source fails; log the error for debugging |
| Mobile responsiveness | Use single-column layout for mobile; avoid horizontal scrolling; test at 320px viewport width |
| Long text values | Truncate with ellipsis and provide a flyout or tooltip for full text |
| Large record sets | Use card list with pagination; limit initial load to 10-25 records |
| Null field values | Use conditional visibility to hide fields with null values rather than showing empty labels |
| Mixed data freshness | When multiple data sources have different refresh rates, display a "last updated" indicator |
FlexCard vs LWC Decision Guide
| Factor | FlexCard | LWC |
|---|---|---|
| Build method | Declarative (drag-and-drop) | Code (JS, HTML, CSS) |
| Data binding | Integration Procedure merge fields | Wire service, Apex, GraphQL |
| Best for | At-a-glance information display | Complex interactive UIs |
| Testing | Manual + data state verification | Jest unit tests + manual |
| Customization | Limited to OmniStudio framework | Full platform flexibility |
| Reuse | Embed as child cards | Import as child components |
| When to choose | Standard card layouts with IP data | Custom behavior, animations, complex state |
Dependencies
Required: Target org with OmniStudio (Industries Cloud) license, sf CLI authenticated
For Data Sources: Active Integration Procedures deployed to the target org
For Actions: Active OmniScripts deployed (if action buttons launch OmniScripts)
Scoring: Block deployment if score < 67
Idempotency: sf project deploy start upserts metadata — safe to re-run without creating duplicates. Query first to confirm current state: see scripts/flexcard-commands.sh.
Namespace handling: In managed-package orgs, the metadata type may be prefixed (e.g., omnistudio__OmniUiCard). Check sfdx-project.json for the namespace. See scripts/flexcard-commands.sh for the namespaced deploy command.
Creating FlexCards programmatically: Use REST API (sf api request rest --method POST --body @file.json). Required fields: Name, VersionNumber, OmniUiCardType (e.g., Child). Set DataSourceConfig (JSON string) for data source bindings and PropertySetConfig (JSON string) for card layout. The sf data create record --values flag cannot handle JSON in textarea fields. Activate by updating IsActive=true after creation.
Output Expectations
Deliverables produced by this skill:
- FlexCard JSON definition (
assets/omni-ui-card.jsontemplate) —OmniUiCardrecord ready for REST API creation or metadata deployment - Data source binding block —
DataSourceConfigJSON mapping Integration Procedure inputs and response fields to card elements - Card layout config —
PropertySetConfigJSON defining card states, field display, conditional visibility, and action buttons - Validation report — 130-point score across 7 categories with deploy/review/block threshold result
- Deployment checklist — confirms upstream IPs are active, FlexCard is activated, and embedded in target Lightning page or parent FlexCard
External References
- OmniStudio FlexCards (Trailhead) — Official learning module for FlexCard fundamentals and guided setup
- OmniStudio Developer Guide — Technical reference for FlexCard metadata, data source configuration, and component properties
- Salesforce Industries Documentation — FlexCard configuration guide covering layout, states, and actions
Reference File Index
| File | When to read |
|---|---|
assets/omni-ui-card.json | Phase 3 — Generation: OmniUiCard record template including DataSourceConfig JSON structure |
references/best-practices.md | Phase 2 — Layout patterns, SLDS compliance, accessibility requirements, and performance guidance |
references/data-binding-guide.md | Phase 2-3 — Data source types, merge field syntax, input parameter mapping, and multi-source coordination |
references/scoring-rubric.md | Phase 3 — Full per-criterion breakdown of all 7 scoring categories (130 points) |
scripts/flexcard-commands.sh | Phase 4 — All CLI commands for querying, retrieving, and deploying FlexCard metadata |
Pre-Delivery Checklist
- Upstream Integration Procedures exist and are active before FlexCard depends on them
- Orchestration order followed (FlexCard is last in the chain)
© forcedotcom, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 5 other files (scripts, references, assets) in skills/omnistudio-flexcard-generate of forcedotcom/sf-skills.
- SKILL.md
- assets/omni-ui-card.json
- references/best-practices.md
- references/data-binding-guide.md
- references/scoring-rubric.md
- scripts/flexcard-commands.sh
Open the folder on GitHubat commit 4bbae5c
Compare with similar skills
Omnistudio Flexcard Generate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Omnistudio Flexcard Generate this skillforcedotcom/sf-skills | 1.1k | — | ~4.7k | Automated safety check: Pass | Apache-2.0 | |
| Salesforce Component Standardsgithub/awesome-copilot | 40k | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None | |
| Accessibility Reviewmarkmead/hyperui | 12k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Accessibility Fixeribelick/ui-skills | 9.6k | 4 repos | ~1.2k | Automated safety check: Pass | MIT |
Similar skills
- Official
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
More from forcedotcom/sf-skills
All 252 skills in this repoAgentforce Architecture Analyze
forcedotcom/sf-skills
Declared architecture snapshot for one Agentforce agent: planner, topics, actions, flows, Apex, prompt templates, and NGA plugins.
Agentforce D360 Analyze
forcedotcom/sf-skills
Data Cloud 360° view of a single Agentforce session. An agent skill from forcedotcom/sf-skills.
Automation Sandbox Post Copy Configure
forcedotcom/sf-skills
Apply a Salesforce sandbox post-copy automation JSON config against a target org.
Automation Sandbox Post Copy Configure
forcedotcom/sf-skills
Apply a Salesforce sandbox post-copy automation JSON config against a target org.
Design Systems Slds Apply
forcedotcom/sf-skills
Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.
Experience Lwc Generate
forcedotcom/sf-skills
Lightning Web Components with PICKLES methodology and 165-point scoring.
Related
Works with
Categories
Questions about Omnistudio Flexcard Generate
What does Omnistudio Flexcard Generate do?
OmniStudio FlexCard creation and validation with 130-point scoring. Omnistudio Flexcard Generate is an agent skill from forcedotcom/sf-skills. OmniStudio FlexCard creation and validation with 130-point scoring.
When should I use Omnistudio Flexcard Generate?
Omnistudio Flexcard Generate fits situations like: building at-a-glance UI cards; configuring data source bindings to Integration Procedures; reviewing existing FlexCard definitions for accessibility and performance; : user creates FlexCards.
How do I install Omnistudio Flexcard Generate in Claude Code?
Run `npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a claude-code`. Or copy the skill folder (skills/omnistudio-flexcard-generate in forcedotcom/sf-skills) into .claude/skills/omnistudio-flexcard-generate in your project. Claude Code loads it when a task matches its description.
How do I install Omnistudio Flexcard Generate in Codex?
Run `npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a codex`. Or copy the skill folder (skills/omnistudio-flexcard-generate in forcedotcom/sf-skills) into .agents/skills/omnistudio-flexcard-generate in your project. Codex loads it when a task matches its description.
Can I use Omnistudio Flexcard Generate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add forcedotcom/sf-skills --skill omnistudio-flexcard-generate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/omnistudio-flexcard-generate, .gemini/skills/omnistudio-flexcard-generate, .github/skills/omnistudio-flexcard-generate and .opencode/skills/omnistudio-flexcard-generate in your project.
What does Omnistudio Flexcard Generate need to run?
Going by SKILL.md and its folder, Omnistudio Flexcard Generate needs a shell for the scripts in its folder and the command-line tools its instructions call (sf). Our summary lists: A Bash shell.
Does Omnistudio Flexcard Generate access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Omnistudio Flexcard Generate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Omnistudio Flexcard Generate use?
Omnistudio Flexcard Generate is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Omnistudio Flexcard Generate use?
About 4.7k tokens (SKILL.md is roughly 19k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.6k tokens, read only when the agent opens those files.
What are the alternatives to Omnistudio Flexcard Generate?
Skills that share tags, products or a category with Omnistudio Flexcard Generate: Salesforce Component Standards (github/awesome-copilot, 40k stars), Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars) and Web Animation Design (baptisteArno/typebot.io, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Omnistudio Flexcard Generate?
forcedotcom (a GitHub organization) maintains it in forcedotcom/sf-skills, which has 1,067 GitHub stars. The repository holds 252 skills in this directory. The repository was last updated on October 9, 2026.
Source: forcedotcom/sf-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.