Claude MarketplacesSubmit
block avatar

Frontend Design

block/agent-skillsOfficial

If you're tired of churning out the same purple gradient hero sections and Inter font layouts, this one's worth trying. It pushes you to commit to bold aesthetic directions before writing code, whether that's brutalist rawness, art deco geometry, or maximalist chaos. The guidance is opinionated about avoiding generic AI aesthetics: it wants distinctive typography, cohesive color systems with CSS variables, intentional motion design, and unexpected spatial composition. The key insight is matching implementation complexity to your vision. Minimalist designs need restraint and precision, while maximalist ones demand elaborate animations and effects. It works with plain HTML/CSS/JS or modern frameworks like React and Vue.

skills.sh installs
405
GitHub stars
26
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add block/agent-skills --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Files

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
  • Constraints: Technical requirements (framework, performance, accessibility).
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/block/agent-skills
Categories
Frontend Development, DevOps & CI/CD, Code Review & Quality, AI & Agent Building, Design & UI/UX
First seen
Jun 3, 2026

More from block/agent-skills

All 2

Recommended

More Frontend Development
1vercel-labs avatarshadcnvercel-labs/vercel-pluginshadcn399skills.sh installs
2aradotso avatar3dsvg-interactive-reactaradotso/trending-skills3dsvg interactive react393skills.sh installs
3levnikolaevich avatarln-114-frontend-docs-creatorlevnikolaevich/claude-code-skillsCreates design_guidelines.md with WCAG 2.1 compliance and design system docs. Use when project has a frontend.384skills.sh installs
4aradotso avatarisolet-widget-isolationaradotso/trending-skillsisolet widget isolation371skills.sh installs
5patricio0312rev avatari18n-frontend-implementerpatricio0312rev/skillsAdds internationalization (i18n) infrastructure with translation plumbing, scalable key strategy, formatters for dates/numbers/currency, plural rules, and langu371skills.sh installs
6pedronauck avatarzustandpedronauck/skillsExpert guide for Zustand state management patterns, store organization, and best practices. Use when implementing client state management with Zustand, creating362skills.sh installs