Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Adds AI Elements components such as conversations, messages, tool displays and prompt inputs to a Next.js project that uses shadcn/ui.
Install AI Elements Chat Components
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mweinbach/agent-coworker ai-elements --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ai-elements .claude/skills/ai-elements && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .claude/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elementsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mweinbach/agent-coworker ai-elements --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ai-elements .agents/skills/ai-elements && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .agents/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mweinbach/agent-coworker ai-elements --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ai-elements .cursor/skills/ai-elements && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .cursor/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/mweinbach/agent-coworker.git --path .agents/skills/ai-elements--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mweinbach/agent-coworker ai-elements --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ai-elements .gemini/skills/ai-elements && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .gemini/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install mweinbach/agent-coworker ai-elementsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ai-elements .github/skills/ai-elements && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .github/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mweinbach/agent-coworker --skill ai-elements -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mweinbach/agent-coworker ai-elements --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mweinbach/agent-coworker.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ai-elements .opencode/skills/ai-elements && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ai-elements" agent skill from https://github.com/mweinbach/agent-coworker/tree/main/.agents/skills/ai-elements into .opencode/skills/ai-elements/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-elements", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ai-elements- GitHub stars
- 156
- Used in
- 5 other repos
- Token cost
- ~1.8k tokens
- SKILL.md length
- 778 words
- Files
- 130 (incl. scripts, references)
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Adds AI Elements components such as conversations, messages, tool displays and prompt inputs to a Next.js project that uses shadcn/ui.
- Works in 4 steps: Verify your config file syntax is valid… → Check that the file path is correct for… → Restart your coding assistant after… → …
- Building a chatbot or AI assistant interface in a Next.js app
- SKILL.md covers Prerequisites, Installing Components, Usage and Example, plus 4 more sections
- Calls npx, pnpm and bunx; needs AI_GATEWAY_API_KEY
What it does
The skill is a guide to AI Elements, a component library and custom registry layered on shadcn/ui for AI-native apps. It explains two ways to add components, the dedicated `ai-elements` CLI or the standard shadcn/ui CLI. Either one copies the component source and any dependencies into your project, by default under `@/components/ai-elements/`.
The agent is told to run CLI commands with whichever package runner the project uses (npx, pnpm dlx or bunx, chosen from `packageManager`). Prerequisites are Node.js 18 or later, a Next.js project with the AI SDK installed, and shadcn/ui, which the install command sets up if it is missing. An AI Gateway key in `env.local` is recommended. A `references` folder holds one page per component, including conversation, code-block and file-tree, and the excerpt is cut off before the usage section.
When your agent uses it
- Building a chatbot or AI assistant interface in a Next.js app
- Adding conversation, message or prompt input components to a shadcn/ui project
- Showing tool calls or code blocks inside an AI chat view
Example prompts
- “Add the AI Elements conversation and message components to my Next.js chat page.”
- “Build an assistant UI with a prompt input and tool call display using ai-elements.”
- “Install ai-elements with pnpm and wire it into the existing shadcn setup.”
Requirements
- Node.js 18 or later
- A Next.js project with the AI SDK installed
- shadcn/ui (the install command adds it if missing)
- Optionally an `AI_GATEWAY_API_KEY` in `env.local`
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Verify your config file syntax is valid JSON.
- Check that the file path is correct for your AI tool.
- Restart your coding assistant after making changes.
- Ensure you have a stable internet connection.
What it can do on your machine
Read from SKILL.md and the folder at commit aab9dc6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
npxpnpmbunx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
ui.shadcn.comvercel.comgithub.comnpmjs.comnodejs.orgnextjs.orgai-sdk.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
AI_GATEWAY_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
AI Elements Chat Components loads about 1.8k tokens when it runs, and up to ~64k if it reads all its reference files. Until then it costs about 57 tokens; SKILL.md has 778 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 778 words (~1,805 tokens).
“AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.”
- name
- ai-elements
Files
SKILL.md and 129 other files (scripts, references) in .agents/skills/ai-elements of mweinbach/agent-coworker.
- SKILL.md
- references/agent.md
- references/artifact.md
- references/attachments.md
- references/audio-player.md
- references/canvas.md
- references/chain-of-thought.md
- references/checkpoint.md
- references/code-block.md
- references/commit.md
- references/confirmation.md
- references/connection.md
- references/context.md
- references/controls.md
- references/conversation.md
- references/edge.md
- references/environment-variables.md
- references/file-tree.md
- references/image.md
- references/inline-citation.md
- … and 110 more
Open the folder on GitHubat commit aab9dc6
Used in 5 other repositories
We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in mweinbach/agent-coworker, which our catalogue first saw on October 7, 2026.
Compare with similar skills
AI Elements Chat Components next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| AI Elements Chat Components this skillmweinbach/agent-coworker | 156 | 5 repos | ~1.8k | Automated safety check: Pass | Custom licence | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Buzzformbuildnbuzz/buzzform | 101 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Frontend Patterns Templatebybren-llc/safe-agentic-workflow | 421 | — | ~2k | Automated safety check: Pass | MIT | |
| Frontend UI Patternsbiersoeckli/QuickStack | 361 | — | ~704 | Automated safety check: Pass | GPL-3.0 | |
| Frontend Design UltimateaAAaqwq/AGI-Super-Team | 105 | 2 repos | ~2.7k | Automated safety check: Pass | MIT |
Similar skills
Buzzform
buildnbuzz/buzzform
A skill your agent uses when working with BuzzForm schema-driven forms, @buildnbuzz/form-core, @buildnbuzz/form-react, or any related APIs like defineSchema, InferType, FormProvider, useDataField…
Frontend Patterns Template
bybren-llc/safe-agentic-workflow
Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing…
Frontend UI Patterns
biersoeckli/QuickStack
Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions.
Frontend Design Ultimate
aAAaqwq/AGI-Super-Team
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.
Senior Frontend
alirezarezvani/claude-skills
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.
More from mweinbach/agent-coworker
All 8 skills in this repoExpo Brownfield Integration
mweinbach/agent-coworker
Helps add Expo and React Native to an existing native iOS or Android app, and choose between a prebuilt AAR or XCFramework and a fully integrated build.
Use Dom
mweinbach/agent-coworker
Use Expo DOM components to run web code in a webview on native and as-is on web.
Bun Runtime and Toolkit
mweinbach/agent-coworker
Quick reference for using Bun to run TypeScript and JavaScript, install packages, bundle code, run tests and serve HTTP, with the key files and commands.
Workflow
mweinbach/agent-coworker
Author and run a deterministic multi-agent workflow — a JavaScript script that fans out, pipelines, loops, and judges across many child agents.
Improve Animations
mweinbach/agent-coworker
Audit a codebase's animation and motion, produce prioritized improvement plans, and execute selected plans when requested.
Memories
mweinbach/agent-coworker
A skill your agent uses when the user asks to view, list, inspect, add, create, edit, correct, update, or manage long-term memories for the current chat or workspace.
Related
Works with
Categories
Questions about AI Elements Chat Components
What does AI Elements Chat Components do?
Adds AI Elements components such as conversations, messages, tool displays and prompt inputs to a Next.js project that uses shadcn/ui. The skill is a guide to AI Elements, a component library and custom registry layered on shadcn/ui for AI-native apps. It explains two ways to add components, the dedicated `ai-elements` CLI or the standard shadcn/ui CLI.
When should I use AI Elements Chat Components?
AI Elements Chat Components fits situations like: building a chatbot or AI assistant interface in a Next.js app; adding conversation, message or prompt input components to a shadcn/ui project; showing tool calls or code blocks inside an AI chat view.
How do I install AI Elements Chat Components in Claude Code?
Run `npx skills add mweinbach/agent-coworker --skill ai-elements -a claude-code`. Or copy the skill folder (.agents/skills/ai-elements in mweinbach/agent-coworker) into .claude/skills/ai-elements in your project. Claude Code loads it when a task matches its description.
How do I install AI Elements Chat Components in Codex?
Run `npx skills add mweinbach/agent-coworker --skill ai-elements -a codex`. Or copy the skill folder (.agents/skills/ai-elements in mweinbach/agent-coworker) into .agents/skills/ai-elements in your project. Codex loads it when a task matches its description.
Can I use AI Elements Chat Components in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mweinbach/agent-coworker --skill ai-elements -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ai-elements, .gemini/skills/ai-elements, .github/skills/ai-elements and .opencode/skills/ai-elements in your project.
What does AI Elements Chat Components need to run?
Going by SKILL.md and its folder, AI Elements Chat Components needs the command-line tools its instructions call (npx, pnpm and bunx) and credentials named AI_GATEWAY_API_KEY. Our summary lists: Node.js 18 or later; A Next.js project with the AI SDK installed; shadcn/ui (the install command adds it if missing); Optionally an `AI_GATEWAY_API_KEY` in `env.local`.
Does AI Elements Chat Components access the network?
SKILL.md names 7 domains. As links in the text: ui.shadcn.com, vercel.com, github.com, npmjs.com, nodejs.org, nextjs.org and ai-sdk.dev. This is read from the text; nothing was executed.
Is AI Elements Chat Components safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does AI Elements Chat Components use?
AI Elements Chat Components has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does AI Elements Chat Components use?
About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 62k tokens, read only when the agent opens those files.
What are the alternatives to AI Elements Chat Components?
Skills that share tags, products or a category with AI Elements Chat Components: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Buzzform (buildnbuzz/buzzform, 101 stars), Frontend Patterns Template (bybren-llc/safe-agentic-workflow, 421 stars) and Frontend UI Patterns (biersoeckli/QuickStack, 361 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains AI Elements Chat Components?
mweinbach (a GitHub user) maintains it in mweinbach/agent-coworker, which has 156 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 6, 2026.
Source: mweinbach/agent-coworker on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.