Standardizes creation and modification of Vue modal components in the Toollab Nuxt application.
npx skills add https://github.com/sebauvray/toollab-api --skill modals-sebauvray
Please help me install this Agent Skill. Skill: modals Source: https://github.com/sebauvray/toollab-api/tree/main/.claude/skills/modals Command: npx skills add https://github.com/sebauvray/toollab-api --skill modals-sebauvray
update instead of save, ConfirmationModal prop names, clipped InputSelect panels, and whitelisted payload fields in services. - Use Case: When asked to add an "Edit Student" modal, produce a component that follows the house template, emits save with {resolve, reject}, displays 422 field errors, and avoids clipped selects. ## Quick Start Create a new edit modal for the Toollab app following the modals skill conventions, with promise-based save handling and field-level validation errors.High-intent search queries and answers about installing and using this skill.
Use the universal template: an overlay div with bg-black/50 and @click.self close, a rounded-2xl panel with left-aligned header, body, and right-aligned footer buttons. Expose an isOpen prop and emit close and save events, with the parent owning the visibility state.
Emit save with the payload plus a {resolve, reject} callbacks object, then await a Promise wrapping those callbacks. The parent calls resolve on success so the modal resets and closes itself, or reject with the error so the modal displays 422 field errors.
Custom select components render their list in an absolute z-50 panel, which gets cut by an overflow-y-auto modal body. Fix it by setting a min-height like min-h-[28rem] on the body or using the drop-up prop on selects near the bottom.
Some modals emit non-standard events; for example UpdateClassModal emits update instead of save, so binding @save silently does nothing. Always check the modal's exact event contract before wiring parent handlers.
Delegated modals emit save with resolve/reject and let the parent call the API, while autonomous modals call the service themselves and emit save only on success. Identify which family a modal belongs to before modifying it, since mixing the two breaks error handling.
AsmayaseenDefine frontend TypeScript types from backend contracts with naming conventions.
MrJmpl3Subscribe to Laravel Echo channels and update Nuxt UI on events.
Suriya-KodehodeImplement Angular ButtonComponent variants with shared SCSS styling conventions.
borderuxApplies house rules for choosing between panels, modals, and pages in enterprise web applications.