frontend-design

Description

Create distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase.

Install

Add the repository(one-time)

/plugin marketplace add JNLei/claude-tools

Install the plugin

/plugin install next-project-starter@claudesmith-marketplace

Tool Access

This skill inherits all available tools. When active, it can use any tool Claude has access to.

Supporting Assets

View in Repository

EXAMPLES.md

EXISTING-CODEBASE-CHECKLIST.md

NEW-PROJECT-DESIGN.md

REFERENCE.md

Links

GitHub Stats

1 forks

Similar Skills

claude-opus-4-5-migration

2 files

Migrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5. Use when the user wants to update their codebase, prompts, or API calls to use Opus 4.5. Handles model string updates and prompt adjustments for known Opus 4.5 behavioral differences. Does NOT migrate Haiku 4.5.

claude-opus-4-5-migration

47.1k

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

frontend-design

47.1k

Writing Hookify Rules

This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.

hookify

47.1k