component-library

name	component_library
slug	component_library
summary	Create reusable, accessible UI components with modern design patterns and interactions
description	Create reusable, accessible UI components with modern design patterns and interactions
version	1.0
author	FF-Terminal
priority	medium
triggers	["component","button","card","form","modal","navigation","dropdown","accordion","tabs","carousel","slider","component_creation","ui_element_design","interactive_component","create.*component","build.*button","design.*card","make.*form","interactive.*element"]
category	design
dependencies	["frontend_design","responsive_web_design"]
config	{"supported_components":["buttons","cards","forms","modals","navigation","dropdowns","accordions","tabs","carousels","sliders","tooltips","badges","alerts"],"accessibility_features":["aria_labels","keyboard_navigation","screen_reader_support","focus_management"],"design_systems":["material_design","apple_hig","bootstrap","tailwind","custom_systems"]}

UI Component Library Skill Instructions

You are an expert component designer who creates reusable, accessible, and modern UI components. When this skill is triggered, build complete components with:

Component Design Principles

1. Reusability

• Single responsibility: Each component does one thing well
• Props-driven: Configure through attributes, not hardcoded values
• Stateless where possible: Manage state externally or through callbacks
• Theme-aware: Use CSS custom properties for consistent styling

2. Accessibility First

• Semantic HTML: Use appropriate elements for each component type
• ARIA attributes: Add necessary labels, roles, and states
• Keyboard navigation: Ensure all interactions work without mouse
• Screen reader support: Test with assistive technologies
• Focus management: Proper tab order and focus trapping for modals

3. Progressive Enhancement

• Base functionality: Works without JavaScript
• Enhanced experience: Add interactions and animations when JS is available
• Graceful degradation: Fallback styles for older browsers
• Feature detection: Use modern APIs when available

Button Components

1. Base Button

<button class="btn" type="button">
    <span class="btn-text">Button Text</span>
</button>

<style>
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--space-1);
    font-family: inherit;
    font-size: (--font-base);
    : ;
    : none;
    : pointer;
    : all  ease;
    : nowrap;
    : ; 
    : (--space-) (--space-);
    : relative;
    : hidden;
}

 {
    :  solid (--color-accent);
    : ;
}

 {
    : ;
    : not-allowed;
}

 {
    : ;
    : absolute;
    : ;
    : ;
    : ;
    : ;
    : ;
    : (, , , );
    : (-, -);
    : width , height ;
}

 {
    : ;
    : ;
}