New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

App Builder UI Scaffolder

by NeverSight in NeverSight/learn-skills.dev

Generates React Spectrum UI code for Adobe Experience Cloud Shell apps and AEM UI Extensions from annotated patterns.

Apache-2.0Auto-check passedFrontend & Design

Install App Builder UI Scaffolder

skills CLI
$ npx skills add NeverSight/learn-skills.dev --skill appbuilder-ui-scaffolder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install NeverSight/learn-skills.dev appbuilder-ui-scaffolder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/NeverSight/learn-skills.dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/data/skills-md/adobe/skills/appbuilder-ui-scaffolder .claude/skills/appbuilder-ui-scaffolder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
appbuilder-ui-scaffolder
GitHub stars
216
Used in
1 other repo
Token cost
~2.2k tokens
SKILL.md length
893 words
Files
13
Skills in repo
42
Repo updated
First seen
Licence
Apache-2.0

At a glance

Generates React Spectrum UI code for Adobe Experience Cloud Shell apps and AEM UI Extensions from annotated patterns.

  • Works in 5 steps: Read the user's existing project… → Read the matched references/ file for… → Generate code that fits the user's… → …
  • Building a new page, form, table, or dialog in an App Builder SPA
  • SKILL.md covers Pattern Quick-Reference, Fast Path (for clear requests), Quick Reference and Full Workflow (for ambiguous…, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

A pattern quick-reference maps a request, such as a new page, a validated form, a sortable data table, a confirmation dialog, or navigation, to the right reference file and component set, then generates project-fitting code instead of copying a static template. A fast path applies directly once the request maps unambiguously to one pattern; otherwise the project's existing conventions are read first.

Separate reference files cover Experience Cloud Shell integration, the exc-app provider, IMS token passthrough, and theming, connecting UI to backend actions, building AEM UI Extensions with uix-guest for the Content Fragment Console, CF Editor, and Universal Editor, and a debugging guide for shell spinners, CORS, and auth failures. Generated code is checked against a bundled checklist before being handed back.

When your agent uses it

  • Building a new page, form, table, or dialog in an App Builder SPA
  • Wiring an Experience Cloud Shell app to its runtime and theming
  • Adding an AEM UI Extension for the Content Fragment Console or Universal Editor

Example prompts

  • “Add a sortable data table page for listing fragments.”
  • “Set up ExC Shell integration with IMS token passthrough.”
  • “Scaffold a Universal Editor extension using uix-guest.”

Requirements

  • Node.js 18+
  • npm
  • @adobe/react-spectrum
  • Compatibility (from SKILL.md): Requires Node.js 18+, npm, and @adobe/react-spectrum
  • Pre-approved tools (allowed-tools): Bash(npm:*), Bash(node:*), Bash(npx:*), Read, Write, Edit

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read the user's existing project structure (web-src/src/) for conventions (file naming, import style, existing components)
  2. Read the matched references/ file for component guidance and annotated examples
  3. Generate code that fits the user's existing conventions
  4. Wire into existing routing if React Router is present
  5. Validate against references/checklist.md

What it can do on your machine

Read from SKILL.md and the folder at commit 50f7fc9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash(npm:*)
    • Bash(node:*)
    • Bash(npx:*)
    • Read
    • Write
    • Edit

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires Node.js 18+, npm, and @adobe/react-spectrum

    From compatibility in the SKILL.md frontmatter.

Context cost

App Builder UI Scaffolder loads about 2.2k tokens when it runs. Until then it costs about 210 tokens; SKILL.md has 893 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~210
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from NeverSight/learn-skills.dev at commit 50f7fc9, republished under its Apache-2.0 licence (© NeverSight). 893 words, ~2,177 tokens.

Download SKILL.mdSave it as .claude/skills/appbuilder-ui-scaffolder/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
appbuilder-ui-scaffolder
description
Generate React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM UI Extensions. Provides patterns for pages, forms, data tables, dialogs, and navigation using @adobe/react-spectrum. Guides ExC Shell integration with @adobe/exc-app including runtime.done(), IMS token passthrough, and shell theming. Guides AEM UI Extension development with @adobe/uix-guest for Content Fragment Console, CF Editor, Universal Editor, and Assets View surfaces. Trigger on: building App Builder UI, React Spectrum components, ExC Shell pages, forms, data tables, dialogs, modals, navigation, theming, web-src, Spectrum design system, @adobe/exc-app, AEM extension, AEM UI extension, Content Fragment Console, Universal Editor extension, uix-guest, @adobe/uix-guest, extension points for AEM, customizing AEM surfaces.
allowed-tools
Bash(npm:*), Bash(node:*), Bash(npx:*), Read, Write, Edit
compatibility
Requires Node.js 18+, npm, and @adobe/react-spectrum
metadata.category
frontend
license
Apache-2.0

App Builder UI Scaffolder

Generate React Spectrum UI for Adobe Experience Cloud Shell SPAs. This is a reference-based skill — the agent reads patterns and generates context-appropriate code rather than copying static templates.

Pattern Quick-Reference

Identify the user's intent, then read the referenced sections to generate tailored code.

User wantsReferenceKey components
New page with shell contextreferences/ui-patterns.md § Page + references/shell-integration.mdView, Heading, Content
Form with validationreferences/ui-patterns.md § FormForm, TextField, NumberField, Picker, Button
Data table (sortable, paginated)references/ui-patterns.md § TableTableView, TableHeader, Column, TableBody, Row, Cell
Confirmation dialog / modalreferences/ui-patterns.md § DialogDialogTrigger, AlertDialog, Dialog
Navigation layoutreferences/ui-patterns.md § NavigationTabs, Breadcrumbs, Flex
ExC Shell setupreferences/shell-integration.md@adobe/exc-app, Provider, defaultTheme
Connect UI to backend actionsreferences/action-integration.mdfetch() with IMS token
AEM UI Extension (CF Console, CF Editor, Universal Editor)references/aem-extensions.md@adobe/uix-guest, register(), sharedContext
Debug UI issuesreferences/debugging.mdShell spinner, CORS, blank screen, auth

Fast Path (for clear requests)

When the user's request maps unambiguously to a single pattern above — they name a specific component type, reference a UI pattern, or describe a use case that clearly matches one entry — proceed directly:

  1. Read the user's existing project structure (web-src/src/) for conventions (file naming, import style, existing components)
  2. Read the matched references/ file for component guidance and annotated examples
  3. Generate code that fits the user's existing conventions
  4. Wire into existing routing if React Router is present
  5. Validate against references/checklist.md

Examples of fast-path triggers:

  • "Add a data table page" → Read references/ui-patterns.md § Table, generate directly

  • "Create a form for submitting data" → Read references/ui-patterns.md § Form, generate directly

  • "Add a confirmation dialog" → Read references/ui-patterns.md § Dialog, generate directly

  • "Set up the shell integration" → Read references/shell-integration.md, generate directly

  • "Build a Content Fragment Console extension" → Read references/aem-extensions.md § CF Console, generate directly

  • "Add a header menu button to the Universal Editor" → Read references/aem-extensions.md § Universal Editor, generate directly

  • "Create an AEM extension with uix-guest" → Read references/aem-extensions.md § Core Registration, generate directly

If there is any ambiguity — multiple patterns could fit, constraints are unclear, or the user hasn't specified enough — fall through to the full workflow below.

Quick Reference

  • UI entry point: Place components in web-src/src/components/. This is the standard App Builder SPA layout.
  • Shell integration: Always initialize with @adobe/exc-app and call runtime.done() to dismiss the loading spinner. See references/shell-integration.md.
  • Spectrum imports: All components from @adobe/react-spectrum. See references/spectrum-components.md for the full catalog.
  • Routing: Use react-router-dom for SPA navigation within the shell. See references/routing-patterns.md.
  • Backend calls: Pass the shell's IMS token when calling App Builder actions. See references/action-integration.md.
  • Theming: Wrap the app in <Provider theme={defaultTheme}> for Spectrum styling.
  • Accessibility: All Spectrum components have built-in ARIA support. Add labels to interactive elements. See references/checklist.md.
  • Debugging: For common issues (blank screen, CORS errors, auth failures, slow loads), see references/debugging.md.

Full Workflow (for ambiguous or complex requests)

  1. Read the user's project — check web-src/ structure, React version, existing imports, routing setup, app.config.yaml for extension type
  2. Confirm target outcome, constraints, and acceptance criteria with the user
  3. Identify the UI pattern(s) needed from the quick-reference table above
  4. Read the corresponding references/ files for component guidance and annotated examples
  5. Generate code that fits the user's existing conventions (not a generic template)
  6. Wire into existing routing if React Router is present (references/routing-patterns.md)
  7. Connect to backend actions if data fetching is needed (references/action-integration.md)
  8. Validate against references/checklist.md before marking done
  9. If the user reports issues, consult references/debugging.md for common SPA debugging scenarios
  10. Summarize decisions, component choices, and any follow-up actions
Show full SKILL.md (325 more words)Show less

Example User Prompts

  • "Add a page to my App Builder SPA that shows a data table."
  • "Create a form for submitting customer data in my App Builder app."
  • "Set up the Experience Cloud Shell integration for my App Builder app."
  • "Add a confirmation dialog before deleting a record."
  • "Build a navigation sidebar for my App Builder SPA."
  • "My App Builder app needs a settings page with form fields."
  • "Build a Content Fragment Console extension with an action bar button."
  • "Add a custom RTE toolbar button in the Content Fragment Editor."
  • "Create a Universal Editor extension with a header menu button."

Inputs To Request

  • Current repository path and web-src/ structure
  • Target UI pattern and specific data requirements
  • Existing routing setup (if any)
  • Backend action URLs for data fetching (if applicable)
  • Non-functional constraints: accessibility requirements, responsive breakpoints

Deliverables

  • React Spectrum component files matching the user's project conventions
  • Updated routing configuration (if applicable)
  • Integration with backend actions (if applicable)
  • Validation against quality checklist

Quality Bar

  • All generated components use React Spectrum — no custom CSS for standard patterns
  • Shell integration includes runtime.done() call
  • Interactive elements have accessible labels
  • Loading and error states are handled
  • IMS token passed correctly to backend action calls

References

  • Use references/ui-patterns.md for annotated UI pattern examples (page, form, table, dialog, navigation).
  • Use references/spectrum-components.md for React Spectrum v3 component catalog with imports, props, and accessibility.
  • Use references/shell-integration.md for ExC Shell integration (@adobe/exc-app, runtime.done(), IMS tokens).
  • Use references/routing-patterns.md for SPA routing with React Router in ExC Shell.
  • Use references/action-integration.md for calling backend actions from the SPA.
  • Use references/checklist.md for pre-handoff UI quality validation.
  • Use references/aem-extensions.md for AEM UI Extension patterns (@adobe/uix-guest, Content Fragment Console/Editor, Universal Editor, Assets View).
  • Use references/debugging.md for common SPA debugging scenarios (shell spinner, CORS, auth, blank screen, performance).

Chaining

  • Chains FROM appbuilder-project-init (after SPA project is scaffolded with dx/excshell/1 extension)
  • Works alongside appbuilder-action-scaffolder for full-stack features (UI calls backend actions)
  • Chains TO appbuilder-testing (test generated UI components)
  • Chains TO appbuilder-cicd-pipeline (deploy frontend changes)

© NeverSight, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files in data/skills-md/adobe/skills/appbuilder-ui-scaffolder of NeverSight/learn-skills.dev.

  • SKILL.md
  • description_ar.txt
  • description_cn.txt
  • description_de.txt
  • description_en.txt
  • description_es.txt
  • description_fr.txt
  • description_it.txt
  • description_ja.txt
  • description_ko.txt
  • description_ru.txt
  • description_tw.txt
  • stats.json

Open the folder on GitHubat commit 50f7fc9

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in NeverSight/learn-skills.dev, which our catalogue first saw on October 7, 2026.

Compare with similar skills

App Builder UI Scaffolder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

App Builder UI Scaffolder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
App Builder UI Scaffolder this skillNeverSight/learn-skills.dev2161 repos~2.2kAutomated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Skillshare UI Website Stylerunkids/skillshare2.8k—~4.5kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence
Fast Typescript Checkinternet-development/www-sacred1.6k—~4.3kAutomated safety check: PassMIT
React To Solidcarere/zaidan1471 repos~1.6kAutomated safety check: PassMIT

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Skillshare UI Website Style

    runkids/skillshare

    Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/).

    2.8k GitHub stars~4.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Fast Typescript Check

    internet-development/www-sacred

    Keep www-sacred's TypeScript fast to type-check and fast to run.

    1.6k GitHub stars~4.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React To Solid

    carere/zaidan

    React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.

    147 GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from NeverSight/learn-skills.dev

All 42 skills in this repo

  • AI Marketing Videos

    NeverSight/learn-skills.dev

    Create AI marketing videos for ads, promos, product launches, and brand content.

    216 GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed

  • Google Calendar

    NeverSight/learn-skills.dev

    Interact with Google Calendar via the Google Calendar API – list upcoming events, create new events, update or delete them.

    216 GitHub starsUsed in 2 repos~826 tokens
    Auto-check passed

  • Agent Orchestrator

    NeverSight/learn-skills.dev

    Meta-agent skill for orchestrating complex tasks through autonomous sub-agents.

    216 GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed

  • AI Automation Workflows

    NeverSight/learn-skills.dev

    Build automated AI workflows combining multiple models and services.

    216 GitHub starsUsed in 1 repo~2.6k tokens
    Auto-check passed

  • AI Content Pipeline

    NeverSight/learn-skills.dev

    Build multi-step AI content creation pipelines combining image, video, audio, and text.

    216 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • AI Podcast Creation

    NeverSight/learn-skills.dev

    Create AI-powered podcasts with text-to-speech, music, and audio editing.

    216 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

Works with

Categories

Questions about App Builder UI Scaffolder

What does App Builder UI Scaffolder do?

Generates React Spectrum UI code for Adobe Experience Cloud Shell apps and AEM UI Extensions from annotated patterns. A pattern quick-reference maps a request, such as a new page, a validated form, a sortable data table, a confirmation dialog, or navigation, to the right reference file and component set, then generates project-fitting code instead of copying a static template. A fast path applies directly once the request maps unambiguously to one pattern; otherwise the project's existing conventions are read first.

When should I use App Builder UI Scaffolder?

App Builder UI Scaffolder fits situations like: building a new page, form, table, or dialog in an App Builder SPA; wiring an Experience Cloud Shell app to its runtime and theming; adding an AEM UI Extension for the Content Fragment Console or Universal Editor.

How do I install App Builder UI Scaffolder in Claude Code?

Run `npx skills add NeverSight/learn-skills.dev --skill appbuilder-ui-scaffolder -a claude-code`. Or copy the skill folder (data/skills-md/adobe/skills/appbuilder-ui-scaffolder in NeverSight/learn-skills.dev) into .claude/skills/appbuilder-ui-scaffolder in your project. Claude Code loads it when a task matches its description.

How do I install App Builder UI Scaffolder in Codex?

Run `npx skills add NeverSight/learn-skills.dev --skill appbuilder-ui-scaffolder -a codex`. Or copy the skill folder (data/skills-md/adobe/skills/appbuilder-ui-scaffolder in NeverSight/learn-skills.dev) into .agents/skills/appbuilder-ui-scaffolder in your project. Codex loads it when a task matches its description.

Can I use App Builder UI Scaffolder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add NeverSight/learn-skills.dev --skill appbuilder-ui-scaffolder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/appbuilder-ui-scaffolder, .gemini/skills/appbuilder-ui-scaffolder, .github/skills/appbuilder-ui-scaffolder and .opencode/skills/appbuilder-ui-scaffolder in your project.

What does App Builder UI Scaffolder need to run?

SKILL.md names no scripts, command-line tools or credentials: App Builder UI Scaffolder is instructions for the agent only. Our summary lists: Node.js 18+; npm; @adobe/react-spectrum. Its frontmatter pre-approves these tools: Bash(npm:*), Bash(node:*), Bash(npx:*), Read, Write, Edit. Compatibility (from SKILL.md): Requires Node.js 18+, npm, and @adobe/react-spectrum.

Does App Builder UI Scaffolder access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is App Builder UI Scaffolder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does App Builder UI Scaffolder use?

App Builder UI Scaffolder is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does App Builder UI Scaffolder use?

About 2.2k tokens (SKILL.md is roughly 8.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to App Builder UI Scaffolder?

Skills that share tags, products or a category with App Builder UI Scaffolder: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Skillshare UI Website Style (runkids/skillshare, 2.8k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Fast Typescript Check (internet-development/www-sacred, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains App Builder UI Scaffolder?

NeverSight (a GitHub organization) maintains it in NeverSight/learn-skills.dev, which has 216 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on October 9, 2026.

Source: NeverSight/learn-skills.dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.