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

premium

Generates implementation-ready design system guidelines using Apple-inspired tokens 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 premium-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: premium
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/premium
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill premium-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building modern interfaces often lack consistent, opinionated design-system guidance, leading to inconsistent spacing, ambiguous component states, and accessibility gaps across their UI. ## Core Features & Use Cases - Design Token Foundations: Provides a complete token set including colors (primary #3B82F6, secondary #8B5CF6), typography (Inter, JetBrains Mono, 12-36px scale), and spacing (4-32px scale). - Component Rule Authoring: Generates component-level guidance covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Enforcement: Anchors every rule to WCAG 2.2 AA with testable acceptance criteria, keyboard-first interactions, and visible focus states. - Use Case: A frontend engineer building a new dashboard asks for button and form guidelines; the Skill produces token-anchored rules, anti-patterns, migration notes, and a QA checklist ready for code review. ## Quick Start Use the premium skill to generate design-system guidelines for a card component including states, spacing tokens, and accessibility acceptance criteria.

Frequently Asked Questions about premium

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

FAQPage Schema
How do I create design system guidelines for UI components?▼

Define tokens and foundational constraints first, then specify component anatomy, states, variants, and interaction behavior. This Skill follows a six-step authoring workflow ending with accessibility acceptance criteria and a QA checklist executable in code review.

What design tokens does the premium style include?▼

The token set includes primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Inter and JetBrains Mono on a 12/14/16/18/24/30/36 scale, with spacing on a 4/8/12/16/24/32 scale.

Does this design system meet WCAG accessibility standards?▼

Yes, the guidelines target WCAG 2.2 AA 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.

How to define component states in a design system?▼

Define required states including default, hover, focus-visible, active, disabled, loading, and error as relevant. Describe interaction behavior for keyboard, pointer, and touch, and state spacing, typography, and color-token usage explicitly.

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

Always prefer semantic tokens over raw hex or pixel values to preserve visual hierarchy and system consistency. Raw values break theming and make migration harder; the Skill's do-rules explicitly require token-anchored guidance over one-off local optimizations.

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
MANR255926MANR255926

enterprise

Generates implementation-ready design-system guidelines for dark-themed enterprise dashboards.

Community
Intermediate
scsm-unrestrictscsm-unrestrict
1

a11y-responsive

Implements and audits accessibility, responsive layouts, and cross-browser compatibility for web interfaces.

Community
Intermediate
MadAppGangMadAppGang
7

design-references

Provide design system references for UI review tasks.

Official
Basic