Help us improve
Share bugs, ideas, or general feedback.
From cre8
Agent-to-UI schema for CRE8 React Components (@tmorrow/cre8-react). Use when building React UIs with CRE8/Innovexa design system, generating React pages or applications using Cre8* components, creating landing pages, dashboards, forms, or any React UI with the CRE8 component library. Triggers on requests mentioning CRE8 React, @tmorrow/cre8-react, Innovexa React components, or building React UI with the CRE8 design system. Provides 72 React components with props, patterns, and usage examples.
npx claudepluginhub tmorrowdev/cre8-pluginHow this skill is triggered — by the user, by Claude, or both
Slash command
/cre8:cre8-a2ui-reactThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
React component library for the CRE8 design system. 72 components organized by category.
Guides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
React component library for the CRE8 design system. 72 components organized by category.
You MUST follow this workflow for all CRE8 React UI generation tasks:
Before writing any code, validate the UI design:
/ui-designer skill or UI design validator to review the proposed interfaceGenerate the React components using CRE8 React following this schema.
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:
Before marking complete, confirm:
DO NOT mark the task as complete until visual testing confirms the UI renders correctly.
library: "@tmorrow/cre8-react"
version: "1.0.0"
framework: React
componentCount: 72
naming: PascalCase (Cre8Button, Cre8Card, etc.)
npm install @tmorrow/cre8-react @cre8_dev/cre8-design-tokens
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.
import { Cre8Button, Cre8Card, Cre8Field } from '@tmorrow/cre8-react';
| 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 |
<Cre8Layout>
<Cre8Header>
<Cre8GlobalNav>
<Cre8GlobalNavItem href="/">Home</Cre8GlobalNavItem>
</Cre8GlobalNav>
</Cre8Header>
<main>
<Cre8LayoutContainer>
{/* Page content */}
</Cre8LayoutContainer>
</main>
<Cre8Footer />
</Cre8Layout>
<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>
<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>
<Cre8Tabs>
<Cre8Tab label="Tab 1" selected />
<Cre8Tab label="Tab 2" />
<Cre8TabPanel>Content for Tab 1</Cre8TabPanel>
<Cre8TabPanel>Content for Tab 2</Cre8TabPanel>
</Cre8Tabs>
Load component details as needed:
variant="primary" for main CTA (one per view)variant="secondary" for secondary actionsCre8DangerButton only for destructive actionslabel for form fieldstype for Cre8Field (email, password, tel, etc.)Cre8CheckboxFieldCre8RadioField with shared nameCre8LayoutCre8LayoutContainer for max-width contentCre8Card to group related contentCre8Grid + Cre8GridItem for grid layoutsCre8Header with Cre8GlobalNav for site headerCre8PrimaryNav for main navigationCre8Breadcrumbs for hierarchical navigationCre8Tabs for content switchingstatus prop: "info", "success", "warning", "error"Cre8Alert for page-level messagesCre8InlineAlert for contextual messagesCre8Badge for status indicators