How does this skill use Figma?

The skill integrates with the Figma MCP server to access design specifications, extract design tokens like colors and typography, and ensure the UI matches approved mockups.

Does it support complex layouts?

Yes, it provides guidance and reference patterns from existing implementations like Menu Boards and CAP Alerting apps for advanced data fetching and layouts.

What is required to scaffold a new Edge App?

You need the Bun runtime installed and should run the scaffolding command from within the edge-apps/ directory of your project.

Which manifest files are configured by this skill?

It helps configure screenly.yml and screenly_qc.yml, ensuring necessary ID fields and settings are correctly populated before development.

Screenly Edge App Creator

Name: Screenly Edge App Creator
Author: Screenly

byScreenly

•

设计工具

Scaffolds and guides the development of Screenly Edge Apps using Figma designs and standardized templates.

The Screenly Edge App Creator skill provides a standardized workflow for developing digital signage applications on the Screenly platform. It automates the scaffolding process using Bun templates, enforces kebab-case naming conventions, and ensures project configuration files like screenly.yml are correctly initialized. A core strength of this skill is its integration with the Figma MCP server, allowing developers to translate design tokens and UI mockups directly into code while following established best practices for Web Components and HTML templates.

主要功能

01Standardized configuration for screenly.yml and manifest files

02Automated scaffolding using bun create edge-app-template

0328 GitHub stars

04Figma MCP integration for pixel-perfect design implementation

05Support for reference patterns from QR codes to complex menu boards

06Guidance on Web Component architecture and HTML templating

使用场景

01Scaffolding a new digital signage application within a monorepo

02Implementing complex data-fetching logic for dynamic signage displays

03Converting Figma UI designs into production-ready Edge App code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add screenly/playground create-an-edge-app

For use in Claude.ai and ChatGPT

Download Skill