Implement editorial Modern UI with serif typography and semantic tokens.
npx skills add https://github.com/bergside/awesome-design-skills --skill modern-bergside
Please help me install this Agent Skill. Skill: modern Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/modern Command: npx skills add https://github.com/bergside/awesome-design-skills --skill modern-bergside
Modern fixes inconsistent, non-editorial UI styling by standardizing typography, spacing, and color tokens for a clean contemporary look.
It defines an editorial visual foundation using IBM Plex Serif for body and headings and JetBrains Mono for labels, alongside a minimal semantic palette (primary, secondary, success, warning, danger, surface, text) and a consistent spacing rhythm. Use it when designing marketing pages, dashboards, settings screens, or any product surfaces that need clear hierarchy and accessible, keyboard-first interactions.
Ask an AI agent to generate a Modern-themed set of accessible UI components and token-driven styles for a product page with buttons, inputs, and cards.
High-intent search queries and answers about installing and using this skill.
To design an editorial UI with serif typography, use IBM Plex Serif for text and JetBrains Mono for labels, paired with semantic tokens to standardize spacing rhythm, color, and hierarchy. This ensures consistent, accessible product surfaces.
Semantic design tokens are variables representing a minimal palette (primary, secondary, success, warning, danger, surface, text) that standardize component styling. They provide deterministic styling rules and maintain consistent visual hierarchy across marketing pages and dashboards.
Yes, you can build a component library satisfying WCAG 2.2 AA keyboard-first accessibility by applying deterministic do/don't rules and testable quality gates. These explicit interaction states and scales ensure full keyboard navigation compliance.
You generate accessible UI components by instructing an AI agent to apply semantic token-driven styles for elements like buttons, inputs, and cards. This process uses defined scales and explicit interaction states to ensure consistent hierarchy and spacing rhythm.
Yes, this editorial design system works for dashboards and settings screens. It provides a clean contemporary visual foundation with clear hierarchy and keyboard-first interactions, specifically built to resolve inconsistent, non-editorial UI styling across product surfaces.
guideopsApply editorial typography, minimal color palettes, and clean layouts to digital product designs.
superpollo02Define token-driven Apple-inspired UI design guidance with accessibility and quality gates.
superpollo02Standardizes UI design systems with token-based typography, color, spacing, and WCAG 2.2 AA accessibility rules.
efekrbasDesign web and app interfaces with WCAG AAA contrast and strong visual boundaries.
