Skills
.Work. You
Rest

vivreal-design-system

Official

Streamline portal UI/UX design and review with Vivreal Design System

Design & Creative#accessibility#mobile-first#design system#ui/ux design#vivreal
AuthorHillBombCreations
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: vivreal-design-system
Download link: https://github.com/HillBombCreations/vivreal-skills/archive/main.zip#vivreal-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.