菜单
Create 3-panel dashboard layouts (Left = Context, Main = Work, Right = Intelligence) with React, TypeScript, and Tailwind CSS. Use when implementing dashboard screens, creating new dashboard pages, or following 3-panel architecture.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/amo-tech-ai/rocket-path-ai --skill dashboard-development命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
OpenClaw Gateway setup, configuration, and best practices. Use when installing OpenClaw, configuring channels (WhatsApp/Telegram/Discord), setting up providers (OpenAI/Google/Anthropic), creating skills, managing the gateway daemon, or troubleshooting OpenClaw issues. Triggers on: openclaw, gateway, whatsapp channel, telegram bot, openclaw skill, openclaw config, openclaw install, openclaw cron, openclaw security.
Use when the user asks how to build with OpenAI products or APIs and needs up-to-date official documentation with citations, help choosing the latest model for a use case, or explicit GPT-5.4 upgrade and prompt-upgrade guidance; prioritize OpenAI docs MCP tools, use bundled references only as helper context, and restrict any fallback browsing to official OpenAI domains.
Use this skill for setting up vector similarity search with pgvector for AI/ML embeddings, RAG applications, or semantic search. **Trigger when user asks to:** - Store or search vector embeddings in PostgreSQL - Set up semantic search, similarity search, or nearest neighbor search - Create HNSW or IVFFlat indexes for vectors - Implement RAG (Retrieval Augmented Generation) with PostgreSQL - Optimize pgvector performance, recall, or memory usage - Use binary quantization for large vector datasets **Keywords:** pgvector, embeddings, semantic search, vector similarity, HNSW, IVFFlat, halfvec, cosine distance, nearest neighbor, RAG, LLM, AI search Covers: halfvec storage, HNSW index configuration (m, ef_construction, ef_search), quantization strategies, filtered search, bulk loading, and performance tuning. **This project:** We use OpenAI text-embedding-3-small (1536) and store as vector(1536) in knowledge_chunks. halfvec is an optional future optimization; apply this skill's tuning (ef_search, iterative_scan
基于 SOC 职业分类
正在显示 SKILL.md
| name | Dashboard Development |
| description | Create 3-panel dashboard layouts (Left = Context, Main = Work, Right = Intelligence) with React, TypeScript, and Tailwind CSS. Use when implementing dashboard screens, creating new dashboard pages, or following 3-panel architecture. |
| version | 1.0.0 |
This skill teaches agents how to create dashboard screens following the 3-panel layout architecture used throughout StartupAI.
All dashboards must use 3-panel layout:
Left Panel = Context (240px) | Main Panel = Work (Flexible) | Right Panel = Intelligence (320px)
WHERE AM I? | WHAT AM I DOING? | HELP ME
Core Model: Context + Work + Intelligence
Left Panel (Context):
Main Panel (Work):
Right Panel (Intelligence):
Use DashboardLayout wrapper:
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { AIPanel } from '@/components/dashboard/AIPanel';
export function DashboardPage() {
return (
<DashboardLayout
leftPanel={<Navigation />}
mainPanel={<PrimaryContent />}
aiPanel={<AIPanel />} // or custom Intelligence panel
/>
);
}
Location: src/components/layout/DashboardLayout.tsx
Props:
leftPanel — Left panel content (navigation)mainPanel — Main panel content (primary work)aiPanel — Right panel content (AI Intelligence, optional)Responsive behavior:
Always include:
Page-specific context:
Related dashboards:
Section organization:
Common patterns:
Use shadcn/ui components:
Input, Textarea, SelectButton, Checkbox, SwitchCard, Tabs, DialogSkeleton, Badge, ProgressForm validation:
Common components:
AIPanel — Generic AI insights panelShow:
Action buttons:
All data fetching via React Query:
import { useStartup } from '@/hooks/useStartup';
import { useProjects } from '@/hooks/useProjects';
import { useTasks } from '@/hooks/useTasks';
function DashboardPage() {
const { data: startup } = useStartup();
const { data: projects } = useProjects();
const { data: tasks } = useTasks();
// Use data in components
}
Hook locations: src/hooks/use*.ts
Pattern:
Supabase Database → React Query Hooks → Components → UI
Type safety:
Tables<'startups'>HashRouter for static hosting:
import { HashRouter, Routes, Route } from 'react-router-dom';
<HashRouter>
<Routes>
<Route element={<DashboardLayout />}>
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="/profile" element={<ProfilePage />} />
</Route>
</Routes>
</HashRouter>
Route locations: src/pages/*.tsx
No CDN Tailwind:
https://cdn.tailwindcss.com (forbidden)tailwind.config.js)Custom theme colors:
sage, warm, ai color palettesshadow-premium-sm/md/lg/xlComponent styling:
tailwind.config.ts/dashboard)Purpose: Command center, overview, KPIs
Status: ✅ Complete (100%)
3-Panel: ✅ Full implementation
Components:
/profile)Purpose: Personal identity management
Status: 🔴 Missing (prompt created, needs implementation)
3-Panel: ❌ Not started
Expected structure:
/company-profile)Purpose: Company profile management, source of truth
Status: 🔴 Missing (prompt created, needs implementation)
3-Panel: ❌ Not started
Expected structure:
DashboardLayout)prompts/dashboard/02-three-panel-layout-architecture.mdprompts/dashboard/03-dashboard-screen-design.mdprompts/dashboard/27-user-profile.mdprompts/dashboard/28-company-profile.mdprompts/dashboard/00-dash-progress.md.cursor/rules/react-vite.mdcCreated: 2025-01-16
Based on: 3-panel dashboard architecture
Version: 1.0.0