frontend-design

Generate frontend UI designs with React, TypeScript, Tailwind CSS, and motion libraries.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/yuch4/dx-selecta --skill frontend-design-yuch4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yuch4/dx-selecta/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/yuch4/dx-selecta --skill frontend-design-yuch4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

高品質で独自性のあるフロントエンドUIを作成する際に直面する課題を解決します。AI生成のジェネリックデザインに陥らず、目的に適した美学と実装を同時に実現します。

Core Features & Use Cases

  • 設計思考と美的ガイドラインの適用: コンテキストに応じたトーン選択、制約の管理、差別化の明確化。
  • 実装スタックと品質: React + TypeScript、Tailwind CSS、Framer Motion、アイコンライブラリを活用した再利用可能なコンポーネントの提案。
  • アクセシビリティとレスポンシブ: 使いやすさとアクセシビリティを確保するデザインと実装のベストプラクティスを提供。

Quick Start

  • ユーザー要件に基づくUIのコンセプトを提出する
  • 推奨スタックとデザイン指針に沿ってモックアップを作成する
  • 実装テンプレートとコンポーネント構造を出力する

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design frontend UI that avoids generic AI-generated aesthetics?▼

To design frontend UI that avoids generic aesthetics, apply concept-driven typography systems, color constraints, and motion libraries to enforce brand identity and usability. This ensures unique, high-quality interface outputs.

What is the best way to build accessible landing pages with React and Tailwind CSS?▼

The best way to build accessible landing pages with React and Tailwind CSS is to follow responsive layout best practices and accessibility guidelines while utilizing concept-driven aesthetics and reusable component structures.

Can I use Framer Motion for interactive prototypes in a component library?▼

Yes, you can use Framer Motion for interactive prototypes in a component library. It provides implementation guidance needed to integrate motion seamlessly with React and TypeScript for high-quality frontend design.

How do I create a typography system for a unique frontend design?▼

You create a typography system for a unique frontend design by applying design thinking and aesthetic guidelines to select context-appropriate tones, manage constraints, and clearly differentiate your brand identity.

Does this frontend design approach support reusable component structures?▼

Yes, this frontend design approach supports reusable component structures by providing implementation templates using React, TypeScript, Tailwind CSS, and icon libraries to ensure high-quality, maintainable UI outputs.