design-system-management

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

الانتقال إلى التثبيت

المستودع: aRustyDev/agents
آخر نشاط في المصدر: ٢٤ مارس ٢٠٢٦ في ٠٧:٤٦
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٨
التفرعات: ٣

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

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

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

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

خيارات التثبيت

مراجعة ملفات المصدر