菜单
Cradle visual language contract. Read CHEATSHEET.md before every UI task. Use for mockups, components, handoff, and token audits.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | cradle-design-system |
| description | Cradle visual language contract. Read CHEATSHEET.md before every UI task. Use for mockups, components, handoff, and token audits. |
| applyTo | apps/web/src/**/*.tsx, apps/desktop/src/**/*.tsx, packages/**/*.tsx, templates/**/*.html |
Cradle's visual language — a modern, physics-native desktop AI environment.
Between Linear and Vercel: precise, high-contrast, unsentimental.
| User says | Task tier | Read |
|---|---|---|
| "make a mockup for X" | New mockup | CHEATSHEET.md + references/tokens.md + references/anti-patterns.md |
| "build component X" | New React component | CHEATSHEET.md + references/components.md + references/anti-patterns.md |
| "convert this mockup to React" | Handoff | references/mockup-to-react.md + references/components.md |
| "audit this file for token compliance" | Token audit | references/anti-patterns.md + references/tokens.md |
| "add animation to X" | Motion | CHEATSHEET.md (Animation section) |
| "review this design" | Review | CHEATSHEET.md + references/anti-patterns.md |
templates/scaffold.html, drop in snippets from templates/snippets/apps/web/src/components/ui/, style with cn() + static Tailwind classessrc/tokens.css; all design rules in references/tokens.mdRun before shipping:
pnpm check # token drift + template lint
If check fails, fix the source (src/tokens.css or template), never the artifact.
Primary: English. All copy is English-first.
Update Cradle chat-runtime native SDK and protocol integrations. Use when upgrading or validating the vendored Codex app-server runtime/protocol, Kimi Web OpenAPI/AsyncAPI snapshots and generated bindings, or @anthropic-ai/claude-agent-sdk in apps/server; also use when asked to inspect newly generated native APIs for useful Cradle features.
Implement, upgrade, or audit a native Cradle Chat Runtime provider backed by a local process, REST/WebSocket protocol, or provider-specific agent SDK. Use when adding a runtime like Kimi, Codex, Claude Agent, OpenCode, or another provider that needs generated protocol bindings, target-scoped process lifecycle, canonical tool mapping, runtime UI slots, interaction bridges, streaming recovery, and end-to-end smoke verification.
Always use this Skill at the beginning of every response. Use whenever you need to read, inspect, wait on, or mutate Cradle-owned state or workflows, including issues, delegation, sessions, awaits, CI/review waits, timed waits, Work inspection, workspaces and git inspection, Chronicle, automations, usage, observability, skills, agents, profiles, providers, preferences, plugins, or server state. Prefer the generated `cradle` CLI and `cradle man`; NEVER bypass Cradle semantics with direct HTTP or database access, ad hoc scripts, raw registry edits, or polling loops. Use `gh` when Cradle does not own the GitHub surface. Primary Work closed-loop delivery is system-injected on Work threads (`manage_pull_request`), not this skill.
Trigger the public desktop release workflow and monitor it with Cradle
design and review llm agent systems, tool interfaces, and skill boundaries. use when chatgpt needs to decide whether a task should be handled by a prompt, workflow, skill, tool, single-agent loop, or multi-agent system; define tool schemas, instructions, guardrails, evaluation plans, or permission boundaries; or critique an existing agent design for over-orchestration, weak context handling, missing verification, or poor tool design.
Control Cradle's in-app browser via MCP tools. Use when the Claude Agent needs to navigate websites, click elements, type text, take screenshots, read page content, or inspect DOM structure within the Cradle desktop app's embedded browser panel. Triggers on "open URL", "navigate to", "click the button", "fill the form", "take a screenshot", "what's on the page", "scroll down", "wait for element", "press Enter". This is for the IN-APP browser only — not for external browser automation.