Agent skill

Baby Menu Design

A skill your agent uses to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc.

MITAuto-check passedFrontend & Design

Install Baby Menu Design

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a claude-code

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

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design --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/kunchenguid/baby-menu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/baby-menu-design .claude/skills/baby-menu-design && 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/

Paste into Claude Code

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .claude/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kunchenguid/baby-menu.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/baby-menu-design .agents/skills/baby-menu-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .agents/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kunchenguid/baby-menu.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/baby-menu-design .cursor/skills/baby-menu-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .cursor/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/kunchenguid/baby-menu.git --path .agents/skills/baby-menu-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kunchenguid/baby-menu.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/baby-menu-design .gemini/skills/baby-menu-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .gemini/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/kunchenguid/baby-menu.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/baby-menu-design .github/skills/baby-menu-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .github/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add kunchenguid/baby-menu --skill baby-menu-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install kunchenguid/baby-menu baby-menu-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kunchenguid/baby-menu.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/baby-menu-design .opencode/skills/baby-menu-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "baby-menu-design" agent skill from https://github.com/kunchenguid/baby-menu/tree/main/.agents/skills/baby-menu-design into .opencode/skills/baby-menu-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "baby-menu-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: baby-menu-design
GitHub stars: 236
Token cost: ~1.1k tokens
SKILL.md length: 577 words
Files: 56
Skills in repo: 1
Repo updated: Sep 25, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

A skill your agent uses to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc.

Works in 9 steps: Baby Menu is a macOS tray popover, 504px… → The agent's work is not a chat. No… → No build-mode toggle. On the main idle… → …
Generate well-branded interfaces and assets for Baby Menu
SKILL.md covers What's here, The direction in one paragraph, Hard rules and Reference repo
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Baby Menu Design is an agent skill from kunchenguid/baby-menu. Use this skill to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 56 other files (for example `README.md`).

It sits in Frontend & Design, covering Prototyping and Design systems. The repository describes itself as: A menu bar app that can become anything you ask it to be. The licence is MIT.

When your agent uses it

Generate well-branded interfaces and assets for Baby Menu
Either for production
Throwaway prototypes/mocks/etc

Example prompts

“/baby-menu-design”

Workflow steps

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

Baby Menu is a macOS tray popover, 504px wide by default and adaptive in both width and height when a root layout.tsx defines a wider…
The agent's work is not a chat. No transcript, no bubbles, no history. Use the RunStrip pattern: one live affordance (pulsing mint dot +…
No build-mode toggle. On the main idle surface, the composer is one slim row pinned to the bottom of the popover. It auto-grows to a…
Never expose git, files, or commits to the user. The SessionBar reads "Added the cpu extension" or "Updated the layout", not "3 files…
No emoji as UI. No gradients. Status is color + word (rarely needed — usually only on the SessionBar's leading dot).
Type and ASCII glyphs are the iconography. › + · ↵ ⌘ ●. Lucide is used when ASCII won't carry the meaning, including CircleArrowUp for…
JetBrains Mono everywhere inside the popover surface. Inter Tight only for long prose outside the surface.
Mint is the only signal color and is used ONLY as a dot, glow, single word, or 1px progress fill — never as a button fill, never as a…
Production @babymenu/ui buttons use compact rounded-sm corners. Primary is inverse white (--ink-100 on near-black). Default is transparent…

What it can do on your machine

Read from SKILL.md and the folder at commit b82422d. 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
Links to these hosts (documentation or services it may open):
- github.com
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

Baby Menu Design loads about 1.1k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 577 words of instructions outside code blocks.

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

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 kunchenguid/baby-menu at commit b82422d, republished under its MIT licence (© kunchenguid). 577 words, ~1,055 tokens.

Download SKILL.mdSave it as .claude/skills/baby-menu-design/SKILL.md (or your agent's skills folder). This skill also uses 55 other files; get the full folder from GitHub.

name: baby-menu-design
description: Use this skill to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

What's here

README.md — full brand brief: product context, content fundamentals, visual foundations, iconography.
colors_and_type.css — prototype and app-shell token reference. For production widgets, use @babymenu/ui and the live Tailwind tokens in src/ui/theme.css; never invent new tokens without updating the relevant source first.
preview/ — small HTML cards that document each token / component visually.
ui_kits/popup-menu/ - the canonical UI kit: a clickable recreation of the redesigned tray popover with MenuBar, Composer, RunStrip, SessionBar, WidgetHost and three sample widgets.

The direction in one paragraph

Monochrome Lab. Near-black canvas (#0B0B0C), white type at varying alpha, JetBrains Mono everywhere, one mint signal color (#6AE3B6). The popover reads as a calm command-line surface. No gradients, no emoji, no second accent. Status is a small glowing dot plus one tracked-caps word, 6px in shared components and 8px in RunStrip/SessionBar controls.

Hard rules

Baby Menu is a macOS tray popover, 504px wide by default and adaptive in both width and height when a root layout.tsx defines a wider canvas. Never design for a full browser window.
The agent's work is not a chat. No transcript, no bubbles, no history. Use the RunStrip pattern: one live affordance (pulsing mint dot + current step + timer), replaced by a SessionBar when done.
No build-mode toggle. On the main idle surface, the composer is one slim row pinned to the bottom of the popover. It auto-grows to a second line when the user types more. During an active agent run, RunStrip replaces the composer; the settings view also replaces it while open.
Never expose git, files, or commits to the user. The SessionBar reads "Added the cpu extension" or "Updated the layout", not "3 files committed · b8d3a2c". Buttons are Keep and Undo, not Save and Rollback, and Keep clears the bar without a redundant kept confirmation.
No emoji as UI. No gradients. Status is color + word (rarely needed — usually only on the SessionBar's leading dot).
Type and ASCII glyphs are the iconography. › + · ↵ ⌘ ●. Lucide is used when ASCII won't carry the meaning, including CircleArrowUp for update availability, RotateCw for reloading the layout, Settings for settings, and Power for quitting the app; use 14px in compact controls and 16px in roomier controls.
JetBrains Mono everywhere inside the popover surface. Inter Tight only for long prose outside the surface.
Mint is the only signal color and is used ONLY as a dot, glow, single word, or 1px progress fill — never as a button fill, never as a background of more than 10% alpha.
Production @babymenu/ui buttons use compact rounded-sm corners. Primary is inverse white (--ink-100 on near-black). Default is transparent with a 1px hairline border. Destructive is coral outline. Reserve pill buttons for prototype/app-shell affordances where the design brief calls for them.

Show full SKILL.md (27 more words)Show less

Reference repo

The live product code lives at https://github.com/kunchenguid/baby-menu. Read AGENTS.md and src/shared/contracts.ts there for the architectural ground truth (three-process Electron split, source-vs-packaged change-session invariants, widget contracts).

Files

SKILL.md and 55 other files in .agents/skills/baby-menu-design of kunchenguid/baby-menu.

SKILL.md
README.md
colors_and_type.css
preview/brand-iconography.html
preview/brand-popover.html
preview/brand-wordmark.html
preview/card.css
preview/color-accent.html
preview/color-ink.html
preview/color-paper.html
preview/color-status.html
preview/comp-buttons.html
preview/comp-composer.html
preview/comp-empty.html
preview/comp-mode-toggle.html
preview/comp-pills.html
preview/comp-runstrip.html
preview/comp-sessionbar.html
preview/comp-widget-card.html
preview/spacing-motion.html
… and 36 more

Open the folder on GitHubat commit b82422d

Compare with similar skills

Baby Menu Design 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.

Baby Menu Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Baby Menu Design this skillkunchenguid/baby-menu	236	—	~1.1k	Automated safety check: Pass	MIT	16 days ago
Fast Agent Designevalstate/fast-agent	3.9k	—	~220	Automated safety check: Pass	Apache-2.0	today
Beava Designbeava-dev/beava	138	—	~443	Automated safety check: Pass	Apache-2.0	4 mo ago
Vibeusage DesignvictorGPT/vibeusage	130	—	~566	Automated safety check: Pass	MIT	2 mo ago
Irrlicht Designingo-eichhorst/Irrlicht	100	—	~512	Automated safety check: Pass	MIT	6 days ago
Prototype to Figmaalima-max/prototype-to-figma-skill	141	—	~7.8k	Automated safety check: Pass	MIT	2 mo ago

Similar skills

Fast Agent Design
evalstate/fast-agent
A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.
3.9k GitHub stars~220 tokensUpdated today
Frontend & DesignAuto-check passed
Beava Design
beava-dev/beava
A skill your agent uses to generate well-branded interfaces and assets for beava (beava.dev, an open-source single-binary feature server for stream processing), either for production or throwaway…
138 GitHub stars~443 tokensUpdated 4 mo ago
Frontend & DesignAuto-check passed
Vibeusage Design
victorGPT/vibeusage
A skill your agent uses to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc.
130 GitHub stars~566 tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Irrlicht Design
ingo-eichhorst/Irrlicht
A skill your agent uses to generate well-branded interfaces and assets for Irrlicht, either for production or throwaway prototypes/mocks/etc.
100 GitHub stars~512 tokensUpdated 6 days ago
Frontend & DesignAuto-check passed
Prototype to Figma
alima-max/prototype-to-figma-skill
Converts a working code prototype into a structured Figma file with one frame per interaction state, mapped to your design system and annotated with transitions.
141 GitHub stars~7.8k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Extract
adobe/skills
Crawl an existing website (capped, multi-page) and seed stardust/current/ with PRODUCT.md, DESIGN.md, DESIGN.json, a per-page inventory, and the consolidated brand surface — the captured design…
197 GitHub stars~11k tokensUpdated yesterday
Frontend & DesignAuto-check passed

Questions about Baby Menu Design

What does Baby Menu Design do?

A skill your agent uses to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc. Baby Menu Design is an agent skill from kunchenguid/baby-menu. Use this skill to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc.

When should I use Baby Menu Design?

Baby Menu Design fits situations like: generate well-branded interfaces and assets for Baby Menu; either for production; throwaway prototypes/mocks/etc.

How do I install Baby Menu Design in Claude Code?

Run `npx skills add kunchenguid/baby-menu --skill baby-menu-design -a claude-code`. Or copy the skill folder (.agents/skills/baby-menu-design in kunchenguid/baby-menu) into .claude/skills/baby-menu-design in your project. Claude Code loads it when a task matches its description.

How do I install Baby Menu Design in Codex?

Run `npx skills add kunchenguid/baby-menu --skill baby-menu-design -a codex`. Or copy the skill folder (.agents/skills/baby-menu-design in kunchenguid/baby-menu) into .agents/skills/baby-menu-design in your project. Codex loads it when a task matches its description.

Can I use Baby Menu Design 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 kunchenguid/baby-menu --skill baby-menu-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/baby-menu-design, .gemini/skills/baby-menu-design, .github/skills/baby-menu-design and .opencode/skills/baby-menu-design in your project.

What does Baby Menu Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Baby Menu Design is instructions for the agent only.

Does Baby Menu Design access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Baby Menu Design 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 Baby Menu Design use?

Baby Menu Design 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 Baby Menu Design use?

About 1.1k tokens (SKILL.md is roughly 4.2k 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 Baby Menu Design?

Skills that share tags, products or a category with Baby Menu Design: Fast Agent Design (evalstate/fast-agent, 3.9k stars), Beava Design (beava-dev/beava, 138 stars), Vibeusage Design (victorGPT/vibeusage, 130 stars) and Irrlicht Design (ingo-eichhorst/Irrlicht, 100 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Baby Menu Design?

kunchenguid (a GitHub user) maintains it in kunchenguid/baby-menu, which has 236 GitHub stars. The repository was last updated on September 25, 2026.

Source: kunchenguid/baby-menu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Baby Menu Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

What's here

The direction in one paragraph

Hard rules

Reference repo

Files

Compare with similar skills

Similar skills

Fast Agent Design

Beava Design

Vibeusage Design

Irrlicht Design

Prototype to Figma

Extract

Related

Questions about Baby Menu Design