typeui skill
✓ VerifiedAccess project design skills, brand kits, UI prompts, and layout variations through an MCP server to build or refine user interfaces.
- GitHub stars
- 2,236
- Files
- 1
- Last commit
- Oct 22, 2026
- License
- MIT
- Allowed tools
- —
What does the typeui skill do?
typeui accesses project design skills, brand kits, UI prompts, and layout variations through an MCP server to build or refine user interfaces.
Summary generated from the skill's SKILL.md.
About the typeui skill
Building or refining user interfaces with consistent visual direction is possible by integrating TypeUI with OpenClaw. This skill provides agents with access to project design skills, brand kits, and layout variations to ensure that new components or full-product flows align with established styles. It functions by supplying specific brand parameters such as logos, typography, and color tokens, alongside guidance on component behavior and visual hierarchy.
An agent should load this skill when a user requests a UI redesign or the creation of new interface sections. By applying the selected project context, the agent can make informed decisions regarding spacing, component tone, and page composition. Developers can install the remote MCP server using the openclaw typeui install-mcp command and authenticate via the login command to enable these design tools within their session.
What an agent can do with it
- 1Generate landing page designsAn agent can create a complete landing page by applying specific project context from TypeUI.
- 2Create pricing section variationsDevelopers can request multiple layout options for specific interface sections like pricing tables.
- 3Redesign existing dashboardsYou can instruct an agent to overhaul a dashboard interface using a specific design skill.
- 4Apply brand identity to UIThe skill allows agents to pull project context to ensure colors and typography match brand kits.
Written from the skill's SKILL.md. Every use case is checked against a quote from it.
How to install the typeui skill
Each command copies the skill folder into the client's skills directory. Restart the client or start a new session to load it.Install the typeui skill in Claude Code
~/.claude/skills/typeui/SKILL.md
$ npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui ~/.claude/skills/typeuiInstall the typeui skill in Claude Code (project)
.claude/skills/typeui/SKILL.md
$ npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui .claude/skills/typeuiInstall the typeui skill in Codex
~/.agents/skills/typeui/SKILL.md
$ npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui ~/.agents/skills/typeuiInstall the typeui skill in Gemini CLI
~/.gemini/skills/typeui/SKILL.md
$ npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui ~/.gemini/skills/typeuiInstall the typeui skill in Claude.ai
npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui typeui && zip -r typeui.zip typeui # claude.ai → Customize → Skills → + → Create skill → Upload a skill → typeui.zip
Automated checks
Ran Nov 14, 2026Full report →Passed our automated checks. That is not a security audit: read the scripts before you let an agent run them. How checks work
- Source repository linked and reachablebergside/typeui/plugins/openclaw/typeui/skills/typeui is public and reachablegithub.com/bergside/typeui/tree/HEAD/plugins/openclaw/typeui ↗Pass
- Open source license (OSI)MITspdx.org/licenses/MIT.html ↗Pass
- Commit or release in the last yearLast commit 2026-10-22github.com/bergside/typeui/commits ↗Pass
- No download-and-run or credential theft in scriptsNo scripts in the skill folderPass
- No hidden instructions in SKILL.mdNo override phrases, safeguard switches, credential requests or hidden charactersgithub.com/bergside/typeui/blob/HEAD/plugins/openclaw/typeui ↗Pass
- Pre-approved tools are scopedNo pre-approved tools; the agent asks before using onegithub.com/bergside/typeui/blob/HEAD/plugins/openclaw/typeui ↗Pass
- SKILL.md follows the Agent Skills formatValid name and description; says when to use it; 52 linesgithub.com/bergside/typeui/blob/HEAD/plugins/openclaw/typeui ↗Pass
SKILL.md
View on GitHubTypeUI 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
- 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 package installs the TypeUI remote MCP server:
https://mcp.typeui.sh
If TypeUI tools are not available in the current OpenClaw session, install the MCP server with the plugin command:
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.
Files in this skill
1typeui skill questions
How do I install the typeui skill in Claude Code?
Run npx degit bergside/typeui/plugins/openclaw/typeui/skills/typeui ~/.claude/skills/typeui. Claude Code loads skills from ~/.claude/skills (all projects) or .claude/skills (one project) and uses a skill when its description matches the task.
Which clients can use the typeui skill?
Any client that reads the Agent Skills format: Claude Code, Codex, Gemini CLI and claude.ai (upload as a ZIP). Scripts in the skill run only where the client allows code execution.
What information is included in a TypeUI brand kit?
A brand kit contains the project name, logo, typography, and brand color tokens.
How do I install the TypeUI MCP server if it is not available?
You can install the MCP server using the command 'openclaw typeui install-mcp' followed by 'openclaw mcp login typeui'.
What can I use TypeUI design skills for?
Design skills serve as the source for UI style, component behavior, visual hierarchy, spacing, and interaction patterns.