ContentMédio

Refactoring UI Design System

porwondelai·wondelai· v1.0.0 · atualizado em 2026-04-10

Score

Practical UI design system based on Refactoring UI (Wathan & Schoger). Use when creating or improving user interfaces, web components, dashboards, landing pages, or any visual design work. Applies to HTML/CSS, React, Tailwind, or any frontend output. Triggers on requests for UI design, styling, layout, color schemes, typography, visual hierarchy, or making interfaces "look better.

ui-designuser-interfacefrontend-designdesign-systemrefactoring-uivisual-designweb-design

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdrefactoring-ui/workflow

1. Analyze the existing UI for areas of improvement.

2. Define the target audience and purpose of the interface.

3. Apply grayscale design principles to establish visual hierarchy.

4. Implement a consistent spacing system.

5. Choose appropriate typography and font weights.

6. Build a color palette with multiple shades.

7. Implement shadows and depth effects.

8. Apply layout patterns and break out of the box where appropriate.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar aImplement Design

60%

Árvore do Skill

Refactoring UI Design System

refactoring-ui

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.EVALUATE

5.RECOMMEND

6.ACT

Triggers8

improve the user interfacemake the design look betterapply refactoring UI principlescreate a visually appealing designimprove the styling of the interfaceimplement a better layoutchoose a color schemeimprove the typography

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download refactoring-ui

$ synaptic skills detail refactoring-ui

$ synaptic skills live refactoring-ui

Dependências

HTML CSS React

Links

GitHub Repository