ux-info-buttons

Implements info tooltip and explanation button patterns in the Flutter add product screen.

Updated Mar 9, 2026

Search Tags:#flutter #dart #ux patterns #tooltip #bottom sheet #info buttons #form ui

Ready to run

npx skills add https://github.com/yunior123/origna_gta_firebase --skill ux-info-buttons-yunior123

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-info-buttons
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/ux-info-buttons
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill ux-info-buttons-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers modifying the add product screen need consistent patterns for adding contextual help, and this Skill documents the three established helper widgets and all 16 existing info points so new tooltips match the existing UX. ## Core Features & Use Cases - Three Helper Patterns: Documents `_showInfoSheet` (modal bottom sheet), `_buildTappableInfoHint` (inline tappable row), and `_buildInfoBanner` (static colored banner) in `addproduct_screen.dart`. - 16 Documented Info Points: Catalogs every existing tooltip location, trigger type, and title, covering shipping tiers, tax codes, inventory toggles, and bulk discounts. - Use Case: When adding a new field like a warranty toggle to the add product form, use this Skill to pick the right info pattern and insert a consistent ℹ️-triggered explanation sheet. ## Quick Start Add an info tooltip for the new warranty toggle in the add product screen using the existing info sheet pattern.

Frequently Asked Questions about ux-info-buttons

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

FAQPage Schema

How do I add an info tooltip to a Flutter form field?▼

Use the _showInfoSheet helper to open a modal bottom sheet with a title and body when the user taps an info icon. For inline hints, use _buildTappableInfoHint, which renders a tappable row that opens the same sheet.

What widget patterns exist for explanation buttons in the add product screen?▼

Three patterns exist in addproduct_screen.dart: _showInfoSheet for modal bottom sheets, _buildTappableInfoHint for inline tappable rows, and _buildInfoBanner for always-visible colored banners with an icon and text.

When should I use a banner instead of a bottom sheet for help text?▼

Use _buildInfoBanner when the information must always be visible, such as persistent warnings or context the user needs before interacting. Use the sheet-based patterns for optional explanations that would otherwise clutter the form.

How many info points does the add product screen already have?▼

The screen has 16 documented info points covering free shipping, tax codes, digital and perishable products, delivery tiers, weight and dimensions, bulk discounts, tracking, and inventory toggles. New tooltips should follow these existing conventions.

Does this pattern work outside the add product screen?▼

The helpers are private methods scoped to addproduct_screen.dart, so they are not directly reusable elsewhere. To apply the same UX in other screens, you would need to replicate or extract the helper widgets.