[Tool] AI Skill that will produce LVGL Pro projects from your code / specifications ready for editing & exporting

Thanks @kisvegabor — really appreciate the response on the previous threads, and great to get
feedback directly from you!

Good news: the skill has been built out more significantly since my last post based on your input, and it now incorporates all four of your suggestions. Here’s what’s in it:


Addressing your four points

1. Widget schemas — grounded, not guessed

The skill is fully grounded on the v9.5.0 widget schemas. I built a tiered lookup: core props live inline in the skill’s reference files (instant, no network needed) and each widget entry includes a ready-made query to fetch the full exhaustive schema on demand. Nothing is invented — if an
attribute isn’t in the schema, the skill refuses to use it.

2. The AI development loop — validate → screenshot → iterate

The full AI development loop is now the skill’s core workflow:

Write XML → lvglpro validate → lvglpro screenshot → vision check → iterate

It also includes a Python validation script (scripts/validate_project.py) as a
Community/Evaluation license fallback — it catches the most common structural
errors locally, so will provide some basic validation until we know more about the CLI for community availability.

3. AGENTS.md — harvested, generated, and distilled

Reviewed the basic template AGENTS.md and the tutorial’s AGENTS.md, and based on that insight I made them into a clean AI-optimised reference card baked into the skill. The things Iwas finding AI models consistently get wrong turned out to be exactly what AGENTS.md covers:

  • The three sigils: $ (api prop), # (constant), {} (one-time expression)
  • Styles are initialised once — $api_prop cannot go inside a <style> block
  • extends rules: <component> can extend widget or component; <widget> can only extend a widget; <screen> cannot extend anything

The skill scaffold generator now creates an AGENTS.md in every generated projectand the skill’s workflow has a dedicated step (Step 9) that instructs the agent to distill project-specific knowledge into the generated AGENTS.md, e.g:

  • Screen inventory and navigation flow
  • Design system (constants, palette, typography from globals.xml)
  • Subject declarations (what each reactive binding represents)
  • Component hierarchy and architecture decisions
  • Boundaries (files/subjects that must not change)

The idea is that AGENTS.md becomes a knowledge transfer document for the next agent - not just generic boilerplate, but a project-specific “care label” so any agent that opens the project later is productive without the skill installed.

4. MCP server — harnesses for every major AI tool

The LVGL MCP server is documented with config snippets for Claude Code, Cursor, GitHub Copilot/VS Code, Gemini CLI, Antigravity, and Windsurf — with a tiered fallback for offline/restricted environments where MCP isn’t available.


What else is built in

  • Official tutorial XML examplesround_button.xml, sliderbox.xml, section.xml, and 4 tutorial screens inspired from tutorials/ patterns

  • Blog conventions from Felix Biego’s two LVGL Pro posts — naming conventions (style_, subject_, wd_ prefixes), the “never edit generated C files” golden rule, avoiding inline styles, smart sizing

  • 14 anti-pitfall rules covering the mistakes AI models make most often (wrong sigils, missing name attrs, color_format case sensitivity, <bin> fonts needing as_file, styles-init-once, project naming conflicts…)

  • Translations, targets, animations - fully documented from the official docs/syntax/ MDX source files

  • Three working example projects with zero validation errors: hello_world, thermostat (data binding), settings_screen (theme switching)

  • Audit script (scripts/audit_skill.py) — verifies the skill’s widget catalog against upstream XML schemas to catch drift

  • Eval results: with the skill, AI models were scoring 24/24 (100%) on structural validity tests; without it, 20/24 (83%) - failing on root element choice, invented event names, missing name attrs, and wrong color format


Repo

Open source, freely installable:

git clone https://github.com/mm-skills/lvgl-pro-expert.git \
  .agents/skills/lvgl-pro-expert

(for a gemini or antigravity project - for claude it goes in .claude/skills/ )

Works with Claude Code, Cursor, Windsurf, Gemini CLI, and Antigravity. The SKILL.md is the entry point - AI tools pick it up automatically.


I’m starting to use LVGL Pro for my next project and really liking some of the advanced featres available and the very neat approach to bindings etc.

Excited about the possibility of the CLI coming to the Community tier - the screenshot→vision feedback loop is probably the most powerful part of the workflow for iterative AI-driven UI development. Happy to contribute the skill upstream to the lvgl_pro repo if that would be useful to the project.

M

Hi @cblabs ,

Thanks for sharing this topic. Would you be interested in publishing your experiences and ideas on the LVGL blog? This could help the community improve their LVGL skills.

Sure - I’d be happy to look into this.

I have a project I have been using this on (an application framework for ESP32 apps which provides higher-level services like wifi config & application portals, key management, data retrieval, display management, configuration management, device mcp server, debugging, cryptographic OTA, TLS, home assistant modules etc. It’s all agent optimised so you can select the capabilities you want, define your application concept and the agents know how to rapidly build a highly-capable application using the framework as a base)

I’m thinking of making this available and it comes with LVGL built-in as a default module for UI in the framework. That might make a good example of end-to-end development and how LVGL Pro fits into the overall loop of the development to define and design the UIs for apps like this.

WDYT?

Matt