agora-design

Agora Design

Use this skill whenever the user is working on Agora product UI. This skill is the Agora-specific layer on top of shadcn. Treat Agora as authoritative and use shadcn only when Agora is silent.

Core defaults

• Default to Agora dark theme. If the user asks for light mode, preserve the same composition and swap to Agora light tokens.
• Use Instrument Sans for all product UI.
• Use Lucide icons only.
• Prefer semantic tokens and restrained accent usage. Do not flood screens with brand color.
• Prefer a compact, operational, control-plane feel over spacious marketing layouts.
• Keep CTA density restrained. If Agora guidance is silent, follow shadcn's restraint around emphasis and action hierarchy.
• Do not use decorative glows or atmospheric shadow effects in product UI, especially in RTC surfaces.
• Keep copy in RTC setup surfaces minimal. Related state elements should stay tightly grouped.

Build workflow

1. Identify the surface type: app shell, dashboard, builder, settings, table, chat, RTC, or AI-agent UI.
2. Choose the closest Agora named pattern from the references.
3. Apply Agora tokens, typography, iconography, spacing, radius, and motion rules.
4. Use shadcn component semantics and accessibility patterns as the fallback.
5. Keep the result visually disciplined: minimal colors, clear hierarchy, few high-emphasis actions.

Review workflow

When reviewing an existing UI, return a structured audit using these categories:

• overall verdict
• tokens
• typography
• iconography
• spacing
• radius
• component choice
• state handling
• motion
• layout patterns
• table patterns
• rtc patterns
• accessibility and interaction
• consistency with Agora

For each category, say what is working, what violates the system, and the most direct fix.

Named patterns

Use these pattern names in your reasoning and responses when helpful:

• agora-app-shell
• agora-builder-tabs
• agora-right-utility-panel
• agora-config-card
• agora-choice-tile
• agora-segmented-tabs
• agora-settings-surface
• agora-stacked-form
• agora-select-field
• agora-inline-utility-action
• agora-table-shell
• agora-table-toolbar
• agora-status-badge-column
• agora-table-pagination
• agora-demo-call-layout
• agora-pre-call-screen
• agora-media-stage
• agora-chat-rail
• agora-chat-bubble
• agora-session-header
• agora-test-call-panel
• agora-voice-orb-state
• agora-live-transcript-stack
• agora-device-preferences-card
• agora-rtc-action-dock

Theme and motion

• Dark is the baseline.
• Light mode is a token swap, not a new visual language.
• For AI-agent and voice surfaces, proactively suggest Agora motion defaults if the user did not specify custom animation.
• If the user supplies custom motion assets, use them as long as they still fit Agora's restrained product feel.

References

• references/foundations.md - visual philosophy, hierarchy, moderation rules
• references/tokens.md - color, typography, spacing, radius, state rules
• references/app-patterns.md - settings, forms, headers, utility actions
• references/control-plane-patterns.md - builders, utility panels, choice tiles, segmented tabs
• references/table-patterns.md - tables, search, filters, status badges, pagination
• references/webrtc-patterns.md - media stage, chat, control docks, test-call panels
• references/ai-agent-motion.md - default agent animation states and usage
• references/review-rules.md - audit rubric and common violations
• references/examples.md - named pattern summaries

Practical fallback rule

When Agora guidance is missing:

• keep shadcn structure and accessibility
• keep Agora tokens and typography
• keep Lucide icons
• stay visually restrained