skills.rest
awardsapp
awardsappOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-settings-ui

Standardize Tambo Cloud settings sections across Agent and Settings tabs.

Updated Apr 26, 2026
Search Tags:#dashboard#react components#ui consistency#destructive actions#settings ui#mutation patterns#tambo cloud
One-click install
npx skills add https://github.com/awardsapp/tambo-genui --skill building-settings-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-settings-ui
Source: https://github.com/awardsapp/tambo-genui/tree/main/.claude/skills/building-settings-ui
Command: npx skills add https://github.com/awardsapp/tambo-genui --skill building-settings-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

building-settings-ui prevents inconsistent, misplaced, or unsafe settings-panel implementations in the Tambo Cloud dashboard by standardizing where sections live and how common UI patterns behave.

Core Features & Use Cases

  • Correct placement across tabs: Decide whether a change belongs on the Agent tab (agent behavior) or Settings tab (project infrastructure/access) based on the type of configuration being added or modified.
  • Consistent card and interaction patterns: Apply the established Card layout, including placement of EditWithTamboButton inside CardTitle, destructive styling rules, and confirmation dialog usage for irreversible actions.
  • Reliable save and feedback behavior: Follow toast and mutation conventions, including invalidating queries before showing success to avoid stale UI, and using the correct edit/save/cancel state patterns.
  • Dependent-setting UI rules: Render sections consistently even when prerequisites aren’t met, using Alerts for soft dependencies and passing required props rather than cross-tab visibility branching.

Quick Start

Tell the AI: "Add a new settings section for [X] and specify whether it belongs on the Agent or Settings tab, then implement the matching Card UI pattern using toasts, edit/save/cancel behavior, and the correct destructive confirmation flow."

Frequently Asked Questions about building-settings-ui

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

FAQPage Schema
How do I add a new settings section to the Tambo Cloud dashboard?▼

To add a settings section to the Tambo Cloud dashboard, specify whether it belongs on the Agent tab for agent behavior or Settings tab for project infrastructure, then implement the matching Card UI pattern with correct edit, save, and cancel behavior.

Where should destructive actions be placed in a React settings UI?▼

Destructive actions in a React settings UI should use established destructive styling rules and require a confirmation dialog for irreversible actions, ensuring the Card layout correctly places interaction components inside the CardTitle.

What is the correct toast and mutation pattern for dashboard settings updates?▼

The correct mutation pattern for dashboard settings requires invalidating queries before showing the success toast, ensuring the UI does not display stale data while maintaining reliable save and feedback behavior.

How do you handle dependent settings when prerequisites are not met?▼

Dependent settings should render consistently even when prerequisites are not met by using Alerts for soft dependencies and passing required props, rather than implementing cross-tab visibility branching.

Does building-settings-ui work with existing React components?▼

Building-settings-ui works with existing React components by standardizing how settings sections are added and updated, enforcing required component placements and tab-layout conventions tied to the dashboard route structure.

Why does my settings UI show stale data after a mutation?▼

Settings UI shows stale data after a mutation when query invalidation sequencing is incorrect. You must invalidate the relevant project queries before showing the success toast to prevent stale UI states.

Related Skills

Explore More Design & Creative Skills→
gileckgileck

react-component-organization

Organize React components into route, feature, and shared UI folders.

Community
Basic
Andamio-PlatformAndamio-Platform

react-query-auditor

Audit React Query hooks for cache invalidation and race conditions.

Official
Advanced
gudnufgudnuf
1

shadcn-ui

Install shadcn-ui components into React projects with configured aliases.

Community
Intermediate
TheYearIsTwentyGXTheYearIsTwentyGX

tablegx-advanced

Coordinate complex table views across tabs with shared filters and row selection.

Community
Advanced