skills.rest
jamsmac
jamsmacCOMMUNITY
Explore all skills by this author →
GitHub

vhm24-ux-spec

Translates UX goals into screen specifications for frontend development.

Updated Aug 27, 2026
Search Tags:#specification#analysis#ux#design-system#frontend-architecture#screen-design
One-click install
npx skills add https://github.com/jamsmac/VHM24 --skill vhm24-ux-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vhm24-ux-spec
Source: https://github.com/jamsmac/VHM24/tree/main/skills/vhm24-ux-spec
Command: npx skills add https://github.com/jamsmac/VHM24 --skill vhm24-ux-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

VendHub UX Specification Expert ensures every screen is defined by a clear, thorough specification before any UI code is generated, reducing rework and misalignment with design intent.

Core Features & Use Cases

  • Formalize screen specs: Generate a comprehensive spec detailing user flows, components, data requirements, and interactions prior to implementation.
  • UX personas & design system alignment: Incorporates insights from Senior UX Designer, UI Designer, Interface Specialist, and Frontend Architect to ensure consistency with the Warm Brew design system and accessibility standards.
  • Use case example: Given a new screen request, produce a specification document that includes goals, user paths, component list, API data needs, states, and adaptive behavior.

Quick Start

Provide a ready-to-use spec outline for a new screen, including header, content structure, data models, and interaction table.

Frequently Asked Questions about vhm24-ux-spec

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

FAQPage Schema
How do I create UX specifications for frontend development before writing code?▼

Generating UX specifications requires outlining user flows, data models, and interaction tables. This Skill produces a ready-to-use spec document detailing goals, user paths, components, API data needs, states, and adaptive behavior for admin and operator screens.

What should a screen design specification include for a design system?▼

A comprehensive screen spec includes goals, user paths, component lists, API data needs, states, and adaptive behavior. It aligns with the design system by incorporating insights from UX, UI, Interface, and Frontend Architect perspectives to ensure accessibility and consistency.

How do I define acceptance criteria for UI and interface specifications?▼

Acceptance criteria are defined across UX, UI, Interface, and Tech dimensions. This expert-driven analysis ensures the specification covers user flows, visual design, interaction patterns, and frontend architecture constraints before implementation begins.

Can I use a spec template for both admin and operator screen designs?▼

Yes, the specification template applies to both admin and operator screen designs. It produces documentation covering user flows, components, data models, and interaction tables tailored to each specific screen's functional requirements.

When should I write a UX spec instead of starting frontend architecture directly?▼

Write a UX spec before frontend architecture to prevent rework and misalignment with design intent. Generating code without defined user flows, data requirements, and interaction states risks structural inconsistencies and accessibility gaps during implementation.

Related Skills

Explore More Design & Creative Skills→
spontus-reachspontus-reach
1

figma-design-brief

Convert product requirements into structured Figma-ready design briefs.

Official
Intermediate
dceoydceoy
120

speckit-baseline

Analyze source code to generate feature specifications with user stories and acceptance criteria.

Community
Advanced
leonardoteodorooleonardoteodoroo

web-component-design

Standardize reusable UI component patterns across React, Vue, and Svelte.

Community
Advanced
uni-helperuni-helper
95

uni-app

Develop Vue.js applications for iOS, Android, Web, and mini-programs.

Official
Advanced