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

claude

Generates implementation-ready design system guidelines for the Claude visual identity.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces in the Claude visual style often lack concrete, enforceable rules, leading to inconsistent spacing, color misuse, and accessibility gaps across components. ## Core Features & Use Cases - Design Token Foundations: Defines the Claude palette (warm ivory surfaces, near-black ink, earthy accents), typography scale, and spacing rhythm as reusable tokens. - Component Rule Authoring: Produces component-level guidance covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements with testable acceptance criteria and a code-review-ready QA checklist. - Use Case: A designer-engineer pair standardizing a new dashboard asks for Claude-style button and card rules, and receives token-anchored specs with do/don't examples and migration notes for legacy components. ## Quick Start Ask the assistant to generate Claude design system guidelines for buttons and cards following the defined tokens and accessibility rules.

Frequently Asked Questions about claude

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

FAQPage Schema
How do I create design system guidelines for the Claude visual style?▼

Activate this Skill and request guidelines for specific components. It produces token-anchored rules covering anatomy, variants, states, responsive behavior, and accessibility acceptance criteria following the Claude palette and typography scale.

What color and typography tokens does the Claude design system use?▼

The palette uses primary #141413 near-black ink, secondary #FAF9F6 warm ivory, plus success, warning, and danger accents. Typography uses Anthropic Sans with a 12/14/16/20/24/32 scale and JetBrains Mono for labels.

Does this Skill enforce accessibility standards in generated guidelines?▼

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 output structure do the generated design guidelines follow?▼

Guidelines include context and goals, design tokens and foundations, component-level rules, accessibility requirements, content and tone standards, anti-patterns, and a QA checklist executable in code review.

When should I not rely on this Skill for design decisions?▼

Avoid using it for brands outside the Claude visual identity, since its tokens and aesthetic rules are specific to the warm-stone, near-achromatic editorial style. For other brands, define separate token foundations first.

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
tunacosguntunacosgun

emcn-design-review

Audit UI code against the emcn design system for conformance.

Community
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

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

Official
Advanced
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced