Design & Frontend mcp-serverdesign-systembrand-kitsui-promptslayout-variationhermes-agentfrontend-design

TypeUI (Hermes Agent Design Skill)

Connects Hermes Agent to the TypeUI MCP server so generated and redesigned UIs inherit project design skills, brand kits, UI prompts, and layout variations instead of generic styling.

FollowSkills review · FSRS-1.0
Recommended
59/ 100 5-point scale 3.0 / 5
This review was completed under FSRS 1.0. Dimension scores are not converted; it is queued for re-review under FSRS 2.0.
1 2 3 4 5 6
1Utility12 / 20 · 3.0/5
2Reliability12 / 20 · 3.0/5
3Safety16 / 25 · 3.2/5

Same as above, the Hermes Agent platform adaptation, also connecting to the remote MCP server.

4Evidence5 / 15 · 1.7/5
5Usability7 / 10 · 3.5/5
6Maintenance7 / 10 · 3.5/5
Evidence confidence:Low Reviewed Jul 17, 2026
Review evidence [1]
See the full review method →

What does this skill do, and when should you use it?

TypeUI is an AI-first design platform by Bergside, and this skill is its integration layer for Hermes Agent. The skill itself is a SKILL.md instruction file that tells the agent to prefer the TypeUI remote MCP server (https://mcp.typeui.sh) and to pull project design skills and brand kits (name, logo, typography, brand colors) before choosing colors, type, spacing, or component tone. Note that its install/login commands (hermes typeui install-mcp, hermes mcp login typeui) are Hermes-specific; the README shows the same repo ships separate plugin packages for Codex, Claude, Cursor and many other tools, but those are different packaging, not this skill file. The repo's CLI and public registry are MIT-licensed open source, while the GitHub repository's license field reads NOASSERTION.

It performs no local computation or code generation. Instead it: (1) instructs the agent to prefer TypeUI MCP tools when available in the session; (2) asks the user which TypeUI project or design skill to use when the request doesn't specify one; (3) pulls project design skills, brand kits (logo, project name, typography, brand color tokens), UI prompt libraries for common sections and full-product flows, and layout variation guidance via MCP; and (4) applies that context before building or redesigning an interface, treating brand kits as brand parameters only and the design skill as the source of UI style, component behavior, visual hierarchy, spacing, and interaction patterns.

  1. A developer on Hermes Agent with an existing TypeUI project who needs a landing page that matches established brand tokens
  2. A product team that wants AI dashboard redesigns to automatically follow project typography, brand colors, and component style
  3. A designer or front-end engineer who wants several layout variations of a section (e.g. pricing) before implementing one
  4. A team maintaining multiple brand lines that wants the agent to pull the right project's TypeUI design context before touching any UI

What are this skill's strengths and limitations?

Pros
  • Provides structured, project-level design context — brand kits, design skills, prompt libraries, and layout variation — rather than scattered prompt text
  • Instructions cleanly separate brand parameters from UI style sources, reducing agents overriding colors or mixing styles
  • Backed by a remote MCP server, so design resources stay centralized and are callable directly in-session
  • CLI and public registry are MIT open source, with an active multi-tool ecosystem (Codex, Claude, Cursor, and more)
Limitations
  • Tightly coupled to Hermes Agent: the install/login commands (hermes typeui install-mcp, hermes mcp login) do not run on other platforms, which must configure the MCP entry manually
  • Core resources depend on the remote service https://mcp.typeui.sh — unavailable offline, and hosting may involve accounts or fees (pricing is not detailed in the source; only a Pro version is mentioned)
  • The GitHub repo's license field is NOASSERTION, which doesn't fully match the MIT license in this skill's SKILL.md and the README's MIT claim for the CLI/registry — verify before adopting
  • No test suite, version numbers, or evidence of this skill file being validated on other agent platforms in the source material

How do you install this skill?

The skill lives at plugins/hermes/typeui/typeui_hermes/skills/typeui/SKILL.md in a monorepo bundling 4 skills. If TypeUI tools are not available in the Hermes session, SKILL.md provides: hermes typeui install-mcp, then hermes mcp login typeui; agents can also call typeui_install_mcp to write the MCP server entry. Where exactly to place the SKILL.md folder inside an Agent Skills directory is not documented in the source. To use the repo's UI/UX fundamentals skill instead, the README gives: npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals (note: that is typeui-fundamentals, a different skill).

How do you use this skill?

Trigger it in plain language once the MCP is connected. Example prompts from SKILL.md: '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.' If the request doesn't name a project, the agent should ask which TypeUI project or design skill to use before applying context.

How does this skill compare with similar options?

The source names no direct competitors, but the repo itself offers two alternative routes: dedicated TypeUI plugin packages for 20+ other tools (Codex, Claude, Cursor, Zed, etc.), and locally generated SKILL.md/DESIGN.md design skill files via npx typeui.sh generate; if you don't use Hermes, use the appropriate platform plugin instead of this skill file.

FAQ

Is it free?
The repo's CLI and public registry are MIT open source. The source also mentions a paid Pro version with enhanced design skill files, layout UI prompts, and a private Discord community; which MCP-served resources this skill uses are free versus paid is not specified in the source.
Does it only work in Hermes Agent?
This skill file's install commands are Hermes-specific. The TypeUI platform itself supports many tools via MCP (the README lists Codex, Claude, Cursor, Windsurf, Zed, GitHub Copilot, and more), but those platforms use their own plugin packages rather than this Hermes skill file.
What happens if the MCP server isn't connected?
SKILL.md directs the agent to prefer TypeUI MCP tools and, if unavailable, to run hermes typeui install-mcp and hermes mcp login typeui first; without a connection the skill cannot provide design context.
Will it change my brand settings?
No. SKILL.md treats the brand kit (logo, project name, typography, brand colors) as read-only brand parameters; UI style and interaction patterns come from the selected design skill, and the skill performs no write operations itself.

More skills from this repository

All from bergside/typeui

Related skills