AI agent skill
Frontend Design
Direction for distinctive UI work so an agent does not reach for the same generic layout, palette, and component soup on every page.
·
This page is available to readers but is excluded from the public index, because it does not yet meet the evaluation standard.
When to use this skill
Use Frontend Design when the agent is about to generate UI and you care how it looks: a marketing page, a new app shell, or a redesign. It steers away from generic default layouts.
When not to use it
Skip it for backend-only work. Skip it when the design system is already strict and the job is to match existing components, not invent an aesthetic.
How to install
- Personal install: create ~/.claude/skills/frontend-design/SKILL.md (and any bundled scripts) so Claude Code, Claude Desktop, and compatible agents can load it in every project.
- Project install: commit the same folder at .claude/skills/frontend-design/ so teammates get the skill with the repo.
- Restart the agent session after copying files so it re-scans the skills directory, then ask for the task in words that match the skill description.
What this skill does
Most generated UIs converge. This skill forces an explicit aesthetic, type choices, and layout rules before the first component is written.
Intended uses
- Brief a new marketing landing page
- Redesign a settings screen with a named aesthetic
- Stop an agent from reintroducing purple gradients
Related skills
Related skills in this directory, for comparison before you install another skill.
coding
Web App Testing
Drive a real browser against a local or deployed web app: click, type, assert visible state — not just unit tests of components.
creativity
PowerPoint Skill
Generate and edit PowerPoint (.pptx) decks with real slides, not markdown pretending to be a presentation.
coding
Writing Skills
Edit, tighten, and verify SKILL.md files so they trigger reliably and stay short enough for progressive disclosure.
creativity
3D Isometric Miniature Diorama
A reusable prompt for asking an AI assistant to work as 3D Isometric Miniature Diorama.