cre8-a2ui-react

CRE8 A2UI React — Agent-to-UI Schema

React component library for the CRE8 design system. 72 components organized by category.

REQUIRED WORKFLOW

You MUST follow this workflow for all CRE8 React UI generation tasks:

1. Pre-Generation: UI Validation

Before writing any code, validate the UI design:

• Use the /ui-designer skill or UI design validator to review the proposed interface
• Confirm component selection matches the use case
• Verify layout structure follows CRE8 patterns
• Check accessibility requirements are addressed

2. Code Generation

Generate the React components using CRE8 React following this schema.

3. Post-Generation: Visual & DevTools Testing (MANDATORY)

After code generation is complete, you MUST perform visual and DevTools testing before marking the task as complete.

Option A: Use /chrome skill (if available)

/chrome

Then navigate to the running React app (e.g., http://localhost:3000) and verify rendering.

Option B: Use Chrome DevTools MCP

If the user doesn't have browser automation configured, help them add this to their MCP settings:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Then use Chrome DevTools MCP to:

• Open the React app in Chrome
• Verify all components render correctly
• Check for console errors or warnings
• Inspect responsive behavior at different viewport sizes
• Validate no missing design tokens or broken styles
• Test component interactivity (buttons, forms, modals)

4. Verification Checklist

Before marking complete, confirm:

• UI design was validated before generation
• React app compiles without errors
• All CRE8 components render with proper styling
• Design tokens CSS is properly imported
• No console errors related to missing dependencies
• Interactive elements function correctly
• Layout is responsive and doesn't break at common breakpoints

DO NOT mark the task as complete until visual testing confirms the UI renders correctly.

System Overview

library: "@tmorrow/cre8-react"
version: "1.0.0"
framework: React
componentCount: 72
naming: PascalCase (Cre8Button, Cre8Card, etc.)

Required Setup

1. Install Dependencies

npm install @tmorrow/cre8-react @cre8_dev/cre8-design-tokens

2. Import Design Tokens (REQUIRED)

Add this import to your app's entry point (e.g., index.tsx, App.tsx, or main.tsx):

// Design tokens - MUST be imported before using any Cre8 components
import '@cre8_dev/cre8-design-tokens/lib/web/brands/cre8/css/tokens_cre8.css';

Important: The design tokens provide all CSS custom properties (--cre8-*) that components depend on. Without this import, components will render without proper styling.

3. Import Components

import { Cre8Button, Cre8Card, Cre8Field } from '@tmorrow/cre8-react';

Component Categories

Category	Count	Key Components
Actions	2	Cre8Button, Cre8DangerButton
Forms	10	Cre8Field, Cre8Select, Cre8CheckboxField, Cre8RadioField, Cre8DatePicker
Layout	10	Cre8Layout, Cre8Card, Cre8Grid, Cre8Section, Cre8Hero, Cre8Band
Typography	3	Cre8Heading, Cre8TextPassage, Cre8TextLink
Navigation	16	Cre8Header, Cre8Footer, Cre8GlobalNav, Cre8PrimaryNav, Cre8Tabs, Cre8Breadcrumbs
Disclosure	7	Cre8Accordion, Cre8Modal, Cre8Dropdown, Cre8Popover, Cre8Tooltip
Feedback	7	Cre8Alert, Cre8Badge, Cre8LoadingSpinner, Cre8ProgressMeter
Data	14	Cre8Table, Cre8List, Cre8LinkList, Cre8Tag, Cre8Chart
Media	2	Cre8Icon, Cre8Logo
Marketing	2	Cre8Feature, Cre8PageHeader

Quick Patterns

Page Layout

<Cre8Layout>
  <Cre8Header>
    <Cre8GlobalNav>
      <Cre8GlobalNavItem href="/">Home</Cre8GlobalNavItem>
    </Cre8GlobalNav>
  </Cre8Header>
  <main>
    <Cre8LayoutContainer>
      {/* Page content */}
    </Cre8LayoutContainer>
  </main>
  <Cre8Footer />
</Cre8Layout>

Login Form

<Cre8Card>
  <Cre8Heading type="h2">Sign In</Cre8Heading>
  <Cre8Field label="Email" type="email" />
  <Cre8Field label="Password" type="password" />
  <Cre8Button text="Sign In" variant="primary" fullWidth />
</Cre8Card>

Data Table

<Cre8Table>
  <Cre8TableHeader>
    <Cre8TableRow>
      <Cre8TableHeaderCell>Name</Cre8TableHeaderCell>
      <Cre8TableHeaderCell>Status</Cre8TableHeaderCell>
    </Cre8TableRow>
  </Cre8TableHeader>
  <Cre8TableBody>
    <Cre8TableRow>
      <Cre8TableCell>Item 1</Cre8TableCell>
      <Cre8TableCell><Cre8Badge text="Active" /></Cre8TableCell>
    </Cre8TableRow>
  </Cre8TableBody>
</Cre8Table>

Tabbed Content

<Cre8Tabs>
  <Cre8Tab label="Tab 1" selected />
  <Cre8Tab label="Tab 2" />
  <Cre8TabPanel>Content for Tab 1</Cre8TabPanel>
  <Cre8TabPanel>Content for Tab 2</Cre8TabPanel>
</Cre8Tabs>

Reference Files

Load component details as needed:

• references/actions.md — Cre8Button, Cre8DangerButton
• references/forms.md — Field, Select, Checkbox, Radio, DatePicker
• references/layout.md — Layout, Card, Grid, Section, Hero, Band
• references/navigation.md — Header, Footer, Nav components, Tabs, Breadcrumbs
• references/disclosure.md — Accordion, Modal, Dropdown, Popover, Tooltip
• references/feedback.md — Alert, Badge, LoadingSpinner, Progress
• references/data.md — Table, List, LinkList, Tag, Chart

AI Implementation Rules

Buttons

• Use variant="primary" for main CTA (one per view)
• Use variant="secondary" for secondary actions
• Use Cre8DangerButton only for destructive actions
• Keep text short: max 3 words, Title Case

Forms

• Always provide label for form fields
• Use appropriate type for Cre8Field (email, password, tel, etc.)
• Group related checkboxes in Cre8CheckboxField
• Group radio buttons in Cre8RadioField with shared name

Layout

• Wrap pages in Cre8Layout
• Use Cre8LayoutContainer for max-width content
• Use Cre8Card to group related content
• Use Cre8Grid + Cre8GridItem for grid layouts

Navigation

• Use Cre8Header with Cre8GlobalNav for site header
• Use Cre8PrimaryNav for main navigation
• Use Cre8Breadcrumbs for hierarchical navigation
• Use Cre8Tabs for content switching

Feedback

• Use status prop: "info", "success", "warning", "error"
• Use Cre8Alert for page-level messages
• Use Cre8InlineAlert for contextual messages
• Use Cre8Badge for status indicators