Skills
.Work. You
Rest

three-tab-query-response

Community

Three-tab UI for text-to-SQL insights.

Data & Analytics#react#elasticsearch#pinning#three-tab#salt-ds#echarts#text-to-sql
Authorauesugui
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a blueprint for building a three-tab query response interface (Answer, View SQL, Chart) for text-to-SQL workflows. It covers per-response independent tab state, lazy chart rendering, Elasticsearch-powered search, and a dashboard for pinned visuals.

Core Features & Use Cases

  • Independent tab state per response: Each assistant message maintains its own Answer/SQL/Chart tab state.
  • Lazy chart rendering: Chart tab loads visualizations only when the user opens it.
  • Elasticsearch-backed search & discovery: Enables fast history search, similar queries, and chart gallery exploration.
  • Dashboard pinning: Pin charts from any response to a draggable dashboard with quick actions.
  • Context-drift patterns: UI patterns and prompts to manage topic shifts in multi-turn conversations.

Quick Start

  • Use this skill to scaffold a three-tab interface in your React app for a text-to-SQL assistant.
  • Example command:
    • "Create a per-response three-tab (Answer/View SQL/Chart) UI with independent tab state, lazy chart loading, and pin-to-dashboard support using Salt DS and ECharts."

Dependency Matrix

Required Modules

None required

Components

references

💻 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: three-tab-query-response
Download link: https://github.com/auesugui/auesugui/archive/main.zip#three-tab-query-response

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 223,000+ vetted skills library on demand.