Convert UI sketches into a technology-independent YAML DSL with Vaadin 25 mapping.
npx skills add https://github.com/js-rom/Luis --skill ui-dsl
Please help me install this Agent Skill. Skill: ui-dsl Source: https://github.com/js-rom/Luis/tree/main/.agents/skills/ui-dsl Command: npx skills add https://github.com/js-rom/Luis --skill ui-dsl
UI design handoffs frequently require translating sketches into formal specifications. This Skill converts sketches or screenshots into a technology-independent YAML DSL describing UI components, layout regions, and state transitions, while also defining a project-level Design System and mapping strategy to a concrete UI technology (Vaadin 25). The DSL ensures traceability to SSDs and Operation Contracts, enabling end-to-end elaboration.
Share a UI sketch or description, and start the pair-programming workflow to produce the UI DSL, the Design System, and the Vaadin mapping.
High-intent search queries and answers about installing and using this skill.
To turn a UI sketch into a technology-agnostic YAML DSL, share the sketch or screenshot to initiate a pair-programming workflow that outputs a YAML specification describing components, layout regions, and state transitions.
Defining a design system from a UI sketch involves mapping the sketch into an abstract YAML DSL, which is then used to establish project-level design tokens, spacing, typography, accessibility constraints, and responsive rules.
You map UI state transitions to SSDs and Operation Contracts by generating a YAML DSL that validates every transition against your SSD operations and OCs, ensuring end-to-end traceability across the elaboration steps.
Yes, you can generate a Vaadin 25 UI mapping from a screenshot by applying the technology-independent YAML DSL to define explicit mapping strategies for Vaadin components while maintaining traceability to your design system.
Yes, a mandatory pair-programming workflow with a driver and navigator is required to collaborate on producing the three artifacts: the Abstract UI DSL, the Design System, and the technology mapping.
apolosanGenerate System Operation Contracts from System Sequence Diagrams with OCL post-conditions.
X-School-AcademyCreate UX design documentation with user flows, interaction specs, and interactive mockups.
Chorus-AIDLCManage ideas from claim to proposal within the Chorus workflow.
10knamesmoreExtract page-level business interactions from React frontend source into YAML/Markdown.
