feat(experience-lwc-generate): add native lightning/modal example, ma…

[bfmvsa]

What changed

Added a new assets/native-modal-component/ bundle to experience-lwc-generate (nativeModalComponent.js, .html, .js-meta.xml) demonstrating the native lightning/modal service (LightningModal) — header/body/footer via lightning-modal-* subcomponents, @api inputs, and explicit close() per action, with a usage snippet showing how a parent opens it via YourModalName.open({...}).

Updated SKILL.md's asset index and references/component-patterns.md's Modal Component Pattern section to list the native modal as the default pattern, and re-labeled the existing hand-rolled composable modal (assets/modal-component/) as a fallback for cases lightning/modal can't cover.

Why

The existing modal asset only showed a ~200-line custom composable modal (focus trap, ESC handling, backdrop) based on an older blog pattern, even though this skill's own reference doc already lists lightning/modal as the native solution and says "avoid reinventing what base components already provide." The custom pattern also passes a save handler as a function reference via @api, which doesn't work when the component sits on an Aura-based Experience Builder page. Native lightning/modal gets focus trap, ESC-to-close, ARIA, and size variants for free, and current Salesforce docs confirm it's usable in Aura-based Experience Builder sites, so it should be the default example rather than the fallback.

Notes

• Didn't remove assets/modal-component/, since it's still useful where lightning/modal isn't available (e.g. an unconfirmed gap on some LWR site templates) — flagged it as fallback instead of deleting it.
• Not yet validated end-to-end in an actual Experience Builder site; would be good for a reviewer with org access to confirm lightning/modal behavior on their site template of choice.
• Didn't touch the function-reference @api modalSaveHandler anti-pattern in the existing custom modal — left as a follow-up since fixing it means changing that component's public API.

---

Skills

Manual checklist

Description quality

• Describes what the skill does and the expected output
• Includes relevant Salesforce domain keywords (Apex, LWC, SOQL, metadata types, etc.)
• Trigger phrases are specific enough for Vibes to select this skill reliably

Instructions

• Clear goal statement
• Step-by-step workflow
• Validation rules for generated output
• Defined output / artifact

Context efficiency

• Core instructions are concise — supporting material lives in templates/, examples/, or docs/ subdirectories
• No unnecessary background explanation in the body

Automated checks

Enforced by CI (npm run validate:skills) per the Agent Skills spec:

• Directory is one level deep, named in kebab-case (max 64 chars), contains SKILL.md
• Frontmatter name matches directory name; description is present, ≥ 20 words, ≤ 1024 characters, and includes trigger language
• Body is non-empty and under 500 lines
• Name uses gerund form ⚠ (warning — does not block merge)