claudetools/.grok/skills/frontend-design/SKILL.md at 295126ee6c4abe2588f94de0e022eabdbb1c925d

Files

Mike Swanson 6de0ce6098 sync: auto-sync from GURU-5070 at 2026-06-03 11:52:45

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-03 11:52:45

2026-06-03 11:52:52 -07:00

1.7 KiB

Raw Blame History

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 .

1.7 KiB Raw Blame History

1.7 KiB

Raw Blame History