skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

friendly

Generates design-system guidelines using Friendly pastel tokens, typography scales, and accessibility rules.

Updated Aug 31, 2026
Search Tags:#typography#accessibility#design system#design tokens#wcag#ui ux#component guidelines
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill friendly-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: friendly
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/friendly
Command: npx skills add https://github.com/MANR255926/GARAGE --skill friendly-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building approachable, friendly interfaces often lack consistent design-system documentation, leading to inconsistent spacing, low-contrast text, and ambiguous component states across products. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #F2D9DC, secondary #D9F2D8, semantic states), typography scales (14/16/18/24/32/40 with Noto Serif Display and Space Mono), and compact spacing rules. - Component Rule Authoring: Produces implementation-ready guidance covering component anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Enforcement: Embeds WCAG 2.2 AA requirements, keyboard-first interactions, and testable acceptance criteria into every guideline. - Use Case: A designer asks for button component rules; the Skill outputs token-anchored specs with states, anti-patterns, migration notes, and a QA checklist for code review. ## Quick Start Use the friendly skill to write design-system guidelines for a card component including states, accessibility criteria, and anti-patterns.

Frequently Asked Questions about friendly

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

FAQPage Schema
How do I create design-system guidelines for a new component?▼

Follow the six-step authoring workflow: restate design intent, define tokens and foundations, specify component anatomy with states and variants, add accessibility acceptance criteria, list anti-patterns with migration notes, and end with a QA checklist for code review.

What color and typography tokens does the Friendly design system use?▼

Friendly uses primary #F2D9DC and secondary #D9F2D8 pastels with semantic tokens for success, warning, and danger. Typography uses Noto Serif Display at a 14/16/18/24/32/40 scale with Space Mono for labels.

Does this design system meet WCAG accessibility standards?▼

Yes, the guidelines target WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and accessibility takes priority over aesthetics when conflicts arise.

What component states should design guidelines define?▼

Guidelines must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They should also describe keyboard, pointer, and touch interactions plus responsive behavior and edge cases like long labels and empty states.

When should I not use a soft pastel design palette?▼

Pastel palettes risk low-contrast text, which the guidelines explicitly prohibit. For data-dense dashboards or contexts requiring high visual urgency, a higher-contrast design system may be more appropriate.

Related Skills

Explore More Design & Creative Skills→
ckrono-progckrono-prog

branding-generator

Generate brand identity kits through interviews, market research, naming, and visual direction.

Community
Advanced
engmiguelamaral-pngengmiguelamaral-png

screenshot-to-code

Convert UI screenshots into runnable HTML, CSS, React, or Vue code.

Community
Advanced
anolilabanolilab
214

accessibility

Audit web interfaces against WCAG 2.2 accessibility standards.

Official
Intermediate
carrilloappscarrilloapps

tailwind-design-system

Creates Tailwind CSS v4 design systems with semantic @theme tokens and CVA components.

Community
Advanced