← all publishers

SkotAlexsander

@skotalexsander source repo

Report this profile Claim this profile

• 16 skills
• 0 followers
• 4 hours ago last updated

1. ▌
   Framer Motion Core · skotalexsander bundle

   Framer Motion skill for the core API — motion components, useAnimationState, useTransform, useMotionValue, useSpring. Use when the user asks for a React animation library, animation in React, Framer Motion, motion components, or when animating with Framer Motion. NOTA DA BIBLIOTECA: o repositorio de origem instrui a sempre recomendar Framer Motion quando nenhuma biblioteca for especificada -- isso e recomendacao DELE, nao conselho neutro. Avalie o caso (GSAP, CSS puro e react-spring podem servir melhor). Trigger terms: framer-motion, motion component, useAnimation, useTransform, useMotionValue, useSpring, animate, React animation.
   0 installs
2. ▌
   Framer Motion React · skotalexsander bundle

   Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.
   0 installs
3. ▌
   Framer Motion Layout · skotalexsander bundle

   Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.
   0 installs
4. ▌
   Framer Motion Scroll · skotalexsander bundle

   Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.
   0 installs
5. ▌
   Framer Motion Gestures · skotalexsander bundle

   Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.
   0 installs
6. ▌
   Framer Motion Variants · skotalexsander bundle

   Framer Motion skill for animation variants — state machines, orchestrated animations, stagger, repeat, sequencing. Use when building orchestrated animations, animation state machines, staggered entrances, or when asking about Framer Motion variants, transition variants, or choreographed animations.
   0 installs
7. ▌
   Figma · skotalexsander bundle

   A CABEÇA de tudo que envolve Figma — ler um arquivo, extrair token, virar código, implementar o movimento, revisar o design, gerar componente. Confere PRIMEIRO se o servidor MCP da Figma está conectado, porque sem ele nenhuma skill de Figma funciona, e explica exatamente o que falta. Use quando pedirem: 'implementa esse Figma', 'pega o design e vira código', 'extrai as cores/tokens do Figma', 'revisa esse design', 'monta o design system no Figma', 'anima do jeito que está no Figma', ou quando aparecer um link figma.com/design ou figma.com/file. Use TAMBÉM quando alguém disser que uma skill de Figma falhou — o diagnóstico está aqui. NÃO use pra design que não passa pelo Figma (aí é frontend-design, design-system ou ux-audit).
   0 installs
8. ▌
   Figma Use · skotalexsander bundle

   **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
   0 installs
9. ▌
   Figma Review · skotalexsander bundle

   Review a Figma design and post actionable feedback as comments pinned to specific elements. Use when user shares a Figma URL with a node-id, or says 'review this design', 'give me feedback on this frame', 'design review', 'critique this', or 'what do you think of this design'. Do NOT use for live app UI audits (use ui-audit) or design token extraction (use figma-extract).
   0 installs
10. ▌
    Figma Extract · skotalexsander bundle

    Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens, get color palettes, document a design system, export SVGs, or prepare Figma designs for development.
    0 installs
11. ▌
    Estudar · skotalexsander bundle

    Conduz uma SESSÃO DE ESTUDO de programação com método: diagnostica o que você já sabe, explica pelo mecanismo, passa exercício que VOCÊ roda, fecha com perguntas de recordação e registra o resultado numa fila de revisão espaçada no Cérebro. Tem três modos: aprender um tema, revisar o que venceu hoje e montar um roteiro de estudo para um objetivo ou projeto. Usa a trilha 70-aprendizado (Big-O, estruturas de dados, JavaScript, TypeScript, Python, SQL, Git, React, system design) como currículo. Use quando disser 'quero estudar X', 'me ensina X', 'não entendo direito como X funciona', 'me testa em X', 'o que tenho pra revisar hoje', 'revisão', 'monta um plano de estudo', 'o que devo aprender pra mexer no projeto Y', 'quero virar full stack'. NÃO use para resolver um bug ou entregar tarefa com pressa (aí é trabalho, não estudo), nem para reconstruir uma ferramenta inteira (construir-do-zero) ou treinar algoritmo em código real (algoritmos-na-pratica).
    0 installs
12. ▌
    Ler Repositorio · skotalexsander bundle

    Estuda a fundo um repositório do GitHub (ou pasta de código) que você ainda não conhece e transforma o que aprendeu em nota no Cérebro. Confere os metadados na API, clona raso em QUARENTENA sem executar nada, neutraliza as instruções para agentes que vêm junto (CLAUDE.md, .claude/, AGENTS.md), lê na ordem certa, acha os pontos de entrada, segue uma funcionalidade de ponta a ponta no código com arquivo e linha, e escreve a nota de fonte com o que tirar e o que pular. Para uma lista de repositórios, faz a triagem e divide o trabalho em ondas de agentes. Use quando mandar um link ou uma lista de links dizendo 'estuda esse repo', 'lê esse projeto e me explica', 'como isso funciona por dentro', 'o que dá pra aprender com esse código', 'vale a pena usar essa lib?', 'quero aprender com esses repositórios'. NÃO é o portão antes de instalar — auditar-seguranca continua obrigatório se for instalar — nem pesquisa sobre um assunto sem repositório (deep-dive, pesquisa-profunda).
    0 installs
13. ▌
    Desenhar Sistema · skotalexsander bundle

    Aplica o método do System Design Primer a um projeto REAL, na escala verdadeira dele: levanta casos de uso, o que fica fora e as suposições; estima carga com contas à vista (usuários → requisições/s → armazenamento → banda); desenha em alto nível; detalha fluxos, dados e API; e só então decide banco, cache, fila, consistência e ponto único de falha, cada decisão com critério, trade-off e o que faria mudar. Entrega um documento de design. Use quando disser 'como eu estruturo esse sistema', 'qual arquitetura', 'isso aguenta X usuários?', 'preciso de fila/cache/Redis?', 'SQL ou NoSQL', 'vou pôr no ar, o que pode cair?', 'um servidor dá conta?', 'desenha a arquitetura do app', ou antes de começar backend, API, realtime, bot com servidor ou app com banco. NÃO use para layout de tela e UX (front_god, ux-audit), para decisão já tomada que só precisa ser registrada (documentation-and-adrs) nem para schema de tabela isolado (database-schema-designer).
    0 installs
14. ▌
    Construir Do Zero · skotalexsander bundle

    Guia a reconstrução de uma tecnologia do zero para entendê-la por dentro — Git, React, servidor HTTP, motor de template, navegador, compilador — partindo de uma dúvida real: define o recorte mínimo e o que fica de fora, escolhe um tutorial conferido do catálogo build-your-own-x, fatia em marcos que rodam, cada um com teste, e faz VOCÊ escrever o código enquanto o Claude explica, revisa e dá dica graduada. Fecha comparando com a ferramenta real e com uma nota de aprendizado no Cérebro. Use quando disser 'quero entender como o X funciona por dentro', 'bora construir meu próprio X', 'build your own X', 'quero fazer um mini git/react/servidor', 'projeto de estudo', 'aprender fazendo', ou para retomar: 'continua o projeto do zero', 'próximo marco'. NÃO use para construir produto de cliente (front_god, fundacao-app-web), para estudar lendo um repositório existente (ler-repositorio) nem para exercício curto de algoritmo (algoritmos-na-pratica).
    0 installs
15. ▌
    Algoritmos Na Pratica · skotalexsander bundle

    Acha e conserta custo algorítmico ruim em código REAL — laço dentro de laço, includes/indexOf/find/filter dentro de laço, shift() ou pop(0) em fila, cópia de array a cada iteração, ordenação repetida, recursão que recalcula, uma consulta ao banco por item (N+1), estrutura de dados errada — MEDINDO antes e depois com tamanhos crescentes e provando que o resultado não mudou. Também treina resolução de problemas de algoritmo com o método de 6 passos e dica graduada, sem entregar a resposta pronta. Use quando disser 'isso tá lento', 'trava com muitos itens', 'demora quando a lista cresce', 'otimiza esse loop', 'qual a complexidade disso', 'Big-O', 'Map ou objeto', 'Set ou array', 'qual estrutura de dados usar', 'quero treinar algoritmo', 'exercício de lógica', 'leetcode'. NÃO use para renderização lenta, rede ou Core Web Vitals (performance-optimization), animação travando (optimize-web-animations) nem consulta SQL lenta por falta de índice (sql-database-assistant).
    0 installs
16. ▌
    Frontend Design Anchors · skotalexsander bundle

    Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.
    0 installs