메뉴
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