design-system-context

The 'design-system-context' skill addresses the challenge of managing complex design systems in large-scale UI development driven by large language models (LLMs). It solves the problem of inefficient token usage by optimizing the context window, ensuring that only relevant parts of a design system are loaded when necessary. This skill helps developers efficiently manage the storage and retrieval of design tokens, component specifications, and system context, all within the context window limits imposed by LLMs.

This skill is built around a layered context model, dividing the design system into four layers: brand/system context, design tokens, component context, and task-specific context. This approach allows for selective loading, reducing token wastage and improving performance by focusing on the most relevant information at each stage of UI development. Key features include the ability to load brand context, design tokens, and component specifications dynamically based on the current task or component being worked on.

The primary use cases for this skill include managing design tokens for LLM-driven UI generation, maintaining consistency across agent conversations, optimizing context windows, and handling multiple design system variants. It's particularly useful for UI developers working with large, complex design systems that require fine-grained control over the context data being used in their models.