Skills: frontend
Agent Skills in the frontend category, with argument hints and descriptions from the release.
13 skills in this category.
| Skill | Details |
|---|---|
av:design | Design brand identity, logos, banners, posters, and visual assets. Use for brand systems, design tokens, corporate identity programs, event/editorial/marketing posters, and visual campaign assets. Not for UI code patterns. — Arguments: [design-type] [context] |
av:frontend-design | Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop. |
av:frontend-development | Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization. — Arguments: [component or feature] |
av:html-video | Create local MP4 videos from HTML/CSS/JS templates with nexu-io/html-video. Covers source checkout setup, template discovery, studio customization, preview, and render verification. — Arguments: [video brief, source URL, repo, template id, or project id] |
av:hyperframes | Wrap HeyGen HyperFrames CLI for HTML-first programmatic video generation. Use for short vertical/social videos, product-launch clips, motion graphics rendered from HTML composition. See also the installed remotion skill for a React-based alternative. — Arguments: [composition or command] |
av:react-best-practices | Apply React and Next.js performance optimization patterns from Vercel Engineering. Use for component optimization, rendering performance, bundle analysis. — Arguments: [component or pattern] |
av:remotion | Build video content with Remotion in React. Use for programmatic video creation, animated sequences, data-driven video rendering. — Arguments: [video or component] |
av:shader | Write GLSL fragment shaders for procedural graphics. Topics: shapes (SDF), patterns, noise (Perlin/simplex/cellular), fBm, colors (HSB/RGB), matrices, gradients, animations. Use for generative art, textures, visual effects, WebGL, Three.js shaders. — Arguments: [effect or pattern] |
av:stitch | AI design generation with Google Stitch. Generate UI designs from text prompts, export Tailwind/HTML/DESIGN.md, orchestrate design-to-code pipeline. Use for rapid prototyping, UI generation, design exploration. — Arguments: [design prompt or action] |
av:threejs | Build 3D web experiences with Three.js. Use for WebGL/WebGPU scenes, GLTF models, animations, physics, VR/XR. Supports 556 searchable examples. — Arguments: [3D scene or feature] |
av:ui-styling | Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization. — Arguments: [component or layout] |
av:ui-ux-pro-max | UI/UX design intelligence for web and mobile: style selection, color systems, typography, layout, accessibility, interaction states, responsive behavior, forms, charts, design systems, and code review across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. |
av:web-design-guidelines | Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". — Arguments: [file-or-pattern] |