Skip to main content
Glama
DearXuan7392

tele-ux-ui-motion-skill-mcp

by DearXuan7392

Tele UX-UI-Motion Skill MCP

Model Context Protocol 기반 MCP 서비스로, AI 에이전트에게 UI/UX/애니메이션 디자인 스킬 라이브러리의 탐색·검색·읽기 기능을 제공합니다.

198개의 디자인 스킬을 내장하고 있으며, 17개 분야를 다루고, 10개의 오픈소스 디자인 프로젝트에서 정제되었습니다.

정제 프로젝트:

Agent Skills Awesome Web Animation Claude Design Skillstack GSAP AI Skills skills (interfaces.dev) StyleSeed UI Craft UI Design Skill UI UX Pro Max UX/UI Agent Skills

npm version npm downloads license Node.js TeleAgent MCP TypeScript Platform

시작하기 · 스킬 라이브러리 카테고리 · 워크플로우 · 감사의 글

소개

프런트엔드 UI를 만들 때 AI 에이전트는 체계적인 디자인 지식이 부족한 경우가 많습니다. 글래스모피즘이 무엇인지 모르고, WCAG 대비 요구 사항을 모르며, GSAP로 애니메이션을 작성하지 못합니다. 이 프로젝트의 해결 방안은 우수한 오픈소스 디자인 지식을 구조화된 스킬 파일로 정리하고, MCP 프로토콜을 통해 에이전트에 노출하여 사전을 찾듯 필요할 때 조회할 수 있게 하는 것입니다.

에이전트는 디자인 지식과 프로젝트 코드 사이를 반복적으로 오갈 필요 없이, 점진적 워크플로우를 통해 스킬을 단계적으로 검색·읽기·적용하여 전문 디자인 표준에 부합하는 UI를 최종적으로 만들어 냅니다.

핵심 기능

  • 탐색 — 17개의 최상위 카테고리를 단계적으로 드릴다운하여 스킬 라이브러리 구조 탐색

  • 검색 — 키워드로 전체 또는 카테고리 내에서 검색하여 필요한 스킬을 빠르게 찾기

  • 읽기 — 원칙, 패턴, 코드 예제를 포함한 스킬의 전체 디자인 가이드 획득

  • 키워드 조회 — 특정 스킬이 다루는 전체 키워드를 확인하여 정밀 검색 지원

  • 점진적 가이드 — 발견부터 전달까지 전 과정을 안내하는 5단계 에이전트 워크플로우

Related MCP server: AceternityUI_MCP_Server

시작하기

npx로 사용하기 (권장)

설치 없이 MCP 클라이언트에서 바로 구성:

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

소스에서 개발하는 경우 로컬 패키지를 전역 설치해야 합니다: npm install -g ., 이후 npx 구성은 정식 배포 후와 완전히 동일합니다.

로컬 개발

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

환경 변수

변수

설명

기본값

UI_SKILL_PATH

사용자 정의 skills 디렉터리 경로

패키지 내 skills/

스킬 라이브러리 카테고리

카테고리

분야

visual-styles

UI 비주얼 스타일 (글래스모피즘, 뉴모피즘, 브루털리즘 등)

brand-systems

브랜드급 디자인 시스템 레퍼런스 (Stripe, Linear, Apple 등)

motion

애니메이션 및 모션 디자인, GSAP 포함

color

컬러 시스템, 팔레트, 대비, 다크 모드

typography

글꼴 페어링, 폰트 크기 비율, 텍스트 타이포그래피

layout

레이아웃 구조, 간격, 그리드, 구성

components

컴포넌트 디자인 패턴과 해부

accessibility

WCAG, ARIA, 키보드 조작, 포용적 디자인

design-tokens

디자인 토큰 아키텍처 (기초 → 시맨틱 → 컴포넌트)

3d-webgl

Three.js, WebGL, 셰이더, 3D 효과

ux-writing

어조와 말투, 마이크로카피, 콘텐츠 디자인

ux-principles

UX 휴리스틱 평가, 디자인 리뷰, 안티 슬롭

frameworks

프레임워크별 구현 패턴

page-recipes

페이지 수준 디자인 솔루션 (랜딩 페이지, 대시보드, 로그인)

css-effects

CSS 시각 효과 (블러, 그라데이션, 마스크, 그림자)

icons

아이콘 시스템, SVG, 아이콘 선택

interaction

마이크로 인터랙션, 호버 상태, 피드백

워크플로우

에이전트가 이 서비스를 사용할 때 5단계 점진적 워크플로우를 따르며, 각 단계에서 help(step=N)을 통해 해당 단계의 상세 지침을 확인할 수 있습니다:

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

기술 스택

개발

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

감사의 글

이 프로젝트의 스킬 콘텐츠는 다음 10개의 오픈소스 프로젝트에서 정제되었습니다. 원작자들의 아낌없는 공유에 감사드립니다:

오픈소스 라이선스

이 프로젝트는 MIT 라이선스로 오픈소스로 제공됩니다. 스킬 콘텐츠는 각 원본 프로젝트의 오픈소스 라이선스(MIT / CC0 1.0)를 따릅니다.

Available Tools

5 tools
helpA

Get usage instructions and recommended workflow. IMPORTANT: This MCP server MUST be used for ANY task involving interface development, UI/UX design, animation, visual styling, motion design, page layout, color, typography, or any frontend visual work. Always start by calling help with step=1 to get the progressive workflow guide. Pass step=1 on first use; subsequent calls with step=2 through 5 return stage-specific guidance. Without a step, returns the full overview document.

NameRequiredDescriptionDefault
stepNoOptional. Step number 1-5 for progressive workflow guidance. step=1: discovery, step=2: requirements, step=3: skill search, step=4: development, step=5: testing & delivery. Omit to get the full overview.

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations supplied, the description carries the full behavioral burden and does disclose the progressive step behavior and the full-overview fallback. It could explicitly state that this is a read-only informational tool, but the described act of returning documents makes side effects highly unlikely.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Every sentence earns its place and the core purpose is front-loaded. The long list of frontend-related task types in the IMPORTANT sentence is somewhat dense, but it is necessary to define the mandatory scope of the tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with one optional parameter, no annotations, and no output schema, the description covers purpose, mandatory usage context, parameter semantics, and return behavior completely. An agent has everything needed to correctly invoke this tool on the first call.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already documents the step parameter with 100% coverage, so the baseline is 3. The description adds usage guidance beyond the schema by prescribing step=1 as the required first call and framing steps 2-5 as subsequent stages in a progressive guide. This is meaningful added context.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb-resource pair ('Get usage instructions and recommended workflow') and further establishes it as the mandatory entry point for interface/frontend work. This clearly distinguishes it from sibling tools like list, search, read, and keywords, which obviously handle different resources.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It explicitly states when this tool MUST be used (any task involving interface development, UI/UX, animation, visual styling, etc.) and prescribes a concrete workflow: always start with step=1, then proceed through steps 2-5. It also documents the behavior when step is omitted, leaving no doubt about how to invoke it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

keywordsA

Retrieve the full keywords array for a specific category or skill. For a category path (e.g. 'color'), returns keywords from its SKILL.md. For a skill path (e.g. 'color.color-blind'), returns keywords from that skill file. Useful for understanding what terms a skill covers without reading the full content.

NameRequiredDescriptionDefault
pathYesDot-separated path to a category or skill. Examples: 'color' (category), 'color.color-blind' (skill), 'motion.gsap' (subcategory). Do not include the .md extension.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations exist, so the description carries the full burden — and it delivers: it discloses the return value (full keywords array), the source resolution (SKILL.md vs. skill file), and the two accepted path shapes. It doesn't cover error/empty-path behavior, but for a simple read-only lookup that is a minor gap rather than a serious one.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences with zero filler: the verb+resource statement is front-loaded, the second sentence explains resolution behavior, and the third gives the practical use case. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter lookup with no output schema, the description covers the return value, the two input path semantics, and the intended use case. The only real omission is the shape of the returned array, but the description's 'full keywords array' phrasing plus a low-complexity surface makes this adequately complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% — the schema already documents the dot-separated format with concrete examples and the no-.md-extension rule. The description reinforces the same examples but adds no meaning beyond the schema, so the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Starts with a specific verb+resource pair ('Retrieve the full keywords array for a specific category or skill') and immediately clarifies the two path types. The closing phrase 'without reading the full content' explicitly differentiates it from the sibling `read` tool, so an agent can tell them apart without opening any schemas.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives clear context: use this to understand what terms a skill covers without loading full content, and it explains how category vs. skill paths resolve. It does not explicitly name alternatives or state when NOT to use it, but the contrast with `read` is implied strongly enough for a 1-parameter lookup tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

listA

List all top-level categories, or list subcategories and skills within a specific category. Use this to explore the skill library structure. Call without arguments to see all categories; pass a dot-separated path (e.g. 'color' or 'motion.gsap') to drill into a category.

NameRequiredDescriptionDefault
categoryNoDot-separated category path (e.g. 'color', 'motion.gsap'). Omit or leave empty to list all top-level categories.

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden of behavioral disclosure. It clearly indicates a read-only listing behavior and explains the drill-down mechanism, but it does not mention the return format, what happens if an invalid path is passed, or any side-effect guarantees. 'List' implies no mutation, but more detail on output or error behavior would strengthen transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences carry the entire definition with zero filler. The main purpose is front-loaded, and the optional-argument behavior is explained efficiently with concrete examples.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with one optional parameter and no output schema, the description covers the core use cases: top-level listing and category drill-down. It gives examples and the dot-separated path convention. The only notable gap is specifying the output shape or behavior for an invalid category path, but that's minor for a simple read-only list tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already fully documents the category parameter: dot-separated path, examples, and 'omit or leave empty' behavior. The description largely restates this same information and only adds the context of 'subcategories and skills', so it adds minimal value beyond the schema. Baseline 3 applies given 100% schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific verb ('List') and a clear resource ('top-level categories', 'subcategories and skills'), and explains the optional drill-down behavior. It doesn't explicitly name sibling tools to distinguish itself, but 'Use this to explore the skill library structure' provides enough context to separate it from search/read/keywords/help.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives a clear usage cue ('Use this to explore the skill library structure') and explicit invocation patterns: call without arguments for top-level categories, or pass a dot-separated path to drill in. It stops short of a 5 because it doesn't explicitly say when to use a sibling tool like search instead.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

readA

Read the full content of a specific skill or category. For a category path, returns the SKILL.md body text plus a list of its children. For a skill path, returns the skill's Markdown body text. Frontmatter metadata is stripped. IMPORTANT: Always call help first if unsure how to use the library.

NameRequiredDescriptionDefault
pathYesDot-separated path to a category or skill. Examples: 'color' (category), 'color.color-tokens' (skill), 'motion.gsap.gsap-core' (nested skill). Do not include the .md extension.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It discloses that frontmatter metadata is stripped, that category paths return SKILL.md body plus children, and that skill paths return Markdown body. It does not cover error behavior or explicitly confirm non-mutating behavior, but the read action and output details make the tool's behavior reasonably transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is compact and front-loaded with the core purpose, followed by path-type behavior and the important help-first warning. Every sentence contributes useful information with no repetition or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite having no output schema, the description explains the return behavior for both category and skill paths and notes frontmatter stripping. Minor gaps such as invalid-path behavior and the exact shape of the children list keep it from being fully complete, but it is sufficient for a simple single-parameter read tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already provides 100% coverage for the single path parameter, including dot-separated path examples and the instruction not to include the .md extension. The description reinforces the path-type distinction but does not add substantial parameter semantics beyond what the schema already documents, so the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action and resource: 'Read the full content of a specific skill or category.' It also distinguishes behavior for category paths versus skill paths, making the tool's purpose unambiguous and separable from sibling tools like list, search, and keywords.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context for how to use the tool based on path type, and it includes an explicit usage prerequisite: 'Always call help first if unsure how to use the library.' It does not explicitly name alternatives or say when not to use this tool, but the guidance is still strong.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 5 tool updatesv1.0.0
    • First observedhelp
    • First observedkeywords
    • First observedlist
    • First observedread
    • First observedsearch

TDQS

A4.3/5.0

Scored across 5 tools

Disambiguation5/5

Each tool has a distinct role: list browses the category tree, search finds by keyword, read retrieves full content, keywords returns metadata, and help provides usage guidance. There is minimal overlap, and descriptions clearly differentiate the discovery tools from the retrieval tools.

Naming Consistency4/5

Most tools use simple, single-word verb names: list, search, read, and help. The noun-form 'keywords' breaks the pattern slightly, but the naming is still simple, predictable, and not confusing.

Tool Count5/5

Five tools is well-scoped for a skill-library browser: discovery, search, retrieval, metadata access, and help. Each tool serves a clear purpose without redundancy or unnecessary surface area.

Completeness5/5

For a read-only skill library, the surface is complete: agents can navigate, search, read, inspect keywords, and get workflow guidance. There are no obvious missing operations because the server is not expected to modify or create skills.

Maintenance

ActivityMaintained
ResponsivenessSyncing

Related MCP Connectors

Related MCP Servers

  • F
    license
    Not graded
    quality
    D
    maintenance
    Exposes The Vibe Coder's Web Design Guide as tools for AI agents, enabling lookups of UI design patterns, CSS/JS snippets, and composition of optimized front-end prompts.
    -
  • A
    license
    A
    quality
    D
    maintenance
    Provides 634+ curated production-ready AI skills for any MCP-compatible client, covering areas like security, frontend, backend, infrastructure, AI/ML, and architecture. Enables AI agents to access best practices, patterns, and solutions across multiple domains.
    6
    8 npm
    1
    MIT