What design styles are included?

The skill includes implementations for Default, Glassmorphism, Neumorphism, Brutalism, and Neo-Brutalism design aesthetics.

Does this skill support Tailwind CSS?

Yes, all component patterns are built using Tailwind CSS classes and Class Variance Authority (CVA) for efficient variant and style management.

What architecture does this skill follow?

It follows the Atomic Design methodology, organizing components into Atoms (buttons, inputs), Molecules (cards, search bars), and Organisms (navigation, tables).

Is the generated code accessible?

Yes, components are built with accessibility as a priority, incorporating ARIA roles, busy states, and screen-reader-only (sr-only) labels.

Frontend Component Patterns

Name: Frontend Component Patterns
Author: Lobbi-Docs

byLobbi-Docs

Design Tools

Generates accessible, multi-style UI components using React, Tailwind CSS, and Class Variance Authority.

About

This skill streamlines frontend development by providing a comprehensive library of UI component patterns with built-in support for diverse design aesthetics, including Glassmorphism, Neumorphism, and Neo-Brutalism. It organizes components using an Atomic Design structure (Atoms, Molecules, Organisms) to ensure scalability and maintainability. Every pattern prioritizes accessibility with proper ARIA roles, keyboard navigation, and semantic HTML, allowing developers to quickly scaffold production-ready interfaces that are both visually striking and inclusive.

Key Features

Atomic Design architecture for organized Atoms, Molecules, and Organisms
0 GitHub stars
Type-safe component patterns using React, TypeScript, and CVA
Multi-style support including Glassmorphism, Neumorphism, and Neo-Brutalism variants
Accessibility-first implementations with built-in ARIA roles and screen reader support
Pre-configured Tailwind CSS utility classes for rapid styling and customization

Use Cases

Implementing complex form layouts with standardized validation styling and feedback
Rapidly prototyping landing pages with specific, non-traditional design aesthetics
Building a scalable and accessible design system for enterprise React applications

About

Key Features

Atomic Design architecture for organized Atoms, Molecules, and Organisms
0 GitHub stars
Type-safe component patterns using React, TypeScript, and CVA
Multi-style support including Glassmorphism, Neumorphism, and Neo-Brutalism variants
Accessibility-first implementations with built-in ARIA roles and screen reader support
Pre-configured Tailwind CSS utility classes for rapid styling and customization

Use Cases

Implementing complex form layouts with standardized validation styling and feedback
Rapidly prototyping landing pages with specific, non-traditional design aesthetics
Building a scalable and accessible design system for enterprise React applications