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

application

Generates implementation-ready design system guidelines for a purple-themed application dashboard.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building an application dashboard often lack consistent, documented design rules, leading to inconsistent spacing, ambiguous component states, and accessibility gaps across the UI. ## Core Features & Use Cases - Design Token Foundations: Defines color tokens (primary #9333ea purple, success, warning, danger), typography scales (12/14/16/20/32 with Inter and JetBrains Mono), and spacing scales (4/8/12/16/24/32). - Component-Level Rules: Produces guidance covering anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior. - Accessibility & QA Standards: Enforces WCAG 2.2 AA requirements with testable acceptance criteria, anti-patterns, and a code-review QA checklist. - Use Case: A designer asks for button component rules for the dashboard; the Skill outputs token-anchored state definitions, keyboard interaction behavior, and migration notes for inconsistent existing UI. ## Quick Start Generate design system guidelines for the card component of my purple-themed application dashboard including states, tokens, and accessibility criteria.

Frequently Asked Questions about application

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

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

Start by defining design tokens for color, typography, and spacing before writing component-level rules. This Skill generates guidance covering component anatomy, states, variants, accessibility criteria, and a QA checklist for code review.

What design tokens does this dashboard style use?▼

The palette uses primary purple #9333ea, secondary #a855f7, success #10b981, warning #f59e0b, and danger #ef4444. Typography uses Inter and JetBrains Mono on a 12/14/16/20/24/32 scale, with a 4/8/12/16/24/32 spacing scale.

Does the guidance cover accessibility requirements?▼

Yes, it targets 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.

What component states should design system rules define?▼

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

When should I not use this design system style?▼

This style fits modern, clean, high-contrast dashboards with top-bar navigation and card layouts. It is not suited for sidebar-heavy enterprise apps, dark-themed products, or brands requiring a different color identity.

Related Skills

Explore More Design & Creative Skills→
529-studio529-studio
2

frontend-design-direction

Define audience-specific tone and layout constraints for web interfaces.

Official
Intermediate
mrdonleemrdonlee

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui with CSS-variable theming in Vite React projects.

Community
Advanced
trevorc-aitrevorc-ai

visual_accessibility

Audit UI color contrast, color-reliant cues, and focus state visibility.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced