From sui-plugin
Scaffold a SUI app layout (app bar, navigation drawer, footer, grid). Use when the user asks to create a page layout, app shell, or wants help structuring a Vue app using @khsura/sui.
How this skill is triggered — by the user, by Claude, or both
Slash command
/sui-plugin:sui-layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffold a SUI layout for: $ARGUMENTS
Scaffold a SUI layout for: $ARGUMENTS
Ask the user the following if not already clear from $ARGUMENTS:
Then generate a complete Vue SFC using these rules:
Layout rules:
SLayout name="app" is always the rootfor="app" to match the layout nameSAppBar for="app" — top bar (use #prepend for hamburger, #append for right-side actions)SNavigationDrawer for="app" v-model="drawer" — sidebarSMain for="app" — wraps all page contentSFooter for="app" — optional bottom barSBottomNavigation for="app" v-model="activeNav" — mobile-only bottom tabsSSpacer inside SAppBar to push items rightSButton variant="icon" + SIcon for toolbar icon buttonsGrid rules:
SContainer > SRow > SColumn for responsive gridsSColumn props: :cols (default), :sm, :md, :lg — values 1–12, 'auto', or 'grow'SRow props: align, justify, noGutters, fillHeight, dense, gapAllowed prop values (use these, not CSS/flex names like flexEnd):
| Component | Prop | Allowed values |
|---|---|---|
| SRow | align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' |
| SRow | justify | 'start' | 'center' | 'end' | 'spaceAround' | 'spaceBetween' |
| SColumn | cols, sm, md, lg | 1–12 | 'auto' | 'grow' |
| SColumn | alignSelf | 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | etc. (CSS align-self values) |
Do not use flexStart, flexEnd, or space-between (kebab) — use start, end, and spaceAround / spaceBetween (camelCase).
Imports: all from @khsura/sui
Reference template:
<template>
<SLayout name="app">
<SAppBar for="app" color="primary" elevate-on-scroll>
<template #prepend>
<SButton variant="icon" @click="drawer = !drawer">
<SIcon icon="mdi-menu" />
</SButton>
</template>
<SAppBarTitle>My App</SAppBarTitle>
<template #append>
<SButton variant="icon">
<SIcon icon="mdi-account" />
</SButton>
</template>
</SAppBar>
<SNavigationDrawer for="app" v-model="drawer">
<SList>
<SListItem
v-for="item in navItems"
:key="item.to"
:to="item.to"
link
>
<SListItemIcon><SIcon :icon="item.icon" /></SListItemIcon>
<SListItemContent>
<SListItemTitle>{{ item.title }}</SListItemTitle>
</SListItemContent>
</SListItem>
</SList>
</SNavigationDrawer>
<SMain for="app">
<SContainer>
<router-view />
</SContainer>
</SMain>
</SLayout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
SLayout, SAppBar, SAppBarTitle, SNavigationDrawer, SMain,
SContainer, SList, SListItem, SListItemIcon, SListItemContent,
SListItemTitle, SIcon, SButton, SSpacer,
} from '@khsura/sui'
const drawer = ref(false)
const navItems = [
{ title: 'Home', icon: 'mdi-home', to: '/' },
{ title: 'Settings', icon: 'mdi-cog', to: '/settings' },
]
</script>
Adapt this to match the user's requirements. Replace placeholder content, nav links, and colors with actual values.
npx claudepluginhub khsura/sui --plugin sui-pluginCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.