sleek-design-mobile-apps
sleekdotdesign/agent-skills · 182.3k installs · 585 stars
Skill Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Install
npx -y skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps --agent claude-codeRun in a terminal. Claude loads the skill when a task calls for it. Check the repo's README before you run it.
Files
Designing with Sleek
Overview
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.
Designing or implementing
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.
User shot and review shot
Screenshots come in two framings, and each file below asks for one by name:
- A user shot is the default render: viewport height, phone-shaped. This is the one you show the user.
- A review shot adds
fullHeight: true, one component per request. This is the one you judge your own work against.
Prerequisites: API Key
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 averificationUrl, a human-checkableuserCode, a secretdeviceCode, and a pollintervalin seconds.- Show the user the
verificationUrland theuserCode, and tell them to confirm the code matches before approving. - Poll
POST https://sleek.design/api/v1/device/pollwith{"deviceCode": "..."}everyintervalseconds. Onpending, keep waiting. Onapproved, storedata.keyprivately asSLEEK_API_KEYon that first read: the key is handed over once. Onexpiredor404 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.
Quick Reference: All Endpoints
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.
Error Shapes
{
"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.
Facts
- Kind
- Skill
- Repo
- sleekdotdesign/agent-skills
- Group
- Uncategorized
- Installs
- 182.3k
- Stars
- 585
- 1find-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.3M
- 2ai-video-generationinference-sh/skillsGenerate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse1.7M
- 3ai-image-generationinference-sh/skillsGenerate AI images with GPT-Image-2.5, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2.5 Flare, GPT-Image-2.5 Sunburst, GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image1.7M
- 4ai-avatar-videoinference-sh/skillsCreate AI avatar and talking head videos via inference.sh CLI. Recommended: P-Video-Avatar (fastest, cheapest, built-in TTS). Also: OmniHuman, Fabric, PixVerse. Audio: Inworld TTS-2 (100+ languages, emotion steering for characters), ElevenLabs, Kokoro. Capabilities: audio-driven avatars, text-to-avatar, lipsync videos, talking head generation, virtual presenters, UGC content. Use for: AI presenters, explainer videos, virtual influencers, dubbing, marketing videos, UGC ads, gaming avatars, NPC dialogue. Triggers: ai avatar, talking head, lipsync, avatar video, virtual presenter, ai spokesperson, audio driven video, heygen alternative, synthesia alternative, talking avatar, lip sync, video avatar, ai presenter, digital human, ugc, ugc video, ugc ad, avatar ugc1.7M
- 5twitter-automationinference-sh/skillsAutomate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-create (text and media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet1.7M
- 6remotion-renderinference-sh/skillsRender videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video1.6M
