template-designer
Generates aesthetic, production-ready frontend templates using only shadcn/ui components.
Install
mkdir -p .claude/skills/template-designer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9831" && unzip -o skill.zip -d .claude/skills/template-designer && rm skill.zipInstalls to .claude/skills/template-designer
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create simple, aesthetic, and production-ready frontend templates by combining high-level design constraints with strict shadcn component usage. Use this skill when the user wants to build a beautiful template, landing page, or dashboard without writing complex custom CSS, relying entirely on the composition of shadcn components.Key capabilities
- →Design frontend templates
- →Compose shadcn components
- →Enforce aesthetic constraints
- →Maintain UI consistency
How it works
It bridges design vision with strict shadcn component composition to create polished templates.
Inputs & outputs
When to use template-designer
- →Building new dashboards or landing pages
- →Ensuring consistent UI across components
- →Creating aesthetic frontend prototypes
About this skill
Template Designer
This skill bridges the gap between high-level aesthetic design (frontend-design) and strict component-based execution (shadcn). The goal is to produce extremely polished, beautiful, yet simple and maintainable frontend templates.
Instead of writing custom CSS, using raw Tailwind values, or creating bespoke components, you must rely entirely on the shadcn library to execute the design vision set by frontend-design.
1. Aesthetic Vision (The Design Phase)
Before implementing, establish a clear and concise aesthetic direction:
- Tone & Purpose: Determine the tone (e.g., refined minimalism, industrial, soft elegance). Keep the design conceptually simple but visually striking.
- Typography: Choose high-quality, distinctive fonts (one for display, one for body) rather than generic defaults.
- Color Palette & Theme: Define a cohesive palette using semantic variables. Map your design's colors strictly to standard frontend semantic CSS variables (
background,primary,muted,accent, etc.) soshadcncomponents automatically inherit the theme. - Composition: Plan for generous spacing, clear hierarchy, and balanced proportions.
2. Component Execution (The Implementation Phase)
All designs must be realized using standard shadcn components. Do not create custom layouts or complex CSS integrations where a shadcn component can be used.
- Strict Composition: Build the UI by composing
shadcnblocks (e.g., Cards, Tables, Sidebars, Alerts). - No Bespoke Overrides: Use built-in component variants (
variant="outline",size="lg") instead of brute-forcing custom Tailwind classes. - Tailwind for Layout Only: Use Tailwind classes only for structural layout (
flex,grid,gap-*,p-*,m-*) and semantic colors (text-muted-foreground). Never use it for custom shadows, complex borders, or raw colors (likebg-blue-500). - Use Standard Spacing: Always use
gap-*withflexorgrid. Never usespace-y-*orspace-x-*.
3. Core Philosophy
- Simplicity over Customization: A beautiful, simple design built with 100% standard shadcn components is vastly superior to a complex design requiring custom HTML/CSS wrappers.
- Maintainability: By avoiding "crazy integrations" and custom designs, the resulting codebase remains heavily standardized, easy to maintain, and universally understandable.
- Elegance: Elegance comes from how components are arranged, the whitespace between them, and precise typography, not from adding custom code.
When not to use it
- →Custom CSS wrappers
- →Complex bespoke styling
Prerequisites
Limitations
- →No bespoke overrides
- →Strict shadcn usage
How it compares
It prioritizes component composition over custom CSS to ensure maintainability.
Compared to similar skills
template-designer side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| template-designer (this skill) | 0 | 5mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
| figma | 22 | 4mo | No flags | Intermediate |
| interaction-design | 15 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.