skills.rest
Daaaaave
DaaaaaveCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-workflow

Audit frontend UI components against design-system tokens and accessibility checks.

6|Updated May 23, 2026
Search Tags:#ui#accessibility#frontend#design-system#component-audit#ui-workflow
One-click install
npx skills add https://github.com/Daaaaave/agentic-workspace-core --skill frontend-ui-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-workflow
Source: https://github.com/Daaaaave/agentic-workspace-core/tree/main/payload/.agents/skills/frontend-ui-workflow
Command: npx skills add https://github.com/Daaaaave/agentic-workspace-core --skill frontend-ui-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI work often suffers from drift between design intent and implemented UI, leading to inconsistent visuals, accessibility gaps, and inefficient handoffs.

Core Features & Use Cases

  • Design-to-Implementation Guardrails: ensures components, tokens, and spacing align with the design system.
  • UI Quality Loop: coordinates design reviews, component audits, and accessibility checks across pages and flows.
  • Workflow Handoff & Documentation: captures design decisions and running UI guidance for engineers.

Quick Start

Kick off the UI quality loop for a running screen using the integrated design-system guidance.

Frequently Asked Questions about frontend-ui-workflow

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

FAQPage Schema
How do I prevent design system drift between design and frontend implementation?▼

Conduct a component audit by running a quality loop that coordinates design reviews and accessibility checks across pages and flows. This systematically identifies visual inconsistencies and UX pattern deviations within your product.

How do I run accessibility checks on frontend components within a design system?▼

Coordinate design and engineering teams by capturing design decisions and running UI guidance in shared workflow handoff documentation. This bridges communication gaps and ensures consistent implementation standards.

Do I need a fully established design system to improve frontend UI consistency?▼

Established design-system tokens provide the baseline for design-to-implementation guardrails. Without them, focus the UI quality loop on auditing existing patterns to extract and formalize token standards for consistent implementation.

What's the best way to document UI decisions for engineering handoff?▼

Start a UI quality loop using integrated design-system guidance for your running screen. This initiates coordinated design reviews, component audits, and accessibility checks to systematically improve frontend UI quality.

Related Skills

Explore More Design & Creative Skills→
systempromptiosystempromptio
2

ux-ui-guide

Route design tasks to UX/UI sub-skills and enforce frontend-coding-standards alignment.

Official
Intermediate
datamonsterrdatamonsterr

ui-design-system

Generate design tokens, typography scales, spacing rules, and breakpoints.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate