skills.rest
akourmaz
akourmazCOMMUNITY
Explore all skills by this author →
GitHub

workflow-ui-build-order

Orchestrate a 9-phase UI build process from tokens to polish.

Updated Mar 2, 2026
Search Tags:#workflow#frontend#ui-design#design-system#design-tokens#token-driven
One-click install
npx skills add https://github.com/akourmaz/translate2 --skill workflow-ui-build-order
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-ui-build-order
Source: https://github.com/akourmaz/translate2/tree/main/.agents/skills/workflow-ui-build-order
Command: npx skills add https://github.com/akourmaz/translate2 --skill workflow-ui-build-order

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This protocol provides a structured, 9-phase workflow to orchestrate UI implementation from tokens to polish, ensuring design consistency and coordination across teams.

Core Features & Use Cases

  • Phase sequencing: establishes a deterministic order (tokens → layout → components → states → polish) to reduce ambiguity.
  • Codified prompts: includes ready prompts for @coder during each phase to speed up delivery.
  • Design-system alignment: links token creation to layout, components, states, and polish for cohesive UX.
  • Use Case: ideal for frontend feature development, major UI redesigns, and component library builds where consistency is critical.

Quick Start

Begin Phase 1 to outline design tokens and start the 9-phase workflow for UI implementation.

Frequently Asked Questions about workflow-ui-build-order

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

FAQPage Schema
What is a token-driven UI build order and why is it needed for frontend development?▼

A token-driven UI build order establishes a deterministic sequence from design tokens to layout, components, states, and polish, reducing ambiguity and ensuring design consistency across teams during frontend feature development.

How do I structure a phased UI workflow to prevent scope creep in component library builds?▼

You structure a phased UI workflow by enforcing a strict 9-phase order with explicit prompts at each stage, guarding against scope creep while ensuring token-driven styling, accessibility checks, and consistent UX outcomes.

Does this UI build process work for major frontend redesigns without existing design tokens?▼

Yes, the workflow begins with Phase 1 to outline design tokens, making it suitable for major UI redesigns and component library builds even when starting without a pre-existing token system.

What's the best way to sequence design system implementation from tokens to final polish?▼

The best way to sequence design system implementation is following the deterministic order: tokens first, then layout, components, states, and finally polish, linking each phase cohesively for consistent UX.

Can I use this phase-driven workflow for individual component development or is it only for full design systems?▼

The phase-driven workflow applies to frontend feature development, design-system initiatives, and component-library work, making it effective for both individual component development and full design system implementation.

Why does my frontend UI implementation lose consistency without a codified phase sequence?▼

Frontend UI implementation loses consistency without a codified phase sequence because there is no deterministic order enforcing token-driven styling and accessibility checks across tokens, layout, components, states, and polish.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
SeemSeamSeemSeam
17

component-composition

Verify component availability, props, states, and composition choices in UI development workflows.

Community
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
NVIDIA-NeMoNVIDIA-NeMo
58

ux-guidelines

Standardize user interface design and component implementation within NeMo Studio.

Official
Basic