Agent skill

Typeui

by bergside in 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.

MITAuto-check passedFrontend & Design

Install Typeui

skills CLI
$ npx skills add bergside/typeui --skill typeui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install bergside/typeui typeui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/bergside/typeui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/openclaw/typeui/skills/typeui .claude/skills/typeui && rm -rf skills-src

Use ~/.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/

Facts

Skill name
typeui
GitHub stars
2k
Token cost
~473 tokens
SKILL.md length
226 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

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.

  • 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 OpenClaw 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 470 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.

  1. Prefer TypeUI MCP tools when they are available in the session.
  2. Ask the user which TypeUI project or design skill to use if the request does not specify one.
  3. Apply the selected project context before choosing colors, type, spacing, component tone, or page composition.
  4. Treat brand kit values as brand parameters only: logo, project name, typography, and brand colors.
  5. 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 473 tokens when it runs. Until then it costs about 46 tokens; SKILL.md has 226 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~46
When it runs · the whole SKILL.md, loaded when a task matches
~473

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). 226 words, ~473 tokens.

Download SKILL.mdSave it as .claude/skills/typeui/SKILL.md (or your agent's skills folder).
name
typeui
description
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.
license
MIT
metadata.author
Bergside LLC
metadata.homepage
https://www.typeui.sh

TypeUI for OpenClaw

Use this skill when the user wants OpenClaw 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

  1. Prefer TypeUI MCP tools when they are available in the session.
  2. Ask the user which TypeUI project or design skill to use if the request does not specify one.
  3. Apply the selected project context before choosing colors, type, spacing, component tone, or page composition.
  4. Treat brand kit values as brand parameters only: logo, project name, typography, and brand colors.
  5. Treat the design skill as the source of UI style, component behavior, visual hierarchy, spacing, and interaction patterns.

MCP Server

This plugin package installs the TypeUI remote MCP server:

text
https://mcp.typeui.sh

If TypeUI tools are not available in the current OpenClaw session, install the MCP server with the plugin command:

bash
openclaw typeui install-mcp
openclaw mcp login typeui

OpenClaw agents can also call typeui_install_mcp to write the TypeUI MCP server entry.

Prompt 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/openclaw/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.

Typeui compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Typeui this skillbergside/typeui2k—~473Automated safety check: PassMIT
DocsPrefectHQ/fastmcp28k—~1kAutomated safety check: PassApache-2.0
Fast Agent Designevalstate/fast-agent3.9k—~220Automated safety check: PassApache-2.0
Cds Docscoinbase/cds506—~1.1kAutomated safety check: PassApache-2.0
Igniteui Wc Figma To AppIgniteUI/igniteui-webcomponents170—~7.2kAutomated safety check: PassMIT
Edt MCP Project Runtime DebugDitriXNew/EDT-MCP295—~967Automated safety check: PassAGPL-3.0

Similar skills

  • Docs

    PrefectHQ/fastmcp

    Write or revise a page under docs/ for gofastmcp.com. An agent skill from PrefectHQ/fastmcp.

    28k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • 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.

    3.9k GitHub stars~220 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Cds Docs

    coinbase/cds

    Retrieve Coinbase Design System (CDS) documentation: setup, installation, theming, tokens, and per-component APIs/examples.

    506 GitHub stars~1.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • 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.

    170 GitHub stars~7.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Collect bounded runtime and debugger evidence for a 1C project through EDT-MCP, including launch, breakpoints, variables, event log, and cleanup.

    295 GitHub stars~967 tokensUpdated today
    Frontend & DesignAuto-check passed
  • 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.

    289 GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check passed

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.

    2k GitHub stars~474 tokensUpdated 3 mo ago
    Auto-check passed
  • Typeui Fundamentals

    bergside/typeui

    Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.

    2k GitHub stars~861 tokensUpdated 3 mo ago
    Auto-check passed
  • Typeui

    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.

    2k GitHub stars~438 tokensUpdated 3 mo ago
    Auto-check passed

Questions about Typeui

What does Typeui do?

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 is an agent skill from 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.

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/openclaw/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/openclaw/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 473 tokens (SKILL.md is roughly 1.9k 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.