frontend-design

4680 stars 499 forks

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Marketplace

#production-grade#frontend#production-grade frontend#refined#aesthetics#skills#aesthetic#distinctive

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →

Claude Code (CLI) Fast

skilz install anthropics/claude-plugins-official/frontend-design

OpenCode (CLI) Fast

skilz install anthropics/claude-plugins-official/frontend-design --agent opencode

OpenAI Codex (CLI) Native

skilz install anthropics/claude-plugins-official/frontend-design --agent codex

Gemini CLI (Project) Project

skilz install anthropics/claude-plugins-official/frontend-design --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents

For Claude Desktop Easy

Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

Manual Installation

1. Clone the repository:

git clone https://github.com/anthropics/claude-plugins-official

2. Copy the agent skill directory:

cp -r claude-plugins-official/plugins/frontend-design/skills/frontend-design ~/.claude/skills/

Agentic Skill Grades →

AI-Detected Topics

Extracted using NLP analysis

production-grade frontend production-grade frontend refined aesthetics skills aesthetic distinctive Frontend Aesthetics claude-code

Report Security Issue

Found a security vulnerability in this agent skill?