Claude MarketplacesSubmit
esramulkpinar avatar

Frontend Prime

esramulkpinar/prime-frontend-skills

This is the anti-slop skill. It enforces design decisions before code, bans the usual AI tells (purple gradients, uniform rounded corners, three-column card grids), and pushes you toward distinctive aesthetics like brutalist, editorial, or retro-futuristic. The blacklist alone is worth reading. It also handles the stuff Claude often skips: proper semantic color systems with CSS custom properties, complete SEO metadata including OpenGraph and JSON-LD, dark mode that actually looks good, and accessibility fundamentals. Use it when you're building any frontend work and want to avoid that "this was obviously generated" look. Works with Next.js but the principles apply anywhere.

skills.sh installs
173
GitHub stars
32
last updated
Jun 3, 2026
View on GitHub

Install

$ npx -y skills add esramulkpinar/prime-frontend-skills --skill frontend-prime --agent claude-code

Installs into .claude/skills of the current project.

Files

Ultimate Frontend Skill

Every output must feel intentionally crafted — never generic, never "AI slop."

1. Design Before Code

Before writing ANY code, decide:

  1. Aesthetic direction (pick ONE, match it to the product's audience): Brutally minimal · Maximalist editorial · Retro-futuristic · Organic/natural · Luxury/refined · Playful · Brutalist · Art deco · Dark/moody · Lo-fi/zine · Handcrafted · Swiss/international · Neo-glassmorphic · Industrial · Soft/pastel

  2. One unforgettable element: a scroll animation, a bold typographic moment, a micro-interaction — something memorable.

  3. Then commit fully. Half-hearted design = generic output.

2. The AI Slop Blacklist

These instantly mark output as AI-generated. Never:

  • Purple/blue gradient on white cards
  • Every element with identical rounded-xl
  • Perfectly centered, symmetrical layouts with no visual tension
  • text-gray-600 on everything
  • Cards in a perfect 3-column grid with identical heights
  • Rainbow or evenly-distributed color schemes
  • Generic hero with stock illustration placeholder

Instead, always:

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/esramulkpinar/prime-frontend-skills
Category
Frontend Development
First seen
Jun 3, 2026

Recommended

More Frontend Development
1akillness avatarreact-best-practicesakillness/oh-my-skillsreact best practices172skills.sh installs
2guanyang avatarui-ux-pro-maxguanyang/antigravity-skillsui ux pro max171skills.sh installs
3oaustegard avatardeveloping-preactoaustegard/claude-skillsSpecialized Preact development skill for standards-based web applications with native-first architecture and minimal dependency footprint. Use when building Pre167skills.sh installs
4sickn33 avatarreact-flow-node-tssickn33/antigravity-awesome-skillsreact flow node ts167skills.sh installs
5akillness avatarreact-grabakillness/oh-my-skillsreact grab163skills.sh installs
6opensensenova avatarsn-md-to-html-reportopensensenova/sensenova-skills将 Markdown 文档转换为美观、舒适、结构清晰、可直接打开的 HTML 长篇报告。适用于把 .md 文件转成 HTML、统一研究报告/行业报告/调研文档版式、生成可离线分享的单文件网页报告、嵌入或校验本地图片、修复 Markdown 表格分隔符导致的错列问题，或优化已有 HTML 报告的阅读留白、图片呈现、目录导161skills.sh installs