II.
SkillArea JSON
Structured · liveskill-area:design-systems
Design Systems json
Inspect the normalized record payload exactly as the atlas UI reads it.
{
"id": "skill-area:design-systems",
"_kind": "SkillArea",
"_file": "domain/skill-areas/skill-areas-design.yaml",
"_cluster": "domain",
"attributes": {
"displayName": "Design Systems",
"description": "Building and maintaining shared visual and interaction languages across product\nsurfaces - component libraries, design tokens, documentation, and governance\nprocesses that keep design and code in sync. Reduces inconsistency and accelerates\ndelivery by giving teams a reusable foundation with clear contribution and versioning\ncontracts.\n",
"domains": [
"domain:web-development",
"specialization:ux-ui-design"
],
"expertiseLevels": [
"intermediate",
"expert"
]
},
"outgoingEdges": [
{
"from": "skill-area:design-systems",
"to": "domain:web-development",
"kind": "applies_to",
"attributes": {
"confidence": "primary"
}
},
{
"from": "skill-area:design-systems",
"to": "specialization:ux-ui-design",
"kind": "applies_to",
"attributes": {
"confidence": "secondary"
}
},
{
"from": "skill-area:design-systems",
"to": "skill-area:interaction-design",
"kind": "prerequisite_for_learning",
"attributes": {
"strength": "helpful"
}
},
{
"from": "skill-area:design-systems",
"to": "specialization:ux-ui-design",
"kind": "applies_to",
"attributes": {
"confidence": "primary"
}
}
],
"incomingEdges": [
{
"from": "framework:angular",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "framework:preact",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "framework:alpine",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "framework:react",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "framework:svelte",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "framework:vue",
"to": "skill-area:design-systems",
"kind": "used_by_skill_area",
"attributes": {}
},
{
"from": "library:shadcn",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:radix-ui",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:headless-ui",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:material-ui",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:chakra-ui",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:mantine",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:ant-design",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "library:daisyui",
"to": "skill-area:design-systems",
"kind": "used_for"
},
{
"from": "skill-area:ui-styling",
"to": "skill-area:design-systems",
"kind": "prerequisite_for_learning",
"attributes": {
"strength": "recommended"
}
},
{
"from": "skill-area:visual-design",
"to": "skill-area:design-systems",
"kind": "prerequisite_for_learning",
"attributes": {
"strength": "recommended"
}
},
{
"from": "skill-area:frontend-development",
"to": "skill-area:design-systems",
"kind": "prerequisite_for_learning",
"attributes": {
"strength": "recommended"
}
},
{
"from": "stack-profile:developer-portal",
"to": "skill-area:design-systems",
"kind": "requires_skill_area"
},
{
"from": "stack-profile:storybook-design-system",
"to": "skill-area:design-systems",
"kind": "requires_skill_area"
},
{
"from": "stack-profile:visual-regression-testing",
"to": "skill-area:design-systems",
"kind": "requires_skill_area"
},
{
"from": "skill:react-component-generation",
"to": "skill-area:design-systems",
"kind": "addresses",
"attributes": {}
},
{
"from": "lib-agent:ux-ui-design--design-documentation",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--design-mock-analyzer",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--design-token-manager",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--developer-handoff",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--figma-integration",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-agent:ux-ui-design--iconography-system",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--information-architecture",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-agent:ux-ui-design--refinement-planner",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:ux-ui-design--typography-system",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-agent:web-development--component-developer",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-agent:web-development--component-documentation",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-agent:web-development--frontend-architect",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--ab-testing",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--accessibility-audit",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--analytics-heatmap",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--card-sorting",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--component-library",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-critique",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-handoff",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-language",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-qa",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-sprint",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--design-system",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--hifi-prototyping",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--information-architecture",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--persona-development",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--pixel-perfect-implementation",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--responsive-design",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--storybook-documentation",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--usability-testing",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--user-feedback",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--user-journey-mapping",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--user-research",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--ux-writing",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--wcag-compliance",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:ux-ui-design--wireframing",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:web-development--component-library-radix",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:web-development--storybook-component-testing",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-process:web-development--tailwind-design-system",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:ux-ui-design--component-inventory",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:ux-ui-design--design-system-validator",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:ux-ui-design--design-token-transformer",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:ux-ui-design--figma-api",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-skill:ux-ui-design--mock-spec-extractor",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:web-development--design-tokens",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:web-development--radix-ui",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-skill:web-development--shadcn",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "lib-skill:web-development--storybook",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 1
}
},
{
"from": "lib-skill:web-development--tailwind-css",
"to": "skill-area:design-systems",
"kind": "lib_requires_skill_area",
"attributes": {
"weight": 0.7
}
},
{
"from": "role:product-designer",
"to": "skill-area:design-systems",
"kind": "requires_expertise",
"attributes": {}
},
{
"from": "role:frontend-engineer",
"to": "skill-area:design-systems",
"kind": "requires_expertise",
"attributes": {}
},
{
"from": "role:ui-designer",
"to": "skill-area:design-systems",
"kind": "requires_expertise",
"attributes": {}
},
{
"from": "role:design-systems-engineer",
"to": "skill-area:design-systems",
"kind": "requires_expertise",
"attributes": {}
},
{
"from": "workflow:heuristic-evaluation-audit",
"to": "skill-area:design-systems",
"kind": "requires_skill_area",
"attributes": {}
}
]
}