Does it follow web accessibility standards?

Yes, it incorporates WCAG AA contrast requirements, minimum touch target sizes, keyboard navigation logic, and ARIA label guidance into every component design.

Does this skill generate code or just specifications?

This skill primarily focuses on generating detailed design specifications and structured architectural data, which can then be used by Claude or a developer to implement CSS, Tailwind, or React components.

What types of components can it design?

It is equipped to handle everything from simple buttons and inputs to complex layouts like data tables, navigation menus, modals, and multi-step forms.

How does it handle responsive design?

The skill provides specific behavior instructions for various breakpoints, detailing how elements should scale, wrap, or change functionality on mobile, tablet, and desktop screens.

Component Designer

Name: Component Designer
Author: lexicalninja

bylexicalninja

Design Tools

Designs accessible, responsive, and reusable UI components with detailed state and style specifications for frontend development.

About

The Component Designer skill streamlines the frontend development process by transforming high-level requirements into comprehensive technical specifications for UI elements. It automates the complex task of defining visual styles, interaction states (hover, focus, disabled, error), accessibility standards (WCAG AA), and responsive behavior, ensuring design consistency and technical accuracy across your entire component library or design system.

Key Features

0 GitHub stars
Comprehensive state mapping including hover, active, focus, and disabled states
WCAG AA accessibility compliance and ARIA attribute guidance
Detailed visual specifications for spacing, typography, and color palettes
Responsive layout specifications for mobile, tablet, and desktop breakpoints
Multi-variant support for complex elements like buttons, cards, and modals

Use Cases

Building a consistent design system from scratch with standardized UI elements
Auditing and upgrading existing UI components for web accessibility compliance
Documenting technical specifications for developer handoff and implementation

About

Key Features

0 GitHub stars
Comprehensive state mapping including hover, active, focus, and disabled states
WCAG AA accessibility compliance and ARIA attribute guidance
Detailed visual specifications for spacing, typography, and color palettes
Responsive layout specifications for mobile, tablet, and desktop breakpoints
Multi-variant support for complex elements like buttons, cards, and modals

Use Cases

Building a consistent design system from scratch with standardized UI elements
Auditing and upgrading existing UI components for web accessibility compliance
Documenting technical specifications for developer handoff and implementation