skills.rest
Rkaaaa404
Rkaaaa404COMMUNITY
Explore all skills by this author →
GitHub

create-component

Generates React components following DaaS platform patterns with mandatory Buildpad-first checks.

Updated May 27, 2026
Search Tags:#typescript#react#next.js#component generation#mantine#daas#buildpad
One-click install
npx skills add https://github.com/Rkaaaa404/cyberhack-SYDT --skill create-component-rkaaaa404
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/Rkaaaa404/cyberhack-SYDT/tree/main/.agents/skills/create-component
Command: npx skills add https://github.com/Rkaaaa404/cyberhack-SYDT --skill create-component-rkaaaa404

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building DaaS applications often recreate UI elements that already exist in the Buildpad component library, leading to inconsistent patterns, raw Mantine misuse, and runtime crashes in React Server Components. This Skill enforces a Buildpad-first workflow so generated components reuse the existing 40+ component catalog and follow platform conventions. ## Core Features & Use Cases - Buildpad-First Enforcement: Before generating any .tsx file, it requires reading the Buildpad component reference and checking whether an existing component (Input, SelectDropdown, CollectionList, VForm, etc.) already covers the need. - Pattern-Compliant Generation: Produces TypeScript strict-mode components with JSDoc, correct 'use client' directives for Mantine usage, and proper imports from @/components/ui and @/lib/buildpad. - Post-Generation Validation: Runs a grep-based violation scan to detect forbidden raw Mantine imports (TextInput, Select, DatePicker, useForm) and maps each violation to its Buildpad replacement. - Use Case: When asked to build a new record listing page, the Skill directs you to use CollectionList with search, FilterPanel, permission-gated actions, and pagination instead of hand-rolling a Mantine table. ## Quick Start Ask the assistant to create a new React component such as a batch detail card for the DaaS app, specifying the component name and type.

Frequently Asked Questions about create-component

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

FAQPage Schema
How do I create a React component for a DaaS application?▼

First check the Buildpad component catalog to see if an existing component covers your need, such as Input, SelectDropdown, or CollectionList. If not, generate a custom TypeScript component with proper imports from @/components/ui and run the violation scan afterward.

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

Use Buildpad components for any form input, select, date picker, file upload, or record listing, since the catalog already provides Input, SelectDropdown, DateTime, Upload, and CollectionList. Raw Mantine layout components like Stack, Group, Button, and Modal are fine to use directly.

Why do Mantine components crash in React Server Components?▼

Mantine compound components like Table.Tbody, Modal, and Tabs.Panel resolve to undefined in React Server Components and crash at runtime. Any component using Mantine must include the 'use client' directive, with server-side data passed down as props.

Does VForm support an onSubmit prop for form handling?▼

No, VForm has no onSubmit prop. It follows a controlled component pattern where you pass modelValue and onUpdate, then handle submission externally in your own logic.

What should I use for displaying collection records in a table?▼

Use CollectionList from @/components/ui for any record listing. It provides search, an integrated FilterPanel with badge, permission-gated create buttons, bulk actions, pagination options, and column management out of the box.

Related Skills

Explore More Software Engineering Skills→
Alif-NAlif-N

create-collection

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

Community
Advanced
Alif-NAlif-N

daas-platform

Automate data integration, processing, and synchronization in a DaaS platform.

Community
Advanced
jarosser06jarosser06

linting

Enforce ESLint and strict TypeScript type checking for TypeScript projects.

Community
Intermediate
Alif-NAlif-N

create-component

Generate React components following DaaS patterns and TypeScript standards.

Community
Intermediate