[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7ES6252X2S5TZGS39BB7G43":3,"skill-same:01M7ES6252X2S5TZGS39BB7G43":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":13,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":29,"install":30,"resources":43},"01M7ES6252X2S5TZGS39BB7G43","design-tokens",null,"Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers\u002Fcontexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.","mhyahya854\u002FAI-Second-Brain_Universal-Rules","mhyahya854","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F194078115?v=4","01M7EGSP2M9T858SDHJMXQ257Y","01M7EGSP3N6HN6879SVDPMD4DZ",0,"MIT","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: design-tokens\ndescription: Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers\u002Fcontexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.\n---\n\n# Design Tokens Expert\n\nExpert guidance for working with design tokens following the Design Tokens Community Group (DTCG) specification.\n\n## Quick Reference\n\n| Topic | Reference |\n|-------|-----------|\n| Token types, structure, validation | [reference\u002Fformat.md](reference\u002Fformat.md) |\n| Color spaces, components, alpha, **common mistakes** | [reference\u002Fcolor.md](reference\u002Fcolor.md) |\n| Sets, modifiers, resolution order | [reference\u002Fresolver.md](reference\u002Fresolver.md) |\n| jq, JSONata, **Figma export**, **Terrazzo config** | [reference\u002Ftools.md](reference\u002Ftools.md) |\n| Common patterns and examples | [examples\u002Fuse-cases.md](examples\u002Fuse-cases.md) |\n\n**Getting Started:** See [Getting Started Guides](#getting-started-guides) for step-by-step workflows.\n\n## Specification Sources\n\nBased on the latest DTCG Draft Community Group Reports:\n- [Format Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fformat\u002F)\n- [Color Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fcolor\u002F)\n- [Resolver Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fresolver\u002F)\n\n## Core Concepts\n\n### Token Structure\n\nA token is a JSON object with `$value`. Special properties use `$` prefix:\n\n```json\n{\n  \"brand-blue\": {\n    \"$type\": \"color\",\n    \"$value\": {\n      \"colorSpace\": \"srgb\",\n      \"components\": [0.15, 0.39, 0.92],\n      \"hex\": \"#2563eb\"\n    },\n    \"$description\": \"Primary brand color\"\n  }\n}\n```\n\n### Token Types\n\n**Atomic:** color, dimension, fontFamily, fontWeight, duration, cubicBezier, number\n\n**Composite:** strokeStyle, border, shadow, gradient, typography, transition\n\nSee [reference\u002Fformat.md](reference\u002Fformat.md) for complete type definitions.\n\n### Color Format\n\nColors use structured objects (not hex strings):\n\n```json\n{\n  \"$type\": \"color\",\n  \"$value\": {\n    \"colorSpace\": \"srgb\",\n    \"components\": [1, 0, 0.5],\n    \"alpha\": 0.8,\n    \"hex\": \"#ff0080\"\n  }\n}\n```\n\nSupported spaces: srgb, display-p3, oklch, oklab, hsl, hwb, lab, lch, and more. See [reference\u002Fcolor.md](reference\u002Fcolor.md).\n\n### References (Aliasing)\n\n**Two syntaxes supported:**\n\n1. **Curly braces** - Token-level references: `\"{path.to.token}\"`\n2. **JSON Pointer (`$ref`)** - Property-level access: `{\"$ref\": \"#\u002Fpath\u002Fto\u002F$value\u002Fproperty\"}`\n\nToken reference example:\n```json\n{\n  \"color\": {\n    \"primary\": {\"$type\": \"color\", \"$value\": {\"colorSpace\": \"srgb\", \"components\": [0, 0.4, 0.8]}}\n  },\n  \"button\": {\n    \"background\": {\"$type\": \"color\", \"$value\": \"{color.primary}\"}\n  }\n}\n```\n\nJSON Pointer example (accessing array elements):\n```json\n{\n  \"blue\": {\n    \"$type\": \"color\",\n    \"$value\": {\"colorSpace\": \"okhsl\", \"components\": [0.733, 0.8, 0.5]}\n  },\n  \"blue-hue\": {\n    \"$type\": \"number\",\n    \"$ref\": \"#\u002Fblue\u002F$value\u002Fcomponents\u002F0\"\n  }\n}\n```\n\nSee [reference\u002Fformat.md](reference\u002Fformat.md) for complete reference syntax details.\n\n### Groups and Type Inheritance\n\nGroups organize tokens. `$type` on a group applies to all children:\n\n```json\n{\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"sm\": {\"$value\": {\"value\": 8, \"unit\": \"px\"}},\n    \"md\": {\"$value\": {\"value\": 16, \"unit\": \"px\"}},\n    \"lg\": {\"$value\": {\"value\": 24, \"unit\": \"px\"}}\n  }\n}\n```\n\n### Resolvers for Theming\n\nResolvers manage tokens across contexts (themes, platforms, densities):\n\n```json\n{\n  \"name\": \"my-system\",\n  \"version\": \"2025.10\",\n  \"sets\": {\n    \"core\": {\"sources\": [{\"$ref\": \"tokens\u002Fbase.json\"}]}\n  },\n  \"modifiers\": {\n    \"theme\": {\n      \"contexts\": {\n        \"light\": [{\"$ref\": \"themes\u002Flight.json\"}],\n        \"dark\": [{\"$ref\": \"themes\u002Fdark.json\"}]\n      },\n      \"default\": \"light\"\n    }\n  },\n  \"resolutionOrder\": [\n    {\"$ref\": \"#\u002Fsets\u002Fcore\"},\n    {\"$ref\": \"#\u002Fmodifiers\u002Ftheme\"}\n  ]\n}\n```\n\nSee [reference\u002Fresolver.md](reference\u002Fresolver.md) for complete documentation.\n\n## Getting Started Guides\n\n### Quick Start: Convert CSS Variables to DTCG\n\n**Starting point:** Existing CSS custom properties\n```css\n:root {\n  --color-primary: #2563eb;\n  --color-background: #ffffff;\n  --spacing-sm: 8px;\n  --spacing-md: 16px;\n}\n```\n\n**Step 1:** Create primitives.tokens.json\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"$type\": \"color\",\n      \"blue-500\": {\n        \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.145, 0.388, 0.922], \"hex\": \"#2563eb\" }\n      },\n      \"white\": {\n        \"$value\": { \"colorSpace\": \"srgb\", \"components\": [1, 1, 1], \"hex\": \"#ffffff\" }\n      }\n    }\n  },\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"scale\": {\n      \"sm\": { \"$value\": { \"value\": 8, \"unit\": \"px\" } },\n      \"md\": { \"$value\": { \"value\": 16, \"unit\": \"px\" } }\n    }\n  }\n}\n```\n\n**Step 2:** Create semantic.tokens.json with references\n```json\n{\n  \"color\": {\n    \"interactive\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": \"{color.primitive.blue-500}\" }\n    },\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": \"{color.primitive.white}\" }\n    }\n  },\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"component\": {\n      \"padding\": { \"$value\": \"{spacing.scale.sm}\" },\n      \"gap\": { \"$value\": \"{spacing.scale.md}\" }\n    }\n  }\n}\n```\n\n**Conversion tips:**\n- RGB hex to sRGB: divide each channel by 255 (e.g., `37\u002F255 = 0.145`)\n- Keep hex as fallback in the `hex` property\n- Create semantic layer for purpose-driven naming\n\n---\n\n### Quick Start: Set Up Terrazzo with Dark Mode\n\n**Step 1:** Install dependencies\n```bash\nnpm install -D @terrazzo\u002Fcli @terrazzo\u002Fplugin-css\n```\n\n**Step 2:** Create token files with mode extensions\n\ntokens\u002Fthemes\u002Flight.tokens.json:\n```json\n{\n  \"$extensions\": { \"mode\": \"light\" },\n  \"color\": {\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [1, 1, 1], \"hex\": \"#ffffff\" } }\n    },\n    \"text\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.07, 0.07, 0.07], \"hex\": \"#121212\" } }\n    }\n  }\n}\n```\n\ntokens\u002Fthemes\u002Fdark.tokens.json:\n```json\n{\n  \"$extensions\": { \"mode\": \"dark\" },\n  \"color\": {\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.07, 0.07, 0.07], \"hex\": \"#121212\" } }\n    },\n    \"text\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.95, 0.95, 0.95], \"hex\": \"#f2f2f2\" } }\n    }\n  }\n}\n```\n\n**Step 3:** Create terrazzo.config.mjs\n```javascript\nimport { defineConfig } from \"@terrazzo\u002Fcli\";\nimport pluginCSS from \"@terrazzo\u002Fplugin-css\";\n\nexport default defineConfig({\n  tokens: [\n    \".\u002Ftokens\u002Fprimitives.tokens.json\",\n    \".\u002Ftokens\u002Fthemes\u002Flight.tokens.json\",\n    \".\u002Ftokens\u002Fthemes\u002Fdark.tokens.json\"\n  ],\n  outDir: \".\u002Fdist\u002F\",\n  plugins: [\n    pluginCSS({\n      filename: \"tokens.css\",\n      modeSelectors: [\n        { mode: \"light\", selectors: [\":root\", \"[data-theme='light']\"] },\n        { mode: \"dark\", selectors: [\"[data-theme='dark']\", \"@media (prefers-color-scheme: dark)\"] }\n      ]\n    })\n  ]\n});\n```\n\n**Step 4:** Build and use\n```bash\nnpx terrazzo build\n```\n\nIn your HTML:\n```html\n\u003Chtml data-theme=\"light\">\u003C!-- or \"dark\" -->\n```\n\n---\n\n### Quick Start: Import Figma Variables Export\n\n**Step 1:** Export from Figma\n- Open Variables panel in Figma\n- Use a DTCG export plugin or Figma's built-in export\n- Save as `figma-export.json`\n\n**Step 2:** Validate the export\n```bash\n# Check JSON is valid\njq '.' figma-export.json > \u002Fdev\u002Fnull && echo \"Valid JSON\"\n\n# List all token paths\njq -r 'paths(has(\"$value\")) | join(\".\")' figma-export.json\n```\n\n**Step 3:** Add mode extensions if needed\n\nIf Figma exported separate mode files, add `$extensions.mode`:\n```bash\n# Add mode to light theme file\njq '. + {\"$extensions\": {\"mode\": \"light\"}}' light.json > light.tokens.json\n```\n\n**Step 4:** Add hex fallbacks (if missing)\n\nFigma exports sRGB components but may omit hex:\n```bash\n# Quick check if hex values exist\njq '.. | objects | select(.colorSpace == \"srgb\") | select(.hex == null)' figma-export.json\n```\n\n**Step 5:** Configure Terrazzo\n\nCreate `terrazzo.config.mjs` pointing to your imported files and build.\n\n**Common Figma export issues:**\n- Flat structure (no primitives\u002Fsemantic separation) - reorganize manually\n- Space in token names - use jq to convert to kebab-case\n- Missing `$type` on groups - add type inheritance\n\n---\n\n## Workflows\n\n### Creating a Token File\n\n```\nToken File Creation:\n- [ ] Step 1: Define file structure (primitives → semantic → components)\n- [ ] Step 2: Create primitive tokens with explicit types\n- [ ] Step 3: Create semantic tokens referencing primitives\n- [ ] Step 4: Validate structure and references\n- [ ] Step 5: Test with target tools (Terrazzo, etc.)\n```\n\n**Step 1: Define structure**\n\nOrganize into layers:\n```\ntokens\u002F\n├── primitives.tokens.json   # Raw values (colors, spacing scales)\n├── semantic.tokens.json     # Purpose-driven aliases\n└── components.tokens.json   # Component-specific tokens\n```\n\n**Step 2: Create primitives**\n\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"$type\": \"color\",\n      \"blue\": {\n        \"500\": {\"$value\": {\"colorSpace\": \"srgb\", \"components\": [0.15, 0.39, 0.92], \"hex\": \"#2563eb\"}}\n      }\n    }\n  }\n}\n```\n\n**Step 3: Create semantic tokens**\n\n```json\n{\n  \"color\": {\n    \"interactive\": {\n      \"$type\": \"color\",\n      \"default\": {\"$value\": \"{color.primitive.blue.500}\"}\n    }\n  }\n}\n```\n\n**Step 4: Validate**\n\nCheck for:\n- All tokens have resolvable `$type`\n- No circular references\n- Valid value formats for each type\n- Names don't contain `{`, `}`, `.` or start with `$`\n\n**Step 5: Test with tools**\n\n```bash\nterrazzo validate tokens.json\nterrazzo build --input tokens.json --output test.css --format css\n```\n\n---\n\n### Setting Up a Theme Resolver\n\n```\nResolver Setup:\n- [ ] Step 1: Organize token files by concern\n- [ ] Step 2: Create resolver.json with version and sets\n- [ ] Step 3: Define theme modifier with contexts\n- [ ] Step 4: Configure resolution order\n- [ ] Step 5: Test with different inputs\n```\n\n**Step 1: Organize files**\n\n```\ntokens\u002F\n├── resolver.json\n├── base.tokens.json\n└── themes\u002F\n    ├── light.tokens.json\n    └── dark.tokens.json\n```\n\n**Step 2: Create resolver**\n\n```json\n{\n  \"name\": \"my-design-system\",\n  \"version\": \"2025.10\",\n  \"sets\": {\n    \"foundation\": {\n      \"sources\": [{\"$ref\": \"base.tokens.json\"}]\n    }\n  }\n}\n```\n\n**Step 3: Define theme modifier**\n\n```json\n{\n  \"modifiers\": {\n    \"theme\": {\n      \"contexts\": {\n        \"light\": [{\"$ref\": \"themes\u002Flight.tokens.json\"}],\n        \"dark\": [{\"$ref\": \"themes\u002Fdark.tokens.json\"}]\n      },\n      \"default\": \"light\"\n    }\n  }\n}\n```\n\n**Step 4: Set resolution order**\n\n```json\n{\n  \"resolutionOrder\": [\n    {\"$ref\": \"#\u002Fsets\u002Ffoundation\"},\n    {\"$ref\": \"#\u002Fmodifiers\u002Ftheme\"}\n  ]\n}\n```\n\n**Step 5: Test**\n\n```bash\nterrazzo build --resolver resolver.json --output light.css\nterrazzo build --resolver resolver.json --input theme=dark --output dark.css\n```\n\n---\n\n### Validating Token Files\n\n```\nValidation Checklist:\n- [ ] Step 1: Check JSON syntax\n- [ ] Step 2: Verify type declarations\n- [ ] Step 3: Validate value formats\n- [ ] Step 4: Check reference resolution\n- [ ] Step 5: Verify naming constraints\n```\n\n**Step 1: JSON syntax**\n\n```bash\njq '.' tokens.json > \u002Fdev\u002Fnull && echo \"Valid JSON\"\n```\n\n**Step 2: Type declarations**\n\nEvery token needs a resolvable `$type` (explicit or inherited from parent group).\n\n**Step 3: Value formats**\n\n| Type | Valid Format |\n|------|--------------|\n| color | `{colorSpace, components, [alpha], [hex]}` |\n| dimension | `{value: number, unit: \"px\"|\"rem\"}` |\n| duration | `{value: number, unit: \"ms\"|\"s\"}` |\n| cubicBezier | `[P1x, P1y, P2x, P2y]` where P1x, P2x ∈ [0,1] |\n| fontWeight | 1-1000 or string (\"normal\", \"bold\", etc.) |\n\n**Step 4: References**\n\n- All `{path.to.token}` references must resolve\n- No circular references (A → B → A)\n- No self-references\n\n**Step 5: Naming**\n\n- Names cannot start with `$`\n- Names cannot contain `{`, `}`, `.`\n\n---\n\n### Migrating from Other Formats\n\n```\nMigration Workflow:\n- [ ] Step 1: Export existing tokens to JSON\n- [ ] Step 2: Map types to DTCG equivalents\n- [ ] Step 3: Convert color values to structured format\n- [ ] Step 4: Update reference syntax\n- [ ] Step 5: Validate and test\n```\n\n**Common conversions:**\n\n| From | To DTCG |\n|------|---------|\n| `\"#ff0000\"` | `{colorSpace: \"srgb\", components: [1,0,0], hex: \"#ff0000\"}` |\n| `\"16px\"` | `{value: 16, unit: \"px\"}` |\n| `\"$colors.primary\"` or `{colors.primary}` | `\"{colors.primary}\"` |\n\n**Terrazzo conversion:**\n\n```bash\nterrazzo convert --from style-dictionary --to dtcg input.json output.tokens.json\n```\n\n## Best Practices\n\n### Token Layers\n\n1. **Primitives** - Raw values without semantic meaning\n2. **Semantic** - Purpose-driven tokens referencing primitives\n3. **Component** - Specific component tokens referencing semantic\n\n### Naming Conventions\n\n- Use lowercase with hyphens: `color.brand.primary`\n- Structure: `[category].[subcategory].[variant].[state]`\n- Semantic over appearance: `color.interactive.default` not `color.blue-500`\n\n### Theming Strategy\n\nUse resolvers for themes (recommended over group extension):\n- Cleaner separation of concerns\n- Token paths stay consistent across themes\n- Easy to compose themes (e.g., dark + high-contrast)\n- Standardized input handling for build tools\n\n### Accessibility\n\n**Color contrast:** Document contrast ratios in `$extensions`:\n\n```json\n{\n  \"$extensions\": {\n    \"com.example.a11y\": {\"contrastRatio\": 7.5, \"wcagLevel\": \"AA\"}\n  }\n}\n```\n\n**Reduced motion:** Use resolver modifier:\n\n```json\n{\n  \"modifiers\": {\n    \"motion\": {\n      \"contexts\": {\n        \"full\": [{\"$ref\": \"motion\u002Ffull.json\"}],\n        \"reduced\": [{\"$ref\": \"motion\u002Freduced.json\"}]\n      },\n      \"default\": \"full\"\n    }\n  }\n}\n```\n\n### File Conventions\n\n- Token files: `.tokens` or `.tokens.json`\n- Resolver files: `.resolver.json`\n- Encoding: UTF-8\n\n## Common Tasks\n\n| Task | Approach |\n|------|----------|\n| Format validation | Check against DTCG spec, use Terrazzo validate |\n| Structure optimization | Organize into primitive → semantic → component layers |\n| Alias resolution | Trace references, check for circular dependencies |\n| Resolver configuration | Define sets, modifiers, resolution order |\n| Theme implementation | Use resolver modifiers with context files |\n| Multi-context builds | Generate outputs per theme\u002Fplatform\u002Fdensity |\n| Tool integration | Use jq for queries, Terrazzo for transforms |\n| Migration | Convert colors to structured format, update references |\n\n## Your Role\n\nWhen helping with design tokens:\n\n1. **Verify before claiming** - Check reference files before stating what DTCG does\u002Fdoesn't support. Never assume spec limitations.\n2. **Use latest DTCG spec** - Structured color format, proper types\n3. **Validate structure** - Check `$value`, `$type`, references\n4. **Suggest best practices** - Naming, organization, layering\n5. **Help with tools** - jq queries, Terrazzo commands, JSONata transforms\n6. **Consider platforms** - Web, iOS, Android via `$extensions`\n7. **Think about scale** - Design for maintainability\n8. **Prioritize accessibility** - Contrast, motion, focus indicators\n9. **Connect design and code** - Bridge tools and implementation\n\n**Important:** When asked about spec capabilities (what syntax is valid, what features exist), always read the relevant reference file first. Do not rely on assumptions or prior knowledge about the spec.\n\nAlways provide clear examples and explain reasoning behind recommendations.\n","# Design Tokens Expert\n\nExpert guidance for working with design tokens following the Design Tokens Community Group (DTCG) specification.\n\n## Quick Reference\n\n| Topic | Reference |\n|-------|-----------|\n| Token types, structure, validation | [reference\u002Fformat.md](reference\u002Fformat.md) |\n| Color spaces, components, alpha, **common mistakes** | [reference\u002Fcolor.md](reference\u002Fcolor.md) |\n| Sets, modifiers, resolution order | [reference\u002Fresolver.md](reference\u002Fresolver.md) |\n| jq, JSONata, **Figma export**, **Terrazzo config** | [reference\u002Ftools.md](reference\u002Ftools.md) |\n| Common patterns and examples | [examples\u002Fuse-cases.md](examples\u002Fuse-cases.md) |\n\n**Getting Started:** See [Getting Started Guides](#getting-started-guides) for step-by-step workflows.\n\n## Specification Sources\n\nBased on the latest DTCG Draft Community Group Reports:\n- [Format Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fformat\u002F)\n- [Color Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fcolor\u002F)\n- [Resolver Module](https:\u002F\u002Fwww.designtokens.org\u002Ftr\u002Fdrafts\u002Fresolver\u002F)\n\n## Core Concepts\n\n### Token Structure\n\nA token is a JSON object with `$value`. Special properties use `$` prefix:\n\n```json\n{\n  \"brand-blue\": {\n    \"$type\": \"color\",\n    \"$value\": {\n      \"colorSpace\": \"srgb\",\n      \"components\": [0.15, 0.39, 0.92],\n      \"hex\": \"#2563eb\"\n    },\n    \"$description\": \"Primary brand color\"\n  }\n}\n```\n\n### Token Types\n\n**Atomic:** color, dimension, fontFamily, fontWeight, duration, cubicBezier, number\n\n**Composite:** strokeStyle, border, shadow, gradient, typography, transition\n\nSee [reference\u002Fformat.md](reference\u002Fformat.md) for complete type definitions.\n\n### Color Format\n\nColors use structured objects (not hex strings):\n\n```json\n{\n  \"$type\": \"color\",\n  \"$value\": {\n    \"colorSpace\": \"srgb\",\n    \"components\": [1, 0, 0.5],\n    \"alpha\": 0.8,\n    \"hex\": \"#ff0080\"\n  }\n}\n```\n\nSupported spaces: srgb, display-p3, oklch, oklab, hsl, hwb, lab, lch, and more. See [reference\u002Fcolor.md](reference\u002Fcolor.md).\n\n### References (Aliasing)\n\n**Two syntaxes supported:**\n\n1. **Curly braces** - Token-level references: `\"{path.to.token}\"`\n2. **JSON Pointer (`$ref`)** - Property-level access: `{\"$ref\": \"#\u002Fpath\u002Fto\u002F$value\u002Fproperty\"}`\n\nToken reference example:\n```json\n{\n  \"color\": {\n    \"primary\": {\"$type\": \"color\", \"$value\": {\"colorSpace\": \"srgb\", \"components\": [0, 0.4, 0.8]}}\n  },\n  \"button\": {\n    \"background\": {\"$type\": \"color\", \"$value\": \"{color.primary}\"}\n  }\n}\n```\n\nJSON Pointer example (accessing array elements):\n```json\n{\n  \"blue\": {\n    \"$type\": \"color\",\n    \"$value\": {\"colorSpace\": \"okhsl\", \"components\": [0.733, 0.8, 0.5]}\n  },\n  \"blue-hue\": {\n    \"$type\": \"number\",\n    \"$ref\": \"#\u002Fblue\u002F$value\u002Fcomponents\u002F0\"\n  }\n}\n```\n\nSee [reference\u002Fformat.md](reference\u002Fformat.md) for complete reference syntax details.\n\n### Groups and Type Inheritance\n\nGroups organize tokens. `$type` on a group applies to all children:\n\n```json\n{\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"sm\": {\"$value\": {\"value\": 8, \"unit\": \"px\"}},\n    \"md\": {\"$value\": {\"value\": 16, \"unit\": \"px\"}},\n    \"lg\": {\"$value\": {\"value\": 24, \"unit\": \"px\"}}\n  }\n}\n```\n\n### Resolvers for Theming\n\nResolvers manage tokens across contexts (themes, platforms, densities):\n\n```json\n{\n  \"name\": \"my-system\",\n  \"version\": \"2025.10\",\n  \"sets\": {\n    \"core\": {\"sources\": [{\"$ref\": \"tokens\u002Fbase.json\"}]}\n  },\n  \"modifiers\": {\n    \"theme\": {\n      \"contexts\": {\n        \"light\": [{\"$ref\": \"themes\u002Flight.json\"}],\n        \"dark\": [{\"$ref\": \"themes\u002Fdark.json\"}]\n      },\n      \"default\": \"light\"\n    }\n  },\n  \"resolutionOrder\": [\n    {\"$ref\": \"#\u002Fsets\u002Fcore\"},\n    {\"$ref\": \"#\u002Fmodifiers\u002Ftheme\"}\n  ]\n}\n```\n\nSee [reference\u002Fresolver.md](reference\u002Fresolver.md) for complete documentation.\n\n## Getting Started Guides\n\n### Quick Start: Convert CSS Variables to DTCG\n\n**Starting point:** Existing CSS custom properties\n```css\n:root {\n  --color-primary: #2563eb;\n  --color-background: #ffffff;\n  --spacing-sm: 8px;\n  --spacing-md: 16px;\n}\n```\n\n**Step 1:** Create primitives.tokens.json\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"$type\": \"color\",\n      \"blue-500\": {\n        \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.145, 0.388, 0.922], \"hex\": \"#2563eb\" }\n      },\n      \"white\": {\n        \"$value\": { \"colorSpace\": \"srgb\", \"components\": [1, 1, 1], \"hex\": \"#ffffff\" }\n      }\n    }\n  },\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"scale\": {\n      \"sm\": { \"$value\": { \"value\": 8, \"unit\": \"px\" } },\n      \"md\": { \"$value\": { \"value\": 16, \"unit\": \"px\" } }\n    }\n  }\n}\n```\n\n**Step 2:** Create semantic.tokens.json with references\n```json\n{\n  \"color\": {\n    \"interactive\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": \"{color.primitive.blue-500}\" }\n    },\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": \"{color.primitive.white}\" }\n    }\n  },\n  \"spacing\": {\n    \"$type\": \"dimension\",\n    \"component\": {\n      \"padding\": { \"$value\": \"{spacing.scale.sm}\" },\n      \"gap\": { \"$value\": \"{spacing.scale.md}\" }\n    }\n  }\n}\n```\n\n**Conversion tips:**\n- RGB hex to sRGB: divide each channel by 255 (e.g., `37\u002F255 = 0.145`)\n- Keep hex as fallback in the `hex` property\n- Create semantic layer for purpose-driven naming\n\n---\n\n### Quick Start: Set Up Terrazzo with Dark Mode\n\n**Step 1:** Install dependencies\n```bash\nnpm install -D @terrazzo\u002Fcli @terrazzo\u002Fplugin-css\n```\n\n**Step 2:** Create token files with mode extensions\n\ntokens\u002Fthemes\u002Flight.tokens.json:\n```json\n{\n  \"$extensions\": { \"mode\": \"light\" },\n  \"color\": {\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [1, 1, 1], \"hex\": \"#ffffff\" } }\n    },\n    \"text\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.07, 0.07, 0.07], \"hex\": \"#121212\" } }\n    }\n  }\n}\n```\n\ntokens\u002Fthemes\u002Fdark.tokens.json:\n```json\n{\n  \"$extensions\": { \"mode\": \"dark\" },\n  \"color\": {\n    \"background\": {\n      \"$type\": \"color\",\n      \"page\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.07, 0.07, 0.07], \"hex\": \"#121212\" } }\n    },\n    \"text\": {\n      \"$type\": \"color\",\n      \"primary\": { \"$value\": { \"colorSpace\": \"srgb\", \"components\": [0.95, 0.95, 0.95], \"hex\": \"#f2f2f2\" } }\n    }\n  }\n}\n```\n\n**Step 3:** Create terrazzo.config.mjs\n```javascript\nimport { defineConfig } from \"@terrazzo\u002Fcli\";\nimport pluginCSS from \"@terrazzo\u002Fplugin-css\";\n\nexport default defineConfig({\n  tokens: [\n    \".\u002Ftokens\u002Fprimitives.tokens.json\",\n    \".\u002Ftokens\u002Fthemes\u002Flight.tokens.json\",\n    \".\u002Ftokens\u002Fthemes\u002Fdark.tokens.json\"\n  ],\n  outDir: \".\u002Fdist\u002F\",\n  plugins: [\n    pluginCSS({\n      filename: \"tokens.css\",\n      modeSelectors: [\n        { mode: \"light\", selectors: [\":root\", \"[data-theme='light']\"] },\n        { mode: \"dark\", selectors: [\"[data-theme='dark']\", \"@media (prefers-color-scheme: dark)\"] }\n      ]\n    })\n  ]\n});\n```\n\n**Step 4:** Build and use\n```bash\nnpx terrazzo build\n```\n\nIn your HTML:\n```html\n\u003Chtml data-theme=\"light\">\u003C!-- or \"dark\" -->\n```\n\n---\n\n### Quick Start: Import Figma Variables Export\n\n**Step 1:** Export from Figma\n- Open Variables panel in Figma\n- Use a DTCG export plugin or Figma's built-in export\n- Save as `figma-export.json`\n\n**Step 2:** Validate the export\n```bash\n# Check JSON is valid\njq '.' figma-export.json > \u002Fdev\u002Fnull && echo \"Valid JSON\"\n\n# List all token paths\njq -r 'paths(has(\"$value\")) | join(\".\")' figma-export.json\n```\n\n**Step 3:** Add mode extensions if needed\n\nIf Figma exported separate mode files, add `$extensions.mode`:\n```bash\n# Add mode to light theme file\njq '. + {\"$extensions\": {\"mode\": \"light\"}}' light.json > light.tokens.json\n```\n\n**Step 4:** Add hex fallbacks (if missing)\n\nFigma exports sRGB components but may omit hex:\n```bash\n# Quick check if hex values exist\njq '.. | objects | select(.colorSpace == \"srgb\") | select(.hex == null)' figma-export.json\n```\n\n**Step 5:** Configure Terrazzo\n\nCreate `terrazzo.config.mjs` pointing to your imported files and build.\n\n**Common Figma export issues:**\n- Flat structure (no primitives\u002Fsemantic separation) - reorganize manually\n- Space in token names - use jq to convert to kebab-case\n- Missing `$type` on groups - add type inheritance\n\n---\n\n## Workflows\n\n### Creating a Token File\n\n```\nToken File Creation:\n- [ ] Step 1: Define file structure (primitives → semantic → components)\n- [ ] Step 2: Create primitive tokens with explicit types\n- [ ] Step 3: Create semantic tokens referencing primitives\n- [ ] Step 4: Validate structure and references\n- [ ] Step 5: Test with target tools (Terrazzo, etc.)\n```\n\n**Step 1: Define structure**\n\nOrganize into layers:\n```\ntokens\u002F\n├── primitives.tokens.json   # Raw values (colors, spacing scales)\n├── semantic.tokens.json     # Purpose-driven aliases\n└── components.tokens.json   # Component-specific tokens\n```\n\n**Step 2: Create primitives**\n\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"$type\": \"color\",\n      \"blue\": {\n        \"500\": {\"$value\": {\"colorSpace\": \"srgb\", \"components\": [0.15, 0.39, 0.92], \"hex\": \"#2563eb\"}}\n      }\n    }\n  }\n}\n```\n\n**Step 3: Create semantic tokens**\n\n```json\n{\n  \"color\": {\n    \"interactive\": {\n      \"$type\": \"color\",\n      \"default\": {\"$value\": \"{color.primitive.blue.500}\"}\n    }\n  }\n}\n```\n\n**Step 4: Validate**\n\nCheck for:\n- All tokens have resolvable `$type`\n- No circular references\n- Valid value formats for each type\n- Names don't contain `{`, `}`, `.` or start with `$`\n\n**Step 5: Test with tools**\n\n```bash\nterrazzo validate tokens.json\nterrazzo build --input tokens.json --output test.css --format css\n```\n\n---\n\n### Setting Up a Theme Resolver\n\n```\nResolver Setup:\n- [ ] Step 1: Organize token files by concern\n- [ ] Step 2: Create resolver.json with version and sets\n- [ ] Step 3: Define theme modifier with contexts\n- [ ] Step 4: Configure resolution order\n- [ ] Step 5: Test with different inputs\n```\n\n**Step 1: Organize files**\n\n```\ntokens\u002F\n├── resolver.json\n├── base.tokens.json\n└── themes\u002F\n    ├── light.tokens.json\n    └── dark.tokens.json\n```\n\n**Step 2: Create resolver**\n\n```json\n{\n  \"name\": \"my-design-system\",\n  \"version\": \"2025.10\",\n  \"sets\": {\n    \"foundation\": {\n      \"sources\": [{\"$ref\": \"base.tokens.json\"}]\n    }\n  }\n}\n```\n\n**Step 3: Define theme modifier**\n\n```json\n{\n  \"modifiers\": {\n    \"theme\": {\n      \"contexts\": {\n        \"light\": [{\"$ref\": \"themes\u002Flight.tokens.json\"}],\n        \"dark\": [{\"$ref\": \"themes\u002Fdark.tokens.json\"}]\n      },\n      \"default\": \"light\"\n    }\n  }\n}\n```\n\n**Step 4: Set resolution order**\n\n```json\n{\n  \"resolutionOrder\": [\n    {\"$ref\": \"#\u002Fsets\u002Ffoundation\"},\n    {\"$ref\": \"#\u002Fmodifiers\u002Ftheme\"}\n  ]\n}\n```\n\n**Step 5: Test**\n\n```bash\nterrazzo build --resolver resolver.json --output light.css\nterrazzo build --resolver resolver.json --input theme=dark --output dark.css\n```\n\n---\n\n### Validating Token Files\n\n```\nValidation Checklist:\n- [ ] Step 1: Check JSON syntax\n- [ ] Step 2: Verify type declarations\n- [ ] Step 3: Validate value formats\n- [ ] Step 4: Check reference resolution\n- [ ] Step 5: Verify naming constraints\n```\n\n**Step 1: JSON syntax**\n\n```bash\njq '.' tokens.json > \u002Fdev\u002Fnull && echo \"Valid JSON\"\n```\n\n**Step 2: Type declarations**\n\nEvery token needs a resolvable `$type` (explicit or inherited from parent group).\n\n**Step 3: Value formats**\n\n| Type | Valid Format |\n|------|--------------|\n| color | `{colorSpace, components, [alpha], [hex]}` |\n| dimension | `{value: number, unit: \"px\"|\"rem\"}` |\n| duration | `{value: number, unit: \"ms\"|\"s\"}` |\n| cubicBezier | `[P1x, P1y, P2x, P2y]` where P1x, P2x ∈ [0,1] |\n| fontWeight | 1-1000 or string (\"normal\", \"bold\", etc.) |\n\n**Step 4: References**\n\n- All `{path.to.token}` references must resolve\n- No circular references (A → B → A)\n- No self-references\n\n**Step 5: Naming**\n\n- Names cannot start with `$`\n- Names cannot contain `{`, `}`, `.`\n\n---\n\n### Migrating from Other Formats\n\n```\nMigration Workflow:\n- [ ] Step 1: Export existing tokens to JSON\n- [ ] Step 2: Map types to DTCG equivalents\n- [ ] Step 3: Convert color values to structured format\n- [ ] Step 4: Update reference syntax\n- [ ] Step 5: Validate and test\n```\n\n**Common conversions:**\n\n| From | To DTCG |\n|------|---------|\n| `\"#ff0000\"` | `{colorSpace: \"srgb\", components: [1,0,0], hex: \"#ff0000\"}` |\n| `\"16px\"` | `{value: 16, unit: \"px\"}` |\n| `\"$colors.primary\"` or `{colors.primary}` | `\"{colors.primary}\"` |\n\n**Terrazzo conversion:**\n\n```bash\nterrazzo convert --from style-dictionary --to dtcg input.json output.tokens.json\n```\n\n## Best Practices\n\n### Token Layers\n\n1. **Primitives** - Raw values without semantic meaning\n2. **Semantic** - Purpose-driven tokens referencing primitives\n3. **Component** - Specific component tokens referencing semantic\n\n### Naming Conventions\n\n- Use lowercase with hyphens: `color.brand.primary`\n- Structure: `[category].[subcategory].[variant].[state]`\n- Semantic over appearance: `color.interactive.default` not `color.blue-500`\n\n### Theming Strategy\n\nUse resolvers for themes (recommended over group extension):\n- Cleaner separation of concerns\n- Token paths stay consistent across themes\n- Easy to compose themes (e.g., dark + high-contrast)\n- Standardized input handling for build tools\n\n### Accessibility\n\n**Color contrast:** Document contrast ratios in `$extensions`:\n\n```json\n{\n  \"$extensions\": {\n    \"com.example.a11y\": {\"contrastRatio\": 7.5, \"wcagLevel\": \"AA\"}\n  }\n}\n```\n\n**Reduced motion:** Use resolver modifier:\n\n```json\n{\n  \"modifiers\": {\n    \"motion\": {\n      \"contexts\": {\n        \"full\": [{\"$ref\": \"motion\u002Ffull.json\"}],\n        \"reduced\": [{\"$ref\": \"motion\u002Freduced.json\"}]\n      },\n      \"default\": \"full\"\n    }\n  }\n}\n```\n\n### File Conventions\n\n- Token files: `.tokens` or `.tokens.json`\n- Resolver files: `.resolver.json`\n- Encoding: UTF-8\n\n## Common Tasks\n\n| Task | Approach |\n|------|----------|\n| Format validation | Check against DTCG spec, use Terrazzo validate |\n| Structure optimization | Organize into primitive → semantic → component layers |\n| Alias resolution | Trace references, check for circular dependencies |\n| Resolver configuration | Define sets, modifiers, resolution order |\n| Theme implementation | Use resolver modifiers with context files |\n| Multi-context builds | Generate outputs per theme\u002Fplatform\u002Fdensity |\n| Tool integration | Use jq for queries, Terrazzo for transforms |\n| Migration | Convert colors to structured format, update references |\n\n## Your Role\n\nWhen helping with design tokens:\n\n1. **Verify before claiming** - Check reference files before stating what DTCG does\u002Fdoesn't support. Never assume spec limitations.\n2. **Use latest DTCG spec** - Structured color format, proper types\n3. **Validate structure** - Check `$value`, `$type`, references\n4. **Suggest best practices** - Naming, organization, layering\n5. **Help with tools** - jq queries, Terrazzo commands, JSONata transforms\n6. **Consider platforms** - Web, iOS, Android via `$extensions`\n7. **Think about scale** - Design for maintainability\n8. **Prioritize accessibility** - Contrast, motion, focus indicators\n9. **Connect design and code** - Bridge tools and implementation\n\n**Important:** When asked about spec capabilities (what syntax is valid, what features exist), always read the relevant reference file first. Do not rely on assumptions or prior knowledge about the spec.\n\nAlways provide clear examples and explain reasoning behind recommendations.\n",{"name":5,"description":7},"main","4c174e06a831864e98c30f630a7aa6c04738b094","skills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules","https:\u002F\u002Fgithub.com\u002Fmhyahya854","2026-11-06 02:03:37",{"source":8,"skillName":5,"commands":31,"prompt":41,"zipAvailable":42},[32,35,38],{"tool":33,"command":34},"npx","npx skills add mhyahya854\u002FAI-Second-Brain_Universal-Rules --skill design-tokens",{"tool":36,"command":37},"bunx","bunx skills add mhyahya854\u002FAI-Second-Brain_Universal-Rules --skill design-tokens",{"tool":39,"command":40},"pnpm","pnpm dlx skills add mhyahya854\u002FAI-Second-Brain_Universal-Rules --skill design-tokens","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002FSKILL.md",true,[44,50,54,58,62,66,70],{"path":45,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":48,"sourceHtmlUrl":49},"examples\u002Fuse-cases.md","REFERENCE","参考文档",8802,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002Fexamples\u002Fuse-cases.md",{"path":51,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":15},"LICENSE","许可证",1072,{"path":55,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":56,"sourceHtmlUrl":57},"README.md",2487,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002FREADME.md",{"path":59,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":60,"sourceHtmlUrl":61},"reference\u002Fcolor.md",6490,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002Freference\u002Fcolor.md",{"path":63,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":64,"sourceHtmlUrl":65},"reference\u002Fformat.md",7737,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002Freference\u002Fformat.md",{"path":67,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":68,"sourceHtmlUrl":69},"reference\u002Fresolver.md",6783,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002Freference\u002Fresolver.md",{"path":71,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":72,"sourceHtmlUrl":73},"reference\u002Ftools.md",10222,"https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Filikescience\u002Fdesign-tokens-skill\u002Fdesign-tokens-skill\u002Freference\u002Ftools.md",[75,83,91,99,106,113],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":79,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7EX4T721AAH60R0239P8WBZ","frontend-slides","Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT\u002FPPTX to web, or create slides for a talk\u002Fpitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fzarazhangrui\u002Ffrontend-slides\u002Ffrontend-slides\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fzarazhangrui\u002Ffrontend-slides\u002Ffrontend-slides\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":87,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":19},"01M7EX495RSHTTCEJVX7C83FA3","design-dna","Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure\u002Fschema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on \"design DNA\", \"extract design style\", \"analyze design\", \"design tokens from reference\", \"generate design from JSON\", \"design system from screenshot\", \"design profile\", \"style guide JSON\", \"visual effects analysis\", \"design with effects\", \"3d design analysis\".","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fzanwei\u002Fdesign-dna\u002Fdesign-dna\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fzanwei\u002Fdesign-dna\u002Fdesign-dna\u002FSKILL.md",[],[],{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":95,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":19},"01M7EX45RF2XZKRC3KDJDTT1PH","wireframe","Generate JSON wireframe with HTML preview","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fyhassy\u002Fwireframe-skill\u002Fwireframe-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fyhassy\u002Fwireframe-skill\u002Fwireframe-skill\u002FSKILL.md",[],[],{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":19},"01M7EWZEM3MHD48AYSYFR2C9JP","social-publishing","Schedule and publish social media posts across 13 platforms (X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, Pinterest) via the SocialClaw API. Use when the user wants to publish, schedule, or manage social media content programmatically. Requires SOCIALCLAW_API_KEY.","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fwshobson\u002Fagents\u002Fsocial-publishing\u002FSKILL.md",[],[],{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":19},"01M7EWKDEK9840C728VXT78EQ9","hermes-tweet","Install and operate Hermes Tweet, a Hermes Agent plugin for X\u002FTwitter research, timeline reading, tweet analysis, and approval-gated private or state-changing operations. Use this skill when installing Hermes Tweet, researching X\u002FTwitter accounts, monitoring launch signals, investigating mentions, auditing giveaways, or preparing gated X operations. Use proactively when a Hermes Agent workflow needs current X\u002FTwitter context. Requires XQUIK_API_KEY for read and action tools.","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fwshobson\u002Fagents\u002Fhermes-tweet\u002FSKILL.md",[],[],{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":19},"01M7EWASXP3NZWW95CJPT2CRWN","refactoring-ui","Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions \"my UI looks off\" (or amateur\u002Funprofessional), \"fix the design\", \"Tailwind styling\", \"color palette\", \"visual hierarchy\", \"design system\", \"spacing scale\", or \"component styling\". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.","https:\u002F\u002Fgithub.com\u002Fmhyahya854\u002FAI-Second-Brain_Universal-Rules\u002Fblob\u002Fmain\u002Fskills\u002F_intake\u002Fgithub\u002Fwondelai\u002Fskills\u002Frefactoring-ui\u002FSKILL.md",[],[]]