跳到正文
cccskills
免费在 GitHub 公开

panel-grid-layout

Build a dark dashboard with panels that adapt to screen width. The skill provides CSS for consistent colors, monospace text, panel headers, scrolling content, status badges, and loading or error states.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

CSS grid layout system for a responsive panel dashboard with dark theme. Uses CSS custom properties, auto-fill grid, and monospace font aesthetic inspired by worldmonitor.

HKUDS/OpenSpace
查看安装方法

适用场景

  • Building dashboards with multiple information panels
  • Adapting panel layouts for phones and large screens
  • Standardizing dark colors and monospace text
  • Styling loading, error, and status indicators

包含的文件（2）

  • SKILL.md6.0 KB
  • .skill_id31 B

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Panel Grid Layout & Dark Theme

CSS Variables (Dark Theme)

Create src/styles/main.css with these CSS custom properties:

:root {
  /* Backgrounds */
  --bg: #0a0a0a;
  --bg-secondary: #111;
  --surface: #141414;
  --surface-hover: #1e1e1e;

  /* Borders */
  --border: #2a2a2a;
  --border-strong: #444;
  --border-subtle: #1a1a1a;

  /* Text */
  --text: #e8e8e8;
  --text-secondary: #ccc;
  --text-dim: #888;
  --text-muted: #666;
  --text-faint: #555;
  --accent: #fff;

  /* Overlays */
  --overlay-subtle: rgba(255, 255, 255, 0.03);
  --overlay-light: rgba(255, 255, 255, 0.05);

  /* Status & Semantic Colors */
  --green: #44ff88;
  --red: #ff4444;
  --yellow: #ffaa00;
  --semantic-critical: #ff4444;
  --semantic-high: #ff8800;
  --semantic-positive: #44ff88;
  --semantic-info: #3b82f6;

  /* Status indicators */
  --status-live: #44ff88;
  --status-cached: #ffaa00;
  --status-unavailable: #ff4444;

  /* Font */
  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Fira Code', monospace;
  --font-body: var(--font-mono);
}

Base Styles

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

Grid Layout

.panels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: minmax(200px, 380px);
  gap: 4px;
  padding: 4px;
  align-content: start;
  align-items: stretch;
  min-height: 0;
}

Panel Base Styles

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 200px;
  min-width: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}

.panel.hidden { display: none; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--overlay-subtle);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-count {
  font-size: 10px;
  background: var(--overlay-light);
  color: var(--text-dim);
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 12px;
}

.panel-content::-webkit-scrollbar { width: 4px; }
.panel-content::-webkit-scrollbar-track { background: transparent; }
.panel-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

Loading & Error States

.panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  min-height: 120px;
}

.panel-loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.panel-loading-text {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.panel-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1.5rem 1rem;
  min-height: 120px;
}

.panel-error-msg {
  color: var(--text-dim);
  font-size: 11px;
}

.panel-retry-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 12px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 3px;
}

.panel-retry-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

Row/Item Patterns (reusable across panels)

/* Generic list row */
.item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}
.item-row:hover { background: var(--surface-hover); }
.item-row:last-child { border-bottom: none; }

/* Positive/Negative change indicators */
.positive { color: var(--green); }
.negative { color: var(--red); }

/* Badge */
.badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.badge-live { background: rgba(68, 255, 136, 0.15); color: var(--green); }
.badge-warn { background: rgba(255, 170, 0, 0.15); color: var(--yellow); }
.badge-error { background: rgba(255, 68, 68, 0.15); color: var(--red); }

/* Tabular numbers for all numeric content */
.num { font-variant-numeric: tabular-nums; }

Responsive Breakpoints

@media (max-width: 768px) {
  .panels-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(180px, auto);
  }
}

@media (min-width: 1600px) {
  .panels-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

App Layout

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-header h1 {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

adaptive-stem-alignment

免费

Prepare audio stems, the separate parts of a track, for mixing by matching their durations with silence, loops, or crossfades. Verify each generated and processed file before moving to the next production step.

中文简介正在准备中。当前显示英语简介。

  • Match audio parts with different durations
  • Extend drums and melodic parts using suitable methods
  • Check audio specifications before mixing
HKUDS/OpenSpace77572026年8月13日 更新

aligned-stem-workflow

免费

Produce audio in separate stems, meaning individual instrument tracks, and verify each output as you go. Align track lengths with silence, loops, or crossfades, then apply effects, mix a master, and package the files.

中文简介正在准备中。当前显示英语简介。

  • Align instrument tracks to a reference audio file
  • Choose how to extend tracks that are too short
  • Verify audio properties after generation and effects
HKUDS/OpenSpace77572026年8月13日 更新

api-proxy-endpoint

免费

Build serverless endpoints that relay external API requests for a dashboard while keeping API keys on the server. Includes Vercel examples for input checks, caching, cross-origin access, and consistent JSON responses.

中文简介正在准备中。当前显示英语简介。

  • Connect a dashboard to external APIs without exposing API keys
  • Create endpoints for stock quotes and news
  • Standardize API responses and error handling
HKUDS/OpenSpace77572026年8月13日 更新

audio-track-production

免费

Produce a master track and separate audio parts through a structured Python workflow. Apply filters and reverb, export WAV files with consistent settings, package them in a ZIP archive, and check that the deliverables meet the requested specifications.

中文简介正在准备中。当前显示英语简介。

  • Export a master track with separate audio parts
  • Apply filters and reverb to audio
  • Check duration and format across deliverables
HKUDS/OpenSpace77572026年8月13日 更新

cascade-fail-recovery

免费

Keep document creation moving when web searches and page retrieval repeatedly fail. The skill preserves the original task, uses the model’s existing knowledge, and clearly identifies information that could not be checked against external sources.

中文简介正在准备中。当前显示英语简介。

  • Continue drafting after repeated web retrieval failures
  • Preserve task requirements during network errors
  • Mark information that could not be externally verified
HKUDS/OpenSpace77572026年8月13日 更新

code-exec-fallback

免费

When Python execution repeatedly fails in execute_code_sandbox, use a file-based alternative: save the script, run it through the shell, and capture results or errors. The guidance covers paths, imports, timeouts, structured output, and optional cleanup.

中文简介正在准备中。当前显示英语简介。

  • Retry Python work through the shell after repeated sandbox failures
  • Run longer tasks with an adjusted timeout
  • Execute Python work that needs multiple files or system utilities
HKUDS/OpenSpace77572026年8月13日 更新

查看 HKUDS 的全部技能

报告此技能的问题