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

perspective

Generates implementation-ready design-system guidelines for spatial depth interfaces with isometric views.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces with spatial depth, isometric views, and layered elements often lack consistent, implementation-ready design rules, leading to inconsistent spacing, ambiguous component states, and accessibility gaps. ## Core Features & Use Cases - Design Token Foundations: Provides concrete color tokens (primary #00BD7D, success, warning, danger), typography scales (12/14/16/20/24/32 with Poppins, Oswald, JetBrains Mono), and spacing scales (4/8/12/16/24/32). - Component Rule Authoring: Defines component anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for keyboard, pointer, and touch. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements with testable acceptance criteria, anti-patterns, migration notes, and a code-review QA checklist. - Use Case: A designer-engineer pair building a dashboard with isometric 3D-like cards uses this Skill to generate token-anchored component rules and an accessibility checklist before implementation. ## Quick Start Ask the AI to generate design-system guidelines for a layered card component using the Perspective style with its defined color, typography, and spacing tokens.

Frequently Asked Questions about perspective

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

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

Define design tokens first (colors, typography, spacing), then specify component anatomy, variants, and states. This Skill provides a structured workflow covering foundations, component rules, accessibility criteria, and a QA checklist.

What design tokens does the Perspective style use?▼

Perspective uses primary color #00BD7D, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Typography uses Poppins, Oswald, and JetBrains Mono on a 12/14/16/20/24/32 scale with 4/8/12/16/24/32 spacing.

Does this design system meet WCAG accessibility standards?▼

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 must also describe interaction behavior for keyboard, pointer, and touch, plus responsive edge cases like long labels and overflow.

When should I avoid isometric and layered depth design?▼

Avoid heavy spatial depth when it creates low-contrast text, inconsistent spacing rhythm, or ambiguous labels. The Skill's don't-rules explicitly prohibit these patterns and prioritize clarity over visual novelty.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

teach-impeccable

Gather project design context and persist it into a centralized AI config.

Community
Advanced
aadilmallickaadilmallick

gluestack-ui-v5:validation

Validates gluestack-ui v5 React Native code against styling and component anti-patterns.

Community
Intermediate
ReubenFrimpongReubenFrimpong

ux

Design mobile-first responsive interfaces with theme support and accessibility.

Community
Intermediate
superpollo02superpollo02

perspective

Define isometric layered UI design instructions with WCAG 2.2 AA accessibility requirements.

Community
Intermediate