skills.rest
eevennsoh
eevennsohCOMMUNITY
Explore all skills by this author →
GitHub

vpk-design

Consolidate Atlassian Design System tokens, primitives, and components for consistent VPK UI.

Updated Aug 27, 2026
Search Tags:#figma#design-system#design-tokens#visual-testing#ads#primitives#code-guidance
One-click install
npx skills add https://github.com/eevennsoh/VPK --skill vpk-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vpk-design
Source: https://github.com/eevennsoh/VPK/tree/main/.cursor/skills/vpk-design
Command: npx skills add https://github.com/eevennsoh/VPK --skill vpk-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

## What problem does it solve?

ADS reference consolidation provides a single source of truth for tokens, primitives, components, and design patterns to ensure consistent, ADS-compliant UI across VPK projects.

## Core Features & Use Cases

  • Centralized ADS token, primitive, and component references to speed up implementation and verification.
  • Figma-to-code translation guidance, including token mapping and ADS-first patterns for UI elements.
  • Practical examples, best practices, and verification workflows (visual testing, accessibility checks) to accelerate delivery.

### Quick Start Open the references and implement an ADS-compliant UI component using tokens and primitives.

Frequently Asked Questions about vpk-design

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

FAQPage Schema
How do I ensure consistent UI when translating Figma designs to code?▼

To ensure consistent UI during Figma-to-code translation, you should map design elements directly to centralized Atlassian Design System tokens, primitives, and component wrappers rather than hardcoding values. This approach provides a single source of truth for visual consistency across VPK projects.

What are Atlassian Design System tokens and primitives used for?▼

Atlassian Design System tokens and primitives are foundational design variables and base UI elements used to standardize visual properties like color, spacing, and typography. They consolidate ADS references to speed up UI implementation and maintain pattern consistency across pages and components.

How do I verify ADS compliance in my UI components?▼

You verify ADS compliance in UI components by applying documentation-driven guidance and running visual testing workflows. This process checks that implemented layouts correctly utilize ADS tokens, primitives, and component wrappers to meet Atlassian Design System standards.

Can I use Atlassian Design System patterns for UI implementation without hardcoded values?▼

Yes, you can implement UI components without hardcoded values by using ADS-first patterns. This approach relies on a consolidated reference of Atlassian Design System tokens and primitives to ensure all visual properties are dynamically mapped and verified.

What is the best way to speed up UI implementation using Atlassian Design System references?▼

The best way to speed up UI implementation is by using a centralized reference for ADS tokens, primitives, and components. This consolidated source of truth provides practical examples and best practices, accelerating delivery while ensuring design verification and accessibility checks.

Related Skills

Explore More Design & Creative Skills→
pathtoresiliencebvpathtoresiliencebv

figma-implement-design

Converts Figma designs into code with visual fidelity and design-system mapping via MCP server access.

Community
Advanced
Ritik-Sharma1Ritik-Sharma1

ui-visual-validator

Validate UI components and pages for design system compliance and accessibility.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-figma

Extract design tokens and translate Figma designs into CSS-ready components.

Community
Advanced
markus41markus41
1

design-system

Apply curated visual styles and tokens to UI components.

Community
Advanced