DevelopmentAvançado

Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

porleonxlnx·leonxlnx· v1.0.0 · atualizado em 2026-04-10

Score

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

ui-designux-designfrontend-architecturemotion-designtailwind-csscss-animationsdesign-systems

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdhigh-end-visual-design/workflow

Archetype Selection: — Silently roll the Variance Engine to select a Vibe & Texture Archetype and a Layout Archetype.

Scaffolding: — Establish the background texture, macro-whitespace scale, and typography sizes.

Architecture: — Build the DOM using the Double-Bezel technique for all major cards, inputs, and feature grids.

Choreography: — Inject custom cubic-bezier transitions, staggered navigation reveals, and button-in-button hover physics.

Mobile Responsiveness: — Ensure the layout collapses gracefully below 768px to a single-column stack.

Performance Optimization: — Apply performance guardrails to ensure GPU-safe animations and efficient rendering.

Pre-Output Check: — Evaluate the code against the pre-output checklist.

Output: — Deliver flawless, pixel-perfect React/Tailwind/HTML code.

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

Árvore do Skill

Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

high-end-visual-design

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.ACT

5.EVALUATE

6.REFLECT

Triggers8

design a high-end websitecreate a $150k agency-level UIimplement an Awwwards-tier designgenerate a premium user interfacedesign a website with cinematic motioncreate a website with haptic depthdesign a website avoiding generic AI aestheticsgenerate a UI with custom cubic-bezier transitions

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 high-end-visual-design

$ synaptic skills detail high-end-visual-design

$ synaptic skills live high-end-visual-design

Dependências

tailwindcss react framer-motion

Links

GitHub Repository