tessleng/ui
Implement frontend designs from figma using Chakra UI v3 and Storybook
92
92%
Does it follow best practices?
Impact
92%
1.64xAverage score across 6 eval scenarios
Advisory
Suggest reviewing before use
TOKENS.mdskills/building-composite-components/
Design Token Reference
All visual properties must use design tokens — never hardcode raw values. When a Figma value doesn't map to an existing token, add a new semantic token to src/components/ui/Provider.tsx.
Tailwind-to-Chakra Mapping
The Figma MCP output uses React + Tailwind. Translate all utility classes to Chakra style props:
| Tailwind Pattern | Chakra v3 Equivalent |
|---|---|
<div className="flex"> | <Flex> or <HStack> / <VStack> |
<div className="grid"> | <Grid> or <SimpleGrid> |
<div className="space-y-4"> | <Stack gap="4"> |
<p className="text-sm text-gray-500"> | <Text fontSize="sm" color="fg.muted"> |
<h2 className="text-xl font-bold"> | <Heading size="xl"> |
<button className="..."> | <Button> or <IconButton> |
<input className="..."> | <Input> |
| Padding/margin classes | Style props: p, px, py, m, mx, my |
rounded-lg | borderRadius="lg" |
gap-4 | gap="4" |
Color Tokens
Never use hex codes, rgb(), or named CSS colors directly in components.
| Purpose | Token | Example |
|---|---|---|
| Primary text | fg | <Text color="fg"> |
| Secondary text | fg.muted | <Text color="fg.muted"> |
| Tertiary text | fg.subtle | <Text color="fg.subtle"> |
| Borders | border.muted | <Box borderColor="border.muted"> |
| Subtle backgrounds | bg.muted | <Box bg="bg.muted"> |
| Page background | skills.pageBg | <Box bg="skills.pageBg"> |
| Card background | skills.cardBg | <Box bg="skills.cardBg"> |
| Card hover | skills.cardHoverBg | <Box _hover={{ bg: "skills.cardHoverBg" }}> |
Spacing Tokens
Use Chakra's spacing scale for all padding, margin, and gap values. If a Figma value falls between tokens, use the closest one. Only use raw pixel values as an absolute last resort with a comment explaining why.
| Figma px | Chakra Token |
|---|---|
| 4px | "1" |
| 8px | "2" |
| 12px | "3" |
| 16px | "4" |
| 20px | "5" |
| 24px | "6" |
| 32px | "8" |
| 40px | "10" |
| 48px | "12" |
| 64px | "16" |
Typography Tokens
- Font family: Atkinson Hyperlegible Next (body/heading), Atkinson Hyperlegible Mono (
fontFamily="mono"for code). Never specify font names directly. - Font size:
xs,sm,md,lg,xl,2xl, etc. - Font weight:
normal,medium,semibold,bold - Line height:
shorter,short,base,tall,taller
Border Radius Tokens
| Figma px | Chakra Token |
|---|---|
| 4px | l1 (project custom) |
| 6px | l2 (project custom) |
| 8px | md |
| 12px | lg |
| 16px | xl |
| 9999px | full |
Extending the Theme
Add new tokens in src/components/ui/Provider.tsx, grouped by feature name:
const customConfig = defineConfig({
theme: {
semanticTokens: {
colors: {
myFeature: {
accent: { value: '#...' },
accentMuted: { value: '#...' },
},
},
},
},
});