Tele UX-UI-Motion Skill MCP

An MCP service built on Model Context Protocol that provides AI agents with the ability to browse, search, and read a UI/UX/animation design skill library.

Includes 198 design skills covering 17 domains, distilled from 10 open-source design projects.

Distilled projects:

Quick Start · Skill Library Categories · Workflow · Acknowledgments

Introduction

When building front-end interfaces, AI agents often lack systematic design knowledge—they don't know what glassmorphism is, aren't familiar with WCAG contrast requirements, and can't write animations with GSAP. The solution this project takes is to organize high-quality open-source design knowledge into structured skill files and expose them to agents through the MCP protocol, letting agents look them up on demand like consulting a dictionary.

Agents no longer need to switch back and forth between design knowledge and project code. Instead, through a progressive workflow, they gradually search, read, and apply skills, ultimately producing interfaces that meet professional design standards.

Core Capabilities

• Browse — Drill down through 17 top-level categories to explore the skill library structure

• Search — Search by keyword globally or within a category to quickly locate the skill you need

• Read — Retrieve a skill's complete design guide, including principles, patterns, and code examples

• Keyword Lookup — View all keywords covered by a skill to assist precise searching

• Progressive Guidance — A 5-step agent workflow that guides the entire process from discovery to delivery

Related MCP server: AceternityUI_MCP_Server

Quick Start

Use with npx (Recommended)

No installation required; configure it directly in your MCP client:

{
  "mcpServers": {
    "tele-ux-ui-motion-skill-mcp": {
      "command": "npx",
      "args": ["-y", "tele-ux-ui-motion-skill-mcp"]
    }
  }
}

If developing from source, install the local package globally first: npm install -g .; after that, the npx configuration is identical to the official release.

Local Development

git clone <repo-url>
cd tele-ux-ui-motion-skill-mcp
npm install
npm run build
npm start

Environment Variables

Skill Library Categories

Workflow

Agents using this service follow a progressive 5-step workflow. At each step, use help(step=N) to get detailed guidance for the corresponding stage:

Step 1  发现与探索    → 列出所有类别，建立全局认知
Step 2  需求分析      → 分析用户需求，用专业词汇描述方案，与用户确认
Step 3  技能检索      → 提取关键词，全局 + 迭代检索，建立技能清单
Step 4  开发执行      → 制定计划表，按序读取技能并开发
Step 5  测试与交付    → 检查测试工具，验证产出，交付结果

Tech Stack

• Language: TypeScript

• Runtime: Node.js >= 18

• MCP SDK: @modelcontextprotocol/sdk

• Transport: stdio

Development

npm run build    # 编译 TypeScript 并拷贝静态文件到 dist/
npm run dev      # 监听模式编译
npm start        # 启动服务

Acknowledgments

This project's skill content is distilled from the following 10 open-source projects. Thanks to the original authors for their generous sharing:

License

This project is open source under the MIT license. The skill content follows the open-source licenses of the respective original projects (MIT / CC0 1.0).