create-an-edge-app — community create-an-edge-app, Playground, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Edge AI Agents needing rapid development of edge applications using Bun and Screenly's API. Various examples of how developers can use Screenly and Screenly's API

Screenly Screenly
[0]
[0]
Updated: 3/5/2026

Agent Capability Analysis

The create-an-edge-app skill by Screenly is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Edge AI Agents needing rapid development of edge applications using Bun and Screenly's API.

Core Value

Empowers agents to scaffold new Edge Apps using the `bun create` template, leveraging Screenly's API for comprehensive content analysis and Figma designs for implementation guidance, while utilizing protocols like `kebab-case` naming conventions.

↓ Capabilities Granted for create-an-edge-app

Scaffolding new Edge Apps with `bun create`
Implementing Figma designs for edge application development
Configuring `screenly.yml` and `screenly_qc.yml` for app initialization

! Prerequisites & Limits

  • Requires Bun and Screenly's API setup
  • Follows `kebab-case` naming convention for app names
  • Needs Figma designs consultation before implementation
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

create-an-edge-app

Install create-an-edge-app, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Creating an Edge App

When Creating an Edge App

  • Scaffold the new Edge App using the bun create template from inside the edge-apps/ directory: 
    bash
    1bun create edge-app-template --no-git <app-name>
    • The app name should follow the kebab-case naming convention.
  • After scaffolding, add an id field to screenly.yml and screenly_qc.yml before running bun run dev.
  • Consult Figma designs before starting implementation.
    • Ensure the Figma MCP server is set up in Claude Code.
    • Use the Figma MCP server to access design specifications, mockups, and UI requirements.
    • Extract design tokens such as colors, spacing, typography, and component specifications from Figma.
    • Ensure the implementation matches the approved designs in Figma before proceeding with development.

Reference Apps

For reference on more complex implementations, consult:

  • QR Code (edge-apps/qr-code/) — simple, low-footprint example
  • Menu Board (edge-apps/menu-board/) — more complex layout
  • CAP Alerting (edge-apps/cap-alerting/) — advanced settings and data fetching

All apps depend on the @screenly/edge-apps library (workspace:../edge-apps-library) and use edge-apps-scripts for tooling.

About the Manifest Files

About index.html

  • Organize HTML code into templates and Web Components as the app grows in complexity.
  • Use HTML content templates first for simpler structures.
  • Consider using Web Components for more complex UI components that require encapsulation and reusability.

About README.md

  • Include instructions on how to create, build, test, format, lint, and deploy the app.
  • Do not add details like the directory structure, as the code frequently changes.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is create-an-edge-app?

Perfect for Edge AI Agents needing rapid development of edge applications using Bun and Screenly's API. Various examples of how developers can use Screenly and Screenly's API

How do I install create-an-edge-app?

Run the command: npx killer-skills add Screenly/Playground/create-an-edge-app. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for create-an-edge-app?

Key use cases include: Scaffolding new Edge Apps with `bun create`, Implementing Figma designs for edge application development, Configuring `screenly.yml` and `screenly_qc.yml` for app initialization.

Which IDEs are compatible with create-an-edge-app?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for create-an-edge-app?

Requires Bun and Screenly's API setup. Follows `kebab-case` naming convention for app names. Needs Figma designs consultation before implementation.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add Screenly/Playground/create-an-edge-app. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use create-an-edge-app immediately in the current project.

Related Skills

Looking for an alternative to create-an-edge-app or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI