Agent skill

Makepad 2 0 Widgets

by sickn33 in sickn33/agentic-awesome-skills

Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.

MITAuto-check passedDevelopment

Install Makepad 2 0 Widgets

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill makepad-2-0-widgets -a claude-code

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

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills makepad-2-0-widgets --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/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/makepad-2-0-widgets .claude/skills/makepad-2-0-widgets && 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
makepad-2-0-widgets
GitHub stars
47k
Used in
1 other repo
Token cost
~2k tokens
SKILL.md length
584 words
Files
3 (incl. references)
Skills in repo
1,354
Repo updated
First seen
Licence
MIT

At a glance

Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.

  • Works in 6 steps: height: Fit on Containers → new_batch for Colored Containers with Text → Named Children with := → …
  • Debugging Makepad UI code
  • SKILL.md covers When to Use, Overview, Documentation and IMPORTANT: Documentation…, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Makepad 2 0 Widgets is an agent skill from sickn33/agentic-awesome-skills. Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/widget-advanced.md` and `references/widget-catalog.md`).

It sits in Development. It works with Makepad. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

When your agent uses it

  • Debugging Makepad UI code

Example prompts

  • “/makepad-2-0-widgets”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. height: Fit on Containers
  2. new_batch for Colored Containers with Text
  3. Named Children with :=
  4. Label Default Color is White
  5. MapView MUST Have Fixed Height
  6. Label Does NOT Support Animator

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    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.

Context cost

Makepad 2 0 Widgets loads about 2k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 25 tokens; SKILL.md has 584 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~25
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

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 sickn33/agentic-awesome-skills at commit ec02547, republished under its MIT licence (© sickn33). 584 words, ~1,972 tokens.

Download SKILL.mdSave it as .claude/skills/makepad-2-0-widgets/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
makepad-2-0-widgets
description
Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.
source_repo
zhanghandong/makepad-skills
source_type
community
source
community
date_added
2026-09-21
risk
unknown

When to Use

  • Use when this upstream workflow matches the user's stated goal.
  • Use when the task requires the procedures documented in this skill.

Makepad 2.0 Widget Catalog Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-03-03

Overview

Makepad 2.0 provides a rich set of built-in widgets for building UIs. All widgets are defined in Splash syntax and registered via script_mod!.

Documentation

Refer to the local files for detailed documentation:

  • ./references/widget-catalog.md - Complete widget list with properties
  • ./references/widget-advanced.md - Advanced patterns: PortalList, Dock, custom widgets, MapView

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

  1. Read the relevant reference file(s) listed above
  2. Incorporate reference content into the answer

Widget Categories Quick Reference

Containers (Layout)
WidgetDescriptionKey Properties
ViewBasic container (transparent)width, height, flow, spacing, padding, align
SolidViewView with solid background+ show_bg: true, draw_bg.color
RoundedViewView with rounded corners+ draw_bg.border_radius
RoundedAllViewAll corners same radius+ border_radius shorthand
GradientXViewHorizontal gradient bg+ draw_bg colors
GradientYViewVertical gradient bg+ draw_bg colors
ScrollXViewHorizontal scrollingscroll property
ScrollYViewVertical scrollingscroll property
ScrollXYViewBoth-axis scrollingscroll property
Text Widgets
WidgetDescriptionKey Properties
LabelSingle/multi-line texttext, draw_text.color, draw_text.text_style.font_size
H1 - H4Heading levelstext (pre-styled)
PParagraph texttext
TextInputEditable text fieldtext, empty_text, password, read_only, numeric_only
MarkdownMarkdown rendererbody
HtmlHTML rendererbody
LinkLabelClickable link texttext, url
Buttons
WidgetDescriptionKey Properties
ButtonStandard buttontext
ButtonFlatFlat style buttontext
ButtonFlatterMinimal buttontext
Toggles
WidgetDescriptionKey Properties
CheckBoxCheck boxtext, active
ToggleToggle switchtext, active
RadioButtonRadio buttontext, active
Input Widgets
WidgetDescriptionKey Properties
SliderHorizontal slidermin, max, step, default, precision
DropDownDropdown selectlabels: ["a", "b", "c"]
Media
WidgetDescriptionKey Properties
ImageImage displaysource, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size)
SvgExternal SVG file rendererdraw_svg.svg (crate_resource/http_resource), animating, draw_svg.color
IconSVG icon (tinted)draw_icon.svg, draw_icon.color, icon_walk
VectorInline vector graphicsviewbox, Path{d: "..."}
LoadingSpinnerLoading indicatorcolor, rotation_speed
MapViewMap widgetcenter_lon, center_lat, zoom (MUST use fixed height!)
Layout Helpers
WidgetDescriptionUsage
HrHorizontal ruleDivider line
VrVertical ruleVertical divider
FillerFlexible spacePush siblings apart (use between Fit siblings only!)
SplitterResizable splitaxis: Horizontal/Vertical, a/b children
FoldHeaderCollapsible sectionheader + body children
Show full SKILL.md (218 more words)Show less
Lists
WidgetDescriptionUsage
PortalListVirtualized listFor large lists (100+ items), only renders visible items
FlatListSimple listFor small lists, renders all items
Navigation
WidgetDescriptionControl
ModalModal dialog.open(cx) / .close(cx) from Rust
TooltipTooltip popupHover-triggered
PopupNotificationToast notificationTimed display
SlidePanelSliding panelslide_from
ExpandablePanelExpandable areaopen/close
PageFlipPage switcheractive_page: page_name
StackNavigationStack navpush/pop pages
Dock System
WidgetDescription
DockTab container system
DockSplitterDock split panels
DockTabsTab bar
DockTabIndividual tab

Critical Rules

1. height: Fit on Containers
// WRONG - View defaults to 0px height
View{ flow: Down Label{text: "Invisible"} }

// CORRECT
View{ height: Fit flow: Down Label{text: "Visible"} }
2. new_batch for Colored Containers with Text
// WRONG - text behind background
RoundedView{ draw_bg.color: #333 Label{text: "Invisible"} }

// CORRECT
RoundedView{ new_batch: true draw_bg.color: #333 Label{text: "Visible"} }
3. Named Children with :=
// Named (addressable, overridable)
title := Label{text: "Hello"}

// Static (not addressable)
Label{text: "Hello"}
4. Label Default Color is White
// Default text is white (#fff) - set color for light backgrounds
Label{text: "Dark text" draw_text.color: #333}
5. MapView MUST Have Fixed Height
// WRONG
MapView{ width: Fill height: Fill }

// CORRECT
View{ new_batch: true width: Fill height: 400
    MapView{ width: Fill height: 400 center_lat: 40.7 center_lon: -73.9 zoom: 14.0 }
}
6. Label Does NOT Support Animator
// WRONG (silently ignored)
Label{ animator: Animator{...} }

// CORRECT - wrap in View
View{ animator: Animator{...} Label{text: "Animated"} }

Common Widget Patterns

Card
RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    draw_bg.color: #2a2a3d
    draw_bg.border_radius: 8.0
    flow: Down spacing: 8
    title := Label{text: "Title" draw_text.color: #fff draw_text.text_style.font_size: 16}
    body := Label{text: "Content" draw_text.color: #aaa}
}
Form Input
View{
    width: Fill height: Fit
    flow: Down spacing: 4
    Label{text: "Email" draw_text.color: #aaa draw_text.text_style.font_size: 11}
    email_input := TextInput{
        width: Fill height: 36
        empty_text: "Enter email..."
    }
}
Scrollable List
ScrollYView{
    width: Fill height: Fill
    flow: Down spacing: 4
    new_batch: true
    on_render: || {
        for i, item in items {
            ItemTemplate{label.text: item.name}
        }
    }
}

Best Practices

  1. Use height: Fit on every container unless you want Fill or fixed pixels
  2. Use new_batch: true on any View with background color + text children
  3. Use := for children you need to reference or override
  4. Use theme colors (theme.color_*) instead of hardcoded colors
  5. Use PortalList for large lists (virtualizes rendering)
  6. Use ScrollYView for scrollable content areas
  7. Use RoundedView for cards and containers (has border_radius)

Examples

text
User: Apply this skill to my current task.
Assistant: Follow the workflow in this skill, cite limitations, and ask before risky steps.

Limitations

  • Imported upstream skill; verify credentials, permissions, and safety boundaries before execution.
  • Does not replace environment-specific validation, testing, or maintainer review.

© sickn33, MIT. 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 2 other files (references) in skills/makepad-2-0-widgets of sickn33/agentic-awesome-skills.

  • SKILL.md
  • references/widget-advanced.md
  • references/widget-catalog.md

Open the folder on GitHubat commit ec02547

Used in 1 other repository

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

Compare with similar skills

Makepad 2 0 Widgets 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.

Makepad 2 0 Widgets compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Makepad 2 0 Widgets this skillsickn33/agentic-awesome-skills47k1 repos~2kAutomated safety check: PassMIT
Makepad Skillsaiskillstore/marketplace4305 repos~198Automated safety check: PassNone
Vercel Composition Patternssupabase/supabase111k59 repos~726Automated safety check: PassMIT
Finishing a Development Branchobra/superpowers296k5 repos~1.9kAutomated safety check: PassMIT
Typescript Advanced Typesrolling-scopes/rsschool-app10k25 repos~4.2kAutomated safety check: PassMPL-2.0
PR Babysitteropeninterpreter/openinterpreter69k3 repos~4.2kAutomated safety check: PassApache-2.0

Similar skills

  • Makepad Skills

    aiskillstore/marketplace

    Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.

    430 GitHub starsUsed in 5 repos~198 tokens
    Game DevelopmentAuto-check passed
  • Official

    React composition patterns that scale. An agent skill from supabase/supabase.

    111k GitHub starsUsed in 59 repos~726 tokens
    DevelopmentAuto-check passed
  • Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.

    296k GitHub starsUsed in 5 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Typescript Advanced Types

    rolling-scopes/rsschool-app

    Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.

    10k GitHub starsUsed in 25 repos~4.2k tokens
    DevelopmentAuto-check passed
  • PR Babysitter

    openinterpreter/openinterpreter

    Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.

    69k GitHub starsUsed in 3 repos~4.2k tokens
    DevelopmentAuto-check passed
  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed

More from sickn33/agentic-awesome-skills

All 1,354 skills in this repo
  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed
  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed
  • Content Creator

    sickn33/agentic-awesome-skills

    Drafts and reviews audience-specific content from supplied brand examples, with local scripts for brand voice and SEO diagnostics, channel templates and a content calendar.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

Works with

Categories

Questions about Makepad 2 0 Widgets

What does Makepad 2 0 Widgets do?

Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code. Makepad 2 0 Widgets is an agent skill from sickn33/agentic-awesome-skills.0 guidance for widgets; use when building or debugging Makepad UI code.

When should I use Makepad 2 0 Widgets?

Makepad 2 0 Widgets fits situations like: debugging Makepad UI code.

How do I install Makepad 2 0 Widgets in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill makepad-2-0-widgets -a claude-code`. Or copy the skill folder (skills/makepad-2-0-widgets in sickn33/agentic-awesome-skills) into .claude/skills/makepad-2-0-widgets in your project. Claude Code loads it when a task matches its description.

How do I install Makepad 2 0 Widgets in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill makepad-2-0-widgets -a codex`. Or copy the skill folder (skills/makepad-2-0-widgets in sickn33/agentic-awesome-skills) into .agents/skills/makepad-2-0-widgets in your project. Codex loads it when a task matches its description.

Can I use Makepad 2 0 Widgets 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 sickn33/agentic-awesome-skills --skill makepad-2-0-widgets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/makepad-2-0-widgets, .gemini/skills/makepad-2-0-widgets, .github/skills/makepad-2-0-widgets and .opencode/skills/makepad-2-0-widgets in your project.

What does Makepad 2 0 Widgets need to run?

SKILL.md names no scripts, command-line tools or credentials: Makepad 2 0 Widgets is instructions for the agent only.

Does Makepad 2 0 Widgets 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 Makepad 2 0 Widgets 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 Makepad 2 0 Widgets use?

Makepad 2 0 Widgets is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Makepad 2 0 Widgets use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.5k tokens, read only when the agent opens those files.

What are the alternatives to Makepad 2 0 Widgets?

Skills that share tags, products or a category with Makepad 2 0 Widgets: Makepad Skills (aiskillstore/marketplace, 430 stars), Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 296k stars) and Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Makepad 2 0 Widgets?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,343 GitHub stars. The repository holds 1,354 skills in this directory. The repository was last updated on October 7, 2026.

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