Docs
PrefectHQ/fastmcp
Write or revise a page under docs/ for gofastmcp.com. An agent skill from PrefectHQ/fastmcp.
Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
Install Typeui
$ npx skills add bergside/typeui --skill typeui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install bergside/typeui typeui --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/bergside/typeui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .claude/skills/typeui && 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 "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .claude/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeuiType 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 bergside/typeui --skill typeui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install bergside/typeui typeui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .agents/skills/typeui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .agents/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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 bergside/typeui --skill typeui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install bergside/typeui typeui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .cursor/skills/typeui && 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 "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .cursor/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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/bergside/typeui.git --path plugins/grok/typeui/skills/typeui--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 bergside/typeui --skill typeui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install bergside/typeui typeui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .gemini/skills/typeui && 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 "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .gemini/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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 bergside/typeui typeuiInstalls 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 bergside/typeui --skill typeui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .github/skills/typeui && 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 "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .github/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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 bergside/typeui --skill typeui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install bergside/typeui typeui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/grok/typeui/skills/typeui .opencode/skills/typeui && 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 "typeui" agent skill from https://github.com/bergside/typeui/tree/main/plugins/grok/typeui/skills/typeui into .opencode/skills/typeui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "typeui", 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
typeui- GitHub stars
- 2k
- Token cost
- ~438 tokens
- SKILL.md length
- 207 words
- Files
- 1
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- MIT
At a glance
Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
- Works in 5 steps: Prefer TypeUI MCP tools when they are… → Ask the user which TypeUI project or… → Apply the selected project context… → …
- Tasks that involve Brand strategy and identity
- SKILL.md covers What TypeUI Provides, How to Use TypeUI, MCP Server and Prompt Examples
- Reaches mcp.typeui.sh
What it does
Typeui is an agent skill from bergside/typeui. Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
Its SKILL.md is about 440 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Brand strategy and identity and MCP servers. It works with Model Context Protocol. The repository describes itself as: Build better UI with AI. The licence is MIT.
When your agent uses it
- Tasks that involve Brand strategy and identity
- Tasks that involve MCP servers
Example prompts
- “/typeui”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Prefer TypeUI MCP tools when they are available in the session.
- Ask the user which TypeUI project or design skill to use if the request does not specify one.
- Apply the selected project context before choosing colors, type, spacing, component tone, or page composition.
- Treat brand kit values as brand parameters only: logo, project name, typography, and brand colors.
- Treat the design skill as the source of UI style, component behavior, visual hierarchy, spacing, and interaction patterns.
What it can do on your machine
Read from SKILL.md and the folder at commit 2a977f1. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
mcp.typeui.sh
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Typeui loads about 438 tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 207 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); files beside SKILL.md are not scanned.
SKILL.md
The full file from bergside/typeui at commit 2a977f1, republished under its MIT licence (© bergside). 207 words, ~438 tokens.
Download SKILL.mdSave it as
.claude/skills/typeui/SKILL.md (or your agent's skills folder).- name
- typeui
- description
- Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
- license
- MIT
- metadata.author
- Bergside LLC
- metadata.homepage
- https://www.typeui.sh
TypeUI for Grok
Use this skill when the user wants Grok to build, redesign, or refine UI with TypeUI context.
What TypeUI Provides
- Project design skills for consistent visual direction.
- Brand kits with project name, logo, typography, and brand color tokens.
- UI prompt libraries for common interface sections and full-product flows.
- Layout variation guidance for producing better options before implementation.
How to Use TypeUI
- Prefer TypeUI MCP tools when they are available in the session.
- Ask the user which TypeUI project or design skill to use if the request does not specify one.
- Apply the selected project context before choosing colors, type, spacing, component tone, or page composition.
- Treat brand kit values as brand parameters only: logo, project name, typography, and brand colors.
- Treat the design skill as the source of UI style, component behavior, visual hierarchy, spacing, and interaction patterns.
MCP Server
This plugin registers the TypeUI remote MCP server:
https://mcp.typeui.shIf the server is not available in the current Grok session, connect it manually:
grok mcp add --transport http typeui https://mcp.typeui.shPrompt Examples
- Use my TypeUI project and build a landing page.
- Generate three pricing section variations with TypeUI.
- Redesign this dashboard using my TypeUI design skill.
- Pull the TypeUI context for this project before changing the UI.
© bergside, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in plugins/grok/typeui/skills/typeui of bergside/typeui.
Open the folder on GitHubat commit 2a977f1
Compare with similar skills
Typeui 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 |
|---|---|---|---|---|---|---|
| Typeui this skillbergside/typeui | 2k | — | ~438 | Automated safety check: Pass | MIT | |
| DocsPrefectHQ/fastmcp | 28k | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| Fast Agent Designevalstate/fast-agent | 3.9k | — | ~220 | Automated safety check: Pass | Apache-2.0 | |
| Cds Docscoinbase/cds | 506 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Igniteui Wc Figma To AppIgniteUI/igniteui-webcomponents | 170 | — | ~7.2k | Automated safety check: Pass | MIT | |
| Edt MCP Project Runtime DebugDitriXNew/EDT-MCP | 295 | — | ~967 | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Fast Agent Design
evalstate/fast-agent
A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.
Cds Docs
coinbase/cds
Retrieve Coinbase Design System (CDS) documentation: setup, installation, theming, tokens, and per-component APIs/examples.
Igniteui Wc Figma To App
IgniteUI/igniteui-webcomponents
Builds Ignite UI Web Components views from Figma designs, supporting Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames.
Edt MCP Project Runtime Debug
DitriXNew/EDT-MCP
Collect bounded runtime and debugger evidence for a 1C project through EDT-MCP, including launch, breakpoints, variables, event log, and cleanup.
Storybook MCP Integration
yonatangross/orchestkit
Reference for the Storybook MCP server itself (@storybook/addon-mcp): 6 tools across 3 toolsets (dev, docs, testing), availability detection, and per-agent toolset filtering.
More from bergside/typeui
Typeui
bergside/typeui
Use TypeUI with Hermes Agent to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
Typeui
bergside/typeui
Use TypeUI with OpenClaw to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
Typeui Fundamentals
bergside/typeui
Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.
Related
Works with
Categories
Questions about Typeui
What does Typeui do?
Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces. Typeui is an agent skill from bergside/typeui. Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.
When should I use Typeui?
Typeui fits situations like: tasks that involve Brand strategy and identity; tasks that involve MCP servers.
How do I install Typeui in Claude Code?
Run `npx skills add bergside/typeui --skill typeui -a claude-code`. Or copy the skill folder (plugins/grok/typeui/skills/typeui in bergside/typeui) into .claude/skills/typeui in your project. Claude Code loads it when a task matches its description.
How do I install Typeui in Codex?
Run `npx skills add bergside/typeui --skill typeui -a codex`. Or copy the skill folder (plugins/grok/typeui/skills/typeui in bergside/typeui) into .agents/skills/typeui in your project. Codex loads it when a task matches its description.
Can I use Typeui 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 bergside/typeui --skill typeui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/typeui, .gemini/skills/typeui, .github/skills/typeui and .opencode/skills/typeui in your project.
What does Typeui need to run?
SKILL.md names no scripts, command-line tools or credentials: Typeui is instructions for the agent only.
Does Typeui access the network?
SKILL.md names 1 domain. In commands or code: mcp.typeui.sh; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Typeui 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. Review the folder before installing.
What licence does Typeui use?
Typeui is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Typeui use?
About 438 tokens (SKILL.md is roughly 1.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Typeui?
Skills that share tags, products or a category with Typeui: Docs (PrefectHQ/fastmcp, 28k stars), Fast Agent Design (evalstate/fast-agent, 3.9k stars), Cds Docs (coinbase/cds, 506 stars) and Igniteui Wc Figma To App (IgniteUI/igniteui-webcomponents, 170 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Typeui?
bergside (a GitHub organization) maintains it in bergside/typeui, which has 2,021 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on July 4, 2026.
Source: bergside/typeui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.