skills.rest
sernstberger
sernstbergerCOMMUNITY
Explore all skills by this author →
GitHub

design-philosophy

Evaluate UI decisions against Joy UI and Base UI design principles.

Updated Aug 23, 2026
Search Tags:#accessibility#design system#ui/ux#design principles#component architecture#joy ui#base ui
One-click install
npx skills add https://github.com/sernstberger/base-joy --skill design-philosophy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-philosophy
Source: https://github.com/sernstberger/base-joy/tree/main/.claude/skills/design-philosophy
Command: npx skills add https://github.com/sernstberger/base-joy --skill design-philosophy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Understanding and consistently applying the core principles of a hybrid design system (Joy UI + Base UI) can be challenging, leading to inconsistent UI, development inefficiencies, and misaligned design decisions. This Skill provides immediate access to the foundational knowledge needed to build cohesive user interfaces.

Core Features & Use Cases

  • Unified Design Guidance: Offers a clear framework for making design decisions, combining Joy UI's visual aesthetics with Base UI's robust accessibility and composition patterns.
  • Variant & Color System Clarity: Explains the semantic meaning and appropriate usage of the four variants (solid, soft, outlined, plain) and five colors, ensuring visual hierarchy and meaning are consistently applied.
  • Architectural Patterns: Details how components are built using Base UI, sheetVariants, CVA, and ColorContext for intelligent inheritance and flexibility.
  • Use Case: When a designer or developer is unsure about the correct variant or color to use for a new button, this Skill provides instant clarification based on the design system's principles.

Quick Start

Explain the difference between solid and soft variants in the base-joy design system and when to use each.

Frequently Asked Questions about design-philosophy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between solid and soft variants in a design system?▼

Solid variants provide maximum emphasis for primary actions; soft variants offer secondary emphasis with reduced visual weight. Use solid for high-priority interactions and soft for supporting or contextual actions within the same color semantic.

What's the difference between Base UI and Joy UI components?▼

Base UI provides unstyled, accessibility-first components with composition patterns and render props; Joy UI layers visual styling and theming on top. Use Base UI for maximum control; use Joy UI for faster development with pre-built aesthetics.

How do I maintain consistent color and sizing across components?▼

Apply token-based color and size systems using CSS variables and ColorContext for intelligent inheritance. This ensures semantic meaning propagates across the component tree and variants remain visually coherent.

Can I use Joy UI and Base UI together in the same application?▼

Yes, Joy UI and Base UI are designed for hybrid usage. Base UI components provide the unstyled foundation while Joy UI adds styled variants, enabling interoperability and flexible composition within a unified design system.

What accessibility patterns should I follow when building components?▼

Base UI enforces accessibility-first patterns including proper ARIA attributes, semantic HTML, and keyboard navigation. Apply these patterns consistently across all components to meet functional accessibility requirements.

How do runtime theming and CSS variables work together?▼

CSS variables enable runtime theming by storing design tokens as dynamic properties that update without recompilation. Combined with the token-based color system, this allows themes to switch instantly across all components.

Related Skills

Explore More Design & Creative Skills→
otto-poblyshotto-poblysh

tailwind-design-system

Convert UI styling into Tailwind CSS v4 design tokens and component variants.

Community
Intermediate
Ritik-Sharma1Ritik-Sharma1

ui-visual-validator

Validate UI components and pages for design system compliance and accessibility.

Community
Advanced
genesis-ai-devgenesis-ai-dev
15

building-components

Guide building accessible, composable UI components with ARIA patterns and design tokens.

Official
Advanced
boomNDSboomNDS

design-system-patterns

Standardize design system patterns across tokens, theming, and component APIs.

Community
Advanced