design-system-management

Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files

Zur Installation springen

Repository: aRustyDev/agents
Letzte Quellaktivität: 24. März 2026 um 07:46
Erkannte Sprache von SKILL.md: Englisch
Sterne: 8
Forks: 3

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/aRustyDev/agents --skill design-system-management

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

Operation	Command	Description
List	`/sync-design-system --list`	Show all tokens
Add	Token CRUD workflow	Add new token
Update	Token CRUD workflow	Modify token value
Delete	Token CRUD workflow	Remove token
Export	`/sync-design-system --target <path>`	Export to code

tokens/
├── design-tokens.json      # W3C format (source of truth)
├── generated/
│   ├── Theme.swift         # iOS/macOS output
│   ├── theme.css           # Web output
│   └── tailwind.config.js  # Tailwind output
└── .tokens-history/        # Version history

{
  "operation": "create",
  "path": "color.semantic.error",
  "value": {
    "$value": "#DC2626",
    "$type": "color",
    "$description": "Error state color for destructive actions"
  }
}

{
  "operation": "read",
  "path": "color.semantic.error"
}
// Returns full token definition with metadata

{
  "operation": "update",
  "path": "color.semantic.error",
  "value": {
    "$value": "#EF4444"
  },
  "reason": "Improved contrast ratio"
}

{
  "operation": "delete",
  "path": "color.deprecated.oldRed",
  "reason": "Replaced by color.semantic.error"
}

{
  "version": "1.2.0",
  "timestamp": "2026-02-22T10:30:00Z",
  "changes": [
    {
      "type": "update",
      "path": "color.semantic.error",
      "previous": "#DC2626",
      "current": "#EF4444",
      "reason": "Improved contrast ratio"
    }
  ],
  "author": "design-system-sync"
}

// Generated from design-tokens.json v1.2.0
extension Color {
    enum Semantic {
        static let error = Color(hex: "#EF4444")
    }
}

/* Generated from design-tokens.json v1.2.0 */
:root {
    --color-semantic-error: #EF4444;
}

// Generated from design-tokens.json v1.2.0
module.exports = {
    theme: {
        extend: {
            colors: {
                semantic: {
                    error: '#EF4444'
                }
            }
        }
    }
}

## Token Conflict: color.primary

| Source | Value |
|--------|-------|
| Design | #2196F3 |
| Code | #1E88E5 |

Resolution Options:
1. Use design value (update code)
2. Use code value (flag for design update)
3. Keep both (create variant)
4. Manual review

## Naming Conflict

Design: "Primary Blue"
Code: "color.brand.primary"

Suggested mapping:
- Create alias: "Primary Blue" → "color.brand.primary"
- Or rename in design to match code convention

{
  "color": {
    "primitive": {
      "blue": { "50": {}, "100": {}, "500": {}, "900": {} }
    },
    "semantic": {
      "background": {},
      "surface": {},
      "text": {},
      "error": {},
      "success": {}
    },
    "component": {
      "button": {
        "primary": {},
        "secondary": {}
      }
    }
  },
  "typography": {
    "fontFamily": {},
    "fontSize": {},
    "fontWeight": {},
    "lineHeight": {}
  },
  "spacing": {},
  "borderRadius": {},
  "shadow": {},
  "duration": {}
}

{
  "exports": {
    "swift": {
      "output": "./Sources/Theme/",
      "template": "swift-extensions",
      "colorFormat": "hex-initializer"
    },
    "css": {
      "output": "./styles/tokens.css",
      "prefix": "--design-",
      "colorFormat": "hex"
    },
    "tailwind": {
      "output": "./tailwind.config.js",
      "mode": "extend",
      "includeCategories": ["color", "spacing", "borderRadius"]
    }
  }
}

## Design System Sync Report

**Version**: 1.2.0 → 1.3.0
**Timestamp**: 2026-02-22T10:30:00Z

### Changes Applied

| Category | Added | Updated | Removed |
|----------|-------|---------|---------|
| Colors | 3 | 2 | 0 |
| Typography | 0 | 1 | 0 |
| Spacing | 2 | 0 | 0 |

### Details

#### Added

- `color.semantic.warning`: #F59E0B
- `color.semantic.info`: #3B82F6
- `color.semantic.neutral`: #6B7280

#### Updated

- `color.semantic.error`: #DC2626 → #EF4444 (contrast improvement)
- `typography.fontSize.xl`: 1.25rem → 1.375rem

### Files Updated

- tokens/design-tokens.json
- Sources/Theme/Colors.swift
- styles/tokens.css

name	design-system-management
description	Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files
created	2026-02-22T00:00:00.000Z
updated	2026-02-22T00:00:00.000Z
tags	["design-system","tokens","versioning","sync","multi-format"]
extends	design-theme-factory-dev

name	design-system-management
description	Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files
created	2026-02-22T00:00:00.000Z
updated	2026-02-22T00:00:00.000Z
tags	["design-system","tokens","versioning","sync","multi-format"]
extends	design-theme-factory-dev

Format	File Extension	Target
W3C JSON	`.tokens.json`	Platform-agnostic
Swift	`.swift`	iOS/macOS
CSS	`.css`	Web (custom properties)
Tailwind	`tailwind.config.js`	Tailwind CSS
Flutter	`.dart`	Flutter/Dart

Level	Pattern	Example
Category	`<category>`	`color`
Subcategory	`<category>.<subcategory>`	`color.semantic`
Token	`<category>.<subcategory>.<name>`	`color.semantic.error`
Variant	`<token>.<variant>`	`color.semantic.error.light`

design-system-management

Installationsoptionen

Quelldateien prüfen