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

dithered

Generates design-system guidelines using dithered dot-pattern visual style tokens and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building retro or high-contrast interfaces lack consistent, implementation-ready design guidance for the dithered dot-pattern aesthetic, leading to inconsistent tokens, spacing, and accessibility gaps. ## Core Features & Use Cases - Design Token Foundations: Provides a defined palette (primary #3B82F6, secondary #8B5CF6, semantic states), typography scale (14/16/18/24/32/40), and spacing scale (4/8/12/16/24/32). - Component Rule Authoring: Produces component-level guidance covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Enforcement: Anchors every rule to WCAG 2.2 AA with testable acceptance criteria and QA checklists. - Use Case: Ask for button component guidelines and receive token-based rules with explicit interaction states, anti-patterns, and a code-review-ready QA checklist. ## Quick Start Use the dithered skill to generate design-system guidelines for a primary button component including states, tokens, and accessibility criteria.

Frequently Asked Questions about dithered

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

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

Define foundational tokens first: the dithered palette (primary #3B82F6, secondary #8B5CF6), typography scale 14/16/18/24/32/40, and spacing scale 4/8/12/16/24/32. Then specify component anatomy, states, and accessibility criteria before writing component-level rules.

What color tokens does the dithered design system use?▼

The palette includes primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Guidance prefers semantic tokens over raw hex values in component rules.

Does the dithered skill enforce accessibility standards?▼

Yes, all generated guidance targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should design guidelines define?▼

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

When should I not use a dithered dot-pattern visual style?▼

Avoid it when low-contrast dot patterns would harm text legibility or when the product requires a conventional corporate aesthetic. The skill explicitly prohibits low contrast text and decorative motion without purpose.

Related Skills

Explore More Design & Creative Skills→
joserprietojoserprieto
2

avincis-brand-design

Deliver the Avincis brand design system as portable tokens for consistent visuals.

Community
Advanced
SkyscannerSkyscanner
543

backpack-css-vars-migration

Migrate Backpack component SCSS mixins from SASS tokens to CSS custom properties for theming.

Official
Advanced
Vincri126Vincri126

accessibility

Audit digital interfaces for WCAG 2.2 AA compliance issues.

Community
Advanced
lxt070409lxt070409
1

pixel-art

Convert images to pixel art with Floyd-Steinberg dithering and animation overlays.

Community
Advanced