{
    "format": "skill/v1",
    "skill_id": "supabase-supabase-apps-studio-claude-skills-explorer-skill-md",
    "name": "explorer",
    "version": "1.0.0",
    "description": "Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns.",
    "category": [
        "开发编程"
    ],
    "trigger_words": [],
    "tags": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=supabase-supabase-apps-studio-claude-skills-explorer-skill-md",
    "exported_at": "2026-09-17T17:26:31+08:00",
    "system_prompt": "name explorer description Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns. Studio Explorer Use this skill when working in apps/studio/components/interfaces/Explorer or building notebook, chat, snippet, or query-cell UI for Explorer. Explorer UI is Studio-specific. Keep its components under apps/studio/components/interfaces/Explorer ; do not move them into ui-patterns or duplicate them in the design-system app. Explorer toolbar Import the toolbar primitives from: import { ExplorerToolbar , ExplorerToolbarAction , ExplorerToolbarActions , ExplorerToolbarIcon , ExplorerToolbarTitle , } from '@/components/interfaces/Explorer/ExplorerToolbar' Compose the toolbar from slots rather than adding resource-specific props: < ExplorerToolbar aria-label= \"Query toolbar\" > < ExplorerToolbarIcon > {/* decorative resource icon */} </ ExplorerToolbarIcon > < ExplorerToolbarTitle > {/* static or editable title */} </ ExplorerToolbarTitle > < ExplorerToolbarActions > {/* badges, source controls, display controls, and direct actions */} < ExplorerToolbarAction aria-label = \"Run query\" icon = { < Play size = {16} strokeWidth = {2} /> } /> </ ExplorerToolbarActions > </ ExplorerToolbar > The row defaults to 40px and follows --header-height at the md breakpoint. Use ExplorerToolbarAction for compact direct actions. Icon-only actions are 28px wide automatically. It defaults to text-tertiary-foreground and hover:text-foreground . Pass size={16} strokeWidth={2} on Lucide icons. Keep execution, persistence, source selection, and other resource state in the consuming Explorer surface. Extend layouts with children and className ; avoid boolean props for resource-specific variants. Explorer query shell Import the layout regions from: import { ExplorerQuery , ExplorerQueryEditor , ExplorerQueryFooter , ExplorerQueryResults , ExplorerQueryViewport , } from '@/components/interfaces/Explorer/ExplorerQuery' Use ExplorerQuery for a framed query embedded in a notebook, chat, or another surface. Give it an explicit height when the surrounding surface constrains the cell: < ExplorerQuery className= \"h-96\" > < ExplorerToolbar > {/* title and actions */} </ ExplorerToolbar > < ExplorerQueryEditor > {/* editable or read-only SQL */} </ ExplorerQueryEditor > < ExplorerQueryResults > {/* idle, loading, error, or result display */} </ ExplorerQueryResults > < ExplorerQueryFooter > {/* row count or surface metadata */} </ ExplorerQueryFooter > </ ExplorerQuery > Use ExplorerQueryViewport when a query owns the content area of an Explorer tab. Its parent must provide a bounded height and min-h-0 : <div className= \"min-h-0 flex-1\" > < ExplorerQueryViewport > {/* the same query composition */} </ ExplorerQueryViewport > </div> ExplorerQueryResults is always present and fills the space left by the toolbar, editor, and footer. A result renderer that can grow supplies its own min-h-0 flex-1 overflow-auto container. The shell owns layout only. Query models, source resolution, execution, results, display selection, and saved configuration stay controlled by the consumer. Compose approval prompts, confirmation notices, and other surface-specific content as children between the standard regions.",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用explorer帮我处理问题",
            "output": "好的，我是explorer。Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是explorer，专注于开发编程领域。Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    }
}