skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

frontend-design

Design refined frontend interfaces and UI components with CSS best practices.

1|Updated Dec 18, 2025
One-click install
npx skills add https://github.com/mashharuki/claude-code-sample --skill frontend-design-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mashharuki/claude-code-sample/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/mashharuki/claude-code-sample --skill frontend-design-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

このスキルは、独創的で本格的なフロントエンドインターフェースの設計・実装を高い品質で提供します。ユーザーがウェブアプリ、ダッシュボード、ランディングページ、またはUIコンポーネントを求める際に、一貫性のある美学と機能性を両立させます。

Core Features & Use Cases

  • 高度なデザインと実装: 実務で使えるコードとUIデザインを同時に生成します。
  • 再利用可能なコンポーネント設計: React/Vue等のフレームワークに適した構造とスタイルガイドを提案します。
  • Use Case: ダッシュボードのヘッダー、カード、ナビゲーション、レスポンシブレイアウトを一貫した美学で実装します。

Quick Start

Use the frontend-design skill to generate a responsive, dark-theme dashboard header with bold typography.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design and implement responsive dashboard components with consistent aesthetics?▼

To design responsive dashboard components with consistent aesthetics, generate production-grade UI structures applying unified typography, color systems, and motion guidelines to headers, cards, and navigation layouts.

What is the best way to create reusable UI components for React or Vue frameworks?▼

The best way to create reusable UI components for React or Vue frameworks is to generate modular structure proposals alongside style guides that ensure functional consistency across your web application.

Can I use this approach to build a dark-theme landing page with bold typography?▼

Yes, you can use this approach to build a dark-theme landing page with bold typography by generating concept designs and implementation guidance that satisfy modern CSS best practices and accessibility considerations.

Does this method support building a complete component library with accessibility considerations?▼

Yes, this method supports building a complete component library with accessibility considerations by providing implementation guidance, responsive layout structures, and CSS best practices for production-grade interfaces.

Why does my frontend UI lack visual consistency across different web app views?▼

Your frontend UI lacks visual consistency across different web app views because it missing a unified design system covering typography, color palettes, and motion, which this approach establishes for production-grade interfaces.

Related Skills

woosulwoosul

result-doc-writer

Generate structured result documents and update todo mirrors in Markdown.

Community
Intermediate
AradotsoAradotso
3

claude-design-system-hooks

Convert natural-language design specs into framework-specific UI components with WCAG 2.2 checks.

Official
Advanced
amano--amano--

ui-skills

Enforce UI constraints for agents using Tailwind CSS and accessible primitives.

Community
Intermediate
nagy-agnagy-ag

frontend-design

Generate production-grade frontend interfaces with distinctive visual design.

Community
Advanced