claude

Name: claude
Availability: InStock
Author: superpollo02

Generate Claude-branded UI guidance with token-first constraints and WCAG 2.2 AA standards.

Updated May 13, 2026

Search Tags:#typography #accessibility #tokens #design-system #quality-gates #interaction-states #writing-tone

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill claude-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claude
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/claude
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill claude-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides implementation-ready design-system guidance so teams can consistently build Claude-branded UI that feels authoritative and editorial while staying accessible.

Core Features & Use Cases

Token-first guidance: Defines palette, typography, spacing, and foundational constraints that prevent drift across components.
Component and interaction rules: Specifies do/don’t patterns, explicit states (hover/focus/disabled/error as applicable), and quality gates for engineering implementation.
Accessibility and writing standards: Enforces WCAG 2.2 AA, keyboard-first interactions, visible focus states, and concise, confident content tone.

Quick Start

Use the claude skill to generate engineering-ready UI guidance for a new set of components that must match the editorial “warm stone” research-journal aesthetic and pass WCAG 2.2 AA expectations.

Frequently Asked Questions about claude

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

FAQPage Schema

How do I build accessible UI components that pass WCAG 2.2 AA standards?▼

Build accessible UI components by enforcing WCAG 2.2 AA standards through token-first constraints, keyboard-first interactions, and explicit interaction states like visible focus and disabled. This approach guarantees components meet strict accessibility quality gates.

What are token-first constraints in a design system and when do I need them?▼

Token-first constraints are foundational rules defining palette, typography, and spacing to prevent visual drift across UI components. You need them when authoring component rules to ensure consistent design-system implementation across engineering workflows.

How do I standardize writing tone and interaction states for editorial UI systems?▼

Standardize writing tone and interaction states by specifying explicit do/don't patterns for hover, focus, disabled, and error states alongside concise, confident content guidelines. This ensures the UI maintains an authoritative editorial aesthetic.

Does this design system guidance work for generating engineering-ready component rules?▼

Yes, this design system guidance generates engineering-ready rules by applying foundational token constraints and testable acceptance criteria to component authoring. It fits engineering workflows needing explicit interaction behavior and quality gates.

What is the best way to prevent design token drift across multiple UI components?▼

Prevent design token drift by applying foundational constraints that govern your typography, spacing, and color palette before authoring components. Enforcing these token-first rules ensures consistent, accessible UI implementation across teams.

Why do my UI components fail accessibility quality gates during implementation?▼

UI components fail accessibility quality gates when they lack explicit interaction behavior, visible focus states, or keyboard-first interactions. Enforcing testable acceptance criteria based on WCAG 2.2 AA prevents these implementation failures.