rzyfront/vendix-ui-ux
skills/vendix-ui-ux/SKILL.md
Mobile-first UI/UX design philosophy, accessibility standards, visual quality checklist, and skill routing for Vendix frontend work. Trigger: When designing UI screens, implementing mobile-first layouts, checking accessibility, or creating landing pages.
$ install --global
skillsauthnpx skillsauth add rzyfront/vendix vendix-ui-uxInstall 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:14 AM147.7s1 file scanned
SKILL.md
- name:
- vendix-ui-ux
- description:
- >
- and skill routing for Vendix frontend work. Trigger:
- When designing UI screens,
- license:
- MIT
- author:
- rzyfront
- version:
- 2.0
- scope:
- [root]
- auto_invoke:
- Designing UI screens, mobile-first layouts, accessibility review, landing pages, UX patterns
Vendix UI/UX
Purpose
This is the broad design checklist. For implementation details, use the specialized frontend skills listed below.
Core Standards
- Mobile-first base styles; add larger-screen behavior with
min-widthmedia queries. - Semantic HTML: actions use
button, navigation usesa/router links. - Accessible touch targets: at least 44px where practical.
- Visible focus states; never remove outlines without replacement.
- Form fields need labels, not placeholders only.
- Use theme tokens (
var(--color-*)) instead of hardcoded colors. - Animate
transformandopacity; avoid layout-property animations. - Respect
prefers-reduced-motionfor substantial motion.
App Context
| App | Priority |
| --- | --- |
| STORE_ECOMMERCE | Mobile conversion, speed, trust |
| STORE_ADMIN | Efficient admin workflows across mobile/desktop |
| STORE_POS | Touch-first speed and low friction |
| ORG_ADMIN | Dense data, reporting, multi-store management |
Mobile-First Checklist
- Base layout works on narrow screens.
- Body/input text avoids iOS zoom issues.
- Cards/tables do not create accidental horizontal overflow.
- Sticky elements do not block primary actions.
- Primary action is reachable and visually clear.
Accessibility Checklist
- Text contrast targets WCAG AA.
- Icon-only buttons have
aria-label. - Images have meaningful
altor are marked decorative. - Errors are clear and associated with fields where possible.
- UI state is not communicated by color alone.
Visual Quality Checklist
- One primary goal per screen.
- Clear hierarchy: title, supporting text, primary action, secondary actions.
- Consistent spacing and radius within a module.
- Loading, empty, error, and success states are designed.
- Avoid generic AI-looking gradients or interchangeable layouts unless the existing design system already uses them.
Skill Routing
- Angular component structure:
vendix-frontend-component. - Zoneless/signals/CVA:
vendix-zoneless-signals. - Reactive forms:
vendix-angular-forms. - Icons:
vendix-frontend-icons. - Modals:
vendix-frontend-modal. - Theme/tokens:
vendix-frontend-theme. - Standard admin modules:
vendix-frontend-standard-module. - Tables/cards:
vendix-frontend-data-display. - Stats/KPIs:
vendix-frontend-stats-cards. - Sticky headers:
vendix-frontend-sticky-header. - App/domain context:
vendix-app-architecture.
Related Skills
vendix-frontendvendix-frontend-themevendix-frontend-data-displayvendix-zoneless-signals
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