Community研究&データ分析github.com

jwynia/frontend-design

高品質なプロダクショングレードのフロントエンドインターフェースを作成します。既存デザインの監査ツール、カラーパレット、タイポグラフィシステム、デザイントークン、コンポーネントテンプレートの生成ツールを提供します。React、Vue、Svelte、およびバニラHTML/CSSをサポートします。

frontend-design とは?

このスキルは、AIエージェントがプロダクション品質のフロントエンドUIを設計・生成・監査できるようにするための包括的なツールセットです。特に、一貫性のあるデザインシステムの構築に重点を置いており、カラーパレット、タイポグラフィ、デザイントークン、アクセシビリティ対応のコンポーネントテンプレートを自動生成できます。React、Vue、Svelte、バニラHTML/CSSなど主要なフロントエンドフレームワークをサポートしており、新しいプロジェクトの初期セットアップから既存デザインの分析と改善まで幅広く活用できます。AIエージェントは、このスキルを使用して、指定された設計要件やスタイルガイドに基づき、アクセシビリティを考慮した統一感のあるUIコンポーネントを生成します。また、既存のCSSを分析して改善点を提案したり、デザインシステムのドキュメント化を支援したりすることも可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jwynia/agent-skills/tree/main/skills/frontend-design

Installed? Explore more 研究&データ分析 skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

frontend-design は何をしますか?

高品質でプロダクショングレードのフロントエンドインターフェースを、優れたデザイン品質で作成します。既存デザインを監査するための分析ツールと、カラーパレット、タイポグラフィシステム、デザイントークン、コンポーネントテンプレートを作成するための生成ツールを提供します。React、Vue、Svelte、およびバニラHTML/CSSをサポートします。Webコンポーネント、ページ、またはアプリケーションを構築する際に使用してください。キーワード: デザイン, UI, フロントエンド, CSS, コンポーネント, パレット, タイポグラフィ, トークン, アクセシビリティ。

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

jwynia/godot-best-practices

Guide AI agents through Godot 4.x GDScript coding best practices including scene organization, signals, resources, state machines, and performance optimization. This skill should be used when generating GDScript code, creating Godot scenes, designing game architecture, implementing state machines, object pooling, save/load systems, or when the user asks about Godot patterns, node structure, or GDScript standards. Keywords: godot, gdscript, game development, signals, resources, scenes, nodes, state machine, object pooling, save system, autoload, export, type hints.

jwynia/pdf-generator

Create and manipulate PDF files programmatically. Use when the user needs to generate PDFs, fill PDF forms, extract PDF content, add watermarks/overlays, or merge documents. Supports both template-based generation (form filling, overlays) and from-scratch creation. Keywords: PDF, document, form, fillable, merge, watermark, extract, text, report.

jwynia/presentation-design

Design and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a talk, or reviewing slides. Keywords: presentation, slides, talk, PowerPoint, Keynote, reveal.js.

jwynia/requirements-analysis

Diagnose requirements problems and guide discovery of real needs and constraints

jwynia/web-search-tavily

Search the web using Tavily API for high-quality, AI-optimized results with advanced filtering options. Use when you need structured search results, domain filtering, relevance scores, or AI-generated answer summaries. Requires TAVILY_API_KEY. Keywords: tavily, advanced search, filtered search, domain filtering, relevance scoring.

関連スキル