Mobile App UI Design
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-apps --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-mobile-apps .claude/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.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/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .claude/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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 install https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-appsType 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.
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-apps --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-mobile-apps .agents/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .agents/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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.
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-apps --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-mobile-apps .cursor/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .cursor/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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 https://github.com/sleekdotdesign/agent-skills.git --path skills/design-mobile-apps--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-apps --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-mobile-apps .gemini/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.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/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .gemini/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-appsInstalls 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).
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-mobile-apps .github/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.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/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .github/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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.
$ npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sleekdotdesign/agent-skills sleek-design-mobile-apps --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sleekdotdesign/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-mobile-apps .opencode/skills/sleek-design-mobile-apps && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "sleek-design-mobile-apps" agent skill from https://github.com/sleekdotdesign/agent-skills/tree/main/skills/design-mobile-apps into .opencode/skills/sleek-design-mobile-apps/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sleek-design-mobile-apps", 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.
sleek-design-mobile-appsDesign mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Sleek Design Mobile Apps is an agent skill from sleekdotdesign/agent-skills. Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files (for example `designing.md`, `endpoints.md` and `implementing.md`).
It sits in Mobile, covering Cross-platform mobile apps and Mobile UI design. It works with React Native and Figma. The repository describes itself as: Official Sleek agent skill for creating and editing mobile app designs through the REST API. Includes account setup, screenshots and screen HTML. The licence is MIT.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit fb90438. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
curlFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
sleek.designFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
SLEEK_API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Sleek Design Mobile Apps loads about 2.1k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 878 words of instructions outside code blocks.
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.
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.
The full file from sleekdotdesign/agent-skills at commit fb90438, republished under its MIT licence (© sleekdotdesign). 878 words, ~2,119 tokens.
.claude/skills/sleek-design-mobile-apps/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.Image: Design mobile apps in minutes
sleek.design provides a REST API at /api/v1/* to create projects, design screens from a brief, and fetch their HTML and renders.
Base URL: https://sleek.design
Auth: Authorization: Bearer $SLEEK_API_KEY, except the public device start/poll endpoints
Content-Type: send application/json for JSON request bodies.
CORS: Enabled on all /api/v1/* endpoints
Envelope: check HTTP status first. Successful JSON wraps its payload in data; lists also include sibling pagination. Errors use top-level code, status and message, with optional data.url. Successful screenshots and share cards return image bytes; 204 has no body.
Ids: opaque 11-character tokens like V1StGXR8Z5j, with no type prefix. Nothing about an id says whether it names a project, screen, component, version or theme, so track each one by the response field it arrived in.
Parsing responses: write the body to a file (curl -o run.json) and parse the file. Piping JSON through echo corrupts it: zsh expands the escaped \n inside string values into real newlines, which makes the body invalid JSON.
API docs: OpenAPI spec at https://sleek.design/api/v1/spec.json; browsable docs at https://sleek.design/api/v1/docs. Fetch the spec for any contract detail not covered here.
A single run can take both directions — "design me a fitness app and build it in Expo" is a design pass followed by an implementation pass. Gate each pointer on the artefact in front of you rather than on a one-time reading of the request:
Designing — you are about to send a chat message to Sleek. Read designing.md first; it carries the create → chat → screenshot loop, how to author a style direction, and when to seed one from a reference instead.
Implementing. Before writing code from a Sleek design, read implementing.md for version selection, native conversion, working features, and acceptance checks.
Screenshots come in two framings, and each file below asks for one by name:
fullHeight: true, one component per request. This is the one you judge your own work against.If SLEEK_API_KEY is not set, use the device flow so the user never handles the raw key:
POST https://sleek.design/api/v1/device/start (no auth) with body {"source": "your-tool-slug"}. The response contains a verificationUrl, a human-checkable userCode, a secret deviceCode, and a poll interval in seconds.verificationUrl and the userCode, and tell them to confirm the code matches before approving.POST https://sleek.design/api/v1/device/poll with {"deviceCode": "..."} every interval seconds. On pending, keep waiting. On approved, store data.key privately as SLEEK_API_KEY on that first read: the key is handed over once. On expired or 404 NOT_FOUND, start a new flow. See Device: Poll for the response contract.Fallback: send the user to https://sleek.design/agents/setup, which handles sign-in, plan upgrade, and key creation in one place, and ask them to paste the key back to you. Keys can also be managed at https://sleek.design/dashboard/api-keys. The full key value is shown only once at creation, and a free account holds one active key at a time.
Plans: free accounts can try the API with their one-time trial credits (about one design run), so a new user can see their first design before any payment decision. Sustained use requires the Pro plan or higher. This file carries no figures on purpose — read the current price, billing periods and credit allowance from https://sleek.design/agents.md, which is generated from Sleek's live pricing, and quote them from there. When cost becomes relevant (the user asks, an upgrade is needed to continue, or you're about to send them to a payment page), state that pricing plainly, including the yearly option, so the user sees a payment step coming before they reach it.
Every endpoint the API exposes:
| Method | Path | Scope |
|---|---|---|
GET | /api/v1/projects | projects:read |
POST | /api/v1/projects | projects:write |
GET | /api/v1/projects/:id | projects:read |
DELETE | /api/v1/projects/:id | projects:write |
GET | /api/v1/projects/:id/components | components:read |
GET | /api/v1/projects/:id/components/:componentId | components:read |
GET | /api/v1/references | any valid key |
POST | /api/v1/projects/:id/chat/messages | chats:write |
GET | /api/v1/projects/:id/chat/runs/:runId | chats:read |
POST | /api/v1/projects/:id/chat/runs/:runId/cancel | chats:write |
POST | /api/v1/screenshots | screenshots |
POST | /api/v1/share-cards | screenshots |
POST | /api/v1/device/start | public, no auth |
POST | /api/v1/device/poll | public, no auth |
Create a key holding only the scopes the task uses.
Every row above is specified in full — request body, response shape, field defaults, status codes — in endpoints.md. This table is enough to pick an endpoint; read the reference when you need a contract detail it doesn't carry.
{
"defined": true,
"code": "FORBIDDEN",
"status": 403,
"message": "...",
"data": { "url": "https://sleek.design/..." }
}| HTTP | Code | When |
|---|---|---|
| 401 | UNAUTHORIZED | Missing/invalid/expired API key |
| 403 | FORBIDDEN | Valid key, wrong scope or plan |
| 404 | NOT_FOUND | Resource doesn't exist |
| 400 | BAD_REQUEST | Validation failure |
| 409 | CONFLICT | Another run is active for this project |
| 429 | TOO_MANY_REQUESTS | Render cap: 1000 screenshots + share cards per hour per org, counted on API-key requests only |
| 500 | INTERNAL_SERVER_ERROR | Server error |
401, 403 and 429 bodies may include data.url: a page where the user can fix the condition (create a key, upgrade the plan). Share it as-is.
Chat run-level errors (inside data.error):
| Code | Meaning |
|---|---|
out_of_credits | Organization has no credits left |
execution_failed | AI execution error |
cancelled | Run cancelled via the cancel endpoint |
request_message_persist_failed | The run failed before reaching the AI; the message was never stored |
For out_of_credits, relay error.url and wait for the user to resolve it. Follow Safe retries for replay versus a new attempt after either recoverable failure.
© sleekdotdesign, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files in skills/design-mobile-apps of sleekdotdesign/agent-skills.
Open the folder on GitHubat commit fb90438
Sleek Design Mobile Apps 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Sleek Design Mobile Apps this skillsleekdotdesign/agent-skills | 585 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Mobile App UI Designceorkm/mobile-app-ui-design | 403 | — | ~2k | Automated safety check: Pass | None | |
| React Native Experttech-leads-club/agent-skills | 7k | — | ~3.2k | Automated safety check: Pass | CC-BY-4.0 | |
| Mobile AccessibilityCommunity-Access/accessibility-agents | 423 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Kb Mobile AccessibilityCommunity-Access/accessibility-agents | 423 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Appllama App Design SkillAppllama/appllama-skills | 2.5k | 1 repos | ~5k | Automated safety check: Pass | MIT |
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
tech-leads-club/agent-skills
Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.
Community-Access/accessibility-agents
React Native, Expo, iOS and Android: labels, roles and touch targets.
Community-Access/accessibility-agents
Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.
Appllama/appllama-skills
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).
Appllama/appllama-skills
Use the Appllama MCP (mcp.appllama.io) well — research real top-grossing mobile apps, their screens, flows, and UI elements, then build from what you learn.
Works with
Categories
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML. Sleek Design Mobile Apps is an agent skill from sleekdotdesign/agent-skills. Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Sleek Design Mobile Apps fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Mobile UI design.
Run `npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a claude-code`. Or copy the skill folder (skills/design-mobile-apps in sleekdotdesign/agent-skills) into .claude/skills/sleek-design-mobile-apps in your project. Claude Code loads it when a task matches its description.
Run `npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a codex`. Or copy the skill folder (skills/design-mobile-apps in sleekdotdesign/agent-skills) into .agents/skills/sleek-design-mobile-apps in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sleek-design-mobile-apps, .gemini/skills/sleek-design-mobile-apps, .github/skills/sleek-design-mobile-apps and .opencode/skills/sleek-design-mobile-apps in your project.
Going by SKILL.md and its folder, Sleek Design Mobile Apps needs the command-line tools its instructions call (curl) and credentials named SLEEK_API_KEY. Our summary lists: A credential in SLEEK_API_KEY.
SKILL.md names 1 domain. In commands or code: sleek.design; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
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.
Sleek Design Mobile Apps is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Sleek Design Mobile Apps: Mobile App UI Design (ceorkm/mobile-app-ui-design, 403 stars), React Native Expert (tech-leads-club/agent-skills, 7k stars), Mobile Accessibility (Community-Access/accessibility-agents, 423 stars) and Kb Mobile Accessibility (Community-Access/accessibility-agents, 423 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
sleekdotdesign (a GitHub organization) maintains it in sleekdotdesign/agent-skills, which has 585 GitHub stars. The repository was last updated on October 5, 2026.
Source: sleekdotdesign/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.