Shared foundation

Shared Fundamentals

Base UX and accessibility rules inherited by every generated skill, regardless of the selected design system.

What stays fixed

These rules are inherited by every generated skill, regardless of the selected base design system.

Accessibility, responsive behavior and spacing fundamentals remain shared across all generated skills.

Design system customization should override style variables, not the core UX safety rails.

The chosen base YAML defines the style, while these fundamentals protect consistency and usability.

Fundamental areas

Shared Fundamentals

Base di principi comuni applicata a tutte le skill generate, indipendentemente dal design system scelto.

Interaction States

Shared state model for buttons, cards, links and inputs.

hoverfocusactivedisabled

Transition: 150-200ms ease

Accessibility

Minimum contrast, focus and touch target rules.

Text contrast: 4.5:1

UI contrast: 3:1

Touch target: 44px x 44px

Loading & Empty States

Shared expectations for skeletons, spinners and recovery screens.

Skeleton required: Yes

Use spinner only when expected load time is under 3 seconds

Feedback & Validation

Toast, inline error and success behavior that all skills inherit.

Toast position: top-right

Trigger on blur and submit; avoid noisy live validation

Responsive

Mobile-first breakpoints and layout adaptation rules.

Strategy: mobile-first

sm: 640pxmd: 768pxlg: 1024pxxl: 1280px

Spacing System

Common 4px base unit and spacing scale.

Base unit: 4px

xs: 4pxsm: 8pxmd: 16pxlg: 24pxxl: 32px2xl: 48px3xl: 64px4xl: 96px

Working Reference

Use this page as an operational checklist, not just an overview

These rules are the non-negotiable floor shared by every base skill and every exported custom skill package.

Interaction contract

Required states: hover, focus, active, disabled

Default transition: 150-200ms ease

Disabled rule: 50% opacity and pointer-events: none

button: hover, focus, active, disabled

card: hover, focus

link: hover, focus, active

input: focus, error, disabled

Accessibility guardrails

Text contrast minimum: 4.5:1

UI contrast minimum: 3:1

Focus ring minimum: 3px

Touch target minimum: 44px x 44px

Label rule: Visible labels are required; aria-label only as fallback

Reduced motion: Disable non-essential motion under prefers-reduced-motion

Focus indicators must remain visible in high contrast mode

Operational feedback

Skeleton required: Yes

Spinner rule: Use spinner only when expected load time is under 3 seconds

style-matched icon or illustration

clear title

supporting description

optional recovery CTA

Toast rule: Toast must include icon, concise copy, and auto-dismiss after 4-5 seconds

Inline error rule: Pair color, icon, and text

Validation rule: Trigger on blur and submit; avoid noisy live validation

Success rule: Prefer inline confirmations over celebratory toasts

Responsive Breakpoints

Shared across every system, regardless of style direction.

sm: 640pxmd: 768pxlg: 1024pxxl: 1280px

Spacing Scale

The shared rhythm every exported skill inherits by default.

xs: 4pxsm: 8pxmd: 16pxlg: 24pxxl: 32px2xl: 48px3xl: 64px4xl: 96px

Next step

Choose a design system base and customize from there.

Browse design systems