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

0•

デザインツール

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

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.

主な機能

010 GitHub stars

02Comprehensive state mapping including hover, active, focus, and disabled states

03WCAG AA accessibility compliance and ARIA attribute guidance

04Detailed visual specifications for spacing, typography, and color palettes

05Responsive layout specifications for mobile, tablet, and desktop breakpoints

06Multi-variant support for complex elements like buttons, cards, and modals

ユースケース

01Building a consistent design system from scratch with standardized UI elements

02Auditing and upgrading existing UI components for web accessibility compliance

03Documenting technical specifications for developer handoff and implementation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lexicalninja/my-little-scrum-team component-designer

For use in Claude.ai and ChatGPT

Download Skill