From east
UI component definitions for the East language. Use when building UIs with @elaraai/east-ui. Triggers for: (1) Creating UI components with Stack, Box, Grid, Card, Text, Button, (2) Building forms with Input, Select, Checkbox, Switch, Slider, (3) Displaying data with Table, DataList, Chart, Badge, Tag, Stat, (4) Using overlays like Dialog, Drawer, Popover, Tooltip, Menu, (5) Working with UIComponentType, (6) Styling with variants (FontWeight, TextAlign, ColorScheme, Size).
How this skill is triggered — by the user, by Claude, or both
Slash command
/east:east-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
UI component definitions for the East language. Components return data structures describing UI layouts rather than rendering directly, enabling portability across different rendering environments.
UI component definitions for the East language. Components return data structures describing UI layouts rather than rendering directly, enabling portability across different rendering environments.
import { East, ArrayType } from "@elaraai/east";
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";
// Define a UI component
const MyComponent = East.function(
[],
UIComponentType,
$ => {
return Stack.Root([
Text.Root("Hello, World!", { fontSize: "xl", fontWeight: "bold" }),
Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
], { gap: "4", direction: "column" });
}
);
// Convert to IR for serialization or rendering
const ir = MyComponent.toIR();
Task -> What do you need?
|
+-- Layout (containers)
| +-- Box -> Generic container with flexbox styling
| +-- Stack -> Vertical or horizontal stack (.Root, .HStack, .VStack)
| +-- Grid -> CSS Grid layout (.Root, .Item)
| +-- Splitter -> Resizable split panels
| +-- Separator -> Visual divider
|
+-- Typography
| +-- Text -> Basic text display
| +-- Code -> Inline code
| +-- Heading -> Section headings
| +-- Link -> Hyperlinks
| +-- List -> Ordered/unordered lists
| +-- CodeBlock -> Multi-line code blocks
|
+-- Buttons
| +-- Button -> Standard button with variants
| +-- IconButton -> Icon-only button
|
+-- Forms
| +-- Input -> Text, Integer, Float, DateTime inputs
| +-- Select -> Dropdown selection (.Root, .Item)
| +-- Checkbox -> Boolean checkbox
| +-- Switch -> Toggle switch
| +-- Slider -> Range slider
| +-- Textarea -> Multi-line text
| +-- TagsInput -> Tag/chip input
| +-- FileUpload -> File upload
| +-- Field -> Form field wrapper with label
|
+-- Collections
| +-- Table -> Data tables (.Root, .Row, .Cell)
| +-- DataList -> Key-value list (.Root, .Item)
| +-- TreeView -> Hierarchical tree
| +-- Gantt -> Gantt chart timeline
|
+-- Charts
| +-- Chart.Area, Chart.Bar, Chart.Line, Chart.Pie
| +-- Chart.Radar, Chart.Scatter
| +-- Chart.BarList, Chart.BarSegment
| +-- Sparkline -> Inline mini charts
|
+-- Display
| +-- Badge -> Status indicators
| +-- Tag -> Labels/tags
| +-- Avatar -> User avatars
| +-- Stat -> Statistics display
| +-- Icon -> Icons
|
+-- Feedback
| +-- Alert -> Alert messages
| +-- Progress -> Progress indicators
|
+-- Disclosure
| +-- Accordion -> Collapsible sections (.Root, .Item)
| +-- Tabs -> Tabbed content
| +-- Carousel -> Image/content carousel
|
+-- Overlays
| +-- Dialog -> Modal dialogs
| +-- Drawer -> Side drawers
| +-- Popover -> Popovers
| +-- Tooltip -> Tooltips
| +-- Menu -> Context menus
| +-- HoverCard -> Hover cards
|
+-- Container
+-- Card -> Content card with header/body
All components follow a consistent namespace pattern:
import { Badge, Stack, Button } from "@elaraai/east-ui";
// Create component using .Root()
const badge = Badge.Root("New", { variant: "solid", colorPalette: "green" });
// Compound components have sub-factories
const stack = Stack.Root([
Text.Root("Item 1"),
Text.Root("Item 2"),
], { gap: "4" });
// Access East types via .Types
const badgeType = Badge.Types.Badge;
const styleType = Badge.Types.Style;
Components accept style options with Chakra UI tokens:
Button.Root("Click", {
variant: "solid", // solid, outline, subtle, ghost
colorPalette: "blue", // gray, red, orange, yellow, green, teal, blue, purple, pink
size: "md", // xs, sm, md, lg
});
Text.Root("Hello", {
fontSize: "xl",
fontWeight: "bold", // normal, medium, semibold, bold
color: "gray.600",
});
Stack.Root([...], {
gap: "4", // Chakra spacing tokens
direction: "row", // row, column
align: "center", // flex alignment
});
npx claudepluginhub elaraai/east-plugin --plugin eastGenerates copy-pasteable, responsive UI components like navbars, cards, modals, sidebars, and pricing pages. Adapts to project's React, Vue, Svelte, Tailwind, Bootstrap, or HTML/CSS stack.
Guides building production-quality UIs with component architecture, accessibility, and state management. Use when creating or modifying user-facing interfaces.
Installs, configures, and implements shadcn/ui React components with Tailwind CSS, React Hook Form, Zod for accessible UIs like buttons, forms, dialogs, tables.