Skills
.Work. You
Rest

ui-dsl

Community

Turn UI sketches into a technology-agnostic DSL.

Design & Creative#ui#design-system#mapping#dsl#elaboration#state-transitions#vaadin
Authorjs-rom
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • Technology-independent YAML DSL describing components, layout, and state transitions.
  • Project-level Design System defining design tokens, spacing, typography, accessibility constraints, and responsive rules.
  • Technology mapping to Vaadin 25 (default) with explicit traceability to SSDs and Operation Contracts.
  • Mandatory pair-programming workflow: driver and navigator collaboration to produce three artifacts: Abstract UI DSL, Design System, and Vaadin mapping.

Quick Start

Share a UI sketch or description, and start the pair-programming workflow to produce the UI DSL, the Design System, and the Vaadin mapping.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-dsl
Download link: https://github.com/js-rom/Luis/archive/main.zip#ui-dsl

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.