菜单
CSS Custom Properties theming system and glassmorphism styling for agentcockpit
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Testing strategy, patterns, and coverage optimization for quality assurance. Use this skill whenever the task involves deciding what to test, how to structure tests, what coverage to aim for, when to use mocks vs real dependencies, or how to write tests that actually catch bugs (not just pass). Also use when the user asks about test pyramids, flaky tests, integration vs unit, TDD, or improving an existing test suite.
Production readiness validation — runs all checks before merging or deploying. Use this skill whenever the task involves verifying that code is ready to ship: type checking, linting, tests passing, coverage thresholds, dead code, security issues, or any pre-merge checklist. Also use when the user asks "is this ready?", wants a pre-PR review, or needs to confirm nothing is broken after a refactor.
Swift architecture reference — SwiftUI, UIKit, Combine, async/await, actors, and production best practices for Swift 5.9/6.0 (2024-2025). Use when making architectural decisions, reviewing Swift code, or selecting libraries. Also use when the user mentions iOS development, macOS apps, or Apple platform development.
UI/Frontend architecture reference - React 19, Next.js 15, Vue 3, Svelte 5, Angular 19, CSS modern features, component libraries, state management, and production best practices for 2024-2025. Use when building frontend UIs, selecting frameworks, reviewing component code, or making frontend architecture decisions.
UX design reference - research methods, design systems, accessibility (WCAG 2.2, EAA), UX laws, AI-driven workflows, tools (Figma, Penpot), and production best practices for 2024-2025. Use when making UX decisions, reviewing designs, implementing accessibility, selecting design tools, or applying UX principles.
C# architecture reference - frameworks, design patterns, ASP.NET Core, Entity Framework, Blazor, Unity, and production best practices for C# 12/13 and .NET 8/9 (2024-2025). Use when making architectural decisions, reviewing C# code, or selecting libraries.
| name | css-theming |
| description | CSS Custom Properties theming system and glassmorphism styling for agentcockpit |
agentcockpit uses pure CSS Custom Properties for theming — no Tailwind, no CSS-in-JS. The visual style is dark-mode glassmorphism with two switchable themes.
cyber-teal — Teal/cyan accent, default dark themebattlefield — Military green/amber accentsrc/styles/themes/
├── cyber-teal.css # --accent: #2dd4bf (teal)
├── battlefield.css # --accent: #84cc16 (green)
src/App.css # Base styles + component styles
src/index.css # CSS reset, font imports, root variables
Theme class applied on root element. Each theme file overrides CSS custom properties:
/* cyber-teal.css */
:root, .theme-cyber-teal {
--accent: #2dd4bf;
--accent-dim: #0d9488;
--bg-primary: #0a0a0f;
--bg-surface: rgba(15, 15, 25, 0.85);
/* ... */
}
--bg-primary /* Main background (#0a0a0f) */
--bg-surface /* Panel backgrounds with transparency */
--bg-input /* Input field backgrounds */
--text-primary /* Main text color */
--text-muted /* Secondary text */
--accent /* Brand color (varies by theme) */
--accent-dim /* Muted accent */
--success /* Green */
--error /* Red */
--warning /* Yellow */
--border /* Border color with transparency */
.panel {
background: var(--bg-surface);
backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: 8px;
}
'Space Grotesk', sans-serif'Plus Jakarta Sans', sans-serif'JetBrainsMono Nerd Font', 'Fira Code', monospace/* Use CSS custom properties, not hardcoded colors */
.my-component {
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
}
/* Hover states */
.my-component:hover {
background: var(--bg-hover);
border-color: var(--accent-dim);
}
flex and overflow: autorgba() for glassmorphism effectclsx for conditional classes, not string concatenation