Name: revel-webapp
Author: reveldigital

revel-webapp

Scaffold and deploy full-screen Revel Digital webapps using the @reveldigital/client-sdk. Signage-ready theme system, Section 508 / WCAG accessibility, and readability are baked in. Supports React, Vue, Angular, and Vanilla JS. Deploy straight from your AI agent via the Revel Digital MCP server (presigned upload, OAuth), or via the webapp-action GitHub Action.

Revel Digital Webapp Skill

A Claude skill that scaffolds and deploys full-screen Revel Digital webapps — self-contained HTML5 apps that run on Revel Digital players and talk to the player through the @reveldigital/client-sdk shim. Signage best practices — a theme system, Section 508 / WCAG 2.1 AA accessibility, and distance-readable typography — are baked into every project it generates.

Webapp vs. gadget. A webapp is a full-screen app deployed to the Revel Digital CMS as a .webapp media asset (via RevelDigital/webapp-action). A gadget is an embeddable widget defined by gadget.yaml, hosted on GitHub Pages — use the revel-gadget skill for those. This skill builds webapps: no gadget.yaml, no gadgetizer, no GitHub Pages.

Supported frameworks

Framework	Tooling	SDK library
React	Vite + React + TypeScript	`@reveldigital/client-sdk`
Vue	Vite + Vue 3	`@reveldigital/client-sdk`
Angular	Angular CLI	`@reveldigital/player-client`
Vanilla JS	Vite + TypeScript	`@reveldigital/client-sdk`

React is the recommended default.

What gets scaffolded

A complete, runnable project for your chosen framework.
Client SDK wired in — live device clock (getDeviceTime), device/location details (getDevice), command handling (EventType.COMMAND), and graceful isPreviewMode() fallbacks so it runs both on-device and in the browser during development.
A config.json content file + loader (webapps have no gadget.yaml preferences UI, so runtime content is driven by config).
A theme system — CSS custom properties for color/spacing/typography, light + dark via prefers-color-scheme, and a one-place brand color.
Accessibility baseline — semantic landmarks, <html lang> from the device language, visible focus, prefers-reduced-motion guards, and contrast-checked default tokens.
Readability for signage — fluid clamp() type scale sized for viewing distance and overscan-safe margins so content is never clipped on a TV.
An optional deploy workflow (.github/workflows/deploy.yml) that builds and uploads to the Revel Digital CMS via RevelDigital/webapp-action, plus an advisory accessibility/performance report that never fails the build.

Deploying

Three paths (see the skill's references/deploy.md):

Via the Revel Digital MCP server (recommended) — build and deploy without leaving the conversation, using OAuth (browser login) — no CI, no repo secret, nothing added to the project. Works in any MCP-capable, skill-capable host (Claude Code and others). Connect the endpoint https://mcp.reveldigital.io/mcp (Claude Code: claude mcp add --transport http reveldigital https://mcp.reveldigital.io/mcp) (MCP docs). Two approaches: direct-to-CMS via presigned upload (preferred — build → package → create_media_upload → curl -T the bytes straight to S3 → finalize_media_upload; the binary never passes through the MCP server or the model), or URL import (fallback — publish the .webapp as a GitHub release asset, then import_media({ url })).
GitHub Action (CI) — automated redeploy on every push via RevelDigital/webapp-action (uses a Revel_API_Key repo secret). Use when you want CI wired into your git workflow.
Direct REST upload — a one-off local curl multipart upload (binary, API key, no MCP/CI).

Installation

Claude.ai (Web / Desktop / Mobile)

Download revel-webapp-skill.zip from the Releases page.
Go to Settings → Capabilities → Skills → Upload skill and select the ZIP.
Ensure the Code execution capability is enabled.

Claude Code (CLI) — marketplace

/plugin marketplace add RevelDigital/reveldigital-webapp-skill
/plugin install revel-webapp@reveldigital

Update later with /plugin marketplace update reveldigital.

Claude Code (CLI) — manual

Copy the revel-webapp-skill folder into ~/.claude/skills/ (personal) or .claude/skills/ (project-level).

Team / Enterprise

Upload revel-webapp-skill.zip under Organization Settings → Capabilities → Skills.

Usage

Just ask Claude:

revel-webapp

Popularity

What's Inside

README

Revel Digital Webapp Skill

Supported frameworks

What gets scaffolded

Deploying

Installation

Claude.ai (Web / Desktop / Mobile)

Claude Code (CLI) — marketplace

Claude Code (CLI) — manual

Team / Enterprise

Usage

Confidence

Similar Plugins

fullstack-dev-skills

octo

ui-ux-pro-max

claude-buddy

nextjs-expert

ecc