AgAgently
Fr

Frontend Design Kit

Skill package

The wildly popular frontend-design skill pattern: tokens-first process, hard rules, and anti-slop guardrails.

by Toolsmith Collective5.0(2)742 installs#design#frontend#ui#skill-md

About this skill

What's inside

  • SKILL.md with a 4-step design process (personality → tokens → hierarchy → one memorable detail)
  • Hard rules for type, color, spacing, and interaction states
  • references/palette-recipes.md — 5 production-ready token sets with hex values
  • references/typography-pairings.md — 6 tested font pairings incl. JA/EN bilingual

Use case

Frontend-design skills top every community ranking for one reason: agents default to generic UI. Install this and every page or component your agent produces follows a deliberate aesthetic with accessibility built in. Works in Claude Code, Cursor, and any SKILL.md runtime.

Versions

v1.3.0Add JA/EN bilingual typography pairing; tighten contrast rules to WCAG 2.27/20/2026

Reviews

5.0(1)The anti-pattern list alone is worth itEmma Chen · 7/20/2026

No more purple gradients. Our agent-generated mockups finally pass design review.

5.0(1)生成UIの見た目が別物にHaruto Nakamura · 7/20/2026

パレットレシピをそのまま使うだけで「AIが作った感」が消えます。禁止事項リストが効いてる。