Showcase / host composition

Grok skin.

grok.tsx: logo-led empty state and pill composer. Wrap with au-skin-grok.

grok.tsxau-skin-grokhost-chrome

au-skin-grok / emptywelcome

Grok can make mistakes. Verify important information.

au-skin-grok / messagesconversation

Summarize the trade-offs briefly.

Keep the host thin: tokens for skin, primitives for structure, host for runtime.

1 / 2

Grok can make mistakes. Verify important information.

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/chat-input/chat-input-features.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-skins.css">