How do I install the Sw Boilerplate UI skill?

Run npx skillmds@latest add chfle/sw-boilerplate-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Sw Boilerplate UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Sw Boilerplate UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Sw Boilerplate UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Sw Boilerplate UI?

chfle (@chfle) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Sw Boilerplate UI by chfle — Agent Skill

Name: Sw Boilerplate UI
Rating: 4.2 (5 reviews)
Author: chfle

File contents

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

---name: sw-boilerplate-uidescription: 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.---# SW Boilerplate UI## OverviewCreates 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 CreateRead `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/uiAll 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```

Frequently asked questions

Sw Boilerplate UI