AI TOOLS RADAR
すべての Skills / YZFLY
yzfly/pro-ui-engineering-skill

ui-engineering

Expert system for creating high-quality, brand-aligned user interfaces.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/yzfly/pro-ui-engineering-skill --skill ui-engineering

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

UI Engineering Skill

Overview

This skill provides a comprehensive library of UI Engineering Specifications. Each specification acts as a "stylesheet for logic", defining the exact colors, typography, interactions, and mental models for a specific style.

When to use:

  • "Design a website like Apple"
  • "Create a personal blog"
  • "Build a dashboard like Stripe"
  • "Make a PPT-style website"

How to Use

1. Identify the Style

First, determine the most appropriate style for the user's request.

  • Consult Registry for a complete list of 60+ styles.

2. Read the Spec

Once a style is identified (e.g., stripe, personal_blog), read the corresponding reference file.

  • Example: If the style is stripe, read references/stripe.md.

3. Apply the Rules

Use the Design Tokens, Component Recipes, and Tech Stack defined in the spec references/[spec_name].md to generate code. Do not deviate from the spec's defined hex codes or physics unless explicitly asked.

Available References

Core Registry

  • Meta Registry: The master index of all styles, categorized by industry and vibe.

High-Frequency Styles

Skill Structure

ui-engineering/
├── SKILL.md
└── references/
    ├── _meta_registry.md  <- START HERE
    ├── apple.md
    ├── stripe.md
    ├── personal_blog.md
    ├── ... (60+ specs)