skills.rest
yunior123
yunior123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill ux-info-buttons-yunior123
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
coco-decoco-de

coui-tooltip

Add interactive hover tooltips to Flutter and Web UI components.

Official
Basic
HanHan666666HanHan666666
10

flutter-adding-home-screen-widgets

Add native iOS and Android home screen widgets to Flutter apps.

Community
Advanced
TMHSDigitalTMHSDigital
2

mobile-accessibility-testing

Audit iOS and Android apps for WCAG violations and screen reader issues.

Community
Advanced
MrlykMrlyk

onboard

Design onboarding flows with empty states, tooltips, and guided tours.

Community
Advanced