AugmentClaude
AccessibilityDesign SystemsUI Components

UI Design System Selector

By telagod· telagod/code-abyss· 0

Choose and implement a modern UI design style with tokens, components, and accessibility guidelines.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/applying-ui-design-system-telagod/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens, component patterns, dark mode, and a11y constraints.

What this skill does

This skill guides you through selecting and implementing a modern UI design system for your frontend project. It covers four distinct visual styles—Glassmorphism, Liquid Glass, Neubrutalism, and Claymorphism—each with complete design tokens, component patterns, dark mode support, and accessibility constraints. Rather than mixing styles, you choose one primary aesthetic and follow its reference guide to build consistent, accessible components.

What it does

  • Four design language options: Glassmorphism (translucent, frosted, lightweight), Liquid Glass (Apple-style, 3D glass with environmental response), Neubrutalism (bold frames, high saturation, anti-design), and Claymorphism (soft, rounded, warm clay-like surfaces).
  • Complete token sets: Each style includes CSS tokens, core elements, and constraints; import tokens-<style>.css into your project and extend as needed.
  • Component patterns: Pre-built reference guides for Card, Button, Modal, and Nav components tailored to each style.
  • Universal accessibility rules: Contrast ratios (4.5:1 main text, 3:1 large text), visible :focus-visible states, prefers-reduced-motion and prefers-contrast support, and semantic dark-mode tokens.
  • Dark mode guidance: Use semantic tokens like --bg-surface instead of hardcoded hex values to switch modes cleanly.
  • Performance baselines: Limit on-screen backdrop-filter elements to ≤3, avoid blur in scroll containers, keep shadow layers ≤3, and provide fallbacks for low-end devices.

How to use it

Choose your design language based on the feeling you want—browse the style decision table and load the corresponding reference file. Import the design tokens for your chosen style, then follow its component patterns to build your UI. Apply the shared cross-style constraints (contrast, keyboard focus, motion preferences, dark mode) to every element, and validate accessibility as you implement.

Related skills

S

Senior Frontend Engineer

alirezarezvani

Build and optimize React and Next.js applications with performance analysis and accessibility.

U

UI Design Guidelines Reviewer

vercel-labs

Review UI code for compliance with web interface best practices and accessibility standards.

W

WCAG Accessibility Audit

alirezarezvani

Scan code for accessibility violations and generate WCAG 2.2 compliance reports.

A

Accessibility Compliance

jamditis

Audit and build accessible web interfaces meeting WCAG standards for news and academic sites.