Skill
fundamentals
Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements. Use when making…
Development
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.
Install
$ npx -y skills add bergside/typeui --skill typeui --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/typeui
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
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.
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.
Get the whole plugin
Stats
1,941
Stars
139
Forks
Maintained
Maintenance
TypeScript
Language
2mo ago
Last commit
6mo ago
Created
Repo: bergside/typeui