II.
SkillArea overview
Reference · liveskill-area:design-systems
Design Systems overview
Building and maintaining shared visual and interaction languages across product surfaces - component libraries, design tokens, documentation, and governance processes that keep design and code in sync. Reduces inconsistency and accelerates delivery by giving teams a reusable foundation with clear contribution and versioning contracts.
Attributes
displayName
Design Systems
description
Building and maintaining shared visual and interaction languages across product
surfaces - component libraries, design tokens, documentation, and governance
processes that keep design and code in sync. Reduces inconsistency and accelerates
delivery by giving teams a reusable foundation with clear contribution and versioning
contracts.
domains
expertiseLevels
- intermediate
- expert
Outgoing edges
applies_to3
- domain:web-development·DomainWeb Development
- specialization:ux-ui-design·Specialization
- specialization:ux-ui-design·Specialization
prerequisite_for_learning1
- skill-area:interaction-design·SkillAreaInteraction Design
Incoming edges
addresses1
- skill:react-component-generation·SkillReact Component Generation
lib_requires_skill_area49
- lib-agent:ux-ui-design--design-documentation·LibraryAgentdesign-documentation-agent
- lib-agent:ux-ui-design--design-mock-analyzer·LibraryAgentdesign-mock-analyzer
- lib-agent:ux-ui-design--design-token-manager·LibraryAgentdesign-token-manager
- lib-agent:ux-ui-design--developer-handoff·LibraryAgentdeveloper-handoff-agent
- lib-agent:ux-ui-design--figma-integration·LibraryAgentfigma-integration
- lib-agent:ux-ui-design--iconography-system·LibraryAgenticonography-system-agent
- lib-agent:ux-ui-design--information-architecture·LibraryAgentinformation-architecture-agent
- lib-agent:ux-ui-design--refinement-planner·LibraryAgentrefinement-planner
- lib-agent:ux-ui-design--typography-system·LibraryAgenttypography-system-agent
- lib-agent:web-development--component-developer·LibraryAgentcomponent-developer
- lib-agent:web-development--component-documentation·LibraryAgentcomponent-documentation
- lib-agent:web-development--frontend-architect·LibraryAgentfrontend-architect
- lib-process:ux-ui-design--ab-testing·LibraryProcessux-ui-design/ab-testing
- lib-process:ux-ui-design--accessibility-audit·LibraryProcessspecializations/ux-ui-design/accessibility-audit
- lib-process:ux-ui-design--analytics-heatmap·LibraryProcessspecializations/ux-ui-design/analytics-heatmap
- lib-process:ux-ui-design--card-sorting·LibraryProcessux-ui-design/card-sorting
- lib-process:ux-ui-design--component-library·LibraryProcessspecializations/ux-ui-design/component-library
- lib-process:ux-ui-design--design-critique·LibraryProcessux-ui-design/design-critique
- lib-process:ux-ui-design--design-handoff·LibraryProcessspecializations/ux-ui-design/design-handoff
- lib-process:ux-ui-design--design-language·LibraryProcessspecializations/ux-ui-design/design-language
- lib-process:ux-ui-design--design-qa·LibraryProcessspecializations/ux-ui-design/design-qa
- lib-process:ux-ui-design--design-sprint·LibraryProcessux-ui-design/design-sprint
- lib-process:ux-ui-design--design-system·LibraryProcessspecializations/ux-ui-design/design-system
- lib-process:ux-ui-design--hifi-prototyping·LibraryProcessspecializations/ux-ui-design/hifi-prototyping
- lib-process:ux-ui-design--information-architecture·LibraryProcessux-ui-design/information-architecture
- lib-process:ux-ui-design--persona-development·LibraryProcessspecializations/ux-ui-design/persona-development
- lib-process:ux-ui-design--pixel-perfect-implementation·LibraryProcessspecializations/ux-ui-design/pixel-perfect-implementation
- lib-process:ux-ui-design--responsive-design·LibraryProcessspecializations/ux-ui-design/responsive-design
- lib-process:ux-ui-design--storybook-documentation·LibraryProcessspecializations/ux-ui-design/storybook-documentation
- lib-process:ux-ui-design--usability-testing·LibraryProcessspecializations/ux-ui-design/usability-testing
- lib-process:ux-ui-design--user-feedback·LibraryProcessspecializations/ux-ui-design/user-feedback
- lib-process:ux-ui-design--user-journey-mapping·LibraryProcessspecializations/ux-ui-design/user-journey-mapping
- lib-process:ux-ui-design--user-research·LibraryProcessux-ui-design/user-research
- lib-process:ux-ui-design--ux-writing·LibraryProcessux-ui-design/ux-writing
- lib-process:ux-ui-design--wcag-compliance·LibraryProcessspecializations/ux-ui-design/wcag-compliance
- lib-process:ux-ui-design--wireframing·LibraryProcessux-ui-design/wireframing
- lib-process:web-development--component-library-radix·LibraryProcessspecializations/web-development/component-library-radix
- lib-process:web-development--storybook-component-testing·LibraryProcessspecializations/web-development/storybook-component-testing
- lib-process:web-development--tailwind-design-system·LibraryProcessspecializations/web-development/tailwind-design-system
- lib-skill:ux-ui-design--component-inventory·LibrarySkillcomponent-inventory
- lib-skill:ux-ui-design--design-system-validator·LibrarySkilldesign-system-validator
- lib-skill:ux-ui-design--design-token-transformer·LibrarySkilldesign-token-transformer
- lib-skill:ux-ui-design--figma-api·LibrarySkillfigma-api
- lib-skill:ux-ui-design--mock-spec-extractor·LibrarySkillmock-spec-extractor
- lib-skill:web-development--design-tokens·LibrarySkilldesign-tokens
- lib-skill:web-development--radix-ui·LibrarySkillradix-ui
- lib-skill:web-development--shadcn·LibrarySkillshadcn
- lib-skill:web-development--storybook·LibrarySkillstorybook
- lib-skill:web-development--tailwind-css·LibrarySkilltailwind-css
prerequisite_for_learning3
- skill-area:ui-styling·SkillAreaUI Styling
- skill-area:visual-design·SkillAreaVisual Design
- skill-area:frontend-development·SkillAreaFrontend Development
requires_expertise4
- role:product-designer·RoleProduct Designer
- role:frontend-engineer·RoleFrontend Engineer
- role:ui-designer·RoleUI Designer
- role:design-systems-engineer·RoleDesign Systems Engineer
requires_skill_area4
- stack-profile:developer-portal·StackProfileDeveloper Portal Stack (Backstage, GitHub, OpenAPI, Markdown, TypeScript)
- stack-profile:storybook-design-system·StackProfileStorybook Design System Stack (React, Storybook, Chromatic, Tailwind, TypeScript)
- stack-profile:visual-regression-testing·StackProfileVisual Regression Testing (Chromatic, Storybook, Playwright, React, TypeScript)
- workflow:heuristic-evaluation-audit·WorkflowHeuristic Evaluation Audit
used_by_skill_area6
- framework:angular·FrameworkAngular
- framework:preact·FrameworkPreact
- framework:alpine·FrameworkAlpine.js
- framework:react·FrameworkReact
- framework:svelte·FrameworkSvelte
- framework:vue·FrameworkVue
used_for8
- library:shadcn·Libraryshadcn/ui
- library:radix-ui·LibraryRadix UI
- library:headless-ui·LibraryHeadless UI
- library:material-ui·LibraryMaterial UI
- library:chakra-ui·LibraryChakra UI
- library:mantine·LibraryMantine
- library:ant-design·LibraryAnt Design
- library:daisyui·LibrarydaisyUI