skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

neon

Generates implementation-ready design-system guidelines using Neon high-contrast tokens and accessibility rules.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#neon#component guidelines
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill neon-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neon
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/neon
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill neon-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building bold, high-contrast interfaces often lack consistent, implementation-ready design-system documentation, leading to inconsistent spacing, ambiguous component states, and accessibility gaps. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #BBF351, secondary #00BCFF), typography scales (14/16/18/24/32/40), and spacing scales (4/8/12/16/24/32) for the Neon style. - Structured Guideline Authoring: Produces component-level rules covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Acceptance Criteria: Enforces WCAG 2.2 AA compliance with testable requirements, anti-patterns, and a QA checklist for code review. - Use Case: A designer-engineer pair needs to document a new button component for a neon-styled product; the Skill outputs token-anchored rules, interaction states, and accessibility criteria ready for implementation. ## Quick Start Use the neon skill to write design-system guidelines for a primary button component including states, tokens, and accessibility criteria.

Frequently Asked Questions about neon

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

FAQPage Schema
How do I create design-system guidelines for a high-contrast UI style?▼

Define foundational tokens first—colors, typography scale, and spacing—then specify component anatomy, states, and variants. This Skill generates that structure using the Neon palette with primary #BBF351 and secondary #00BCFF tokens.

What design tokens does the Neon style include?▼

Neon includes color tokens (primary #BBF351, secondary #00BCFF, success, warning, danger, surface, text), a typography scale of 14/16/18/24/32/40 using Roboto, STIX Two Text, and Source Code Pro, plus a spacing scale of 4/8/12/16/24/32.

Does this Skill cover accessibility requirements for components?▼

Yes, it enforces WCAG 2.2 AA compliance with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should design-system documentation include?▼

Documentation should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. It should also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I not use a high-contrast neon design style?▼

Avoid neon high-contrast styling when low contrast text or inconsistent spacing rhythm would result, or when the product context demands subdued, content-first visuals. The Skill explicitly prohibits low contrast text and ambiguous labels.

Related Skills

Explore More Design & Creative Skills→
edfentonedfenton
3

shared-brand

Codify brand tokens, typography constraints, and anti-patterns for iOS, web, and apps.

Community
Basic
EndavaEndava
160

BEEQ

Guide BEEQ component selection, integration, and styling across web frameworks.

Official
Advanced
selrai-companyselrai-company

web-accessibility

Audit and improve web interfaces for WCAG 2.1 accessibility compliance.

Official
Intermediate
guideopsguideops

dramatic

Generate a design system with high-contrast palettes and responsive scales.

Community
Intermediate