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

levels

Generates implementation-ready design system guidelines using Levels tokens, typography, and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building conversion-focused interfaces often lack consistent, opinionated design guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component behavior across products. ## Core Features & Use Cases - Design Token Foundations: Provides a defined palette (primary #27272A, secondary #8B5CF6, semantic success/warning/danger), Inter and JetBrains Mono typography scales, and a 4/8/12/16/24/32 spacing scale. - Component Rule Authoring: Guides creation of component anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review QA checklist. - Use Case: A designer-engineer pair documenting a new checkout flow can generate consistent button, form, and error-state rules anchored to the Levels tokens. ## Quick Start Use the levels skill to write design system guidelines for a conversion-focused signup form with accessible button and input states.

Frequently Asked Questions about levels

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

FAQPage Schema
How do I create design system guidelines for a conversion-focused UI?▼

Start by restating the design intent, then define tokens and foundations before component rules. Specify anatomy, states, and variants for each component, add accessibility acceptance criteria, and finish with a QA checklist for code review.

What color and typography tokens does the Levels design system use?▼

Levels uses primary #27272A, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Inter for primary and display text, JetBrains Mono for labels, on a 12/14/16/20/24/32 scale.

Does this design guidance meet WCAG accessibility standards?▼

Yes, the guidelines target WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility rule must be testable in implementation, and accessibility takes priority over aesthetics when conflicts arise.

What component states should design system rules define?▼

Rules should cover default, hover, focus-visible, active, disabled, loading, and error states as relevant. They must also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and empty states.

When should I use semantic tokens instead of raw color values?▼

Always prefer semantic tokens over raw hex values to preserve visual hierarchy and system consistency. Raw values create one-off local optimizations that break spacing rhythm and make future theme changes harder to migrate.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
WP-CoachingWP-Coaching

tailwind-design-system

Builds Tailwind CSS design systems with tokens, CVA variants, and accessible components.

Official
Intermediate
MANR255926MANR255926

artistic

Generates design-system guidelines using the Artistic high-contrast token set and typography scale.

Community
Intermediate
idy-00idy-00

migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Community
Intermediate