// UI/CSS design patterns and component reference for the RAPID frontend, covering color semantics, button variant selection, status badge colors, dark mode, spacing, and component inventory. Use when implementing UI components, choosing button variants or colors, styling with Tailwind CSS, or checking available shared components.
Deploy RAPID application AWS infrastructure using CDK, including stack deployment, database migrations, and post-deployment verification. Use when explicitly asked to deploy, when running CDK bootstrap for first-time setup, or when deploying after code or infrastructure changes. Only execute when user says "please deploy".
Add new example use cases to the Examples feature, including file setup, metadata registration, thumbnail generation, and link verification. Use when a contributor provides PDF/PNG/TXT files for a new use case, when adding entries to the Examples page, or when verifying existing example GitHub URLs are accessible.
Run build verification and code formatting across all RAPID project components (backend, frontend, CDK). Use after implementing code changes, before committing, after modifying Prisma schema, or before creating a pull request.
Modify the review-item-processor agent's prompts, model configuration, confidence thresholds, JSON output schemas, and tool setup. Use when changing document or image review prompts, adjusting model IDs, modifying output format, updating citation settings, or adding new tools to the agent.
Modify CDK Step Functions workflows (ReviewProcessor and ChecklistProcessor) for the RAPID application, including workflow step changes, Map State concurrency, retry/timeout configuration, error handling, and parameter updates. Use when changing workflow step sequences, adjusting concurrency, modifying retry logic, or adding/removing workflow steps.
Create implementation plans for backend API endpoints and frontend features following RAPID layered architecture (domain/usecase/routes pattern, SWR hooks, feature-based organization). Use when adding or modifying backend APIs, frontend components, database schemas, or repository implementations. Also use for refactoring backend/frontend code.
| name | ui-css-patterns |
| description | UI/CSS design patterns and component reference for the RAPID frontend, covering color semantics, button variant selection, status badge colors, dark mode, spacing, and component inventory. Use when implementing UI components, choosing button variants or colors, styling with Tailwind CSS, or checking available shared components. |
Quick reference for maintaining visual consistency across the RAPID frontend.
| Action Type | Button Variant | Outline | Examples |
|---|---|---|---|
| Submit/Create | primary | false | "Create", "Save", "Compare" |
| Cancel/Back | primary | true | "Cancel", "Back" |
| Delete/Remove | danger | false (strong) / true (soft) | "Delete Checklist" / inline delete |
| Alternative | secondary | false | "Duplicate", "Retry" |
| UI Toggle | text | n/a | "Show More", "Expand Tree" |
| Inline Action | text + size="sm" | n/a | Edit/Delete in tree nodes |
| Table Action | varies | true | "View", "Download" |
Key Pattern: Outlined primary = cancel/dismiss. Filled primary = submit/create.
Color Mappings:
aws-sea-blue-light / aws-sea-blue-darkaws-aquaaws-lab (brand green), green-500 (icons), green-100/800 (badges)red (buttons), red-500 (icons), red-100/800 (badges)yellow-400 (borders), yellow-100/800 (badges)aws-font-color-blue (links), blue-100/800 (badges)grep -r "variant=" frontend/src/features/{similar-feature}/Anti-Patterns:
Toasts: Success -> "success", Error -> "error"
Status Badges: PENDING=Yellow, PROCESSING=Blue, DETECTING=Purple, COMPLETED=Green, FAILED=Red
Review Results: UNDER_REVIEW=Blue, PASS=Green, NOT_PASS=Red, LOW_CONFIDENCE=Yellow, USER_OVERRIDE=AWS Blue
gap-2, gap-4, p-4, p-6)max-w-7xl mx-auto px-4 py-8text-3xl font-bold, Sections: text-xl/text-2xl, Body: text-sm/text-basebg-white dark:bg-aws-squid-ink-dark, text-aws-font-color-light dark:text-aws-font-color-darkRule: Actions near their context, not right-aligned from unrelated labels.
{/* Vertical: Label -> Content -> Action */}
<div>
<span className="text-sm font-medium mb-3 block">{t("filter.label")}</span>
<div className="flex flex-wrap gap-2">{items}</div>
<div className="mt-3">
<Button variant="text" size="sm" onClick={handleClear}>{t("filter.clear")}</Button>
</div>
</div>
Critical: cursor-pointer alone is NOT enough. Elements must LOOK interactive before hovering.
<button className="
cursor-pointer border-2 transition-all
border-light-gray dark:border-aws-ui-color-dark
hover:border-aws-sea-blue-light dark:hover:border-aws-sea-blue-dark
bg-aws-paper-light dark:bg-aws-paper-dark
">
Interactive Tag
</button>
<div className={`transition-all duration-300 ${
isVisible ? 'opacity-100 max-h-10' : 'opacity-0 max-h-0 pointer-events-none'
}`}>
src/components/ before creating new components<button> -> use Button componentalert()/confirm() -> use useAlert hookreact-icons (SVG prohibited)| Use Case | Component | Key Props |
|---|---|---|
| Actions | Button | variant outline size |
| Text input | FormTextField | label error required |
| Textarea | FormTextArea | label rows |
| File upload | FormFileUpload | onFilesSelected accept |
| Modals | Modal | isOpen onClose title |
| Confirmations | useAlert hook | showAlert showConfirm |
| Page header | PageHeader | title description actions |
| Data tables | Table | columns data loading |
| Status badges | StatusBadge | status |
| Loading | Skeleton | count height |
| Pagination | Pagination | currentPage totalPages |
| Errors | ErrorAlert | error title |
| Info | InfoAlert | message variant |
| Breadcrumbs | Breadcrumb | items |
| Segmented control | SegmentedControl | options value onChange |
| Tooltips | Tooltip | content position |
For common layout implementations (page layout, grids, forms, modals, toasts), see references/LAYOUT-PATTERNS.md.