rzyfront/vendix-frontend-modal
skills/vendix-frontend-modal/SKILL.md
Modal implementation patterns for Vendix frontend: app-modal API, model-based visibility, slots, outputs, zoneless-safe close/open behavior, and modal wrapper usage in feature flows. Trigger: When creating or modifying modals in frontend.
$ install --global
skillsauthnpx skillsauth add rzyfront/vendix vendix-frontend-modalInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 5:07 AM112.3s1 file scanned
SKILL.md
- name:
- vendix-frontend-modal
- description:
- >
- Modal implementation patterns for Vendix frontend:
- app-modal API, model-based visibility,
- Trigger:
- When creating or modifying modals in frontend.
- license:
- MIT
- author:
- rzyfront
- version:
- 2.0
- scope:
- [root]
- auto_invoke:
- Creating or modifying modals in frontend
Vendix Frontend Modal
Source of Truth
apps/frontend/src/app/shared/components/modal/modal.component.tsapps/frontend/src/app/shared/components/modal/README.md
Current app-modal API
app-modal is a standalone shared component using signal APIs.
Inputs:
isOpenviamodel<boolean>(false)titlesubtitlesize:sm | md | lg | xl-mid | xlcenteredcloseOnBackdropcloseOnEscapeshowCloseButtonoverlayCloseButtoncustomClasses
Outputs:
openedclosedcancel
Slots/content areas:
- default body content
[slot=header][slot=header-end][slot=footer]
Rules
- Always follow
vendix-zoneless-signalspatterns when wrapping modals. - Use
[(isOpen)]with a signal/model in the parent or wrapper component. - Prefer shared system components inside the modal body, but this is a preference, not a false hard rule.
- Use the footer slot for action buttons.
- Listen to
cancelwhen the wrapper needs cleanup on close.
Behavior Notes
openedandclosedare emitted from aneffect()observingisOpen()transitions.close()setsisOpen(false)and emitscancel.- Escape closing is wired through a browser-only keydown listener.
- Current backdrop-close handling is attached to the wrapper
dblclickpath plus outside-container detection; document current behavior, do not assume a different click contract without checking the component.
Wrapper Pattern
- Wrapper components should own form state, submit state, and domain-specific cleanup.
app-modalowns only generic modal chrome/visibility behavior.- Keep create/edit flows on the same screen when that matches the surrounding module pattern; do not force route-based CRUD when the existing UX is modal-first.
Related Skills
vendix-zoneless-signalsvendix-frontend-componentvendix-angular-forms
Related Skills
rzyfront/mobile-dev
development
VerifiedTrustedCommunity
Mobile app development rules for Vendix Expo/React Native project. Trigger: When editing, creating, or modifying any file under apps/mobile, or when developing mobile-specific features.
5SKILL.mdUpdated May 29, 2026
rzyfront/vendix-subscription-gate
development
VerifiedTrustedCommunity
Feature gating by store subscription state: global store write guard, AI feature gate, Redis feature resolution, quota consumption, frontend paywall interceptor, banner, and subscription UI states. Trigger: When adding feature gates, paywalls, subscription-based access control, protecting store write operations, AI feature gates, or rollout flags.
5SKILL.mdUpdated May 16, 2026
rzyfront/vendix-saas-billing
testing
VerifiedTrustedCommunity
SaaS subscription billing for Vendix stores: plan pricing, invoices, Wompi platform payments, manual payments, partner commissions, payouts, proration, and dunning. Trigger: When creating SaaS invoices, working with partner rev-share, margin/surcharge pricing, invoice sequence allocation, partner payout batches, subscription payments, manual payments, or dunning flows.
5SKILL.mdUpdated May 16, 2026
rzyfront/vendix-redis-quota
development
VerifiedTrustedCommunity
Periodic quota counters with Redis, UTC period keys, Lua-based idempotent AI quota consumption, request-id deduplication, and post-success consumption. Trigger: When building quota counters, enforcing monthly/daily feature caps, or reusing AI quota patterns for uploads, emails, exports, or rate-limited features.
5SKILL.mdUpdated May 16, 2026