skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

cafe

Generates WCAG 2.2 AA compliant cafe-themed UI component libraries with token-based styling.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#design tokens#ui components#wcag 2.2 aa
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill cafe-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cafe
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/cafe
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill cafe-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cafe helps teams generate a consistent, cozy cafe-inspired UI that stays readable, accessible, and implementation-ready across components.

Core Features & Use Cases

It defines warm-toned brand foundations (Poppins/JetBrains Mono), a tokenized color palette (including semantic success/warning/danger), and spacing/typography scales that preserve visual hierarchy. It also provides accessibility rules aligned to WCAG 2.2 AA with keyboard-first interaction and visible focus states, plus do/don’t guidance and testable quality gates for engineering teams. Use it when creating product screens like landing pages, dashboards, cards, forms, and navigation that should feel friendly and relaxed without sacrificing clarity.

Quick Start

Ask an AI agent to generate the cafe design system instructions for your next UI build using the cafe skill, including accessible focus-visible states and token-based styling.

Frequently Asked Questions about cafe

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

FAQPage Schema
How do I create a warm cafe-inspired design system with accessible UI components?▼

You can create a cafe-inspired design system by standardizing warm-toned typography, tokenized color palettes, and spacing scales that follow WCAG 2.2 AA accessibility rules for consistent UI generation.

What's the best way to ensure my design tokens meet WCAG 2.2 AA keyboard-first accessibility standards?▼

Ensure WCAG 2.2 AA compliance by applying token-anchored quality gates that enforce keyboard-first behavior, visible focus-visible states, and explicit interaction states testable during code review.

How do I standardize UI component styling for buttons, inputs, and cards across multiple product screens?▼

Standardize UI component styling by applying shared design tokens for typography, spacing, and color to buttons, inputs, cards, and navigation to maintain visual hierarchy across product screens.

Can I use Poppins and JetBrains Mono typography for an accessible, relaxed user interface?▼

Yes, you can use Poppins and JetBrains Mono as brand foundations to build a friendly, relaxed interface while preserving visual hierarchy and readability through defined typography scales.

Does this approach include semantic color tokens for success, warning, and danger states?▼

Yes, the tokenized color palette includes semantic success, warning, and danger colors to ensure consistent interaction states and accessible visual feedback across UI components.

What are the limitations of relying solely on design tokens for UI accessibility compliance?▼

Design tokens alone do not ensure full accessibility; you must also implement explicit keyboard-first behavior, visible focus states, and testable quality gates to meet WCAG 2.2 AA standards.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-01-brief

Generate a structured 7-section product brief from a business statement.

Community
Advanced
superpollo02superpollo02

claymorphism

Standardize claymorphism UI components with WCAG 2.2 AA and keyboard-first interaction rules.

Community
Intermediate
bergsidebergside
2.3k

elegant

Define typography, spacing, radii, and color tokens for Elegant design systems.

Official
Basic
nirukk52nirukk52

frontend-design

Generate React Native UI components with NativeWind styling and design system patterns.

Community
Intermediate