skills.rest
chfle
chfleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sw-boilerplate-ui

Scaffold UI foundation files from requirements/tech-stack.yaml for detected frontend stacks.

3|1|Updated Feb 24, 2026
Search Tags:#ui#frontend#boilerplate#scaffold#tailwind#starter#shadcn
One-click install
npx skills add https://github.com/chfle/lehnert-claude-skills --skill sw-boilerplate-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sw-boilerplate-ui
Source: https://github.com/chfle/lehnert-claude-skills/tree/main/skills/sw-boilerplate-ui
Command: npx skills add https://github.com/chfle/lehnert-claude-skills --skill sw-boilerplate-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates ready-to-use UI foundation files directly in your workspace root based on requirements/tech-stack.yaml, saving setup time and ensuring consistency across projects.

Core Features & Use Cases

  • Generates Tailwind config, global styles, and framework-specific setup (Next.js + Tailwind, shadcn/ui, MUI, React SPA, or Vue 3) based on the detected tech stack.
  • Produces starter files like tailwind.config.ts, postcss.config.js, app/layout.tsx, or equivalent Vue/React files, ready for immediate customization.
  • Use Case: Start a new frontend project with a single skill activation to scaffold the appropriate boilerplate for your chosen stack.

Quick Start

Run the /sw-boilerplate-ui command to scaffold the UI foundation files in your workspace root.

Frequently Asked Questions about sw-boilerplate-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold UI boilerplate for Next.js and Tailwind in my workspace?▼

To scaffold UI boilerplate for Next.js and Tailwind, run the skill command to automatically generate foundation files like tailwind.config.ts and app/layout.tsx in your workspace root based on your tech stack.

What do I need to generate frontend starter files using this scaffolding tool?▼

To generate frontend starter files, you need a requirements/tech-stack.yaml file existing in your workspace root, which provides the necessary frontend stack detection data for the scaffolding process.

What happens if I have an API-only stack without frontend requirements?▼

If you have an API-only stack, the scaffolding process detects this configuration and skips generating frontend files entirely, printing a completion line when finished without creating UI starter files.

Can I use this to bootstrap a Vue 3 project foundation?▼

Yes, you can bootstrap a Vue 3 project foundation. The skill detects Vue 3 in your requirements/tech-stack.yaml and generates the equivalent Vue framework-specific boilerplate configurations and starter files.

Does this boilerplate generator work with React SPA setups?▼

Yes, this boilerplate generator works with React SPA setups. It detects the React SPA stack from your configuration file and generates the appropriate boilerplate configurations and starter files for immediate customization.

Related Skills

Explore More Software Engineering Skills→
chflechfle
3

sw-boilerplate-db

Generates database schema, ORM config, and migration files from tech-stack.yaml.

Community
Advanced
Andrej1601Andrej1601

frontend

Develop React and Next.js UI components with Tailwind CSS and shadcn/ui.

Community
Intermediate
ShubhamsabooShubhamsaboo
131.7k

fullstack-developer

Automate full-stack web app planning and implementation with React, Node.js, and databases.

Community
Advanced
dain-agencydain-agency

repo-init

Scaffold complete buildable software repositories from Forge configuration files.

Official
Intermediate