skills.rest
glowingkitty
glowingkittyCOMMUNITY
Explore all skills by this author →
GitHub

add-embed-type

Automates scaffolding and registering an OpenMates embed type across UI, theming, icons, i18n and backend app.yml.

43|2|Updated Jan 25, 2024
Search Tags:#theming#svelte#i18n#embed type#ui scaffolding#renderer registration#backend app.yml
One-click install
npx skills add https://github.com/glowingkitty/OpenMates --skill add-embed-type
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-embed-type
Source: https://github.com/glowingkitty/OpenMates/tree/main/.agents/skills/add-embed-type
Command: npx skills add https://github.com/glowingkitty/OpenMates --skill add-embed-type

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of adding a consistent, fully wired “embed type” to OpenMates when you need a new app-specific preview, fullscreen renderer, theming, icons, i18n, and backend registration.

Core Features & Use Cases

  • Embed component scaffolding: Generates preview and fullscreen Svelte components plus an embed text renderer for copy-message flows.
  • UI integration and routing: Registers the preview component in the embed renderer so the correct fullscreen component loads automatically.
  • Theming, icons, and translations: Adds app gradient theme variables, icon SVG + CSS masking hooks, and required i18n entries for all locales.
  • Backend embed type registration: Updates the app.yml with the new embed type’s identifiers and component mappings so the system can use it end-to-end.

Quick Start

Run the skill with your appId, skillId, and component prefix to scaffold the full embed type and wire it into frontend and backend.

Frequently Asked Questions about add-embed-type

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new embed type across UI components and backend app.yml?▼

To scaffold a new embed type, you generate preview and fullscreen Svelte components, register renderer routing, add theming and i18n entries for all locales, and update the backend app.yml with the new embed type identifiers.

What is an embed type renderer in OpenMates ActiveChat workflows?▼

An embed type renderer is a set of preview, fullscreen, and text Svelte components that display app-specific content within ActiveChat workflows, ensuring the correct fullscreen component loads automatically through registered routing.

Does scaffolding an embed type automatically generate i18n translations for all locales?▼

Yes, scaffolding an embed type automatically generates required i18n entries for all locales. It also adds app gradient theme variables and icon SVG masking hooks alongside the Svelte component creation.

How do I register a preview component so the correct fullscreen component loads automatically?▼

You register the preview component in the embed renderer routing during the scaffolding process, which ensures the correct fullscreen Svelte component loads automatically when users interact with the embed content.

What do I need to create to add an app-specific preview and fullscreen renderer?▼

You need to create preview and fullscreen Svelte components, an embed text renderer for copy-message flows, and update the backend app.yml with the new embed type identifiers and component mappings.

Why does my new embed type fail to load end-to-end in the system?▼

Your new embed type fails to load end-to-end if the backend app.yml is missing the new embed type identifiers and component mappings, which are required alongside the UI integration and renderer registration to function properly.

Related Skills

Explore More Software Engineering Skills→
glowingkittyglowingkitty
43

openmates:add-embed-type

Automates embed type creation across frontend components, stylesheets, localization files, routes, and backend registration for the Loris REST API's Laravel implementation.

Community
Advanced
victorjoshi9victorjoshi9
1

build-mcp-app

Build interactive UI widgets for MCP servers using registered resources and host messaging.

Community
Advanced
jonnathan-lsjonnathan-ls

i18n-localization

Audit React, Vue, and Python projects for hardcoded strings and locale completeness.

Community
Advanced
yoshisadayoshisada

trim-push

Push code components to Penpot and update component mappings.

Community
Advanced