skills.rest
HillBombCreations
HillBombCreationsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vivreal-design-system

Provides design guidelines, tokens, and mobile-first patterns for Vivreal portal UI/UX development.

Updated May 12, 2026
Search Tags:#accessibility#mobile-first#design system#ui/ux design#vivreal
One-click install
npx skills add https://github.com/HillBombCreations/vivreal-skills --skill vivreal-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vivreal-design-system
Source: https://github.com/HillBombCreations/vivreal-skills/tree/main/vivreal-knowledge/skills/vivreal-design-system
Command: npx skills add https://github.com/HillBombCreations/vivreal-skills --skill vivreal-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the complexities of designing and reviewing Vivreal portal UI/UX, providing a set of design tokens, patterns, and guidelines to ensure consistency and accessibility across all portal interfaces.

Core Features & Use Cases

  • Component & Layout Conventions: Offers conventions for creating and reviewing dashboard statistics, usage panels, activity feeds, and more.
  • Design Tokens: Provides a set of design tokens for colors, typography, and spacing to ensure consistent branding and theming.
  • Mobile-First Approach: Ensures designs are optimized for mobile users, with thumb zone accessibility and touch-first interactions.
  • Accessibility Compliance: Ensures that designs meet WCAG 2.2 AA standards for accessibility.
  • Use Case: A designer working on a new portal interface can use this Skill to reference the design conventions, tokens, and mobile patterns to create an accessible and user-friendly interface.

Quick Start

Use the vivreal-design-system skill to review the UI/UX design of the 'dashboard' component for accessibility and consistency.

Frequently Asked Questions about vivreal-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What design tokens and patterns are needed for consistent portal UI/UX design?▼

Mobile-first UI/UX design ensures interfaces are optimized for mobile users by incorporating thumb zone accessibility and touch-first interactions, guaranteeing portal layouts remain accessible and functional on smaller screens.

How do I ensure my portal interface meets WCAG accessibility compliance?▼

To ensure accessibility compliance, your portal interface must meet WCAG 2.2 AA standards by applying mobile-first design principles and consistent UI patterns during the design and review process.

How do I review a dashboard component for UI/UX consistency and accessibility?▼

Review a dashboard component for accessibility and consistency by referencing established design conventions, mobile patterns, and design tokens to validate its layout, touch interactions, and visual hierarchy.

Can I use this design system for components like usage panels and activity feeds?▼

Yes, this design system provides specific component and layout conventions for creating and reviewing dashboard statistics, usage panels, and activity feeds to maintain consistency across the portal.

Related Skills

Explore More Design & Creative Skills→
PriyanshKuniyalPriyanshKuniyal

accessibility-compliance

Implement WCAG 2.2 Level AA and AAA compliance for mobile accessibility.

Community
Advanced
YeomanYeYeomanYe

frontend-design

Design and implement production-grade frontend interfaces from user requirements.

Community
Advanced
Spectaculous-CodeSpectaculous-Code

frontend-design

Generate responsive React interfaces with shadcn/ui and Tailwind CSS.

Official
Intermediate
HillBombCreationsHillBombCreations

ux-critic

Critique Vivreal portal screens and customer sites through dual user and designer lenses.

Official
Advanced