# Nean Styleguide

> Design and UI style guide for NEAN web apps. Premium consumer aesthetic.

- Skill: `majiayu000/nean-styleguide` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nean-styleguide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nean-styleguide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nean-styleguide

---


## 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`.

## PrimeNG customization

- Never use default PrimeNG themes unchanged
- Customize theme via CSS variables or custom SCSS
- Ensure components match brand aesthetic
- Override default spacing and typography

## NEAN-specific anti-patterns

- Default PrimeNG 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
- PrimeNG responsive utilities + Tailwind breakpoints

### Accessibility

- WCAG 2.1 AA minimum
- Keyboard navigation with visible focus states
- Respect `prefers-reduced-motion`
- Proper ARIA labels on interactive elements
- PrimeNG components are accessible by default; don't break this

### 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/nean-styleguide-reference.md`