# Sw Boilerplate UI

> 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.

- Skill: `chfle/sw-boilerplate-ui` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add chfle/sw-boilerplate-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chfle/sw-boilerplate-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: chfle (https://skillmd.com/u/chfle)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/chfle/sw-boilerplate-ui

---


# 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
```