SkillsAdd

smithery.ai

ui-component-builder

Build reusable UI components with modern frameworks like React, Vue, and vanilla JavaScript. Creates accessible, responsive, and customizable interface elements including buttons, forms, modals, navigation, and complex widgets.

First seen Mar 24, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
react:components Similar name
google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking an…

50.7K installs
building-components Similar name
vercel/components.build

Guide for building modern, accessible, and composable UI components. Use when building new comp…

12.5K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,471 B
  • docs SUMMARY.md 255 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

UI Component Builder

Create modern, reusable UI components with clean code, accessibility features, and responsive design for web applications and design systems.

When to Use This Skill

Use this skill for:

  • Building design system components
  • Creating reusable interface elements
  • Developing interactive widgets
  • Prototyping new UI patterns
  • Converting designs to code
  • Building accessible components
  • Creating component libraries

Component Categories

Basic Components

  • Buttons: Primary, secondary, outline, icon, loading states
  • Inputs: Text, email, password, textarea, select, checkbox, radio
  • Typography: Headings, paragraphs, lists, code blocks
  • Images: Responsive images, avatars, thumbnails, galleries
  • Icons: SVG icons, icon fonts, custom graphics

Layout Components

  • Grid Systems: Flexible grid layouts with breakpoints
  • Containers: Wrappers, sections, cards, panels
  • Navigation: Headers, sidebars, breadcrumbs, pagination
  • Spacing: Margins, padding, dividers, spacers

Interactive Components

  • Modals: Dialogs, popups, overlays, confirmations
  • Dropdowns: Menus, selects, autocomplete, combobox
  • Tabs: Tab panels, accordion, collapsible sections
  • Forms: Complete forms, validation, multi-step wizards

Advanced Components

  • Data Display: Tables, charts, progress bars, badges
  • Media: Video players, audio controls, image carousels
  • Feedback: Alerts, notifications, tooltips, loading states
  • Navigation: Mega menus, sidebar navigation, mobile menus

Technical Standards

Framework Support

Generate components for:

  • React: Modern hooks, TypeScript support, proper props
  • Vue: Composition API, TypeScript, reactive properties
  • Vanilla JS: Modern ES6+, Web Components, no dependencies
  • Svelte: Reactive declarations, component lifecycle
  • Angular: Component architecture, reactive forms

Accessibility Features

All components include:

  • ARIA Labels: Proper labeling for screen readers
  • Keyboard Navigation: Tab order, focus management
  • Color Contrast: WCAG AA compliance (4.5:1 ratio)
  • Semantic HTML: Proper element usage and structure
  • Focus Indicators: Visible focus states for all interactive elements

Responsive Design

Components work across:

  • Mobile First: Optimized for small screens
  • Breakpoint System: sm, md, lg, xl viewport sizes
  • Touch Friendly: Adequate touch targets (44px minimum)
  • Flexible Layouts: Adapts to container constraints

Implementation Features

Customization Options

  • Theme Variables: CSS custom properties for easy theming
  • Size Variants: Small, medium, large sizing options
  • Color Schemes: Primary, secondary, success, warning, error
  • Style Variants: Filled, outlined, text, ghost styles

Code Quality

  • Clean Structure: Semantic HTML with proper nesting
  • Efficient CSS: Modern CSS with minimal specificity
  • Performance: Optimized for fast rendering and interaction
  • Documentation: Inline comments and usage examples

Create production-ready components that enhance user experience and development efficiency.