메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when user wants to write, generate, create, or optimize a docker-compose.yml — for a new project, an existing stack, any self-hosted app, or when they want to replace a cloud service (Google Drive, Gmail, GitHub, Slack, Notion, ChatGPT, etc.) with a self-hosted alternative.
Use when user wants to generate code for a use case or user story, says "code UC-01", "implement US-03", "generate all MVP", "scaffold UC-05 UC-07", or wants production-ready files from use-cases.md and tech-stack.yaml written directly into the project root.
Use when user wants to audit, review, analyze, or improve a Linux config file — nginx, Apache, sshd_config, systemd service/timer/socket units, iptables, nftables, firewalld, fail2ban, sudoers, /etc/security/limits.conf, sysctl.conf, or any server config — for security issues, misconfigurations, performance problems, or compliance gaps.
Use when user wants to tune Linux performance — kernel parameters, CPU governor, I/O scheduler, memory and swap settings, network stack tuning, database tuning (PostgreSQL, MySQL, Redis), high-throughput or low-latency optimization, profiling slow systems, or asks why their server is slow, has high load, or underperforms.
Use when user wants to scaffold a complete project boilerplate, says "create boilerplate", "set up the project", "generate the skeleton", or wants all project files created from requirements/tech-stack.yaml directly in the workspace root.
Use when user wants to create, generate, or visualize a diagram from an idea, requirement, sw-idea-analyzer output, or any description – supports Mermaid flowchart, sequence, class, ERD, C4, gantt, mindmap, PlantUML, and ASCII art fallback.
| 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 |
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.
requirements/tech-stack.yaml must exist. If missing, stop:
requirements/tech-stack.yamlnot found. Run/sw-tech-stack-plannerfirst.
Read frontend.framework, frontend.ui_library, and frontend.language from tech-stack.yaml.
| 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 |
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 |
| 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) |
| 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.
| Path | Content |
|---|---|
src/main.ts | createApp(App).mount('#app') |
src/App.vue | Root component with <RouterView /> |
src/assets/main.css | Base styles |
Skip all files. Print completion line only.
✅ sw-boilerplate-ui completed