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

artistic

Generates design-system guidelines using the Artistic high-contrast token set and typography scale.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building visually striking interfaces often lack consistent, implementation-ready design rules, leading to inconsistent spacing, inaccessible contrast, and ad-hoc component styling. This Skill provides an opinionated design-system authoring workflow grounded in the Artistic token set. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #3B82F6, secondary #8B5CF6, semantic states), typography scale (12/14/16/18/24/30/36 with Limelight and JetBrains Mono), and spacing scale (4/8/12/16/24/32). - Component Rule Authoring: Produces component-level guidance covering anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior. - Accessibility Gates: Enforces WCAG 2.2 AA, keyboard-first interactions, visible focus states, and testable acceptance criteria. - Use Case: A designer-engineer pair needs to document a new button component; the Skill outputs token usage, interaction states, accessibility criteria, anti-patterns, and a QA checklist ready for code review. ## Quick Start Use the artistic skill to generate design-system guidelines for a card component including tokens, states, and accessibility requirements.

Frequently Asked Questions about artistic

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, states, and interaction behavior. This Skill follows a six-step authoring workflow ending with accessibility criteria and a QA checklist executable in code review.

What color and typography tokens does the Artistic style use?▼

The Artistic style uses primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Limelight for headings and body with JetBrains Mono for labels, on a 12/14/16/18/24/30/36 scale.

Does this design system support WCAG accessibility requirements?▼

Yes, the guidelines target WCAG 2.2 AA with keyboard-first interactions, visible focus states, semantic HTML before ARIA, reduced-motion support, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

What component states should design system documentation include?▼

Documentation should cover default, hover, focus-visible, active, disabled, loading, and error states as relevant. It 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 high-contrast artistic visual style?▼

Avoid it when the product requires subdued, content-first interfaces such as dense data tools or reading applications, where expressive typography and bold colors compete with content. The Skill itself flags conflicts between aesthetics and accessibility, prioritizing accessibility.

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
promptlylabspromptlylabs

tailwind-theme-builder

Configure Tailwind v4 and shadcn/ui theming for React projects.

Official
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate