원클릭으로 Manus에서 모든 스킬 실행

chat-apps-ui-sdk

스타163

포크12

업데이트2026년 5월 27일 12:19

Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server. Covers the MCP tool and resource architecture, the window.openai / ui-bridge data flow, widget state, sandbox/CSP security, display modes, visual design, and directory submission. Trigger when building, reviewing, or designing such apps — even when the user only says "chat app", "ChatGPT widget", "Claude app", "render UI in chat", "window.openai", "createUIResource", "outputTemplate", or "MCP app UI" without naming a specific SDK.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

pproenca

pproenca/dot-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

소프트웨어 개발자컴퓨터 및 수학직·SOC 15-1252

파일 탐색기

51 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

write-design-docs

pproenca/dot-skills

Write, revise, or review software design documents using Malte Ubl's "Design Docs at Google" guidance. Use when Codex needs to draft a design doc, technical design, RFC, engineering review doc, architecture proposal, mini design doc, or design-doc review focused on context, goals, non-goals, trade-offs, alternatives, cross-cutting concerns, review lifecycle, and deciding whether a design doc is warranted.

2026-06-12163

go-process-cli

pproenca/dot-skills

Write Go CLIs that manage processes and workloads — daemons, supervisors, job runners, deploy tools, anything that spawns or controls other processes. Use when writing, reviewing, or refactoring Go that handles OS signals, runs children via os/exec, fans out concurrent work, threads context for cancellation, returns exit codes, or builds a flag/cobra command surface. Covers the footguns the standard library makes easy to hit — SIGTERM vs Ctrl-C, SIGKILL-by-default children, orphaned process groups, pipe deadlocks, goroutine leaks, zombie reaping, and os.FindProcess lying about liveness. Triggers whenever the task touches process lifecycle, graceful shutdown, subprocess control, or concurrent workload supervision in Go — even if not named.

2026-05-31163

design-review

pproenca/dot-skills

Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table. Covers visual hierarchy, spacing, typography, colour & contrast, component states, motion, responsiveness, accessibility, multi-page flow & navigation, and interaction continuity — grounded in Refactoring UI and Emil Kowalski's principles. For animation/jank/FPS, focus order, and cross-page UX it can drive Chrome via chrome-devtools-mcp to capture what a screenshot can't. Trigger when the user asks to "review this UI", "design review", "critique this component/screen/page or multi-page flow", asks why something "looks off", "looks AI-generated", or "looks like a wireframe", or wants to raise visual polish. For building UI from scratch use web-taste; for the full animation set see emilkowal-animations.

2026-05-27163

deterministic-metric-design

pproenca/dot-skills

Inventing deterministic metrics — turning a fuzzy property like 'maintainability', 'risk', or 'how reducible this code is' into a deterministic, computable number an agent can trust and optimize. Covers the path from construct to adoption — operationalizing the construct, confronting computability limits (Kolmogorov, Rice) with sound proxies, picking the right measurement scale, proving properties (monotonicity, invariance, the Weyuker/Briand axioms), guaranteeing determinism, establishing construct validity (not just LOC in disguise), and hardening against Goodhart-style gaming when an agent optimizes the metric. Trigger when designing, reviewing, or validating a quantitative metric, score, measure, or index — and even when the user doesn't say 'metric' but wants to quantify, score, rank, or measure code/behavior, build a deterministic optimization target, or invent a measure for something previously unquantified (e.g., behavior-preserving codebase-size reduction).

2026-05-27163

implementation-design-patterns

pproenca/dot-skills

Implementation guide for the 22 Gang of Four design patterns in TypeScript, distilled from refactoring.guru. Use this skill when writing, refactoring, or reviewing TypeScript that exhibits a pattern-shaped problem — class-explosion from inheritance, conditionals switching on type, tight coupling to concrete classes, tree-shaped models, runtime algorithm selection, undo/redo, snapshot-and-restore, state-dependent behavior, subscriber notification, or hiding subsystem complexity. Each pattern entry includes intent, problem, solution, applicability (when to use AND when NOT to use), a runnable TypeScript example, implementation steps, pros/cons, and relations to sibling patterns. Trigger even when no pattern is named — cues like "class getting unwieldy," "giant switch," "swap implementations at runtime," "combinatorial subclasses," "need undo," or "traverse a tree" are pattern-shaped. Covers all 5 Creational, 7 Structural, and 10 Behavioral GoF patterns.

2026-05-27163

implementation-functional-patterns

pproenca/dot-skills

TypeScript's functional answers to the 22 Gang of Four classes — factory functions (Factory Method, Abstract Factory, Prototype, Memento), module-scope singletons, fluent immutable builders, wrapper functions (Adapter, Facade), native Proxy, WeakMap caches (Flyweight), discriminated unions with exhaustive match (State, Visitor, Composite), event emitters and signals (Mediator, Observer), pipelines and composition (CoR, Decorator), stream methods (Iterator), closures-as-commands, higher-order strategies, lambda placement. Use when reviewing TypeScript that has a class-shaped problem the GoF catalog solves with a hierarchy but where idiomatic TS reaches for a function, a tagged union, or a data structure. Each rule names the GoF pattern(s) it replaces and when the class form still wins. Trigger on "factory class", "singleton getInstance", "state machine class", "observer pattern", "AST visitor", "where do I put this lambda". Sibling to implementation-design-patterns.

2026-05-27163

name

chat-apps-ui-sdk

description

Chat Apps UI SDK Best Practices

A reference for building beautiful, review-ready apps that render interactive UI inside the chat surface of ChatGPT and Claude. As of January 2026 these platforms share one foundation — the MCP Apps standard (@modelcontextprotocol/ext-apps), rendered by Claude, ChatGPT, VS Code, and Goose. The OpenAI Apps SDK is a superset adding the window.openai bridge, and MCP-UI (@mcp-ui/server / @mcp-ui/client) is the community implementation. This skill contains 46 rules across 8 categories, ordered by impact so the highest-leverage decisions come first.

The mental model: an app is an MCP tool first, UI second. The model invokes a tool; the tool returns data plus a link to a UI resource; the host renders that resource in a sandboxed iframe; the iframe talks back over a defined bridge. Mistakes early in that chain mean nothing renders; mistakes later mean it renders broken, unsafe, or unpolished.

When to Apply

Reference these guidelines when:

Designing the MCP tool and structuredContent / content / _meta contract for a chat app
Wiring a tool to a component (_meta.ui.resourceUri, the text/html;profile=mcp-app MIME type, the ui:// scheme)
Writing the iframe component and its bridge (window.openai, ui/notifications/*, MCP-UI onUIAction)
Choosing display modes, widget state, theming, and responsive layout
Hardening a chat app (CSP, sandbox, secrets, OAuth) or preparing it for directory submission
Reviewing or refactoring existing ChatGPT-app / Claude-app / MCP-UI code

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	MCP Tool & Discovery Design	CRITICAL	`tool-`
2	UI Resource Wiring & Templates	CRITICAL	`wire-`
3	Host–Component Data Bridge	HIGH	`bridge-`
4	Display Modes & Responsive Layout	HIGH	`display-`
5	State & Model Context	HIGH	`state-`
6	Security & Data Boundaries	HIGH	`sec-`
7	Visual Design & UX Polish	MEDIUM-HIGH	`design-`
8	Distribution & Cross-Host Portability	MEDIUM	`dist-`

Quick Reference

1. MCP Tool & Discovery Design (CRITICAL)

tool-structured-content-contract - Split output across structuredContent, content, and _meta
tool-specific-verb-names - Name tools as specific action verbs
tool-output-schema-validation - Declare an output schema for structuredContent
tool-safety-annotations - Set readOnlyHint and destructiveHint accurately
tool-minimal-scoped-inputs - Request minimal, task-scoped tool inputs
tool-feed-widget-in-response - Return everything the widget needs in one response
tool-honest-descriptions - Write honest tool descriptions and status text

2. UI Resource Wiring & Templates (CRITICAL)

wire-resource-uri-link - Link each tool to its UI with resourceUri
wire-mcp-app-mimetype - Serve UI resources with the mcp-app MIME type
wire-ui-scheme-and-handler - Match the ui:// URI to a registered resource
wire-version-uri-cache-key - Version the resource URI as a cache key
wire-inline-self-contained-bundle - Inline the component bundle into the resource
wire-set-ui-domain - Set a unique ui.domain for the component

3. Host–Component Data Bridge (HIGH)

bridge-render-from-notifications - Render from tool output, not first paint
bridge-call-tools-app-visibility - Expose tools to the app before calling them
bridge-followup-vs-silent-call - Choose follow-up messages or silent tool calls
bridge-validate-postmessage-origin - Validate postMessage source in the host
bridge-handle-all-mcpui-actions - Handle every MCP-UI onUIAction type
bridge-use-host-apis - Use host bridge APIs instead of reimplementing

4. Display Modes & Responsive Layout (HIGH)

display-pick-the-right-mode - Pick the display mode that fits the task
display-request-mode-with-fallback - Request fullscreen but render inline first
display-report-intrinsic-height - Report intrinsic height and respect maxHeight
display-avoid-nested-scroll - Avoid nested scroll inside inline cards
display-respect-theme - Respect the host theme and color scheme
display-responsive-breakpoints - Collapse layout gracefully on small screens

5. State & Model Context (HIGH)

state-separate-three-stores - Separate widget, server, and model state
state-persist-widget-state - Persist UI state through setWidgetState
state-no-secrets-in-state - Keep secrets and PII out of widget state
state-update-model-context - Push user decisions to model context
state-keep-state-small - Keep widget state small and serializable

6. Security & Data Boundaries (HIGH)

sec-declare-csp-allowlist - Declare a CSP allowlist for the widget
sec-avoid-frame-domains - Avoid nested frame domains in the widget
sec-no-secrets-in-payloads - Never embed secrets in bundles or payloads
sec-enforce-server-side-auth - Enforce authorization on the server
sec-signal-oauth-challenge - Signal auth with a www-authenticate challenge
sec-minimize-restricted-data - Minimize and avoid restricted data inputs

7. Visual Design & UX Polish (MEDIUM-HIGH)

design-inherit-native-typography - Inherit native fonts and limit type sizes
design-restrain-brand-color - Restrain brand color to accents
design-render-loading-empty-error - Render loading, empty, and error states
design-meet-wcag-contrast - Meet WCAG AA contrast and provide alt text
design-limit-actions-hierarchy - Limit actions and keep a clear hierarchy
design-respect-reduced-motion - Respect reduced-motion preferences

8. Distribution & Cross-Host Portability (MEDIUM)

dist-build-on-mcp-apps-standard - Build on the shared MCP Apps standard
dist-degrade-without-ui - Return a text fallback when UI is unsupported
dist-provide-submission-metadata - Provide accurate submission metadata
dist-feature-detect-host-apis - Detect host capabilities before use

How to Use

Read the individual reference files for full explanations and incorrect-vs-correct code examples. Start at the top — category 1 (tool-) and category 2 (wire-) gate whether anything renders at all, so resolve those before touching display or design.

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
AGENTS.md - Compiled table of contents across all rules

Reference Files

File	Description
references/_sections.md	Category definitions and impact ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference URLs

Related Skills

build-mcp-server — Entry point for designing the MCP server shape (deployment model, tool patterns) this skill's UI rules build on top of.