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

sleek

Generates design-system guidelines using Sleek tokens, typography, and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building modern minimalist interfaces often lack consistent, implementation-ready design guidance, leading to inconsistent spacing, ambiguous component states, and accessibility gaps. This Skill turns the Sleek design language into concrete, testable rules engineers and designers can apply directly. ## Core Features & Use Cases - Token-Driven Foundations: Provides the full Sleek palette (primary #3B82F6, secondary #8B5CF6, semantic colors), Inter/JetBrains Mono typography scale, and 8pt spacing grid as authoritative tokens. - Component Rule Authoring: 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 component guidelines and receive token-anchored rules covering every interaction state, keyboard behavior, contrast requirements, and migration notes for legacy styles. ## Quick Start Use the sleek skill to write design-system guidelines for a primary button component including all interaction states and accessibility criteria.

Frequently Asked Questions about sleek

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 tokens and foundations first, then specify component anatomy, variants, and states including default, hover, focus-visible, active, disabled, loading, and error. This Skill produces that structure with accessibility acceptance criteria and a QA checklist.

What color tokens does the Sleek design system use?▼

Sleek uses primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Spacing follows an 8pt baseline grid with Inter and JetBrains Mono typography.

Does this Skill cover accessibility requirements?▼

Yes, it 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.

How should component interaction states be documented?▼

Document each state explicitly: default, hover, focus-visible, active, disabled, loading, and error where relevant. Include keyboard, pointer, and touch behavior plus responsive edge cases like long labels and empty states.

When should I not use a minimalist design approach?▼

Minimalist design may not fit data-dense dashboards or brands requiring expressive visual identity. In those cases, prioritize clarity and information hierarchy over strict minimalism while keeping token consistency.

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
mjunaidcamjunaidca
10

frontend-design

Generate frontend interfaces with HTML/CSS/JS or React and Vue.

Community
Basic
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

frontend-design-systems

Integrate design systems while preserving brand identity and design tokens.

Official
Intermediate