Complete TAIA design system reference — all 88+ Ember GTS components, design tokens, helpers, modifiers, import patterns, and usage examples from @trusted-american/ember
From a3-pluginnpx claudepluginhub trusted-american/marketplace --plugin a3-pluginThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
The Trusted American Insurance Agency (TAIA) design system is a monorepo providing reusable UI components. A3 uses the Ember package (@trusted-american/ember).
Repo: https://github.com/trusted-american/design-system
Local: ~/Desktop/design-system
Docs: https://taia-design-system.netlify.app
Packages:
@trusted-american/core — Design tokens as TypeScript constants (Tailwind classes)@trusted-american/ember — 88+ Glimmer GTS components for Ember apps@trusted-american/react — React implementation (not used in A3)pnpm add @trusted-american/core @trusted-american/ember
In ember-cli-build.js:
app.import('node_modules/bootstrap/dist/css/bootstrap.css');
App layout wraps in Frame + Aside + Main:
import Frame from '@trusted-american/ember/components/frame';
import Aside from '@trusted-american/ember/components/aside';
import Main from '@trusted-american/ember/components/main';
import { theme } from '@trusted-american/ember/helpers/theme';
<template>
{{theme "light"}}
<Frame>
<Aside>{{! Navigation sidebar }}</Aside>
<Main>{{outlet}}</Main>
</Frame>
</template>
| Name | Value | Usage |
|---|---|---|
primary | blue-700 (#0d66fd) | Primary actions, links, active states |
secondary | gray-500 (#6c757d) | Secondary actions, muted text |
success | green-700 (#198754) | Success states, active/approved |
danger | red-700 (#dc3545) | Errors, destructive actions, cancelled |
warning | yellow-500 (#ffc107) | Warnings, pending states |
info | sky-500 (#0dcaf0) | Informational, neutral highlights |
upsell | purple-500 (#a855f7) | Premium/upsell features (custom TAIA color) |
sm — Small variantlg — Large variant--ds-border-radius: 0.5rem;
--ds-disabled-color: #6c757d;
--ds-upsell: #a855f7;
| Component | Import Path | Purpose |
|---|---|---|
Frame | frame | App-level wrapper |
Main | main | Main content area |
Main::Header | main/header | Page header |
Main::TopHeader | main/top-header | Top bar |
Main::Body | main/body | Content body |
Main::Footer | main/footer | Page footer |
Aside | aside | Sidebar navigation |
Aside::Group | aside/group | Nav group |
Aside::Item | aside/item | Nav item (@active) |
Aside::Title | aside/title | Section title |
| Component | Key Args | Purpose |
|---|---|---|
Button | @color, @size, @outline, @loading, @disabled | Primary action button |
ButtonGroup | — | Group buttons horizontally |
ButtonSet | — | Button set variant |
CloseButton | @onClick | Dismiss/close X button |
Copy | @value | Copy-to-clipboard button |
CopyBox | @value | Input field with copy button |
| Component | Key Args | Purpose |
|---|---|---|
Badge | @color | Status/label badge |
StatCard | @label, @value | Metric/stat display card |
PropertyList | — | Key-value detail list |
PropertyList::Item | @key, @value | Individual key-value pair |
Table | — | Full-featured data table |
BasicTable | @columns, @rows | Simple data table |
ListGroup | — | Grouped list |
ListFilter | — | Filter controls |
ListSort | — | Sort controls |
FileType | @type | File type icon/indicator |
| Component | Key Args | Purpose |
|---|---|---|
Alert | @color | Inline alert message |
Alert::Link | @href | Link within alert |
Banner | @color | Full-width banner notification |
Toast | @color, @onDismiss | Temporary notification |
ToastContainer | — | Container for toasts |
Spinner | @color, @size, @loading | Loading spinner |
Skeleton | — | Content loading placeholder |
Placeholder | @icon, @message, @buttonLabel, @onButtonClick | Empty state |
Progress | — | Progress bar container |
Progress::Bar | @value, @color | Individual progress bar |
| Component | Key Args | Purpose |
|---|---|---|
Nav | — | Tab/pill navigation |
Nav::Item | @active | Individual nav tab |
BreadcrumbTrail | — | Auto breadcrumbs from routes |
Link | @href | Styled link |
Pagination | @page, @totalPages, @onChange | Page navigation |
| Component | Key Args | Purpose |
|---|---|---|
Card | @hoverable | Card container |
Card::Header | — | Card header |
Card::Body | — | Card body |
Card::Footer | — | Card footer |
Accordion | — | Collapsible sections |
Accordion::Item | — | Individual section |
Accordion::Button | — | Section toggle |
Accordion::Body | — | Section content |
Collapse | @isOpen | Collapsible content |
Modal | @isOpen, @onClose, @title | Modal dialog |
Dropdown | @label | Dropdown menu |
Dropdown::Item | — | Menu item |
Dropdown::Divider | — | Menu divider |
Dropdown::Header | — | Menu section header |
Flyout | @isOpen, @onClose | Slide-out panel |
| Component | Key Args | Purpose |
|---|---|---|
Heading | @subtitle | Page/section heading |
Subheading | — | Secondary heading |
Icon | @icon, @color, @spin | FontAwesome icon wrapper |
Avatar | @name, @size | User avatar (identicon fallback) |
| Component | Key Args | Purpose |
|---|---|---|
Form::Input | @label, @value, @onChange, @required, @error, @help, @size | Text input |
Form::Select | @label, @value, @onChange, @options, @required | Dropdown select |
Form::Textarea | @label, @value, @onChange, @rows | Multi-line text |
Form::Check | @label, @checked, @onChange | Checkbox |
Form::Radio | @label, @value, @onChange | Radio group |
Form::RadioButton | @value | Individual radio option |
Form::RadioCard | @value, @selected | Card-style radio |
Form::DateInput | @label, @value, @onChange | Date picker |
Form::TimeInput | @label, @value, @onChange | Time picker |
Form::PhoneInput | @label, @value, @onChange | Phone number input |
Form::NumberInput | @label, @value, @onChange, @step | Number input |
Form::FileInput | @label, @accept, @onFileAdded | File upload button |
Form::FileDropzone | @onFileAdded | Drag-and-drop file zone |
Form::HtmlInput | @label, @value, @onChange | Rich text editor (TipTap) |
Form::MarkdownInput | @label, @value, @onChange | Markdown editor |
Form::PowerSelect | @label, @options, @selected, @onChange, @searchEnabled | Searchable select |
Form::PowerSelectMultiple | @label, @options, @selected, @onChange | Multi-select |
Form::Label | @required | Standalone label |
Form::Help | — | Help text |
Form::Feedback | @type | Validation feedback |
| Helper | Import | Usage |
|---|---|---|
theme | helpers/theme | {{theme "light"}} — sets Bootstrap theme |
file-size | helpers/file-size | {{file-size 1048576}} → "1 MB" |
from-now | helpers/from-now | {{from-now date}} → "2 hours ago" |
timestamp | helpers/timestamp | {{timestamp date "MMM D, YYYY"}} → "Jan 15, 2024" |
| Modifier | Import | Usage |
|---|---|---|
collapse | modifiers/collapse | {{collapse @isOpen}} — Bootstrap collapse |
dropdown | modifiers/dropdown | {{dropdown onShow=... onHide=...}} — Bootstrap dropdown |
tooltip | modifiers/tooltip | {{tooltip "Text" placement="top"}} — Bootstrap tooltip |
All components import from @trusted-american/ember/components/:
import Button from '@trusted-american/ember/components/button';
import Badge from '@trusted-american/ember/components/badge';
import Card from '@trusted-american/ember/components/card';
import CardBody from '@trusted-american/ember/components/card/body';
import FormInput from '@trusted-american/ember/components/form/input';
import FormSelect from '@trusted-american/ember/components/form/select';
import Modal from '@trusted-american/ember/components/modal';
import Spinner from '@trusted-american/ember/components/spinner';
import Placeholder from '@trusted-american/ember/components/placeholder';
If you're unsure about exact args or behavior, read the component source directly:
~/Desktop/design-system/packages/ember/addon/components/{component-name}.gts
The documentation site at https://taia-design-system.netlify.app shows live examples for every component.
~/Desktop/design-system/packages/core/src/components/~/Desktop/design-system/packages/ember/addon/components/