---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. MANDATORY AUTOMATIC INVOCATION: Use this skill whenever ANY action affects a UI element to validate visual correctness, functionality, and user experience. Also use when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
---

**Grok skill.** This maps to the shared skill in `.claude/skills/frontend-design/SKILL.md`.

Read `.claude/skills/frontend-design/SKILL.md` (use GrepAI MCP `search_tool` + `use_tool` (grepai__*) first for any context/semantic lookup per GrepAI-first rule in CLAUDE.md / .grok/README.md / .grok/skills/context/SKILL.md; `read_file` only for full content when editing) and follow it, adapting for Grok:

- Use `run_terminal_command`, `write`, `search_replace`, `read_file` (GrepAI first), image_gen/image_edit if visual, etc.
- Use `spawn_subagent` for complex UI tasks.
- MCP tools via search/use_tool (grepai for code searches).
- Obey CLAUDE.md, .grok/README.md, GrepAI-first before direct reads.

The full guidelines for distinctive non-slop UI, visual hierarchy, accessibility, performance, theming, anti-patterns, and the design process are in the source `.claude/skills/frontend-design/SKILL.md` (and its sub files if any).

Auto-invoke for any UI change. Use the impeccable skill too if available for polish.

See also: .grok/skills/impeccable/SKILL.md (if created), .claude/skills/stop-slop/SKILL.md .
