Explorar skills

Gera código React/Next.js pronto para produção a partir de designs do Figma, orientando sobre o uso da ferramenta Figma MCP, estratégias de reuso de componentes e mapeamento de variantes. Sempre utilize esta skill quando um link do Figma for fornecido ou a implementação/redesign a partir de um design do Figma for mencionada.

MVVM architecture standards for React/TypeScript frontends with TanStack ecosystem, TailwindCSS, and Shadcn UI.

Scaffolds React/TypeScript frontend components with MVVM architecture.

Generate frontend code drafts using Gemini 3.1 Pro's one-shot UI generation. Use when building React components, HTML/CSS pages, SVG animations, or converting screenshots to code. Produces fast, cheap drafts (7.5x cheaper than Opus) that Claude reviews and refines. Supports design system context loading (1M token window), screenshot-to-code pipeline, and physics-based SVG animation. Trigger: "gene

Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (comp

Build distinctive, production-grade frontend interfaces — websites, landing pages, dashboards, React components, HTML/CSS layouts, editorial heroes with depth-parallax (Astryx pattern), pointer-reactive fluid effects. Avoids generic AI aesthetics. Triggers on web UI, styling, beautify, frontend design, dashboard, landing page, React component, editorial hero.

Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.

Design and prototype in Paper Design (app.paper.design) — read/write designs via MCP, convert to React/Tailwind code, import HTML/CSS, sync design tokens. Also covers Paper Shaders (@paper-design/shaders-react) — 30+ shader React components (mesh gradient, fluted glass, liquid metal, god rays, halftone, grain gradient, pulsing border). Pairs with minoan-frontend-design for creative direction. Trig

Apply React and Next.js performance optimization guidelines from Vercel Engineering — 40+ rules covering components, data fetching, bundle optimization, and rendering. Triggers on React components, Next.js pages, bundle optimization, performance improvements, refactoring React code.

Generate Rocaille-style domain warping shaders, mouse-reactive liquid logo effects, depth-map parallax heroes (Astryx-style hover-reactive statues), and stable fluid simulations over live DOM. Four modes — rocaille, liquid-logo, astryx-statue, fluid-dom. Triggers on shader art, depth parallax, hover-reactive depth map, statue hero, fluid sim, liquid logo, WebGL visualization, procedural background

Build MindNode-inspired mind mapping interfaces — 8 node shapes, 27+ themes, layout algorithms (horizontal, vertical, radial with D3), keyboard shortcuts, focus mode, dual view. React + xyflow/react v12 + Zustand + Tailwind. Triggers on mind map, visual thinking tool, node-based diagram, brainstorm canvas, MindNode.

Slack workspace integration: 9 on-demand scripts (post, read, delete, search, stream, react, upload, channels, users) + dual-token support + RTS API search + chat streaming + AI Block Kit + Session Bridge + Claudicle unified launcher (Claude Agent SDK, soul engine, three-tier memory).