skills.rest
Holymir
HolymirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-components

Generate HTML structures for UI components like buttons and forms.

Updated Mar 6, 2026
Search Tags:#ui#html#accessibility#frontend#design system#css#components
One-click install
npx skills add https://github.com/Holymir/liquid-arc --skill ui-components-holymir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/Holymir/liquid-arc/tree/main/.claude/skills/frontend-skills/ui-components
Command: npx skills add https://github.com/Holymir/liquid-arc --skill ui-components-holymir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized set of UI patterns and components to ensure visual consistency and accessibility across all applications, reducing development time and improving user experience.

Core Features & Use Cases

  • Component Library: Offers pre-defined styles and structures for common UI elements like buttons, forms, cards, and lists.
  • Accessibility Focus: Includes patterns for screen reader support, focus states, and proper label association.
  • Use Case: When designing a new feature, developers can reference these patterns to quickly implement elements like a primary button, a form input with validation, or a status badge, ensuring they align with the existing design system.

Quick Start

Use the ui-components skill to generate the HTML structure for a primary button with an icon.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I build accessible UI components for a web frontend?▼

To build accessible UI components, reference pre-defined patterns for buttons, forms, and cards that include screen reader support, focus states, and proper label association to ensure consistency across web applications.

What is the best way to standardize HTML and CSS for common UI elements?▼

Standardizing HTML and CSS involves applying a comprehensive library of pre-defined styles for elements like badges, tables, and file uploads, ensuring visual consistency and maintainability across modern web applications.

Can I use these frontend UI patterns to quickly implement form validation?▼

Yes, you can use these frontend UI patterns to quickly implement form inputs with validation, status badges, and primary buttons, ensuring they align with an existing accessible design system without starting from scratch.

Do I need a specific design system framework to use these UI component patterns?▼

No specific design system framework is required. These UI component patterns provide raw HTML structures and CSS styles that adhere to modern web design principles, allowing integration into any existing frontend workflow.

How do I add an icon to a primary button using accessible HTML?▼

To add an icon to a primary button using accessible HTML, generate the provided HTML structure for a primary button with an icon, which ensures proper focus states and screen reader compatibility out of the box.

Why does my frontend design lack visual consistency across different web applications?▼

Frontend design lacks visual consistency when standardized UI patterns are missing. Applying a shared library of pre-defined styles for lists, cards, and forms reduces development time and improves user experience.

Related Skills

Explore More Design & Creative Skills→
royhenengelroyhenengel

artifacts-builder

Create multi-component HTML artifacts with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
raybargasraybargas

Frontend Responsive

Implement responsive frontend layouts using HTML, CSS, and JavaScript across breakpoints.

Community
Basic
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate