AI TOOLS RADAR
Alle Skills / YZFLY
yzfly/pro-ui-engineering-skill

ui-engineering

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

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/yzfly/pro-ui-engineering-skill --skill ui-engineering

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

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)