repository·main·Indexed 19 days ago
https://github.com/sleekdotdesign/agent-skillsSpecialized agent skills for Sleek, an AI-powered mobile app design tool. These skills enable AI agents to automate mobile app design workflows, create screens, and manage projects via the Sleek API. Includes the `design-mobile-apps` skill, documentation on API authentication (API keys and Device Flow), project and component management, asynchronous chat-based UI design, and screenshot generation.
Sleek Agent Skills are specialized capabilities designed for Sleek, an AI-powered mobile app design tool. These skills allow agents to perform design-related tasks such as creating screens and managing Sleek projects using AI.
design-mobile-apps: Design mobile apps, create screens, and manage Sleek projects with AI.Components in Sleek contain a versions[] array and an activeVersion number.
versions[i].version === activeVersion. This is the code currently visible in the Sleek UI.- component cmp_abc: version ver_001), you must implement that specific version. Find the entry in versions[] where versions[i].id matches the provided ID (e.g., ver_001) and use its code. Do not fall back to the activeVersion for pinned components.Note: Theme IDs (e.g., thm_ghi) only appear within pin blocks; there is no separate endpoint to list them.
To use Sleek agent skills, you must provide a valid API key via the SLEEK_API_KEY environment variable.
export SLEEK_API_KEY='your_api_key_here'Sleek uses Iconify icons in the prefix:name format (e.g., solar:heart-bold).
Implementation Rules:
@expo/vector-icons does not support these sets.GET https://api.iconify.design/{prefix}/{name}.svg
Example: https://api.iconify.design/solar/heart-bold.svgreact-native-svg's SvgXml component to render the fetched SVGs.# Example fetching an icon SVG
curl -O https://api.iconify.design/solar/heart-bold.svgIf you do not have a SLEEK_API_KEY available, use the device flow to allow the user to authorize your tool without handling the raw key.
POST request to https://sleek.design/api/v1/device/start with a body containing {"source": "your-tool-slug"}.verificationUrl and a userCode. Display these to the user and ask them to confirm the code matches before they approve.POST https://sleek.design/api/v1/device/poll with {"deviceCode": "..."} at the interval specified in the initial response.{"status": "approved", "key": "sk_..."}. Store this key as SLEEK_API_KEY.Note: Codes expire after 15 minutes. If you receive an expired status, restart the process.
# Step 1: Start device flow
curl -X POST https://sleek.design/api/v1/device/start \
-H "Content-Type: application/json" \
-d '{"source": "my-ai-agent"}'
# Step 2: Poll for approval (using the deviceCode from step 1)
curl -X POST https://sleek.design/api/v1/device/poll \
-H "Content-Type: application/json" \
-d '{"deviceCode": "DEVICE_CODE_HERE"}'When implementing designs in code, do not rely on screenshots alone. You must fetch the actual HTML code for each screen to ensure accuracy in structure, styling, and content.
Use the following endpoint to retrieve the code:
GET /api/v1/projects/:id/components/:componentId
The componentId is provided in the result.operations field of a chat run.
Best Practice: Component code can be large. To avoid wasting tokens and slowing down the process, do not output the code through text. Instead, use shell commands to fetch the API response and pipe it directly to a file on disk.
# Example of fetching component code via shell to avoid token waste
curl -X GET "https://<api-url>/api/v1/projects/proj_xyz/components/cmp_abc" -H "Authorization: Bearer <token>" > screen_abc.htmlTo ensure reliable integration with the Sleek mobile app design skill, avoid these common pitfalls:
| Mistake | Fix |
|---|---|
Omitting source on chat messages | Always send source so the run is attributed in the Sleek editor |
Using wait=true on long generations | wait=true blocks for a maximum of 300s. For longer tasks, use a fallback to poll for a 202 response |
Assuming result is present on 202 | The result field is absent until the status is completed |
Piping JSON through echo to parse | zsh expands \n in assistantText, breaking the JSON. Parse from a file instead |
| Treating unreadable run status as "not done" | If a status is unreadable, stop and report it instead of spinning until the cap |
| Calling a screen incomplete via viewport screenshot | Content is often below the fold. Re-shoot with fullHeight: true or check component HTML |
Using screenId as componentIds | screenId and componentId are distinct. Always use componentId from operations for screenshots |
Confusing version with id | When resolving pinned versions, match by id (e.g., ver_001). The version field is a numeric index. |
You can install the Sleek agent skills using the npx skills CLI. You can either browse and install interactively or install a specific skill directly using the -s flag.
Note: The installation process places the skill files in the .agents/skills/ directory of your current working directory. If your agent fails to automatically discover the skills, you may need to point your agent explicitly to the installed SKILL.md file.
# Interactive installation
npx skills add sleekdotdesign/agent-skills
# Direct installation of a specific skill
npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-appsAfter a chat run produces screen_created or screen_updated operations, use POST /api/v1/screenshots to generate images for the user.
background: "transparent" unless requested otherwise. This is best for showing the user how the design looks on a phone.fullHeight: true to capture the entire scrollable page. This is essential for verifying content that might be 'below the fold' and should be used when reviewing if a design is complete.Workflow Tip: Issue screenshot requests in parallel to improve speed. For new screens, provide one screenshot per screen plus one combined screenshot of all screens in the project.
{
"screenId": "screen_abc_123",
"background": "transparent",
"fullHeight": true
}To generate screenshots for specific historical versions (pinned versions), pass componentVersionOverrides and themeVersionOverrides to the POST /api/v1/screenshots endpoint.
In the override maps, the keys are the component or theme public IDs, and the values are the specific version IDs (e.g., ver_001). Entities omitted from these maps will default to their activeVersion.
{
"componentIds": ["cmp_abc"],
"projectId": "proj_xyz",
"componentVersionOverrides": { "cmp_abc": "ver_001" },
"themeVersionOverrides": { "thm_ghi": "ver_003" }
}To start a new design session, use POST /api/v1/projects. You should derive a project name from the user's request.
Best Practice: Each project has its own theme and design system. If a user requests multiple distinct design variations, create a separate project for each variation to maintain style consistency.
Chat messages are asynchronous. After sending a message, you receive a runId. You must poll GET /api/v1/projects/:id/chat/runs/:runId to check progress.
Polling Strategy:
completed or failed.Alternatively, you can use the blocking parameter ?wait=true on the initial request (up to 300s), which falls back to polling if it times out with a 202 status.