vue-frontend-design

vue-frontend-design

A Claude Code plugin that replaces the generic frontend-design plugin with a specialized design workflow for Vue.js + TailwindCSS + PrimeVue. Instead of generating boilerplate UI, it guides Claude through a concept-driven creative process -- developing a visual direction before writing a single line of code -- and outputs production-grade components built on an opinionated Vue ecosystem stack.

Installation

claude plugin add hmesfin/vue-frontend-design

After installing, disable the generic frontend-design plugin if you have it:

1. Open ~/.claude/settings.json
2. Set "frontend-design@claude-plugins-official": false in enabledPlugins

How It Works

The plugin provides a skill that activates when you ask Claude to build frontend interfaces. Rather than jumping straight to code, it runs a concept-first design process: exploring visual metaphors, establishing a design language, and making deliberate aesthetic choices. Only after the concept is locked does it generate implementation code using Vue.js single-file components, Tailwind CSS v4 for utility styling, and PrimeVue for rich UI primitives.

Settings (Optional)

Copy examples/settings-template.md to .claude/vue-frontend-design.local.md in your project root to customize behavior per-project.

The plugin works with sensible defaults -- no settings file is required.

Settings Reference

Setting	Options	Default	Description
primevue_mode	styled, unstyled, hybrid, auto	auto	PrimeVue styling approach
primevue_theme	Aura, Lara, Nora, custom	Aura	Theme preset for styled/hybrid mode
doc_lookup	always, on-demand	on-demand	When to fetch component docs via context7
creativity	bold, balanced, conservative	bold	How adventurous design choices should be
constraints	list of strings	[]	Additional design constraints

Usage Examples

Create a design token system for our Vue app

Build a notification dropdown component

Design a dashboard page for monitoring IoT devices

Build a complete onboarding flow for a fintech app

What Makes This Different

• Concept-first design -- Every interface starts with a creative brief and visual direction, not a template. The skill develops metaphors, mood, and spatial logic before generating code.
• Opinionated aesthetic standards -- No generic system fonts, no default gray palettes. Custom typography pairings, deliberate color choices, and design details that make interfaces feel crafted rather than generated.
• PrimeVue-native -- Components are built for PrimeVue from the ground up, not translated from React patterns. Leverages passthrough props, theme presets, and the PrimeVue component model correctly.
• Per-project configuration -- Drop a settings file in your repo to lock in brand colors, accessibility requirements, theme preferences, or creative constraints. Every project gets its own design personality.