skills.rest
endlessblink
endlessblinkCOMMUNITY
Explore all skills by this author →
GitHub

dev-implement-ui-ux

Organize UI/UX design into a repeatable process with design tokens and WCAG 2.2.

Updated Nov 29, 2025
Search Tags:#typography#accessibility#ui-design#ux-design#design-tokens#color-theory#spacing-system
One-click install
npx skills add https://github.com/endlessblink/flow-state --skill dev-implement-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-implement-ui-ux
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/%F0%9F%8E%AF%20dev-implement-ui-ux
Command: npx skills add https://github.com/endlessblink/flow-state --skill dev-implement-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX design and implementation often suffer from inconsistencies and slow delivery. This skill provides principled design systems, typography, spacing, layout practices, and accessibility guidelines to unify design and development.

Core Features & Use Cases

  • Color theory, typography, spacing, and layout tokens to create cohesive visual systems.
  • Accessibility (WCAG 2.2), animation patterns, and systematic implementation workflows for reliable, inclusive UI.
  • Design-to-code handoffs and cross-disciplinary collaboration between design and engineering using tokens and guidelines.

Quick Start

Provide a design brief and I will generate a complete UI/UX implementation plan.

Frequently Asked Questions about dev-implement-ui-ux

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

FAQPage Schema
How do I create a token-driven UI design system for web and mobile projects?▼

To create a token-driven UI design system, you establish reusable variables for color, typography, and spacing. This standardizes visual elements and streamlines design-to-code handoffs across web and mobile platforms.

What is the best way to ensure typography and color systems meet WCAG 2.2 accessibility standards?▼

Ensuring typography and color systems meet WCAG 2.2 accessibility standards requires verifying contrast ratios and implementing responsive typography. This guarantees text remains legible and inclusive across all user interfaces.

How do I structure design tokens for spacing and layout grids?▼

Structuring design tokens for spacing and layout grids involves applying a systematic spacing scale to your layout architecture. This creates a cohesive visual rhythm and ensures predictable element alignment across your application.

Can I use this approach to establish cross-team UI/UX collaboration between design and engineering?▼

Yes, you can use this token-driven approach to establish cross-team collaboration. By sharing a unified set of design tokens and guidelines, design and engineering teams maintain a single source of truth for UI implementation.

What is included in a complete UI/UX implementation plan for a new design brief?▼

A complete UI/UX implementation plan includes color theory, typography, spacing, layout grids, accessibility compliance, and motion patterns. It organizes these elements into a repeatable workflow for cohesive visual system delivery.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
ArnavPuriArnavPuri
3

design-system

Generate CSS custom properties from primitive color and spacing tokens.

Community
Advanced