Base Ui

The base-ui skill provides a foundational library of accessible, unstyled React components designed to build custom user interfaces. It offers a collection of primitives like buttons, inputs, and modals that serve as building blocks for complex applications without imposing a specific design system.

When to use it

• You need lightweight, dependency-free UI components to avoid bloating your project with heavy frameworks.
• Your team requires full control over styling to implement a unique brand identity from scratch.
• You are prototyping rapidly and need reliable primitives for forms, dialogs, and navigation structures.
• You want to reduce bundle size by composing interfaces manually rather than importing entire UI kits.

Key capabilities

• Accessible React component primitives (buttons, inputs, selects).
• Modal and dialog management utilities.
• Form handling components with built-in validation support.
• Layout helpers for grid systems and spacing.

Example prompts

• "Create a login form using base-ui components with email and password fields."
• "Build a modal dialog that opens when a user clicks the 'Edit' button on a list item."
• "Generate a navigation bar using base-ui primitives that supports mobile responsiveness."

Tips & gotchas

Ensure your project has React installed, as these components are built specifically for the React ecosystem. While the library provides accessibility features out of the box, you must still apply your own CSS styles to make the interface visually appealing.