Design & Media Agent Skills for Grok Build

Design a form end to end — field order, grouping, validation, and completion.

Visual designer — brand identity, color systems, typography, design tokens, and UI design.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

Execute Framer secondary workflow: Core Workflow B.

Create a minimal working Framer example.

Install and configure Framer SDK/CLI authentication.

Configure Framer local development with hot reload and testing.

Optimize Framer API performance with caching, batching, and connection

Apply production-ready Framer SDK patterns for TypeScript and Python.

Framework-specific accessibility patterns, common pitfalls, and code fix templates for React, Next.js, Vue, Angular, Svelte, and Tailwind…

Create visually strong landing pages, websites, and app UIs with restrained composition.

Staff Frontend & UI/UX Mastery Skill

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working…

Use when designing, building, auditing, or redesigning any user interface, or studying a design reference.

Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Enforces professional Vue 3 and TypeScript coding standards while preventing common AI-generated UI anti-patterns.

React, Next.js, TypeScript frontend patterns - component design, state management, performance

Generates zero-dependency, animation-rich HTML presentations with automatic viewport fitting and PowerPoint conversion capabilities.

Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and…

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects.