Does this skill work with frameworks other than Bootstrap?

While it is optimized for Bootstrap 5.3 and Symfony, its core principles regarding component reuse, accessibility, and BEM CSS methodology are applicable to any modern frontend framework.

How does it handle complex navigation for large datasets?

It implements search-first approaches, breadcrumbs, and contextual links to help users navigate complex entities like assets, risks, and controls with minimal clicks.

Can this skill help with dark mode and theming?

Yes, it includes guidelines for CSS custom properties and unified color palettes to ensure consistent light and dark mode implementations.

What is the 'Data Reuse' principle mentioned in the skill?

It is a UI pattern that prioritizes displaying information through relationships and computed values rather than creating parallel data systems, ensuring a single source of truth.

How does this skill improve web accessibility?

It enforces WCAG 2.1 Level AA standards by ensuring semantic HTML structure, proper ARIA labeling, keyboard navigation patterns, and color contrast compliance.

UX & Interface Specialist

Name: UX & Interface Specialist
Author: moag1000

bymoag1000

•

디자인 도구

Builds efficient, accessible, and highly reusable user interfaces following modern design system patterns and WCAG standards.

소개

The UX Specialist skill transforms Claude into a design-focused engineer specialized in creating scalable, consistent, and accessible web interfaces. It emphasizes the 'DRY UI' philosophy, prioritizing component and data reuse to eliminate redundancy in frontend code. Optimized for modern web stacks like Bootstrap and Symfony, this skill guides the implementation of semantic HTML5, WCAG 2.1 Level AA accessibility, and complex information architectures that visualize transitive data relationships without duplicating information.

주요 기능

Component-driven design focusing on parameterized reuse and shared libraries.
Data reuse patterns that maintain a single source of truth across complex views.
Advanced information architecture for task-oriented workflows and contextual navigation.
2 GitHub stars
Strict adherence to WCAG 2.1 Level AA accessibility and semantic HTML standards.
Expert integration with Bootstrap 5, Stimulus.js, and Twig templating.

사용 사례

Designing dashboards that aggregate related data through transitive relationships rather than duplication.
Auditing and implementing accessibility features like ARIA roles and keyboard trapping for complex forms.
Refactoring redundant UI code into a standardized, reusable component library.

소개

주요 기능

Component-driven design focusing on parameterized reuse and shared libraries.
Data reuse patterns that maintain a single source of truth across complex views.
Advanced information architecture for task-oriented workflows and contextual navigation.
2 GitHub stars
Strict adherence to WCAG 2.1 Level AA accessibility and semantic HTML standards.
Expert integration with Bootstrap 5, Stimulus.js, and Twig templating.

사용 사례

Designing dashboards that aggregate related data through transitive relationships rather than duplication.
Auditing and implementing accessibility features like ARIA roles and keyboard trapping for complex forms.
Refactoring redundant UI code into a standardized, reusable component library.