da-style 0.1.2 → 0.1.4

package/README.md

@@ -202,6 +202,59 @@ import {
 }
 ```
 
+## AI Agent Skill
+
+da-style 内置了 AI Agent Skill，随 npm 包一起发布。安装 da-style 后，你的 AI 编程助手（如 Claude Code、Cursor 等）可以直接加载 Skill，获得完整的组件 API、设计令牌和使用示例，从而更准确地生成代码。
+
+### Skill 文件位置
+
+安装 da-style 后，Skill 文件位于 `node_modules/da-style/skills/da-style/` 目录下：
+
+```
+node_modules/da-style/skills/da-style/
+├── SKILL.md                    # Skill 主文件（触发条件 + 快速参考）
+└── references/
+    ├── components.md           # 完整组件 API 文档
+    └── tokens.md               # 设计令牌完整列表
+```
+
+### 方式一：通过 skills add 从 npm 安装（推荐）
+
+```bash
+npx skills add da-style
+```
+
+直接从 npm 包安装 Skill（前提是包根目录下存在 `skills/` 目录且包含有效 Skill）。
+
+### 方式二：随包扫描安装
+
+```bash
+npx library-skills
+```
+
+此命令会自动扫描 `node_modules/*/skills/` 下所有合法的 Skill。注意：pnpm 用户可能需要使用方式一或方式三，因为 pnpm 的目录结构与此扫描路径不兼容。
+
+### 方式三：手动复制
+
+将 `node_modules/da-style/skills/da-style` 整个文件夹复制到当前项目的 AI 代理配置目录：
+
+| AI 代理 | 目标目录 |
+|---------|----------|
+| Cursor | `.cursor/skills/` |
+| Claude Code | `.claude/skills/` |
+| 通用标准 | `.agents/skills/` |
+
+安装完成后，在对话框中输入 `@da-style` 或触发词，AI 即可加载该 Skill。
+
+### Skill 能力
+
+Agent 加载 Skill 后可以：
+
+- **准确生成组件代码**：自动使用正确的 props、事件和插槽
+- **遵循设计规范**：使用 cyberpunk 风格的颜色、字体和边框
+- **正确使用 Design Tokens**：引用 `--d-*` CSS 变量或 JS token 导出
+- **避免常见错误**：如错误的 import 路径、缺少 CSS 文件引入等
+
 ## 文档
 
 启动文档开发服务器：

package/package.json

@@ -1,38 +1,39 @@
-{
-  "name": "da-style",
-  "version": "0.1.2",
-  "description": "赛博朋克风格 Vue3 组件库",
-  "type": "module",
-  "private": false,
-  "license": "MIT",
-  "author": "da",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc --noEmit"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "dependencies": {
-    "vue": "^3.5.38"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/test-utils": "^2.4.11",
-    "jsdom": "^29.1.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vite-plugin-dts": "^5.0.2",
-    "vitepress": "^1.6.4",
-    "vitest": "^4.1.9",
-    "vue-tsc": "^3.3.5"
-  }
-}
+{
+  "name": "da-style",
+  "version": "0.1.4",
+  "description": "赛博朋克风格 Vue3 组件库",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "author": "da",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "README.md"
+  ],
+  "dependencies": {
+    "vue": "^3.5.38"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^3.3.5"
+  }
+}

package/skills/da-style/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: da-style
+description: >
+  Cyberpunk-styled Vue 3 component library with neon glow effects, geometric clipped borders,
+  and deep black backgrounds. Use when user needs to install, configure, or use da-style
+  components (DButton, DInput, DTag, DLoading, DIcon) in a Vue 3 project. Triggers on
+  "da-style", "cyberpunk components", "赛博朋克组件", or requests for neon/glow UI elements.
+---
+
+# da-style Component Library
+
+Cyberpunk Vue 3 component library. Deep black backgrounds (#0a0a0f), neon cyan (#00f0ff) / magenta (#ff00c8) accents, geometric clipped borders, multi-layer glow shadows.
+
+## Install
+
+```bash
+npm install da-style
+# or
+pnpm add da-style
+# or
+yarn add da-style
+```
+
+## Setup
+
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import DaStyle from 'da-style'
+import 'da-style/dist/da-style.css'
+
+createApp(App).use(DaStyle).mount('#app')
+```
+
+Or import individual components:
+
+```vue
+<script setup>
+import { DButton, DInput } from 'da-style'
+import 'da-style/dist/da-style.css'
+</script>
+```
+
+## Components
+
+5 components: **DButton**, **DInput**, **DTag**, **DLoading**, **DIcon**.
+
+For full API details, read `references/components.md`.
+
+Quick usage:
+
+```vue
+<DButton status="primary" glow>Click Me</DButton>
+<DInput placeholder="Enter text" clearable glow />
+<DTag status="success" closable>Active</DTag>
+<DLoading type="dots" text="Loading..." />
+<DIcon name="check" spin />
+```
+
+## Design Tokens
+
+CSS variables are available globally (on `:root`). Use them directly:
+
+```css
+.my-box {
+  background: var(--d-bg-secondary);
+  border: 1px solid var(--d-cyan);
+  box-shadow: var(--d-glow-cyan);
+  color: var(--d-text-primary);
+  font-family: var(--d-font-mono);
+}
+```
+
+For full token list, read `references/tokens.md`.
+
+## Key Design Principles
+
+- **No rounded corners** — use `clip-path` for geometric cuts
+- **Neon glow** — multi-layer `box-shadow` on interactive elements
+- **Scanline overlay** — `repeating-linear-gradient` pseudo-elements
+- **Monospace typography** — JetBrains Mono / Rajdhani fonts
+- **Status colors**: primary=cyan, success=green, warning=yellow, danger=red, info=purple

package/skills/da-style/references/components.md

@@ -0,0 +1,113 @@
+# da-style Components API
+
+## DButton
+
+Cyberpunk button with neon glow and geometric clipped borders.
+
+```vue
+<DButton status="primary" size="medium" glow>Button</DButton>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | Color variant |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
+| disabled | `boolean` | `false` | Disabled state |
+| loading | `boolean` | `false` | Loading spinner |
+| glow | `boolean` | `false` | Neon glow effect |
+| ghost | `boolean` | `false` | Transparent background |
+| block | `boolean` | `false` | Full width |
+| round | `boolean` | `false` | Rounded corners |
+| circle | `boolean` | `false` | Circle shape |
+
+| Event | Description |
+|-------|-------------|
+| click | Emitted on click (not when disabled/loading) |
+
+---
+
+## DInput
+
+Input with scanline overlay and focus glow.
+
+```vue
+<DInput v-model="text" placeholder="Enter..." clearable glow />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | `string` | `''` | Bound value (v-model) |
+| type | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'` | `'text'` | Input type |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size |
+| disabled | `boolean` | `false` | Disabled state |
+| readonly | `boolean` | `false` | Read-only state |
+| placeholder | `string` | `''` | Placeholder text |
+| clearable | `boolean` | `false` | Show clear button |
+| glow | `boolean` | `false` | Focus glow effect |
+| prefix | `string` | — | Prefix text |
+| suffix | `string` | — | Suffix text |
+
+| Slot | Description |
+|------|-------------|
+| prefix | Custom prefix content |
+| suffix | Custom suffix content |
+
+---
+
+## DTag
+
+Tag with neon border and optional glow.
+
+```vue
+<DTag status="success" closable glow>Active</DTag>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | Color variant |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Tag size |
+| closable | `boolean` | `false` | Show close button |
+| ghost | `boolean` | `false` | Transparent background |
+| glow | `boolean` | `false` | Neon glow effect |
+| round | `boolean` | `false` | Rounded corners |
+
+| Event | Description |
+|-------|-------------|
+| close | Emitted when close button clicked |
+
+---
+
+## DLoading
+
+Loading indicator with spinner, dots, or pulse animations.
+
+```vue
+<DLoading type="spinner" text="Loading..." />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'spinner' \| 'dots' \| 'pulse'` | `'spinner'` | Animation type |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Loader size |
+| color | `string` | — | Custom color |
+| text | `string` | — | Loading text |
+| fullscreen | `boolean` | `false` | Fullscreen overlay |
+
+---
+
+## DIcon
+
+SVG icon with neon glow.
+
+```vue
+<DIcon name="check" size="large" color="#00f0ff" spin />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `IconName` | — | Icon name (required) |
+| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Icon size |
+| color | `string` | — | Stroke color |
+| spin | `boolean` | `false` | Rotation animation |
+
+Available icons: `close`, `check`, `chevron-left`, `chevron-right`, `chevron-down`, `chevron-up`, `loading`, `search`, `info`, `warning`, `error`, `success`, `eye`, `eye-off`

package/skills/da-style/references/tokens.md

@@ -0,0 +1,78 @@
+# da-style Design Tokens
+
+All tokens are CSS custom properties defined on `:root`. Use directly in CSS.
+
+## Colors
+
+| Variable | Value | Usage |
+|----------|-------|-------|
+| `--d-bg-primary` | `#0a0a0f` | Main background |
+| `--d-bg-secondary` | `#12121a` | Card/surface background |
+| `--d-bg-elevated` | `#1a1a2e` | Elevated surface |
+| `--d-bg-overlay` | `rgba(0,0,0,0.85)` | Modal overlay |
+| `--d-text-primary` | `#e0e0ff` | Main text |
+| `--d-text-secondary` | `#8888aa` | Muted text |
+| `--d-text-disabled` | `#444466` | Disabled text |
+| `--d-text-inverse` | `#0a0a0f` | Text on light bg |
+
+## Neon Accents
+
+| Variable | Value |
+|----------|-------|
+| `--d-cyan` | `#00f0ff` |
+| `--d-magenta` | `#ff00c8` |
+| `--d-purple` | `#7000ff` |
+| `--d-blue` | `#0066ff` |
+| `--d-yellow` | `#ffea00` |
+| `--d-green` | `#00ff41` |
+| `--d-orange` | `#ff6600` |
+| `--d-red` | `#ff003c` |
+
+RGB variants available: `--d-cyan-rgb`, `--d-magenta-rgb`, etc. for use with `rgba()`.
+
+## Semantic Colors
+
+| Variable | Maps to |
+|----------|---------|
+| `--d-color-primary` | `var(--d-cyan)` |
+| `--d-color-success` | `var(--d-green)` |
+| `--d-color-warning` | `var(--d-yellow)` |
+| `--d-color-danger` | `var(--d-red)` |
+| `--d-color-info` | `var(--d-purple)` |
+
+## Spacing
+
+`--d-spacing-1` (4px) through `--d-spacing-12` (48px), plus `--d-container-sm/md/lg/xl`.
+
+## Typography
+
+| Variable | Default |
+|----------|---------|
+| `--d-font-mono` | JetBrains Mono, Fira Code, monospace |
+| `--d-font-sans` | Rajdhani, Exo 2, system-ui |
+| `--d-font-heading` | Rajdhani, Exo 2, system-ui |
+| `--d-font-body` | JetBrains Mono, Fira Code, monospace |
+
+Sizes: `--d-text-xs` (11px) through `--d-text-3xl` (32px).
+
+## Shadows & Glow
+
+| Variable | Description |
+|----------|-------------|
+| `--d-glow-cyan` | Multi-layer cyan neon glow |
+| `--d-glow-magenta` | Multi-layer magenta neon glow |
+| `--d-glow-purple` | Multi-layer purple neon glow |
+| `--d-glow-green` | Multi-layer green neon glow |
+| `--d-glow-yellow` | Multi-layer yellow neon glow |
+| `--d-glow-red` | Multi-layer red neon glow |
+| `--d-shadow-sm/md/lg` | Standard elevation shadows |
+
+## Clip Paths
+
+| Variable | Description |
+|----------|-------------|
+| `--d-clip-cut-sm` | 8px geometric cut |
+| `--d-clip-cut-md` | 12px geometric cut |
+| `--d-clip-cut-lg` | 16px geometric cut |
+
+Usage: `clip-path: var(--d-clip-cut-sm);`