How does this skill help match designs exactly?

It uses an iterative workflow where Playwright captures screenshots of your implementation to compare against original mocks, allowing for precise adjustments to spacing, typography, and color.

How does visual validation work?

The skill utilizes Playwright tools to navigate to your local dev server, take element or full-page screenshots, and identify visual discrepancies before you commit code.

Does this skill include accessibility testing?

Yes, it guides the implementation of semantic HTML, ARIA attributes, and keyboard navigation to ensure the UI meets WCAG standards.

Can I use this for responsive design?

Absolutely. The workflow includes tools for resizing the browser and capturing snapshots at various breakpoints to ensure the layout adapts correctly to mobile, tablet, and desktop.

Which frameworks are supported by this workflow?

While the guide highlights React and Remix, the methodology is adaptable to any modern frontend framework like Vue, Svelte, or Next.js.

UI Development Workflow

Name: UI Development Workflow
Author: kaneshin

bykaneshin

0•

Design Tools

Streamlines the creation of high-fidelity user interfaces through a design-driven workflow and automated visual validation.

The UI Development Workflow skill provides a structured methodology for building frontend components and pages that match design specifications with precision. By integrating framework implementation in React or Remix with visual validation via Playwright, it enables developers to iterate quickly and verify layout, spacing, and typography against mocks. This skill ensures production-ready results by combining Test-Driven Development (TDD) principles, responsive design patterns, and accessibility checks into a cohesive, iterative process.

Key Features

010 GitHub stars

02Automated visual validation using Playwright for screenshot comparisons

03Integrated accessibility (A11y) checks and semantic HTML enforcement

04Mobile-first responsive design testing across multiple breakpoints

05Iterative refinement cycle to ensure pixel-perfect design fidelity

06Design-to-code implementation for React and Remix frameworks

Use Cases

01Refining existing UI elements to improve visual consistency and responsiveness

02Building new application pages from Figma or image-based design mocks

03Creating reusable, accessible component libraries with consistent styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kaneshin/incubator ui-development

For use in Claude.ai and ChatGPT

Download Skill