vibe-interaction

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

113|12|Updated May 19, 2026
One-click install
npx skills add https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills --skill vibe-interaction
Or copy as Structured Prompt for Agent
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.