rzyfront/vendix-tour
skills/vendix-tour/SKILL.md
Interactive tour system for Vendix frontend: TourService state persistence, responsive tour modal, config-based steps, device-specific targets, and first-visit guidance flows. Trigger: When creating or modifying guided tours in frontend.
$ install --global
skillsauthnpx skillsauth add rzyfront/vendix vendix-tourInstall 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, 6:00 AM58.8s1 file scanned
SKILL.md
- name:
- vendix-tour
- description:
- >
- Interactive tour system for Vendix frontend:
- TourService state persistence, responsive
- Trigger:
- When creating or modifying guided tours in frontend.
- license:
- MIT
- author:
- rzyfront
- version:
- 2.0
- scope:
- [root]
- auto_invoke:
- Creating or modifying guided tours in frontend
Vendix Tour
Source of Truth
apps/frontend/src/app/shared/components/tour/services/tour.service.tsapps/frontend/src/app/shared/components/tour/tour-modal/tour-modal.component.tsapps/frontend/src/app/shared/components/tour/configs/*.config.tsapps/frontend/src/app/shared/components/tour/README.md
Current Architecture
TourServicestores active session state in a signal and exposesstate$throughtoObservable.- Persistent completed/skipped state is stored in
user_settings.config.toursthroughAuthFacade.updateUserSettings(...). TourModalComponentis standalone and uses:isOpen = model<boolean>(false)tourConfig = input<TourConfig>(POS_TOUR_CONFIG)completed = output<void>()skipped = output<void>()
Config Model
Current tour configs use TourConfig and TourStep from the service, including:
targettargetMobiletargetDesktopautoAdvanceTarget- mobile/desktop auto-advance variants
- optional lifecycle hooks:
beforeShow,afterShow,beforeNext
Responsive Behavior
- Mobile tooltip is compact/minimizable.
- Desktop tooltip is larger and shows progress more prominently.
- Spotlight/tooltip positioning adapts to target geometry and device type.
- Device-specific selectors are supported and should be preferred when layout differs materially between mobile and desktop.
Rules
- Use stable selectors, ideally
data-tourattributes, for important targets. - Keep configs in
shared/components/tour/configs/when reusable across flows. - Use
TourService.canShowTour(tourId)before opening a first-visit tour. - Persist completed/skipped state through the service; do not duplicate local storage logic in feature components.
- Follow zoneless/signal patterns when integrating tour visibility into pages.
Integration Pattern
- Feature component owns the local open signal/model.
- Tour config is passed into
app-tour-modal. completedandskippedoutputs can close the wrapper state or trigger follow-up UI.
Related Skills
vendix-zoneless-signalsvendix-frontend-componentvendix-ui-ux
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