skills.rest
kks0488
kks0488COMMUNITY
Explore all skills by this author →
GitHub

v-style

Codify UI design tokens, component standards, and accessibility rules for web and mobile interfaces.

26|3|Updated Jan 10, 2026
Search Tags:#design#accessibility#components#UI#tokens#design-system#style-guide
One-click install
npx skills add https://github.com/kks0488/vibe-claude --skill v-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: v-style
Source: https://github.com/kks0488/vibe-claude/tree/main/skills/v-style
Command: npx skills add https://github.com/kks0488/vibe-claude --skill v-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes UI design decisions across products, turning scattered visuals into a cohesive, accessible experience.

Core Features & Use Cases

  • Token system for colors, typography, and spacing to ensure consistent visuals.
  • Component standards for Buttons, Cards, Forms, and layouts to accelerate development.
  • Accessibility guidelines and verification to meet contrast, focus, and keyboard navigation.
  • Use Case: When launching a new dashboard, apply v-style to align typography, color palette, and components across the UI.

Quick Start

Reference the v-style guidelines to apply a bold, accessible UI system across new components, and adapt tokens for color, typography, and spacing in your design work.

Frequently Asked Questions about v-style

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

FAQPage Schema
How do I standardize UI design across multiple web and mobile projects?▼

To standardize UI design across projects, codify a scalable style system using design tokens for colors, typography, and spacing alongside component standards for buttons, cards, and forms to ensure visual consistency.

What is a design token system and how does it work for UI components?▼

A design token system centralizes visual attributes like colors, typography, and spacing into reusable variables. It guides designers to implement consistent component standards across web and mobile products, aligning visuals throughout the interface.

How do I enforce accessibility guidelines for color contrast and keyboard navigation?▼

You can enforce accessibility guidelines by codifying specific requirements for contrast, focus, and keyboard navigation within your style system. These rules are then verified and applied during design reviews and development.

Can I use a style guide to align typography and color palettes for a new dashboard?▼

Yes, when launching a new dashboard, you can apply a style guide to align typography, color palettes, and UI components. It adapts tokens to ensure a cohesive and accessible visual experience across the dashboard.

What's the best way to accelerate component development for forms and cards?▼

The best way to accelerate component development is by defining component standards for buttons, cards, and forms. Applying a unified token system ensures these elements are built consistently without redesigning visuals each time.

Related Skills

Explore More Design & Creative Skills→
riabtsevriabtsev

normalize

Normalize UI features to align with design system standards.

Community
Advanced
zli5460zli5460
2

design-md

Create, validate, and export design tokens from structured files.

Community
Intermediate
ksciuskscius
2

web-accessibility

Enforce WCAG 2.1 AA accessibility requirements for web UI components.

Community
Intermediate
Hey-ViswaHey-Viswa

mongodb-design-skill

Apply MongoDB design-system guidelines to React/Next.js UI patterns.

Community
Advanced