From rafters
Use when building frontend UI in a Rafters project -- enforces Container, Grid, typography components, and design token usage.
How this skill is triggered — by the user, by Claude, or both
Slash command
/rafters:rafters-frontendThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Container and Grid handle ALL layout. You do not write layout code.
Container and Grid handle ALL layout. You do not write layout code.
// WRONG
<div className={classy("flex gap-4 p-6")}>
// RIGHT
<Container>
<Grid preset="sidebar-main">
<aside>Sidebar</aside>
<main>Content</main>
</Grid>
</Container>
Never use: flex, grid, gap-, p-, m-, items-, justify-*
| Preset | Use for |
|---|---|
| sidebar-main | Navigation + content |
| form | Label/input pairs |
| cards | Responsive card grid |
| row | Horizontal group |
| stack | Vertical sequence |
| split | Equal columns |
| Instead of | Use |
|---|---|
<p className="text-sm text-muted-foreground"> | <P size="sm" color="muted"> |
<p> | <P> |
<h1 className="text-4xl font-bold"> | <H1> |
<h2> | <H2> |
<h3> | <H3> |
<span className="text-xs"> | <Small> |
<span className="text-lg font-semibold"> | <P size="lg" weight="semibold"> |
For .astro files, use the individual tag components:
---
import H1 from '@/components/ui/typography-h1.astro'
import P from '@/components/ui/typography-p.astro'
import Code from '@/components/ui/typography-code.astro'
---
<H1>Page Title</H1>
<P size="xl" color="muted">Lead paragraph.</P>
<P>Use the <Code>useState</Code> hook.</P>
All Astro typography components support token props: size, weight, color, line, tracking, family.
Use semantic tokens as Tailwind classes: bg-primary, text-destructive, border-success.
Never use hex, HSL, OKLCH, or palette internals directly. Never use var(--rafters-...) in components.
Before making design decisions, query the Rafters MCP tools:
| Question | Tool |
|---|---|
| What colors/spacing/components exist? | rafters_vocabulary |
| How should I implement this pattern? | rafters_pattern |
| Full intelligence for a component? | rafters_component |
| Token derivation and overrides? | rafters_token |
import { Container, Grid } from "@rafters/ui"
import { H1, P } from "@rafters/ui/components/ui/typography"
import { Card } from "@rafters/ui/components/ui/card"
import { Button } from "@rafters/ui/components/ui/button"
export default function Page() {
return (
<Container>
<H1>Title</H1>
<P size="xl">Description.</P>
<Grid preset="cards">
<Card>...</Card>
<Card>...</Card>
</Grid>
<Grid preset="row">
<Button variant="secondary">Cancel</Button>
<Button>Save</Button>
</Grid>
</Container>
)
}
No flex. No gap. No padding. No text utilities. No var().
npx claudepluginhub rafters-studio/rafters --plugin raftersEnforces React UI consistency using shadcn/ui primitives, semantic Tailwind tokens, and responsive layouts. Guides building/refactoring components, screens, forms, dialogs for design system adherence.
Builds accessible, responsive, performant frontend components using design systems, modern CSS, WCAG patterns, and React/Vue/Svelte examples.
Builds scalable Tailwind CSS design systems using design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, theming, UI standardization, and dark mode setup.