mcpbeat Sign in

Typeui Agent Skill

by bergside

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.

437 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
1695
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/bergside/typeui --skill typeui

The instruction itself

5 sections, as written by the author

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.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.

Other skills for the same job

different authors, same section of the catalogue
Plugin Structure
by anthropics
vendor ×2

This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plugin.json", "use ${CLAUDE_PLUGIN_ROOT}", "add commands/agents/skills/hooks", "configure auto-discovery", or needs guidance on plugin directory layout, manifest configuration, component organization, file naming conventions, or Claude Code plugin architecture best practices.

19k tokens
Plugin Structure
by anthropics
vendor ×2

This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plugin.json", "use ${CLAUDE_PLUGIN_ROOT}", "add commands/agents/skills/hooks", "configure auto-discovery", or needs guidance on plugin directory layout, manifest configuration, component organization, file naming conventions, or Claude Code plugin architecture best practices.

19k tokens
Swiftui Design
by nexu-io

| SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.

330 tokens
Example Command
by anthropics
vendor

An example user-invoked skill that demonstrates frontmatter options and the skills/<name>/SKILL.md layout

306 tokens
Agent Device
by Shopify
vendor

Interact with iOS simulator or Android emulator/device using snapshot-based coordinates. Uses accessibility tree snapshots for precise element targeting, with screenshot verification as fallback. Use when navigating the app on a simulator/emulator.

5k tokens
Deepchat Settings
by ThinkInAIXYZ

DeepChat app settings modification (DeepChat 设置/偏好) skill. Activate ONLY when the user explicitly asks to change DeepChat's own settings/preferences (e.g., theme, language, font size...). Do NOT activate for OS/system settings, editor settings, or other apps.

807 tokens
Anti UI Slop
by davepoon

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use for web or iOS UI design, implementation, redesign, critique, and pre-ship review in Codex, Claude Code, Cursor, Copilot, and other coding agents.

922 tokens
Doca Erasure Coding
by NVIDIA
vendor

> Use this skill when the user is doing hands-on DOCA Erasure Coding programming on a BlueField DPU, ConnectX NIC, or host — bringing up a doca_ec context, picking among the create / recover / update tasks, choosing matrix type / N / K / block size, querying doca_ec_cap_* before sizing, setting doca_mmap src/dst permissions, or debugging DOCA_ERROR_* returns from doca_ec_task_*. Trigger even when the user does not name "DOCA Erasure Coding" or "Reed-Solomon" — typical implicit phrasings include "one data block changed, how do I refresh parity without re-encoding", "a disk failed and 2 parity blocks are gone, can I rebuild", "RAID-6 resilience across 12 disks", "my doca_ec_task_create returns NOT_PERMITTED", or "is this N+K layout still recoverable". Refuse and route elsewhere for non-Reed-Solomon codes (fountain / LDPC / raptor), pure-replication designs, network FEC, or other DOCA accelerator libraries (SHA / Compress / AES-GCM / DMA) — those belong to other skills.

26k tokens

How to use it

Copy the folder

Take bergside/typeui from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.