Menu
Never use raw `<form>` in app code. Use Form or FormContainer from @boilerplate/ui.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | use-form-component |
| description | Never use raw `<form>` in app code. Use Form or FormContainer from @boilerplate/ui. |
| version | 1.0.0 |
When to use: When adding or editing forms in app code (e.g. apps/web, apps/management-web).
Do not use raw <form> in app code. Use one of:
Form (from @boilerplate/ui) – when you need a titled card plus the form. Renders a Card + <form> + Stack; props include title, onSubmit, submitError, children.FormContainer (from @boilerplate/ui) – when the form is already inside a card or other layout. Renders a <form> with optional max-width; props: onSubmit, children, optional constrainWidth, optional className.Stack for consistent vertical spacing (flex column + gap).Stack with gap or Container) rather than a bare div; see avoid-wrapper-elements.Form or FormContainer from @boilerplate/ui, not <form>.<Stack> as the direct child of FormContainer.When changing API routes, auth, or env-dependent behavior, add or update the corresponding integration tests and keep the test file layout consistent.
When adding or changing files under infra/k8s/ or sync targets for k8s, know what Argo CD syncs and remind the user to push to Git so the cluster can sync.
Keeps tools/generate-data seeders and docs in sync when main or management DB schema or ORM entities change. Use when adding or changing tables/entities in packages/orm, packages/management-orm, or infra database migrations.
When changing DB schema or permission dimensions, consider predefined roles and bucket_role / role-related code.
Use when adding or changing environment variables, infra/env/classification YAML, scripts/env-classification, K8s env render, or local env generation.
Common patterns for the Boilerplate HTTP API (Express)