frontend-designer

Community

Craft distinctive, production-ready frontends.

Authorhidari
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill guides the creation of high-quality, unique frontend interfaces that avoid generic AI-driven aesthetics, delivering polished, production-ready code and UX.

Core Features & Use Cases

  • Design thinking: Establish an intentional aesthetic direction, tone, and constraints before coding.
  • Reusable components: Propose modular UI components and pages with consistent styling.
  • Practical output: Generate production-ready HTML/CSS/JS (React/Vue/HTML) aligned with the chosen design philosophy.
  • Use Case: A team wants a modular analytics dashboard with a luxe, non-generic UI; this Skill yields a complete component set and styling guidelines.

Quick Start

Describe a UI you want (e.g., a modular dashboard with a responsive header and 3 cards) and ask for concrete React components and CSS that implement it.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-designer
Download link: https://github.com/hidari/dotfiles/archive/main.zip#frontend-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository