Skip to content

chore(skills): add create-an-edge-app skill with Edge App setup guidelines #637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
nicomiguelino merged 10 commits into from
Jan 28, 2026
Merged

chore(skills): add create-an-edge-app skill with Edge App setup guidelines #637

nicomiguelino merged 10 commits into from
Jan 28, 2026
+63 −0

Conversation

@nicomiguelino
Copy link
Contributor

@nicomiguelino nicomiguelino commented Jan 27, 2026 •
edited by github-actions bot
Loading

User description

Summary

Added a new Claude Code skill that provides comprehensive guidelines for creating Edge Apps. Includes directory structure templates, manifest file examples, and boilerplate code for main.ts, main.test.ts, index.html, and style.css.

Changes

  • Created .claude/skills/create-an-edge-app/SKILL.md with complete Edge App creation guidelines
  • Includes reference examples and best practices from existing Edge Apps (QR Code, Menu Board, Grafana, CAP Alerting)
  • Provides sample code snippets with proper imports and error handling

PR Type

Documentation, Other

Description

  • Add create-an-edge-app skill guidelines documentation

  • Update .prettierignore to ignore .claude/ directory

File Walkthrough
Relevant files
Documentation
SKILL.md
Add create-an-edge-app documentation                                         

.claude/skills/create-an-edge-app/SKILL.md

  • Add new create-an-edge-app skill markdown file
  • Outline directory structure and naming conventions
  • Provide manifest, code, HTML, and CSS templates
  • Include example snippets and best practices
 +186/-0 
Configuration changes
.prettierignore
Ignore `.claude/` in prettier                                                       

.prettierignore

  • Add .claude/ directory to ignore patterns
 +1/-0     

@nicomiguelino @claude
chore(skills): add create-an-edge-app skill with Edge App setup guide…
2143b09 
…lines

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@nicomiguelino nicomiguelino self-assigned this Jan 27, 2026
@nicomiguelino nicomiguelino requested a review from Copilot January 27, 2026 19:42
@github-actions
Copy link

github-actions bot commented Jan 27, 2026 •
edited
Loading

PR Reviewer Guide 🔍

(Review updated until commit fbd6a31)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

@github-actions
Copy link

github-actions bot commented Jan 27, 2026

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    Impact
Possible issue
Await the async startup call

Convert the load handler to an async function and await startApp() to ensure its
promise is handled and prevent unhandled rejections.

.claude/skills/create-an-edge-app/SKILL.md [109-120]

-window.onload = function () {
+window.onload = async () => {
   const setting1 = getSettingWithDefault<string>('setting_1', 'default_value_1')
-  const setting2 = getSettingWithDefault<boolean>('setting_2', false) // The `false` here serves as a fallback...
+  const setting2 = getSettingWithDefault<boolean>('setting_2', false)
   // Setup error handling with panic-overlay
   setupErrorHandling()
   // Setup branding colors using the library
   setupTheme()
-  startApp()
+  await startApp()
 }
Suggestion importance[1-10]: 7

__

Why: Awaiting startApp() ensures the promise is handled and avoids unhandled rejections, improving reliability.

Medium
General
Use boolean for mocked setting

Use a boolean literal for setting_2 in the mock instead of a string to match the
generic and avoid implicit parsing.

.claude/skills/create-an-edge-app/SKILL.md [133-142]

 setupScreenlyMock(
   {
     location: 'Test Location',
     hostname: 'display-01',
   },
   {
     setting_1: 'test_value',
-    setting_2: 'true',
+    setting_2: true,
   },
 )
Suggestion importance[1-10]: 6

__

Why: Using a boolean literal for setting_2 matches the <boolean> generic and avoids implicit parsing of a string.

Low

Copilot AI reviewed Jan 27, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a comprehensive Claude Code skill that provides step-by-step guidelines for creating Edge Apps. The skill documents the recommended directory structure, manifest file configuration, and boilerplate code patterns.

Changes:

  • Added .claude/skills/create-an-edge-app/SKILL.md with complete Edge App creation guidelines
  • Documented directory structure based on existing Edge Apps (QR Code, Menu Board, Grafana, CAP Alerting)
  • Provided working code templates for main.ts, main.test.ts, index.html, style.css, and manifest files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nicomiguelino and others added 2 commits January 27, 2026 11:47
@nicomiguelino nicomiguelino marked this pull request as ready for review January 27, 2026 19:50
@github-actions
Copy link

github-actions bot commented Jan 27, 2026

Persistent review updated to latest commit fbd6a31

@github-actions
Copy link

github-actions bot commented Jan 27, 2026

PR Code Suggestions ✨

No code suggestions found for the PR.

@nicomiguelino @claude
chore(skills): improve HTML organization guidance in create-an-edge-a…
070c405 
…pp skill

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
renatgalimov
renatgalimov reviewed Jan 28, 2026
View reviewed changes
Copy link
Contributor

@renatgalimov renatgalimov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we have a skeleton template app to copy the edge app from?
If no - then we probably should create one. Or just tell the AI that the "Simple Message" is the skeleton template.

I don't like blocks of code in the skill, because code gets outdated quickly and therefore the skill would too.

@nicomiguelino @claude
docs(skill): remove code blocks and reference live examples in create…
7159fdd 
…-an-edge-app

- Remove code blocks (manifests, main.ts, test.ts, HTML, CSS) that are likely to change more frequently
- Add references to `edge-apps/qr-code/` as the primary template for directory structure
- Add link to `edge-apps/qr-code/screenly.yml` for manifest example
- Clarify that qr-code uses the library but features simpler implementation with lower code footprint
- Reorganize section titles for clarity ("Manifest Files" → "About the Manifest Files", add "About `index.html`")
- Improve HTML best practices with bullet-point formatting

This makes the skill more maintainable by referencing live examples that evolve with the codebase
rather than maintaining frozen code snippets.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@nicomiguelino
Copy link
Contributor Author

nicomiguelino commented Jan 28, 2026

@renatgalimov, we don't have a skeleton template in master yet. It's still a work in progress and is a part of #616. In the meantime, I removed the code blocks and wrote a guideline to use edge-apps/qr-code as a complete working template.

Please review this when you get the chance.

nicomiguelino and others added 5 commits January 27, 2026 20:10
@nicomiguelino
chore(skills): resolve Markdown linting errors
7adc7dd
@nicomiguelino @claude
chore(skills): fix grammatical errors in create-an-edge-app skill
085d082 
Fixed several grammatical issues:
- Changed "Edge Apps directory" to "Edge App directory" for consistency
- Corrected pronoun agreement from "those" to "it" for the id field
- Added missing article "the" in README section
- Improved punctuation with comma before "as" clause

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@nicomiguelino
Merge branch 'master' into create-claude-skills
10447f0
@nicomiguelino @claude
docs: add Figma design consultation to Edge App creation workflow
bc2054d 
Add guidance to consult Figma designs before starting Edge App
implementation, including setup of Figma MCP server and extraction
of design tokens. Also improve wording by replacing "aforementioned"
with more concise "these".

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@nicomiguelino
chore(skills): replace bare URLS with links
120533b
@nicomiguelino nicomiguelino merged commit b867ee8 into master Jan 28, 2026
2 checks passed
@nicomiguelino nicomiguelino deleted the create-claude-skills branch January 28, 2026 16:50
@nicomiguelino nicomiguelino restored the create-claude-skills branch January 28, 2026 18:44
@nicomiguelino nicomiguelino deleted the create-claude-skills branch January 28, 2026 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@renatgalimov renatgalimov renatgalimov approved these changes

Assignees

@nicomiguelino nicomiguelino

Labels

Review effort 2/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@nicomiguelino @renatgalimov