Skill

frontend-design

Orchestrates frontend interface creation for web components, pages, and apps using Tailwind, React, Vue, or Rails/Hotwire. Routes to skills for design philosophy, CSS patterns, framework guidance, motion, and polish.

React

Vue

npx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-engineer

Tool Access

This skill is limited to using the following tools:

Read Write Edit MultiEdit Grep Glob Bash WebSearch WebFetch

Preview

Orchestrator for creating distinctive, production-grade interfaces.

Supporting Assets

references/css-polish-tips.mdreferences/landing-page-design.mdreferences/motion-patterns.mdreferences/rails-hotwire.mdreferences/react-vue.mdreferences/ui-implementation-guide.mdreferences/web-interface-standards.md

SKILL.md

Similar Skills

frontend-design

100

Creates visually outstanding frontend interfaces including pages, components, dashboards, UI kits using HTML/CSS/JS, React/Vue/Svelte, Tailwind. Covers responsive design, animations, accessibility, performance.

4 files

claude-code-config

frontend-design

Generates distinctive frontend UIs with bold aesthetics for web components, pages, or apps using HTML/CSS/JS or React/Vue.

compound-engineering

frontend-design

Generates distinctive, production-grade frontend interfaces for web components, pages, or apps with bold aesthetics, unique typography, colors, and motion avoiding generic AI looks.

web

Stats

Parent Repo Stars33

Parent Repo Forks7

Last CommitFeb 15, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Frontend Design

Orchestrator for creating distinctive, production-grade interfaces.

Skill Routing

Based on needs, invoke specialized skills:

Need	Skill	Content
Design direction	`frontend-design-philosophy`	Aesthetic extremes, anti-patterns
CSS implementation	`frontend-css-patterns`	Typography, color, motion, spatial
React/Vue patterns	See `references/react-vue.md`	Framer Motion, Vue Transitions
Rails/Hotwire	See `references/rails-hotwire.md`	ViewComponent, Stimulus, Turbo

Framework Resources

React/Vue

See references/react-vue.md for:

Framer Motion staggered animations
Vue Transition/TransitionGroup patterns
Component architecture with design tokens

Rails/Hotwire

See references/rails-hotwire.md for:

ViewComponent with sidecar styles
Stimulus reveal/toggle controllers
Turbo Frames & Streams with animations
ERB layout patterns with content_for
CSS design tokens and import order

Implementation Resources

Resource	Content
ui-implementation-guide.md	Typography rules, color, forms, buttons, tables
motion-patterns.md	Page load, scroll triggers, hover, performance
css-polish-tips.md	Accessibility, scroll, focus, defensive CSS
landing-page-design.md	Section design, palettes, typography pairings

Workflow

1. Clarify design direction
   - Invoke `frontend-design-philosophy` for aesthetic guidance
   - User picks: brutalist, minimalist, luxury, playful, etc.

2. Implement CSS foundation
   - Invoke `frontend-css-patterns` for typography, color, motion
   - Customize Tailwind or write CSS variables

3. Apply framework patterns
   - React/Vue: Use references/react-vue.md
   - Rails/Hotwire: Use references/rails-hotwire.md

4. Polish and validate
   - Use references/css-polish-tips.md for accessibility
   - Use references/motion-patterns.md for animation
   - Run validation checklist from philosophy skill

Quick Reference

Web Interface Standards

See references/web-interface-standards.md for:

Keyboard operability requirements (WAI-ARIA widget patterns)
Touch target sizing (44px mobile, 24px desktop)
Form behavior (Enter submission, autocomplete, mobile keyboards)
Animation accessibility (prefers-reduced-motion)
Network performance budgets (POST < 500ms, virtualization thresholds)

Validation Checklist:

Distinctive typography (not default fonts)
Intentional, limited color palette
Layout breaks predictable patterns
Motion serves purpose
Clear design direction
Responsive quality maintained
Accessibility preserved