{"id":2981934,"date":"2026-09-14T12:22:33","date_gmt":"2026-09-14T19:22:33","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2981934"},"modified":"2026-09-16T13:58:46","modified_gmt":"2026-09-16T20:58:46","slug":"building-custom-experience-builder-widgets-with-an-agent-skill","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill","title":{"rendered":"Building Custom Experience Builder Widgets with an Agent Skill"},"author":7171,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[770712,738191],"tags":[769252,781241,781189,400012,536782],"industry":[],"product":[400032],"class_list":["post-2981934","blog","type-blog","status-publish","format-standard","hentry","category-geoai","category-developers","tag-arcgisexperiencebuilder","tag-agent-skill","tag-agentic-ai","tag-arcgis-experience-builder","tag-custom-widgets","product-experience-builder"],"acf":{"authors":[{"ID":7171,"user_firstname":"Wei","user_lastname":"Ying","nickname":"Wei Ying","user_nicename":"weiying2","display_name":"Wei Ying","user_email":"WYing@esri.com","user_url":"","user_registered":"2018-03-02 00:19:24","user_description":"Wei is a Senior Product Engineer at Esri, where she has worked for more than 11 years. She focuses on the functional design and quality assurance for ArcGIS Experience Builder. With a strong GIS background and years of working experience, Wei is a knowledgeable engineering professional in GIS web experience design.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/Wei-profile-1-e1789413639818-261x261.jpeg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"How to build a custom Experience Builder widget with an AI coding agent and a shared skill \u2014 step by step, with an example prompt.","flexible_content":[{"acf_fc_layout":"content","content":"<p>Custom widgets let you extend your ArcGIS Experience Builder app to meet your exact needs. Previously, building one required a solid grasp of ExB&#8217;s widget development conventions and real programming experience. With this skill, that changes \u2014 building a custom widget becomes far easier, and even if you&#8217;re not a developer, you can let AI build the widget for you.<\/p>\n<p>We built an Agent Skill to take that load off you.<\/p>\n<h2><strong>What is the skill?<\/strong><\/h2>\n<p>Experience Builder now shares a skill that teaches an AI coding agent how to build widgets <em>the right way<\/em>. When you ask your agent for widget work, the skill hands it everything it needs \u2014 the conventions, the framework APIs, the file structure, and a widget skeleton to start from \u2014 so the agent implements your request correctly instead of guessing.<\/p>\n<p>At a high level, the skill covers:<\/p>\n<ul>\n<li><strong>When &amp; how<\/strong> \u2014 creating new widgets or modifying existing ones, and clarifying requirements before writing code.<\/li>\n<li><strong>Environment rules<\/strong> \u2014 detecting your setup (for Developer Edition, widgets live under <code>client\/your-extensions\/widgets\/<\/code>).<\/li>\n<li><strong>File anatomy<\/strong> \u2014 <code>manifest.json<\/code>, <code>config.json<\/code>, and the config \/ runtime \/ setting source files, plus translations, tests, and the icon.<\/li>\n<li><strong>Implementation surfaces<\/strong> \u2014 focused reference guides for data sources, map and layer views, message\/data actions, UI theming, state, ArcGIS web components, accessibility, and more. The agent loads only what a given task needs.<\/li>\n<li><strong>Core conventions<\/strong> \u2014 functional components, a clean runtime\/builder boundary, framework selectors over raw IDs, and backward-compatible config.<\/li>\n<\/ul>\n<p>Because <code>SKILL.md<\/code> is an <strong>open standard<\/strong>, the skill isn&#8217;t tied to one product. It works with any Agent Skills\u2013compatible coding agent \u2014 <strong>Claude Code, GitHub Copilot, Codex, Cursor<\/strong>, and others.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2981937,"id":2981937,"title":"skill folder","filename":"skill-folder-1.jpg","filesize":167579,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\/skill-folder-2","alt":"","author":"7171","description":"","caption":"","name":"skill-folder-2","status":"inherit","uploaded_to":2981934,"date":"2026-09-10 04:15:12","modified":"2026-09-10 04:15:12","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1708,"height":402,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","medium-width":464,"medium-height":109,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","medium_large-width":768,"medium_large-height":181,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","large-width":1708,"large-height":402,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1-1536x362.jpg","1536x1536-width":1536,"1536x1536-height":362,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","2048x2048-width":1708,"2048x2048-height":402,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1-826x194.jpg","card_image-width":826,"card_image-height":194,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-folder-1.jpg","wide_image-width":1708,"wide_image-height":402}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2><strong>Get the skill<\/strong><\/h2>\n<p>The skill is open source and available from the Esri Experience Builder SDK resources repository:<\/p>\n<p><strong>\ud83d\udc49 <a href=\"https:\/\/github.com\/esri\/arcgis-experience-builder-sdk-resources\">https:\/\/github.com\/esri\/arcgis-experience-builder-sdk-resources<\/a><\/strong><\/p>\n<p>Download the <code>\/skills\/arcgis-exb-widget-dev<\/code> folder from there, and you&#8217;re ready to follow the tutorial below.<\/p>\n<hr \/>\n<h1><strong>Tutorial: Build a Responsive Text Widget<\/strong><\/h1>\n<p>Let&#8217;s walk through a real example end to end. We&#8217;ll build a <strong>custom text widget whose font size adapts to the app&#8217;s screen size<\/strong> \u2014 larger on desktop, smaller on mobile \u2014 without writing any of the widget scaffolding ourselves.<\/p>\n<h2><strong>Prerequisites<\/strong><\/h2>\n<ol>\n<li>Download, install, and runn <a href=\"https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/\"><strong>ArcGIS Experience Builder Developer Edition<\/strong><\/a> \u2014\u00a0 (Any recent version works.)<\/li>\n<li>Download the <strong><code>arcgis-exb-widget-dev<\/code><\/strong> skill folder from the <a href=\"https:\/\/github.com\/esri\/arcgis-experience-builder-sdk-resources\">SDK resources repo<\/a>.<\/li>\n<li>A coding agent \u2014 this tutorial uses <strong>Copilot<\/strong> but the steps are the same for Claude code, Codex, or Cursor.<\/li>\n<\/ol>\n<h2><strong>Step 1 \u2014 Point your agent to the skill<\/strong><\/h2>\n<p>Place the downloaded skill folder in the location your agent scans for skills. The path depends on the agent:<\/p>\n<table>\n<thead>\n<tr>\n<th>Agent<\/th>\n<th>Path<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Claude Code<\/td>\n<td><code>${root}\/.claude\/skills\/<\/code><\/td>\n<\/tr>\n<tr>\n<td>GitHub Copilot (VS Code)<\/td>\n<td><code>${root}\/.github\/skills\/<\/code><\/td>\n<\/tr>\n<tr>\n<td>Codex<\/td>\n<td><code>${root}\/.agents\/skills\/<\/code><\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td><code>${root}\/.cursor\/skills\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>A common choice is to drop it right inside your Developer Edition directory so it travels with the project. Keep the folder intact \u2014 <code>SKILL.md<\/code> must stay at the root, with <code>references\/<\/code> and <code>assets\/<\/code> alongside it.<\/p>\n<p>That&#8217;s the whole setup. From here on, the agent <strong>auto-invokes the skill<\/strong> whenever it works on an ExB custom widget \u2014 no manual toggling needed.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2982153,"id":2982153,"title":"skill register-2","filename":"skill-register-2.jpg","filesize":132431,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\/skill-register-2","alt":"","author":"7171","description":"","caption":"","name":"skill-register-2","status":"inherit","uploaded_to":2981934,"date":"2026-09-14 19:05:12","modified":"2026-09-14 19:05:12","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":724,"height":676,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","medium-width":280,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","medium_large-width":724,"medium_large-height":676,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","large-width":724,"large-height":676,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","1536x1536-width":724,"1536x1536-height":676,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","2048x2048-width":724,"2048x2048-height":676,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2-498x465.jpg","card_image-width":498,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/skill-register-2.jpg","wide_image-width":724,"wide_image-height":676}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<blockquote><p>\ud83d\udca1 The README in the skill package has the full, per-agent setup instructions if you need them.<\/p><\/blockquote>\n<h2><strong>Step 2 \u2014 Describe the widget you want<\/strong><\/h2>\n<p>Now give the agent the task in plain language. Here&#8217;s the example prompt used in this tutorial:<\/p>\n<blockquote>\n<p class=\"p1\">Create a new custom text widget where the text font size can be adjusted at different screen sizes.Settings:<br \/>\n&#8211; Normal font-style settings, except for font size.<br \/>\n&#8211; Font size per screen size:<br \/>\n&#8211; Large \u2014 font size when the app is shown at large screen size<br \/>\n&#8211; Medium \u2014 font size when the app is shown at medium screen size<br \/>\n&#8211; Small \u2014 font size when the app is shown at small (mobile) screen sizeThe widget also needs to watch the app&#8217;s display size so the text<br \/>\nre-sizes as the screen size changes.<\/p>\n<\/blockquote>\n<p>Notice there&#8217;s nothing about file paths, manifests, or framework APIs \u2014 you describe <em>what the widget does<\/em>, and the skill handles <em>how to build it correctly<\/em>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2982145,"id":2982145,"title":"prompt","filename":"prompt-scaled.jpg","filesize":496557,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\/prompt","alt":"","author":"7171","description":"","caption":"","name":"prompt","status":"inherit","uploaded_to":2981934,"date":"2026-09-14 18:44:35","modified":"2026-09-14 18:44:35","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1600,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-scaled.jpg","medium-width":418,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-scaled.jpg","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-scaled.jpg","large-width":1728,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-1536x960.jpg","1536x1536-width":1536,"1536x1536-height":960,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-2048x1280.jpg","2048x2048-width":2048,"2048x2048-height":1280,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-744x465.jpg","card_image-width":744,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/prompt-1728x1080.jpg","wide_image-width":1728,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2><strong>Step 3 \u2014 Let the agent build it<\/strong><\/h2>\n<p>The agent works through the task using the skill&#8217;s guidance: it scaffolds the widget, wires up the setting panel for the per-screen-size font sizes, adds the runtime logic to watch the app&#8217;s display size, and drops everything into <code>client\/your-extensions\/widgets\/<\/code>.<\/p>\n<p>In this run it took several minutes, and the agent finished with a summary of what it built.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2982149,"id":2982149,"title":"agent-complete","filename":"agent-complete-scaled.jpg","filesize":296018,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\/agent-complete","alt":"","author":"7171","description":"","caption":"","name":"agent-complete","status":"inherit","uploaded_to":2981934,"date":"2026-09-14 18:50:42","modified":"2026-09-14 18:50:42","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1600,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-scaled.jpg","medium-width":418,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-scaled.jpg","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-scaled.jpg","large-width":1728,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-1536x960.jpg","1536x1536-width":1536,"1536x1536-height":960,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-2048x1280.jpg","2048x2048-width":2048,"2048x2048-height":1280,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-744x465.jpg","card_image-width":744,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/agent-complete-1728x1080.jpg","wide_image-width":1728,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2><strong>Step 4 \u2014 Run it in Experience Builder<\/strong><\/h2>\n<p>Restart the client to pick up the new widget, then refresh Experience Builder. The custom widget shows up in the widget panel \u2014 with a sensible name and icon.<\/p>\n<p>Add it to a page and open its settings: you can set the text content and define a font size for each screen mode, exactly as requested.<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2982328,"id":2982328,"title":"responsive_text_widget_loop","filename":"responsive_text_widget_loop.gif","filesize":3194030,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\/responsive_text_widget_loop","alt":"","author":"7171","description":"","caption":"","name":"responsive_text_widget_loop","status":"inherit","uploaded_to":2981934,"date":"2026-09-16 20:58:29","modified":"2026-09-16 20:58:29","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2006,"height":1160,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop.gif","medium-width":451,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop.gif","medium_large-width":768,"medium_large-height":444,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop.gif","large-width":1868,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop-1536x888.gif","1536x1536-width":1536,"1536x1536-height":888,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop.gif","2048x2048-width":2006,"2048x2048-height":1160,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop-804x465.gif","card_image-width":804,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/responsive_text_widget_loop-1868x1080.gif","wide_image-width":1868,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Now switch between screen modes (or resize the app), and watch the text re-size to match.<\/p>\n"},{"acf_fc_layout":"image","image":false,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2><strong>Wrap-up<\/strong><\/h2>\n<p>With one shared skill and a plain-language prompt, you went from an idea to a working, convention-correct Experience Builder widget \u2014 no boilerplate, no guesswork. Whether or not you write code, you can describe the widget you need and let the agent build it. The same skill can <strong>modify existing widgets<\/strong> too.<\/p>\n<p>For very complex widgets you&#8217;ll still want to put more thought into the design and be more specific in your prompt \u2014 but even then, the skill takes a real load off the development work.<\/p>\n<p><strong>Try it yourself:<\/strong> grab the skill from the <a href=\"https:\/\/github.com\/esri\/arcgis-experience-builder-sdk-resources\">Experience Builder SDK resources repo<\/a>, point your agent at it, and describe the widget you&#8217;ve always wanted to build.<\/p>\n"}],"related_articles":"","show_article_image":true,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/exb-widget-blog-cover.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/exb-widget-blog-cover-wide.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building Custom Experience Builder Widgets with an Agent Skill<\/title>\n<meta name=\"description\" content=\"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Custom Experience Builder Widgets with an Agent Skill\" \/>\n<meta property=\"og:description\" content=\"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T20:58:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\"},\"author\":{\"name\":\"Wei Ying\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d52dc6032a119ec98e4c5f5b6a6b54f6\"},\"headline\":\"Building Custom Experience Builder Widgets with an Agent Skill\",\"datePublished\":\"2026-09-14T19:22:33+00:00\",\"dateModified\":\"2026-09-16T20:58:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\"},\"wordCount\":9,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"#ArcGISExperienceBuilder\",\"Agent skill\",\"agentic AI\",\"ArcGIS Experience Builder\",\"Custom widgets\"],\"articleSection\":[\"AI\",\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\",\"name\":\"Building Custom Experience Builder Widgets with an Agent Skill\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2026-09-14T19:22:33+00:00\",\"dateModified\":\"2026-09-16T20:58:46+00:00\",\"description\":\"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Custom Experience Builder Widgets with an Agent Skill\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d52dc6032a119ec98e4c5f5b6a6b54f6\",\"name\":\"Wei Ying\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/Wei-profile-1-e1789413639818-261x261.jpeg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/Wei-profile-1-e1789413639818-261x261.jpeg\",\"caption\":\"Wei Ying\"},\"description\":\"Wei is a Senior Product Engineer at Esri, where she has worked for more than 11 years. She focuses on the functional design and quality assurance for ArcGIS Experience Builder. With a strong GIS background and years of working experience, Wei is a knowledgeable engineering professional in GIS web experience design.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/weiying2\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building Custom Experience Builder Widgets with an Agent Skill","description":"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill","og_locale":"en_US","og_type":"article","og_title":"Building Custom Experience Builder Widgets with an Agent Skill","og_description":"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2026-09-16T20:58:46+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill"},"author":{"name":"Wei Ying","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d52dc6032a119ec98e4c5f5b6a6b54f6"},"headline":"Building Custom Experience Builder Widgets with an Agent Skill","datePublished":"2026-09-14T19:22:33+00:00","dateModified":"2026-09-16T20:58:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill"},"wordCount":9,"commentCount":1,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["#ArcGISExperienceBuilder","Agent skill","agentic AI","ArcGIS Experience Builder","Custom widgets"],"articleSection":["AI","Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill","name":"Building Custom Experience Builder Widgets with an Agent Skill","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2026-09-14T19:22:33+00:00","dateModified":"2026-09-16T20:58:46+00:00","description":"Learn how to build custom ArcGIS Experience Builder widgets with an AI coding agent. A shared skill handles the conventions and code \u2014 just describe what you need.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/geoai\/building-custom-experience-builder-widgets-with-an-agent-skill#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Building Custom Experience Builder Widgets with an Agent Skill"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d52dc6032a119ec98e4c5f5b6a6b54f6","name":"Wei Ying","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/Wei-profile-1-e1789413639818-261x261.jpeg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/Wei-profile-1-e1789413639818-261x261.jpeg","caption":"Wei Ying"},"description":"Wei is a Senior Product Engineer at Esri, where she has worked for more than 11 years. She focuses on the functional design and quality assurance for ArcGIS Experience Builder. With a strong GIS background and years of working experience, Wei is a knowledgeable engineering professional in GIS web experience design.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/weiying2"}]}},"text_date":"September 14, 2026","author_name":"Wei Ying","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/weiying2","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/09\/exb-widget-blog-cover-wide.png","primary_product":"ArcGIS Experience Builder","tag_data":[{"term_id":769252,"name":"#ArcGISExperienceBuilder","slug":"arcgisexperiencebuilder","term_group":0,"term_taxonomy_id":769252,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw"},{"term_id":781241,"name":"Agent skill","slug":"agent-skill","term_group":0,"term_taxonomy_id":781241,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":781189,"name":"agentic AI","slug":"agentic-ai","term_group":0,"term_taxonomy_id":781189,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":400012,"name":"ArcGIS Experience Builder","slug":"arcgis-experience-builder","term_group":0,"term_taxonomy_id":400012,"taxonomy":"post_tag","description":"","parent":0,"count":70,"filter":"raw"},{"term_id":536782,"name":"Custom widgets","slug":"custom-widgets","term_group":0,"term_taxonomy_id":536782,"taxonomy":"post_tag","description":"","parent":0,"count":14,"filter":"raw"}],"category_data":[{"term_id":770712,"name":"AI","slug":"geoai","term_group":0,"term_taxonomy_id":770712,"taxonomy":"category","description":"","parent":0,"count":83,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":463,"filter":"raw"}],"product_data":[{"term_id":400032,"name":"ArcGIS Experience Builder","slug":"experience-builder","term_group":0,"term_taxonomy_id":400032,"taxonomy":"product","description":"","parent":36591,"count":177,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=experience-builder","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2981934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7171"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2981934"}],"version-history":[{"count":12,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2981934\/revisions"}],"predecessor-version":[{"id":2982329,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2981934\/revisions\/2982329"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2981934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2981934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2981934"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2981934"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2981934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}