agentsclimarketplace
Sign in

Mern styleguide

Skill edfenton/claude-skills/mern/mern-styleguide

Design and UI style guide for MERN web apps. Premium consumer aesthetic.From its SKILL.md

Install
npx -y skills add edfenton/claude-skills --skill mern-styleguide

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.0 KB, 185 tokens by cl100k_base, as published. Nobody here has run it

Purpose

Enforce design quality and brand differentiation. Complements security, NFR, and coding standards skills.

For brand identity (colors, fonts, design direction, anti-patterns), see /shared-brand.

MERN-specific anti-patterns

  • Default shadcn examples shipped unchanged
  • Template SaaS layouts with no variation

Requirements

Responsive

  • Mobile, tablet, desktop, large desktop
  • Layouts adapt intentionally, not merely shrink
  • Navigation patterns may change by breakpoint

Accessibility

  • WCAG 2.1 AA minimum
  • Keyboard navigation with visible focus states
  • Respect prefers-reduced-motion

Browser support

  • Chrome, Safari (including iOS), Firefox, Edge (latest)
  • Mobile Safari mandatory; no Chromium-only behavior

Reference

For semantic tokens, breakpoints, and detailed patterns, see reference/mern-styleguide-reference.md

What ships with it: 1 file

8.3 KB alongside SKILL.md

reference/

Keep looking

Skills are one crate of 326,736. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.