Individual skill
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.
claude/skills/frontend-design/SKILL.md
Source commit d56f17f0ba88ead3a4a77fcdc884f80cd3d10d2f
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 7, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 420
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-skills Repository topic
- claude-code Repository topic
- claude-skills Repository topic
- developer-tools Repository topic
- skills Repository topic
- codex Repository topic
- codex-skills Repository topic
- agentic-coding Repository topic
- claude-code-plugin Repository topic
- codex-plugin Repository topic
- design Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 9,669 bytes
Read excerpt
# Frontend Design
Create distinctive, production-grade frontend interfaces that feel deliberate, premium, and current. Implement real working code with exceptional attention to aesthetic details and creative choices.
## Design Thinking
Before coding, understand the context and commit to a clear aesthetic direction.
Output three things as text before coding:
- **Visual thesis**: one sentence describing mood, material, and energy (e.g., "brutally minimal dark interface with surgical precision" or "high-contrast editorial magazine feel with oversized serif headlines")
- **Content plan**: the sections in order (hero, support, detail, final CTA for a marketing page; the working surface first for product UI)
- **Interaction thesis**: 2-3 motion ideas that change the feel of the page
