skills.rest
edfenton
edfentonCOMMUNITY
Explore all skills by this author →
Website𝕏@edfentonGitHub

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
One-click install
npx skills add https://github.com/edfenton/claude-skills --skill nean-styleguide
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
DevXojeDevXoje

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Community
Basic
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
Ankish8Ankish8
2

Design System Validator

Validate component code for CSS variables, responsive patterns, and accessibility compliance.

Community
Advanced
duc01226duc01226

design

Coordinate design tasks across brand identity, design-system tokens, and UI styling.

Community
Intermediate