skills.rest
stars-end
stars-endOFFICIAL
Explore all skills by this author →
GitHub

context-ui-design

Configure design tokens, Material-UI patterns, and ARIA accessibility for fintech interfaces.

Updated Aug 27, 2026
Search Tags:#accessibility#frontend#responsive design#design system#theme#ui design#material-ui
One-click install
npx skills add https://github.com/stars-end/affordabot --skill context-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: context-ui-design
Source: https://github.com/stars-end/affordabot/tree/main/.claude/skills/context-ui-design
Command: npx skills add https://github.com/stars-end/affordabot --skill context-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining UI consistency, adhering to design tokens, and ensuring accessibility standards across a complex application can be challenging.

Core Features & Use Cases

  • Theme System Navigation: Explore the core theme factory and design tokens that define the application's visual identity, enabling easy customization (e.g., dark mode).
  • Material-UI Component Patterns: Understand how standard Material-UI components are customized and used to build the Prime Radiant UI, ensuring consistency and reusability.
  • Accessibility & Responsive Design: Gain insights into ARIA patterns, keyboard navigation, screen reader support, and responsive breakpoints for an inclusive user experience.
  • Use Case: When implementing a new UI component or debugging layout issues, this Skill provides immediate context on existing design patterns and accessibility guidelines.

Quick Start

Ask about "Material-UI components" or "dark mode" to get context on UI styling, design system patterns, and accessibility features.

Frequently Asked Questions about context-ui-design

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

FAQPage Schema
How do I build a consistent UI design system with Material-UI and design tokens?▼

Design systems use Material-UI components paired with design tokens—reusable values for colors, spacing, and typography—to ensure consistency across your application. This Skill covers theme factories and token definitions that let you customize styles (including dark mode) while maintaining a unified visual identity and accessibility standards.

What accessibility features should I implement in responsive component styling?▼

Responsive component styling requires ARIA patterns, keyboard navigation, and screen reader support to meet accessibility standards. This Skill explains how to apply these patterns across forms, dialogs, and layouts alongside responsive breakpoints so all users can interact with your UI regardless of ability or device.

How do I implement dark mode in a Material-UI application?▼

Dark mode is implemented through a theme factory that switches design tokens—colors, backgrounds, and text values—without rewriting component code. This Skill shows how to customize Material-UI's theming system to support multiple color schemes while keeping your design system consistent.

Can I use Material-UI patterns to build accessible forms and dialogs?▼

Yes. Material-UI components can be customized with ARIA attributes, keyboard navigation rules, and responsive styling to create accessible forms and dialogs. This Skill provides the design patterns and component styling guidelines fintech and other frontend teams need to meet accessibility requirements.

Why is maintaining design tokens important for UI consistency?▼

Design tokens centralize visual decisions—colors, spacing, typography—so changes propagate across your entire application automatically. This Skill explains how token-driven theming eliminates inconsistencies, reduces maintenance overhead, and enables features like dark mode without duplicating styles.

What's the difference between responsive design and responsive component styling?▼

Responsive design adapts layouts to screen sizes; responsive component styling ensures individual components follow breakpoint rules and accessibility guidelines within those layouts. This Skill focuses on component-level styling rules, ARIA patterns, and keyboard navigation that work across responsive breakpoints.

Related Skills

Explore More Design & Creative Skills→
BaronkiBaronki
1

visual-design-foundations

Establish design tokens for typography, color, spacing, and iconography.

Community
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-domain-figma

Orchestrate MCP-enabled Figma-to-code workflows for design-system integration.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and CVA components.

Official
Advanced