skills.rest
BaraArdiwinata
BaraArdiwinataCOMMUNITY
Explore all skills by this author →
GitHub

buildpad-reference

Catalog Buildpad UI components and enforce Buildpad-First rules.

1|Updated May 26, 2026
Search Tags:#react#ui components#ui development#mantine#buildpad
One-click install
npx skills add https://github.com/BaraArdiwinata/hackathon-sima-arome --skill buildpad-reference-baraardiwinata
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: buildpad-reference
Source: https://github.com/BaraArdiwinata/hackathon-sima-arome/tree/main/.agents/skills/buildpad-reference
Command: npx skills add https://github.com/BaraArdiwinata/hackathon-sima-arome --skill buildpad-reference-baraardiwinata

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill serves as a comprehensive reference for Buildpad UI components, their usage, and related rules, streamlining the process of finding and using the correct UI components and ensuring compliance with Buildpad-First principles.

Core Features & Use Cases

  • Component Catalog: Lists all available UI components and hooks for quick reference.
  • Buildpad-First Rule Enforcement: Enforces the use of Buildpad components over raw Mantine components where applicable.
  • Usage Examples: Provides practical examples for integrating various UI components and using related hooks.
  • Utility Functions: Offers utility functions for common operations such as checking if an item is new or existing.

Quick Start

To use the buildpad-reference skill, consult the component catalog or the Buildpad-First rule reference within the provided SKILL.md file.

Frequently Asked Questions about buildpad-reference

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

FAQPage Schema
What are Buildpad UI components and how do they relate to Mantine?▼

Buildpad UI components are predefined React elements that enforce Buildpad-First principles over raw Mantine components. They provide a comprehensive catalog of UI elements and hooks to ensure consistency and efficiency in UI development workflows.

How do I find the correct Buildpad UI component for my React application?▼

To find the correct Buildpad UI component, consult the component catalog within the skill's reference files. This catalog lists all available UI components and hooks along with practical usage examples for integration.

Do I need React and Mantine to use Buildpad UI components?▼

Yes, you need React and Mantine components to implement Buildpad UI components. The skill requires these dependencies to provide its predefined UI elements and enforce Buildpad-First rule compliance during development.

Why should I use Buildpad components instead of raw Mantine components?▼

Using Buildpad components instead of raw Mantine components enforces Buildpad-First principles, ensuring UI consistency and development efficiency. The skill provides predefined components and utility functions to streamline common operations.

Can I check if a UI item is new or existing using Buildpad references?▼

Yes, you can check if a UI item is new or existing using the provided utility functions. The skill offers these utility functions for common operations alongside the component catalog and Buildpad-First rule enforcement.

Related Skills

Explore More Software Engineering Skills→
Alif-NAlif-N

create-component

Generate React components following DaaS patterns and TypeScript standards.

Community
Intermediate
Alif-NAlif-N

buildpad-reference

Reference Buildpad UI components and rules for application development.

Community
Intermediate
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate
Alif-NAlif-N

create-collection

Generate database migrations, API routes, UI pages, TypeScript types, and tests for new DaaS collections.

Community
Advanced