Design
Skill
/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.
Claude Code
$ npx -y skills add bergside/typeui --skill typeui --agent claude-code
Codex
$ npx skills add bergside/typeui --skill typeui -a codex -y
Cursor
$ npx skills add bergside/typeui --skill typeui -a cursor -y
Gemini CLI
$ npx skills add bergside/typeui --skill typeui -a gemini-cli -y
GitHub Copilot
$ npx skills add bergside/typeui --skill typeui -a github-copilot -y
OpenCode
$ npx skills add bergside/typeui --skill typeui -a opencode -y
Windsurf
$ npx skills add bergside/typeui --skill typeui -a windsurf -y
SKILL.md
typeui.SKILL.mdname: 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
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
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 registers the TypeUI remote MCP server:
https://mcp.typeui.sh
If the server is not available in the current Grok session, connect it manually:
grok mcp add --transport http typeui https://mcp.typeui.sh
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.
Read more
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 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
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 registers the TypeUI remote MCP server:
https://mcp.typeui.sh
If the server is not available in the current Grok session, connect it manually:
grok mcp add --transport http typeui https://mcp.typeui.sh
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.
Stats
2,233
Stars
154
Forks
Active
Maintenance
TypeScript
Language
Last commit
Created
Ships withtypeui
TypeUI is an AI-first platform where you can use design skills, UI prompts, and other resources to enhance AI capabilities to generate better user interfaces and design when building websites and applications.
2.2k2 skills1 MCP
Stars on GitHub
Momentum
- stars in total
- 2.2k
Other skills on typeui.
More skills from other plugins.
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
@nextlevelbuilderInstall Skillimpeccable
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
@pbakausInstall SkillAuto-invoked
8-bit-orbit-video-temp…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
@nexu-ioInstall Skilldiagram-design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…
@cathrynlaveryInstall SkillQuestions about typeui.
- Which coding agents can use typeui?
- typeui installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.