brunoolf/frontend-craft

audit-method

Auditoria tecnica read-only de acessibilidade (WCAG 2.2), performance e comportamento responsivo em interface web. Traz os criterios verificaveis, os padroes buscaveis e o formato de achado com evidencia medida. Use quando algo esta lento ou travando, quando…

Langue du texte source : portugais

critique-method

Critica de design read-only com heuristica, scoring e caca a padroes genericos de IA. Traz a lista de padroes buscaveis via Grep para achado objetivo antes de julgamento subjetivo. Use quando o pedido e vago sobre o que esta errado - "melhora isso", "parece…

Langue du texte source : portugais

responsive

Projetar interface responsiva desde o inicio - estrategia de breakpoints, layout intrinseco (clamp, min, max, auto-fit), container queries, tipografia fluida, colapso de grade, imagens responsivas, densidade por viewport e as unidades de viewport modernas…

Langue du texte source : portugais

design-system

Construir, extrair e manter design systems - tokens com papeis, escala tipografica, escala de espacamento, cor, raio, sombra, dark mode e tokens de motion. Inclui o formato do DESIGN.md, o artefato de memoria que preserva as decisoes e suas razoes entre…

Langue du texte source : portugais

frontend-craft

Sistema completo de design frontend. Use para QUALQUER trabalho de interface, mesmo quando o usuario nunca diz "design" - construir ou refazer sites, landing pages, portfolios, dashboards, UI de app, componentes, formularios, onboarding, estados vazios;…

Langue du texte source : portugais

implementation

Traduzir design em codigo React/Next real - composicao de componentes, fronteira server e client, responsivo, estados, imagens e escolha de dependencia. Use ao construir UI a partir de uma direcao ou design definido, ou ao refinar codigo de interface…

Langue du texte source : portugais

art-direction

Como ir do brief ao mundo visual - escolher e comprometer com uma direcao concreta, paleta com papeis, pares tipograficos, materialidade e o momento memoravel. Use ao iniciar uma superficie nova, ao substituir o visual de um redesign, ou quando uma interface…

Langue du texte source : portugais

frontend-slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic…

Langue du texte source : anglais

image-to-code

Transformar mockup, screenshot ou referencia visual em codigo de interface funcional. Cobre a leitura estruturada da imagem, a extracao do sistema implicito antes de escrever markup, e a verificacao contra o original. Use quando o usuario fornece uma imagem…

Langue du texte source : portugais

motion-audit

Revisao read-only de motion - encontrar lugares que deveriam animar e nao animam, julgar animacoes existentes contra um padrao alto de craft, e produzir um plano priorizado de correcoes. Use para "o que poderia ser animado aqui", "revisa as animacoes", "o…

Langue du texte source : portugais

motion-principles

Fundamento de motion design para interface - quando animar e quando nao, timing, curvas de easing, springs, padroes de entrada e saida, densidade de movimento, reduced-motion e performance. Carregue antes de qualquer trabalho de animacao, seja para criar,…

Langue du texte source : portugais

motion-web

Implementacao de motion na web sem GSAP - CSS moderno (scroll-driven animations, View Transitions, @starting-style, transition-behavior), e Motion/Framer Motion (AnimatePresence, layout animations, gestos, motion values). Use quando o movimento cabe na…

Langue du texte source : portugais

refine-verbs

Os quinze verbos de refino de interface - bolder, quieter, distill, polish, delight, overdrive, typeset, layout, colorize, harden, onboard, clarify, adapt, optimize, extract. Cada um define um escopo estrito do que muda e do que nao se toca. Use quando o…

Langue du texte source : portugais

scroll-experiences

Composicao de experiencias dirigidas por scroll - cena fixa de fundo com conteudo rolando por cima, 3D ou canvas reagindo ao progresso do scroll, secoes pinadas, parallax e narrativa por scroll. Cobre a arquitetura que liga scroll, cena e conteudo, o…

Langue du texte source : portugais

surface-modes

Os quatro modos de superficie - Persuadir, Operar, Ler, Experimentar - que definem o que conta como sucesso numa tela antes de qualquer decisao visual. Carregue antes de julgar ou desenhar qualquer superficie. Impede o erro mais comum de UX: aplicar criterio…

Langue du texte source : portugais

ui-ux-dataset

Dataset consultavel de referencia de design - 84 estilos visuais, 192 paletas por tipo de produto, 74 pares tipograficos, 1900 fontes Google, 99 diretrizes de UX, presets de motion, escolha de grafico, icones e padroes de landing page, mais guias por stack…

Langue du texte source : portugais

ux-patterns

Padroes de UX para interface web - arquitetura de informacao, hierarquia, carga cognitiva, estados de interface (vazio, carregando, erro, sucesso), formularios, navegacao, UX copy, e as diferencas entre desktop e web mobile. Use ao desenhar ou revisar fluxo,…

Langue du texte source : portugais

craft-floor

Piso de qualidade compartilhado por todos os agentes do frontend-craft. Carregue antes de escrever ou julgar qualquer UI. Traz as verificacoes mecanicas do resultado construido, os defaults de categoria que se deve recusar, e as arbitragens quando fontes de…

Langue du texte source : portugais