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

lingo

Generates implementation-ready design-system guidelines using Lingo tokens, components, and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building playful, Duolingo-inspired interfaces often lack consistent, documented design rules, leading to inconsistent spacing, colors, and inaccessible components. This Skill turns the Lingo design language into concrete, testable guidance that engineers and designers can apply directly. ## Core Features & Use Cases - Design Token Foundations: Provides the full Lingo palette (primary #58cc02, secondary #ce82ff, warning #ffc800, danger #ff4b4b), Nunito/JetBrains Mono typography scale, and 4/8/12/16/24/32 spacing scale. - Component-Level Rules: Defines anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for UI components. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review-ready QA checklist. - Use Case: Ask for button guidelines and receive token-anchored rules covering tactile 3D bottom borders, focus states, keyboard interaction, and migration notes for inconsistent existing UI. ## Quick Start Use the lingo skill to write design-system guidelines for a primary button component including states, tokens, and accessibility criteria.

Frequently Asked Questions about lingo

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

FAQPage Schema
How do I create design system guidelines for a playful UI style?▼

Define tokens first (colors, typography scale, spacing), then specify component anatomy, states, and interaction behavior. The Lingo skill structures this workflow and outputs rules anchored to tokens like primary #58cc02 and the 4/8/12/16/24/32 spacing scale.

What color palette and fonts does the Lingo design style use?▼

Lingo uses primary #58cc02, secondary #ce82ff, warning #ffc800, danger #ff4b4b, with Nunito for body and display text and JetBrains Mono for labels. The typography scale is 12/14/16/20/24/32 with weights 400 through 900.

How do I make tactile 3D button borders accessible?▼

Pair the 3D bottom border (e.g., border-b-4) with visible focus-visible states, sufficient color contrast, and keyboard-operable interactions. The skill requires WCAG 2.2 AA compliance and testable acceptance criteria for every component rule.

What component states should design system documentation include?▼

Document default, hover, focus-visible, active, disabled, loading, and error states as relevant. Also cover keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and empty states.

When should I not use a playful design style like Lingo?▼

Avoid it for contexts requiring formal or restrained tone, such as legal, financial, or clinical interfaces where bright colors and rounded playful shapes may undermine trust. The skill also prohibits decorative motion without purpose and low-contrast text.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
robinaderobinade

frontend-design

Generate React components, design tokens, and accessible UI patterns.

Community
Advanced
denish12denish12

qa_ui_a11y_smoke

Automate UI accessibility smoke tests for keyboard navigation, ARIA labeling, and contrast.

Community
Intermediate
bergsidebergside
2.3k

lingo

Generate implementation-ready design-system guidance for Lingo UI components with WCAG 2.2 AA constraints.

Official
Intermediate