AgentToolHub
Skill

frontend-prime

frontend-prime — a Claude Code skill from esramulkpinar/prime-frontend-skills

Features

  • ✓Design decisions before code
  • ✓AI slop blacklist — what never to do
  • ✓Distinctive fonts and color systems
  • ✓Dark mode done right (3-layer token architecture)
  • ✓SEO by default (meta, OG, JSON-LD, sitemap)
  • ✓Accessibility, performance, security reminders

Installation Guide

bash
npx skills add EsraMulkpinar/prime-frontend-skills

Per Agent

bash
npx skills add EsraMulkpinar/prime-frontend-skills -a claude-code     # Claude Code
npx skills add EsraMulkpinar/prime-frontend-skills -a cursor           # Cursor
npx skills add EsraMulkpinar/prime-frontend-skills -a vscode           # VS Code / Copilot
npx skills add EsraMulkpinar/prime-frontend-skills -a codex            # Codex
npx skills add EsraMulkpinar/prime-frontend-skills -a windsurf         # Windsurf
npx skills add EsraMulkpinar/prime-frontend-skills -a '*'              # All agents

Using on Claude.ai

Project-based (recommended): claude.ai → Projects → Project Knowledge → drag & drop SKILL.md. Active in every chat within that project.

Single chat: Click 📎 → upload SKILL.md.

What it does

AI agents keep producing the same generic output: purple gradients, symmetrical card grids, no SEO. This skill fixes that:

  • Design decisions before code

  • AI slop blacklist — what never to do

  • Distinctive fonts and color systems

  • Dark mode done right (3-layer token architecture)

  • SEO by default (meta, OG, JSON-LD, sitemap)

  • Accessibility, performance, security reminders

    • Reviews