skills.rest
payloadcms
payloadcmsOFFICIAL
Explore all skills by this author →
Website𝕏@payloadcmsGitHub

ui4

Automate Payload CMS UI reskinning from Figma designs with SCSS to CSS migration.

44.1k|4.0k|Updated Jan 5, 2021
Search Tags:#ui development#ui customization#payload cms#figma integration#css migration
One-click install
npx skills add https://github.com/payloadcms/payload --skill ui4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui4
Source: https://github.com/payloadcms/payload/tree/main/.claude/skills/ui4
Command: npx skills add https://github.com/payloadcms/payload --skill ui4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-api, node-sass, postcss, autoprefixer, and includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about ui4

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

FAQPage Schema
How do I reskin Payload CMS UI components using Figma designs?▼

To reskin Payload CMS components using Figma designs, the ui4 skill automates the process by analyzing Figma component variants and updating SCSS styles to match the design context provided by your Figma integration.

How does SCSS to CSS migration work for Payload UI customization?▼

SCSS to CSS migration for Payload UI customization works by converting legacy SCSS syntax to CSS and updating legacy `--base` tokens to `--spacer` tokens, ensuring component styling compatibility during the design reskinning process.

Do I need a Figma API integration to update Payload CMS component styles?▼

Yes, you need a Figma API integration to update Payload CMS component styles. The skill requires Figma design context to analyze component variants and apply the visual states to your UI elements.

Can I automate end-to-end tests for Payload CMS visual variants?▼

Yes, you can automate end-to-end tests for Payload CMS visual variants. The skill creates E2E tests for all visual states and verifies that the test collection includes every variant for visual verification.

What is the best way to scan for icon dependencies during UI customization?▼

The best way to scan for icon dependencies during UI customization is using the automated icon scanning feature, which identifies and lists all icon dependencies directly from your component files before applying Figma design updates.

Does the ui4 skill handle legacy token migration for Payload CMS components?▼

Yes, the ui4 skill handles legacy token migration for Payload CMS components by automatically converting legacy `--base` tokens to `--spacer` tokens during the Figma design reskinning process.

Related Skills

Explore More Software Engineering Skills→
sinfinsinfin
10

folio-scss

Define Sass/SCSS conventions for Folio component styling with BEM and responsive design.

Official
Intermediate
DatTran26DatTran26

ck:test

Execute unit, integration, e2e, and UI tests with coverage reports.

Community
Advanced
ehtbantonehtbanton

postcss-config-builder

Generate PostCSS configuration files with tailwindcss, autoprefixer, and cssnano plugins.

Community
Basic
TheBushidoCollectiveTheBushidoCollective
187

helm-values

Manage Helm values files and configuration overrides for Kubernetes deployments.

Official
Intermediate