# Skills: frontend

[← Back to skill catalog](/en/stable/reference/skills/)

**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]` |