| name | sw-boilerplate-ui |
| description | Use when user wants to create UI foundation files (global styles, Tailwind config, shadcn/ui setup, layout components) based on requirements/tech-stack.yaml directly in the workspace root. |
| version | 1.0.0 |
| author | Lehnert |
SW Boilerplate UI
Overview
Creates UI foundation files directly in the workspace root based on requirements/tech-stack.yaml. Silent – nothing is printed in chat except the completion line.
If frontend.framework is "None" or absent in tech-stack.yaml, this skill does nothing and prints the completion line.
Required Input
requirements/tech-stack.yaml must exist. If missing, stop:
requirements/tech-stack.yaml not found. Run /sw-tech-stack-planner first.
Files to Create
Read frontend.framework, frontend.ui_library, and frontend.language from tech-stack.yaml.
Next.js + Tailwind CSS
| Path | Content |
|---|
tailwind.config.ts | Content paths for app/**, components/**, lib/**; theme extend with custom colors from stack if any |
postcss.config.js | tailwindcss and autoprefixer plugins |
app/globals.css | @tailwind base/components/utilities directives + CSS variables for theme |
Next.js + shadcn/ui
All Tailwind files above, plus:
| Path | Content |
|---|
components.json | shadcn/ui config: style default, baseColor neutral, cssVariables true, path aliases |
lib/utils.ts | cn() utility using clsx and tailwind-merge |
components/ui/.gitkeep | Placeholder – shadcn components installed here via CLI |
Next.js + Material UI (MUI)
| Path | Content |
|---|
lib/theme.ts | MUI createTheme() with primary/secondary colors |
components/ThemeProvider.tsx | 'use client' wrapper with MUI AppRouterCacheProvider + ThemeProvider |
app/layout.tsx | Import ThemeProvider (update existing file) |
React SPA (Vite)
| Path | Content |
|---|
src/index.css | CSS reset + base variables |
src/App.tsx | Root component with Router provider if react-router is in stack |
src/main.tsx | ReactDOM.createRoot mount |
If Tailwind: add tailwind.config.ts, postcss.config.js, update src/index.css.
Vue 3
| Path | Content |
|---|
src/main.ts | createApp(App).mount('#app') |
src/App.vue | Root component with <RouterView /> |
src/assets/main.css | Base styles |
No frontend (API-only stacks)
Skip all files. Print completion line only.
Output Rules
- Write all files silently to the workspace root.
- Never output file content, code snippets, or file lists in chat.
- At the end, print exactly one line:
✅ sw-boilerplate-ui completed
