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

ui-engineering

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

Ver código-fonte

Como usar

  1. Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
  2. Consulte no original as ferramentas, credenciais e ambientes necessários.
  3. Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/yzfly/pro-ui-engineering-skill --skill ui-engineering

Antes de começar

  • A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
  • Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

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)