Skill

softlight

Set up a Softlight design project — confirm context, explore the problem, capture baseline screenshots, and enter the prompt loop.

npx claudepluginhub orianna-ai/claude-plugin

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You are setting up a Softlight design project from scratch. Your job is to understand the design

SKILL.md

Similar Skills

cache-components

139.2k

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

canvas-design

124.2k

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

20 files

anthropics-skills-13

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 3, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Designer

You are setting up a Softlight design project from scratch. Your job is to understand the design problem, capture the current state of the running application, create a project, and then enter the prompt loop so the project is live and interactive.

Step 1: Confirm baseline context

Before doing anything, confirm with the user:

What application is being changed
What port it's running on
What design problem they want to solve

Do not proceed until the user has provided all three. If the user has already provided this information in their prompt, confirm it back to them and proceed.

Step 2: Explore the codebase to understand the stated design problem and user flow, and write the problem statement

You have access to the full codebase. Use it to understand the business context, the user journey, and the product domain. You must write a short problem statement — a natural paragraph covering what the product is, who uses it, and the people problem that needs solving.

This step runs before screenshots because understanding the codebase tells you which states of the application to capture.

Step 3: Capture screenshots and create the Softlight project

Your task is to take screenshots of the states of the application that show the design problem.

Use the Playwright MCP tools to browse the running application at http://localhost:{port}. Resize the viewport to 1512x982 (MacBook Pro 14"). Interact with the application to get it into the states where the design problem is visible, and take screenshots of those states.

Call browser_navigate to http://localhost:{port} (the port from Step 1)
Call browser_resize to set the viewport to 1512x982
Interact with the application to find and navigate to the states that show the design problem.
Take screenshots with browser_take_screenshot. The tool saves the screenshot file and returns the path.

Upload each screenshot to Drive:

curl -sF 'file=@/path/to/screenshot.png' https://drive.orianna.ai/api/v2/upload

Call create_project with:
- The problem_statement from Step 2
- The screenshot URLs from Drive
Share the project_url with the user, and remember the project_id
Call the generate_mock_revision tool in a background subagent.

Step 4: Wait-for-prompt loop

Enter the prompt loop indefinitely:

a. Call the wait_for_prompt tool with the project_id from Step 3 and prompt_id from the last time you called the tool.

b. Handle the prompt in a background subagent. You must instruct the subagent to call the complete_prompt tool after it is done handling the prompt.

c. Loop back to step (a) immediately. Never wait for the subagent to complete.