Align UI design artifacts into a master Design System, Visual Specs, Interaction Spec, and Vaadin Mapping.
npx skills add https://github.com/js-rom/Luis --skill ui-design-js-rom
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/js-rom/Luis/tree/main/.agents/skills/ui-design Command: npx skills add https://github.com/js-rom/Luis --skill ui-design-js-rom
Aligns UI design artifacts into a cohesive master Design System, per-state Visual Specs, an Interaction Spec, and a Vaadin Mapping, to ensure consistent implementation across teams.
This skill integrates design-system governance with concrete state and behavior specs to streamline handoffs and reduce iteration cycles.
Begin by drafting the Design System and the State Visual Specs for the target use case, then create the Interaction Spec and Vaadin Mapping for review.
High-intent search queries and answers about installing and using this skill.
To align UI design artifacts for Vaadin, you consolidate project-level tokens, typography, and spacing into a master Design System, then generate per-state visual specs and an interaction spec to ensure consistent implementation across teams.
A state visual spec defines per-use-case visuals for significant UI states, including assets and token usage. You need it during the elaboration phase when a use case involves multiple UI states to ensure traceability from visuals to behavior.
You create an interaction spec using YAML to describe transitions, validations, and traceability to SSDs and operation contracts. This aligns state visual specs with behavior to enable deterministic handoffs to frontend teams.
Yes, the workflow supports pair-programming by ensuring cross-disciplinary collaboration between design and frontend teams. It integrates design-system governance with concrete state and behavior specs to streamline handoffs.
Yes, you can map design-system decisions to Vaadin 25 Flow implementation. The skill generates a Vaadin mapping document that aligns the master design system, state visual specs, and interaction spec with Vaadin 25 components.
You need the master design system formatted as YAML. This file defines project-level tokens, typography, spacing, and accessibility constraints that drive all views and subsequent state visual specs.
drgaciwGenerate design tokens and documentation from brand colors and typography scales.
marcushellbergBuild client-side Vaadin 25 views with React or Hilla.
felipeganameRun AI-assisted pair programming sessions with multiple collaboration modes.
antvisConvert user content into AntV Infographic DSL syntax with templates and theming.
