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

gradient

Generates design-system guidelines using Gradient color tokens, typography scales, and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building modern, playful interfaces often lack consistent design-system guidance, leading to inconsistent spacing, low-contrast text, and ad-hoc component styling. This Skill provides opinionated, implementation-ready design rules grounded in the Gradient design language. ## Core Features & Use Cases - Design Token Foundations: Defines color tokens (primary #990FFA, secondary #E60076, semantic states), typography scales (12/14/16/18/24/30/36 with Montserrat, Space Grotesk, JetBrains Mono), and an 8pt spacing grid. - Component-Level Rules: Produces guidance covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), responsive behavior, and edge cases. - Accessibility Enforcement: Embeds WCAG 2.2 AA requirements, keyboard-first interactions, and testable acceptance criteria into every guideline. - Use Case: Ask for a button component specification and receive token-anchored rules for states, contrast, touch targets, anti-patterns, and a QA checklist ready for code review. ## Quick Start Use the gradient skill to write design-system guidelines for a primary button component including states, accessibility criteria, and anti-patterns.

Frequently Asked Questions about gradient

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

FAQPage Schema
How do I create design system guidelines for UI components?▼

Define design tokens and foundations first, then specify component anatomy, variants, and states such as hover, focus-visible, disabled, and loading. This Skill generates that structure automatically using the Gradient color palette, typography scale, and 8pt spacing grid.

What color tokens does the Gradient design system use?▼

The palette includes primary #990FFA, secondary #E60076, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Typography uses Montserrat, Space Grotesk, and JetBrains Mono on a 12 to 36 scale.

Does this design guidance meet WCAG accessibility standards?▼

Yes, all generated guidelines enforce WCAG 2.2 AA compliance, including keyboard-first interactions, visible focus states, semantic HTML before ARIA, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

When should I not use a gradient-heavy playful design style?▼

Avoid it for dense data interfaces, conservative enterprise contexts, or content where visual restraint aids comprehension. The Skill itself prioritizes accessibility and clarity over novelty when conflicts arise between aesthetics and usability.

Related Skills

Explore More Design & Creative Skills→
ahsanghalibahsanghalib

ui-design-system

Creates and audits project-grounded UI design systems with semantic tokens and component guidance.

Community
Intermediate
marktantongcomarktantongco

frontend-design

Transform UI specifications into React, Next.js, or Tailwind frontend code with token generation and accessibility validation.

Community
Advanced
1lastphoenix1lastphoenix
7

web-design-guidelines

Compare UI components against Web Interface Guidelines and report violations.

Community
Intermediate
serverpodserverpod
3.3k

serverpod-flutter-frontend

Generate distinctive Flutter UI code with custom typography, layouts, and animations.

Official
Intermediate