skills.rest
dtaborda
dtabordaCOMMUNITY
Explore all skills by this author →
GitHub

template-ui

Enforce UI component placement and Tailwind styling across template-ui projects.

Updated Mar 30, 2026
Search Tags:#react#monorepo#nextjs#tailwind#shadcn#component-placement#pagecontainer
One-click install
npx skills add https://github.com/dtaborda/startup-saas-template --skill template-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: template-ui
Source: https://github.com/dtaborda/startup-saas-template/tree/main/skills/template-ui
Command: npx skills add https://github.com/dtaborda/startup-saas-template --skill template-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures every UI change in ui/ follows startup-saas-template's specific component locations, layout wrappers, and frontend patterns so the monorepo remains consistent.

Core Features & Use Cases

  • Component Placement Rules: Guides whether to use feature-local directories, shared @template/ui components, or packages based on reuse scope.
  • Routing & Layout Conventions: Defines protected/public routing groups, PageContainer usage, and full-height props for each page.
  • Decision Trees & QA: Documents styling decisions, directory rules, required tech stack, and quality checklist for dashboards, chat, profile, portfolio, and auth UI.

Quick Start

Follow template-ui guidance to place new UI components inside the correct ui/ feature folders and layout containers.

Frequently Asked Questions about template-ui

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

FAQPage Schema
How do I place UI components correctly in a Next.js monorepo?▼

To place UI components correctly in a Next.js monorepo, follow template-specific directory rules to decide between feature-local folders, shared @template/ui packages, or designated PageContainer layout wrappers for consistent frontend architecture.

What is the correct way to use shadcn/ui components within a Tailwind monorepo?▼

Using shadcn/ui components within a Tailwind monorepo requires importing them from the shared @template/ui package and wrapping page content in the designated PageContainer layout to maintain consistent styling and structure.

How do I structure routing and layouts for dashboard and auth pages?▼

Structuring routing and layouts for dashboard and auth pages requires defining protected and public routing groups, applying the PageContainer wrapper, and setting full-height props according to documented directory conventions.

Does this template enforce specific frontend patterns for chat and portfolio features?▼

Yes, this template enforces specific frontend patterns for chat and portfolio features by applying decision trees and quality checklists that dictate component placement, styling decisions, and required tech stack usage across ui/ directories.

When should I use a shared component package instead of a feature-local directory?▼

You should use a shared component package instead of a feature-local directory when the UI component has broad reuse scope across multiple features, ensuring the monorepo remains consistent and avoiding code duplication.

What are the limitations of using template-specific PageContainer layouts?▼

The limitation of using template-specific PageContainer layouts is that all UI changes are strictly bound to the startup-saas-template's directory rules and required tech stack, limiting flexibility for divergent frontend patterns or external styling frameworks.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate
databricks-solutionsdatabricks-solutions
1.8k

databricks-app-apx

Builds full-stack Databricks applications with FastAPI backend and React frontend.

Official
Advanced
mauricioacpmauricioacp
1

vercel-composition-patterns

Apply React composition patterns to build maintainable UI components.

Community
Intermediate