vibe-interaction

Define granular UI interaction specifications and state machines for Vibe Coding workflows.

113|12|Updated May 19, 2026

Search Tags:#ui-ux #shadcn #interaction-design #agent-workflow #vibe-coding #product-specification

Ready to run

npx skills add https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills --skill vibe-interaction

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vibe-interaction
Source: https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills/tree/main/plugins/qima/skills/vibe-interaction
Command: npx skills add https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills --skill vibe-interaction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the ambiguity in Vibe Coding by forcing a precise, granular definition of how users interact with every page and element, preventing the common cycle of AI-generated UI rework.

Core Features & Use Cases

Granular Interaction Mapping: Defines every page layout, module, and element behavior (loading, empty, error, forbidden states).
Standardized Taxonomy: Enforces a strict 11-keyword taxonomy (e.g., navigate, modal, drawer) to ensure implementation consistency.
Use Case: When building a complex dashboard, use this Skill to define exactly what happens when a user clicks a row—whether it triggers a drawer, a modal, or a navigation—ensuring the developer or AI agent has a zero-ambiguity blueprint.

Quick Start

Use the vibe-interaction skill to generate a detailed interaction document based on the existing idea.md file in the current directory.

Frequently Asked Questions about vibe-interaction

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

FAQPage Schema

How do I define UI interaction specifications for Vibe Coding to prevent AI rework?▼

Define UI interaction specifications by mapping granular element behaviors and state machines. This prevents Vibe Coding rework by enforcing a strict taxonomy and zero-ambiguity documentation for every page layout and navigation logic.

What is the best way to document loading, empty, and error states for agent workflows?▼

Document loading, empty, and error states by applying a standardized state-matrix methodology. This defines granular UI interaction specifications, ensuring agent workflows receive a zero-ambiguity blueprint for every element behavior.

How do I standardize UI taxonomy for complex dashboards to ensure implementation consistency?▼

Standardize UI taxonomy for complex dashboards by enforcing an 11-keyword taxonomy, such as navigate, modal, and drawer. This ensures implementation consistency by defining exactly what happens when a user interacts with an element.

Can I generate an interaction document automatically from an existing product specification?▼

Yes, you can generate an interaction document from an existing product specification. By reading the idea.md file in your current directory, the skill outputs a detailed interaction blueprint defining all page layouts and module behaviors.

Does vibe-interaction require specific UI frameworks like shadcn to define workflows?▼

No, vibe-interaction does not require specific UI frameworks like shadcn to define workflows. It applies standardized interaction design and state-matrix methodology to any established product idea to create zero-ambiguity documentation.

Why does AI-generated UI lack consistency without zero-ambiguity interaction documentation?▼

AI-generated UI lacks consistency without zero-ambiguity interaction documentation because element behaviors remain undefined. Forcing a precise, granular definition of how users interact with every page prevents the common cycle of AI rework.