duskmoon-dev-core（黄昏之月开发核心） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：duskmoon-dev-core（黄昏之月开发核心）
来源仓库：https://github.com/gsmlg-dev/code-agent
仓库路径：skills/duskmoon-dev-core
安装命令：
npx skills add https://github.com/gsmlg-dev/code-agent --skill duskmoon-dev-core
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/gsmlg-dev/code-agent --skill duskmoon-dev-core

简介

为 Tailwind CSS v4 打造的 Material Design 3 色彩体系扩展库。

提供完整的组件样式定义与主题切换支持能力。
可通过 CSS import 或 Tailwind plugin 两种方式集成到项目中。
安装方式：通过 npx skills add 命令从 GitHub 仓库安装。
注意：plugin 模式会自动注册颜色令牌到 Tailwind 主题系统。

SKILL.md

@duskmoon-dev/core Skill

Overview

@duskmoon-dev/core is a CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system.

Installation

# Bun
bun add @duskmoon-dev/core tailwindcss@^4.0.0

# npm
npm install @duskmoon-dev/core tailwindcss@^4.0.0

# pnpm
pnpm add @duskmoon-dev/core tailwindcss@^4.0.0

Setup

Option A: CSS Import (Recommended)

@import "tailwindcss";
@import "@duskmoon-dev/core";

Option B: Tailwind Plugin

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";

The @plugin approach registers MD3 color tokens into Tailwind's theme, enabling utility classes like bg-primary, text-on-surface, etc.

Theme Configuration

Apply theme via data-theme attribute on HTML element:

<html data-theme="sunshine">  <!-- Light theme -->
<html data-theme="moonlight"> <!-- Dark theme -->

Available Components

Actions

btn - Buttons with variants: btn-primary, btn-secondary, btn-tertiary, btn-outline, btn-ghost, btn-text, btn-loading
circle-menu - Radial navigation menu: circle-menu-toggler, circle-menu-list, circle-menu-item, circle-menu-label, circle-menu-primary, circle-menu-secondary, circle-menu-tertiary, circle-menu-info, circle-menu-success, circle-menu-warning, circle-menu-error, circle-menu-sm, circle-menu-lg
file-upload - Drag-and-drop file uploader: file-upload-dropzone, file-upload-primary, file-upload-compact, file-upload-button, file-upload-sm, file-upload-lg, file-upload-ghost
toggle-btn - Toggle buttons and groups: toggle-btn-active, toggle-btn-primary, toggle-btn-ghost, toggle-btn-sm, toggle-btn-lg, toggle-group, toggle-segmented, toggle-chip, toggle-filled, toggle-outlined

Data Entry

input - Text inputs: input-primary, input-secondary, input-error
textarea - Multi-line text: textarea-primary, textarea-resize-none, textarea-resize-vertical
select - Dropdown selection: select-primary, select-filled, select-outlined
cascader - Hierarchical selection: cascader, cascader-panel, cascader-menu
checkbox - Checkboxes: checkbox-primary, checkbox-indeterminate, checkbox-group
radio - Radio buttons: radio-primary, radio-group, radio-group-horizontal
switch - Toggle switches: switch-primary, switch-secondary
slider - Range sliders
segment-control - Segmented buttons: segment-control, segment-control-item
autocomplete - Search with suggestions
datepicker - Calendar: date, datetime, date range, datetime range pickers
time-input - Time selection: time-input, time-input-picker
file-upload - Drag-and-drop file uploader
rating - Star/heart ratings
otp-input - OTP verification: otp-input, otp-input-field
pin-input - PIN entry: pin-input, pin-input-masked
multi-select - Multiple selection: multi-select, multi-select-tag
tree-select - Hierarchical dropdown: tree-select, tree-select-node
form-group - Form layout: form-group, form-label, helper-text, fieldset
theme-controller - Theme switching: theme-controller (inline switch), theme-controller-dropdown, theme-controller-item, theme-controller-label

Data Display

card - Content containers: card-body, card-title
badge - Status indicators: badge-primary, badge-dot
avatar - User images: avatar-lg, avatar-status-online
chip - Tags/filters: chip-primary, chip-removable
table - Data tables: table-hover, table-striped
list - Vertical lists: list-item, list-item-interactive
timeline - Chronological events
skeleton - Loading placeholders: skeleton-text, skeleton-circle, skeleton-rect, skeleton-wave, skeleton-avatar, skeleton-button, skeleton-card, skeleton-group
code-block - Styled code containers: code-header, code-title, code-language, code-content, code-block-compact, code-block-borderless

Feedback

alert - Messages: alert-success, alert-error, alert-warning, alert-info
dialog - Modal dialogs: dialog-backdrop, dialog-md
modal - Full overlays
toast - Notifications: toast-success, toast-show
snackbar - Brief messages
progress - Loading: progress-primary, progress-indeterminate
skeleton - Placeholders: skeleton-text, skeleton-circle
tooltip - Hover info: tooltip-top, tooltip-bottom

Navigation

breadcrumbs - Breadcrumb navigation: breadcrumb-item, breadcrumb-item-active, breadcrumb-item-disabled, breadcrumb-link, breadcrumb-separator, breadcrumb-icon, breadcrumb-home, breadcrumb-home-icon, breadcrumb-ellipsis, breadcrumbs-contained, breadcrumbs-sm, breadcrumbs-lg, breadcrumbs-nowrap
navbar - Top navigation: navbar-surface-container-high, navbar-start, navbar-center, navbar-end
tabs - Tab navigation: tab, tab-active, tabs-boxed, tabs-lifted, tab-sm, tab-lg, tab-xs
menu - Dropdown/context menu: menu-item, menu-title, menu-horizontal, menu-vertical
drawer - Side panels: drawer-left, drawer-open
nested-menu - Collapsible sidebar: nested-menu, nested-menu-title, nested-menu-bordered, nested-menu-compact
pagination - Page navigation: pagination-item, pagination-item-active, pagination-item-disabled, pagination-prev, pagination-next, pagination-ellipsis, pagination-compact, pagination-responsive, pagination-info, pagination-input, pagination-item-active-primary, pagination-item-active-secondary, pagination-item-active-tertiary
bottom-nav - Mobile navigation: bottom-nav-item
stepper - Multi-step: stepper-step-active, stepper-step-completed

Layout

divider - Separators: divider-dashed, divider-vertical
appbar - Action bars: appbar-top, appbar-bottom
markdown-body - GitHub-style markdown typography: single class applied to a container, styles all child elements (headings, code, tables, blockquotes, lists)
grid-cols-auto-fill-* - Responsive grid with auto-fill: grid-cols-auto-fill-48, grid-cols-auto-fill-64
grid-cols-auto-fit-* - Responsive grid with auto-fit: grid-cols-auto-fit-48, grid-cols-auto-fit-64

Utilities

sr-only - Screen reader only (visually hidden but accessible)
not-sr-only - Undo sr-only for focus states

Surfaces

accordion - Expandable panels: accordion-item-open
bottomsheet - Mobile panels: bottom-sheet-show
popover - Contextual overlays: popover-top, popover-show
collapse - Collapsible content

Usage Examples

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline">Outlined</button>
<button class="btn btn-tertiary btn-ghost">Ghost</button>
<button class="btn btn-primary btn-loading">Loading...</button>

Cards

<div class="card">
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
  </div>
</div>

Forms

<input type="text" class="input" placeholder="Default" />
<input type="text" class="input input-primary" placeholder="Primary" />
<input type="text" class="input input-error" placeholder="Error" />

Alerts

<div class="alert alert-success">Success message</div>
<div class="alert alert-error">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

Navigation

<nav class="navbar navbar-surface-container-high">
  <div class="navbar-start">
    <a class="navbar-brand">Logo</a>
  </div>
  <div class="navbar-center">
    <a class="navbar-item navbar-item-active">Home</a>
    <a class="navbar-item">About</a>
  </div>
</nav>

Tabs

<div class="tabs">
  <button class="tab tab-active">Tab 1</button>
  <button class="tab">Tab 2</button>
</div>

Dialog

<div class="dialog-backdrop dialog-backdrop-show">
  <div class="dialog dialog-md">
    <div class="dialog-header">
      <h2 class="dialog-title">Title</h2>
    </div>
    <div class="dialog-body">Content</div>
    <div class="dialog-actions">
      <button class="btn btn-text">Cancel</button>
      <button class="btn btn-filled">Confirm</button>
    </div>
  </div>
</div>

Nested Menu

<ul class="nested-menu nested-menu-bordered">
  <li class="nested-menu-title">Getting Started</li>
  <li><a href="/install">Installation</a></li>
  <li><a href="/config" class="active">Configuration</a></li>
  <li>
    <details open>
      <summary>Components</summary>
      <ul>
        <li><a href="/button">Button</a></li>
        <li><a href="/card">Card</a></li>
      </ul>
    </details>
  </li>
</ul>

Theme Controller

<!-- Inline switch mode -->
<div class="theme-controller">
  <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
  <label class="theme-controller-label">Light</label>
  <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
  <label class="theme-controller-label">Dark</label>
</div>

<!-- Dropdown mode -->
<details class="theme-controller-dropdown">
  <summary class="theme-controller-trigger">Theme</summary>
  <div class="theme-controller-menu">
    <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
    <label class="theme-controller-label">Sunshine</label>
    <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
    <label class="theme-controller-label">Moonlight</label>
  </div>
</details>

Toggle Buttons

<!-- Single toggle -->
<button class="toggle-btn toggle-btn-active">Bold</button>

<!-- Toggle group -->
<div class="toggle-group">
  <button class="toggle-btn toggle-btn-active">Left</button>
  <button class="toggle-btn">Center</button>
  <button class="toggle-btn">Right</button>
</div>

Responsive Grid

<!-- Auto-fill: Fixed column size, empty space on right -->
<div class="grid grid-cols-auto-fill-48 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<!-- Auto-fit: Columns stretch to fill container -->
<div class="grid grid-cols-auto-fit-64 gap-4">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
</div>

Color System

Color Utilities

<!-- Backgrounds -->
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-tertiary">Tertiary</div>
<div class="bg-surface-container">Surface</div>

<!-- Text -->
<p class="text-primary">Primary</p>
<p class="text-on-surface">On surface</p>
<p class="text-on-surface-variant">Muted</p>

<!-- Semantic -->
<div class="bg-success text-success-content">Success</div>
<div class="bg-error text-error-content">Error</div>

CSS Variables

.custom {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-outline);
}

Theme Switching

// Switch to dark theme
document.documentElement.dataset.theme = 'moonlight';

// Switch to light theme
document.documentElement.dataset.theme = 'sunshine';

Importing Component Styles

Full Library Import

Import all components and themes at once:

/* In your CSS file */
@import "tailwindcss";
@import "@duskmoon-dev/core";

Individual Component CSS Import

Import only the CSS you need for smaller bundle sizes:

/* CSS imports */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/alert";

JavaScript/TypeScript Import

// Import component styles in JS/TS
import '@duskmoon-dev/core/components/button';
import '@duskmoon-dev/core/components/card';
import '@duskmoon-dev/core/components/input';

Theme-Only Import

/* Import specific themes */
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";

Available Component Exports

All components available for individual import:

Import Path	Component
`@duskmoon-dev/core/components/accordion`	Accordion
`@duskmoon-dev/core/components/alert`	Alert
`@duskmoon-dev/core/components/appbar`	App Bar
`@duskmoon-dev/core/components/autocomplete`	Autocomplete
`@duskmoon-dev/core/components/avatar`	Avatar
`@duskmoon-dev/core/components/badge`	Badge
`@duskmoon-dev/core/components/bottom-navigation`	Bottom Navigation
`@duskmoon-dev/core/components/bottomsheet`	Bottom Sheet
`@duskmoon-dev/core/components/button`	Button
`@duskmoon-dev/core/components/card`	Card
`@duskmoon-dev/core/components/cascader`	Cascader
`@duskmoon-dev/core/components/checkbox`	Checkbox
`@duskmoon-dev/core/components/chip`	Chip
`@duskmoon-dev/core/components/circle-menu`	Circle Menu
`@duskmoon-dev/core/components/code-block`	Code Block
`@duskmoon-dev/core/components/collapse`	Collapse
`@duskmoon-dev/core/components/datepicker`	Date Picker
`@duskmoon-dev/core/components/dialog`	Dialog
`@duskmoon-dev/core/components/divider`	Divider
`@duskmoon-dev/core/components/drawer`	Drawer
`@duskmoon-dev/core/components/file-upload`	File Upload
`@duskmoon-dev/core/components/form`	Form
`@duskmoon-dev/core/components/form-group`	Form Group
`@duskmoon-dev/core/components/input`	Input
`@duskmoon-dev/core/components/list`	List
`@duskmoon-dev/core/components/markdown-body`	Markdown Body
`@duskmoon-dev/core/components/modal`	Modal
`@duskmoon-dev/core/components/multi-select`	Multi-Select
`@duskmoon-dev/core/components/navigation`	Navigation (Navbar/Tabs/Menu)
`@duskmoon-dev/core/components/nested-menu`	Nested Menu
`@duskmoon-dev/core/components/otp-input`	OTP Input
`@duskmoon-dev/core/components/pin-input`	PIN Input
`@duskmoon-dev/core/components/popover`	Popover
`@duskmoon-dev/core/components/progress`	Progress
`@duskmoon-dev/core/components/radio`	Radio
`@duskmoon-dev/core/components/rating`	Rating
`@duskmoon-dev/core/components/segment-control`	Segment Control
`@duskmoon-dev/core/components/select`	Select
`@duskmoon-dev/core/components/skeleton`	Skeleton
`@duskmoon-dev/core/components/slider`	Slider
`@duskmoon-dev/core/components/snackbar`	Snackbar
`@duskmoon-dev/core/components/stepper`	Stepper
`@duskmoon-dev/core/components/switch`	Switch
`@duskmoon-dev/core/components/table`	Table
`@duskmoon-dev/core/components/textarea`	Textarea
`@duskmoon-dev/core/components/theme-controller`	Theme Controller
`@duskmoon-dev/core/components/time-input`	Time Input
`@duskmoon-dev/core/components/timeline`	Timeline
`@duskmoon-dev/core/components/toast`	Toast
`@duskmoon-dev/core/components/toggle`	Toggle
`@duskmoon-dev/core/components/tooltip`	Tooltip
`@duskmoon-dev/core/components/tree-select`	Tree Select

Usage in Web Components / Custom Elements

Each component exports a named css export containing the CSS string:

// Import the css named export
import { css as buttonCSS } from '@duskmoon-dev/core/components/button';
import { css as cardCSS } from '@duskmoon-dev/core/components/card';
import { css as inputCSS } from '@duskmoon-dev/core/components/input';

Example usage in a custom element:

import { css as buttonCSS } from '@duskmoon-dev/core/components/button';

// Strip @layer wrapper for Shadow DOM compatibility
const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // Add styles to shadow DOM
    const style = document.createElement('style');
    style.textContent = coreStyles;
    this.shadowRoot.appendChild(style);
  }
}

Note: The CSS is wrapped in @layer components {} for Tailwind CSS cascade layers. When using in Shadow DOM, strip the @layer wrapper as shown above.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

36.3%

按下载量换算44

Claude

29.47%

按下载量换算36

Cursor

16.63%

按下载量换算20

Gemini CLI

8.88%

按下载量换算11

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

权限需确认

当前来源未能明确判断权限范围，默认进入异常复核队列。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/gsmlg-dev/code-agent

SKILL.md 来源

github.com

/gsmlg-dev/code-agent/tree/main/skills/duskmoon-dev-core

skills-sh

skills.sh

/gsmlg-dev/code-agent/duskmoon-dev-core

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

duru-obsidian-kb（duru Obsidian KB 搜索）

duru-obsidian-kb 用于查找、检索和筛选相关信息，适合在 OpenClaw 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

duskmoon-elements（暮月元素）

duskmoon-elements 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。