nean-styleguide

Define NEAN design tokens, typography, spacing, and component patterns.

3|1|Updated Feb 12, 2026

Search Tags:#design #branding #ui #accessibility #tokens #styleguide #nean

Ready to run

npx skills add https://github.com/edfenton/claude-skills --skill nean-styleguide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nean-styleguide
Source: https://github.com/edfenton/claude-skills/tree/main/nean/nean-styleguide
Command: npx skills add https://github.com/edfenton/claude-skills --skill nean-styleguide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and UI style guide for NEAN web apps. It ensures a premium, consistent, accessible user interface and differentiates the brand across products.

Core Features & Use Cases

Establish brand identity through color tokens, typography, spacing, and a scalable design system that guides product teams.
Provide a robust set of patterns for responsive layouts, component usage, and accessibility compliance across NEAN apps.
Use Case: When starting a new NEAN project, teams reference this guide to align on visuals before implementing components and screens.

Quick Start

Apply the NEAN styleguide to a new NEAN project by importing tokens and typography scales and applying them to the base layout.

Frequently Asked Questions about nean-styleguide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce UI consistency across multiple web apps?▼

Apply a standardized design system using semantic tokens, typography scales, spacing rules, and component patterns to enforce UI consistency across web apps. This approach guarantees a premium, accessible user interface and differentiates the brand across products.

What is included in a design system styleguide for web projects?▼

A web project styleguide includes semantic color tokens, typography scales, responsive breakpoints, component patterns, and accessibility guidelines. These reference materials align designers and developers on brand visuals before implementation.

How do I set up design tokens and typography for a new web project?▼

Import predefined semantic tokens and typography scales into your base layout to set up a new web project. This quickly establishes responsive patterns, accessibility compliance, and brand identity across foundational components and screens.

Does this styleguide support responsive layouts and accessibility compliance?▼

Yes, the styleguide supports responsive layouts and accessibility compliance by defining specific responsive breakpoints and accessibility guidelines. These patterns ensure scalable design and compliance across all application components.

When should I use a predefined styleguide instead of building UI from scratch?▼

Use a predefined styleguide instead of building UI from scratch when starting a new project or refreshing an interface. It prevents visual fragmentation by providing established design tokens and component patterns, ensuring immediate brand alignment.