Skills
.Work. You
Rest

ui4

Official

Reskin Payload UI components with Figma designs.

Software Engineering#ui development#ui customization#payload cms#figma integration#css migration
Authorpayloadcms
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the process of reskinning Payload UI components using Figma designs, allowing for quick and efficient UI updates.

Core Features & Use Cases

  • Icon Scanning: Identifies and lists icon dependencies from component files.
  • SCSS to CSS Migration: Converts SCSS to CSS syntax for compatibility.
  • Token Migration: Converts legacy --base tokens to --spacer tokens.
  • Figma Component Variants Analysis: Analyzes all visual states of Figma components.
  • Restyling to Match Figma: Updates styles to match Figma design context.
  • Test Collection Verification: Ensures test collection has all variants for visual verification.
  • E2E Tests: Creates end-to-end tests for all visual variants.

Quick Start

Use the ui4 skill to reskin the 'Button' component with the provided Figma design URL.

Dependency Matrix

Required Modules

figma-apinode-sasspostcssautoprefixer

Components

scriptsreferencesassets

💻 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: ui4
Download link: https://github.com/payloadcms/payload/archive/main.zip#ui4

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.