Cockpit UI Skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add KrasAndy/cockpit-ui-skill --skill cockpit-ui-skill

Manual install

git clone --depth 1 https://github.com/KrasAndy/cockpit-ui-skill.git /tmp/cockpit-ui-skill
mkdir -p ~/.claude/skills
cp -r /tmp/cockpit-ui-skill/. ~/.claude/skills/cockpit-ui-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Cockpit UI Skill

为使用 cockpit-starter 的开发者准备的交互词库与 cheatsheet。

## 触发条件

当用户开发 cockpit 风格的暗色驾驶舱 UI,需要参考:
- 三主题 CSS 变量表(12 字段,实导出)
- 字号 / 间距 / 圆角 / 阴影梯度
- 6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)
- i18n 可选 hook

## 入口

`@krasandy/cockpit-ui` 包 + `cockpit-starter` GitHub repo + `cheatsheet.md` 文档。

## cheatsheet 文件

加载 `cheatsheet.md`(本目录)获取:
- 三主题 token 变量表(12 字段实导出)
- 字号 / 间距 / 圆角 / 阴影梯度
- 6 个组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)
- 反模式(不要引用未实现的交互类名 / keyframe)

## demo 链接

详见 `demo-links.md` — 7 个 PageTemplate 的本地启动步骤(无在线 demo,见 issue 修复说明)。

## i18n hook

`useI18n` hook 接入示例:

```tsx
import { useI18n } from '@krasandy/cockpit-ui';

const { t } = useI18n({ locale: 'zh-CN' });
t('gis.title'); // → 'GIS 总览'
```

## 设计决策摘要

- **EncapsulationFormat** = 组合 skill + npm + starter
- **InteractionVocabulary** = CSS classes + cheatsheet
- **LayoutPrimitives** = Slot props + TS strict
- **VisualStyleSystem** = 三主题并列(没有核心)

## 决策依据

Derived from production React dashboard experience。各项架构决策的取舍详见 README "架构原则" 节,本仓库 commit 历史保留完整决策溯源。

Read the full skill on GitHub

Details

Skill name: cockpit-ui-skill
Repository: KrasAndy/cockpit-ui-skill
License: MIT
Repo updated: 24 August 2026

FAQ

What does the Cockpit UI Skill skill do?

How do I install the Cockpit UI Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add KrasAndy/cockpit-ui-skill --skill cockpit-ui-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Cockpit UI Skill popular?

It lives in KrasAndy/cockpit-ui-skill, which has 6 GitHub stars and 0 forks.

Related skills

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Build Your Own Component

ethankongee/build-your-own-component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

Frontend & Design

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Apple Design

XOVIET-GAME/apple-design-skill

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

Frontend & Design

Interface Polish

Tsavsar/interface-polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

Frontend & Design

Telegram Premium Emojis

abbosahmad/telegram-premium-emojis

Comprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.