{"id":"941af27b-f8ed-4b8d-b5ad-1b9917f57fed","shortId":"jt3hAZ","kind":"skill","title":"perspective","tagline":"Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Perspective Design Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Perspective Design.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nThis style moves beyond flat design by employing techniques like isometric views, vanishing points, and layered elements to guide the user's attention and create a sense of realism or \"spatial\" depth.     \n\n## Style Foundations\n- Visual style: modern, clean, high-contrast\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Poppins, display=Oswald, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#00BD7D, secondary=#00BD7D, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\n\n## Expected Behavior\n- Follow the foundations first, then component consistency.\n- When uncertain, prioritize accessibility and clarity over novelty.\n- Provide concrete defaults and explain trade-offs when alternatives are possible.\n- Keep guidance opinionated, concise, and implementation-focused.\n\n## Guideline Authoring Workflow\n1. Restate the design intent in one sentence before proposing rules.\n2. Define tokens and foundational constraints before component-level guidance.\n3. Specify component anatomy, states, variants, and interaction behavior.\n4. Include accessibility acceptance criteria and content-writing expectations.\n5. Add anti-patterns and migration notes for existing inconsistent UI.\n6. End with a QA checklist that can be executed in code review.\n\n## Required Output Structure\nWhen generating design-system guidance, use this structure:\n- Context and goals\n- Design tokens and foundations\n- Component-level rules (anatomy, variants, states, responsive behavior)\n- Accessibility requirements and testable acceptance criteria\n- Content and tone standards with examples\n- Anti-patterns and prohibited implementations\n- QA checklist\n\n## Component Rule Expectations\n- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).\n- Describe interaction behavior for keyboard, pointer, and touch.\n- State spacing, typography, and color-token usage explicitly.\n- Include responsive behavior and edge cases (long labels, empty states, overflow).\n\n## Quality Gates\n- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.\n- Every accessibility statement must be testable in implementation.\n- Prefer system consistency over one-off local optimizations.\n- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.\n\n## Example Constraint Language\n- Use \"must\" for non-negotiable rules and \"should\" for recommendations.\n- Pair every do-rule with at least one concrete don't-example.\n- If introducing a new pattern, include migration guidance for existing components.\n\n<!-- TYPEUI_SH_MANAGED_END -->","tags":["perspective","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-perspective","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-agents","topic-ai-agents","topic-ai-tools","topic-awesome","topic-awesome-list","topic-awesome-readme","topic-claude-design","topic-codex","topic-cursor"],"categories":["awesome-design-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/bergside/awesome-design-skills/perspective","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add bergside/awesome-design-skills","source_repo":"https://github.com/bergside/awesome-design-skills","install_from":"skills.sh"}},"qualityScore":"0.589","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 277 github stars · SKILL.md body (3,402 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T12:53:54.886Z","embedding":null,"createdAt":"2026-04-18T22:11:36.435Z","updatedAt":"2026-05-02T12:53:54.886Z","lastSeenAt":"2026-05-02T12:53:54.886Z","tsv":"'00bd7d':127,129 '1':228 '100':109 '111827':139 '12/14/16/20/24/32':99 '16a34a':131 '2':239 '2.2':145 '200':110 '3':250 '300':111 '3d':18 '3d-like':17 '4':259 '4/8/12/16/24/32':142 '400':112 '5':269 '500':113 '6':281 '600':114 '700':115 '800':116 '900':117 'aa':146 'accept':262,326 'access':143,200,261,322,407,428,431 'activ':353 'add':270 'adject':395 'aesthet':426 'alon':396 'altern':214 'ambigu':186,394 'anatomi':253,317 'anchor':397 'anti':272,335 'anti-pattern':271,334 'attent':15,78 'author':36,226 'avoid':177,181,185 'behavior':189,258,321,361,378 'beyond':59 'brand':55 'case':381 'checklist':286,341 'clariti':202 'clean':93 'code':292 'color':118,372 'color-token':371 'compon':195,247,252,314,342,470 'component-level':246,313 'concis':156,220 'concret':206,455 'confid':157 'conflict':424 'consist':196,416 'constraint':244,433 'content':266,328 'content-writ':265 'context':306 'contrast':96,179 'creat':40,80 'criteria':263,327 'd97706':133 'danger':124,134 'dc2626':135 'default':207,348 'defin':240,345 'depend':392 'depth':3,87 'describ':359 'design':4,22,23,33,39,54,61,231,300,309 'design-system':32,299 'direct':49 'disabl':354 'display':103 'do-rul':448 'edg':380 'element':12,72 'employ':63 'empti':384 'end':282 'engin':52 'error':356 'everi':406,447 'exampl':333,405,432,459 'execut':290 'exist':278,469 'expect':188,268,344 'expert':31 'explain':209 'explicit':173,375 'ffffff':137 'first':149,193 'flag':423 'flat':60 'focus':152,224,351 'focus-vis':350 'follow':190 'font':100 'foundat':89,192,243,312 'gate':388 'generat':298 'goal':308 'guid':14,74 'guidanc':45,218,249,302,467 'guidelin':35,225 'help':158 'hierarchi':169 'high':95 'high-contrast':94 'hover':349 'implement':43,223,339,413 'implementation-focus':222 'implementation-readi':42 'includ':260,376,465 'inconsist':182,279 'intent':232 'interact':150,171,257,360 'introduc':461 'isometr':6,66 'jetbrain':106 'keep':170,217 'keyboard':148,363 'keyboard-first':147 'label':187,383 'languag':434 'layer':11,71 'least':453 'level':248,315 'like':19,65 'load':355 'local':421 'long':382 'low':178 'migrat':275,466 'mission':27 'modern':92 'mono':105,107 'move':58 'must':409,436 'negoti':440 'neutral':121 'new':463 'non':439 'non-negoti':438 'note':276 'novelti':204 'off':212 'one':234,419,454 'one-off':418 'opinion':219 'optim':422 'oswald':104 'output':295 'overflow':386 'pair':446 'palett':119 'pattern':273,336,464 'perspect':1,21,38 'point':9,69 'pointer':364 'poppin':102 'possibl':216 'practic':41 'prefer':161,414 'preserv':167 'primari':101,120,126 'priorit':199,430 'prohibit':338 'propos':237 'provid':205 'qa':285,340 'qualiti':387 'raw':165 'readi':44 'realism':20,84 'recommend':445 'relev':358 'requir':294,323,346 'respons':320,377 'restat':229 'review':293 'rhythm':184 'rule':159,174,238,316,343,390,399,441,450 'scale':98,141 'secondari':128 'semant':162 'sens':82 'sentenc':235 'skill':25 'skill-perspective' 'source-bergside' 'space':140,183,368 'spatial':2,86 'specifi':251 'standard':331 'state':153,172,254,319,347,367,385 'statement':408 'structur':296,305 'style':57,88,91 'success':122,130 'surfac':136 'system':24,34,301,415 't-exampl':457 'techniqu':64 'testabl':325,411 'text':138,180 'threshold':403 'token':125,163,241,310,373,402 'tone':155,330 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-agents' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome' 'topic-awesome-list' 'topic-awesome-readme' 'topic-claude-design' 'topic-codex' 'topic-cursor' 'touch':366 'trade':211 'trade-off':210 'typographi':97,369 'ui':280 'uncertain':198 'univers':26 'usag':374 'use':50,303,435 'user':76 'valu':166 'vanish':8,68 'variant':255,318 'view':7,67 'visibl':151,352 'visual':90,168 'warn':123,132 'wcag':144 'weight':108 'workflow':227 'write':154,267","prices":[{"id":"acc01984-ffe2-4ad8-ac2c-c67884f98502","listingId":"941af27b-f8ed-4b8d-b5ad-1b9917f57fed","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"bergside","category":"awesome-design-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:11:36.435Z"}],"sources":[{"listingId":"941af27b-f8ed-4b8d-b5ad-1b9917f57fed","source":"github","sourceId":"bergside/awesome-design-skills/perspective","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/perspective","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:36.435Z","lastSeenAt":"2026-05-02T12:53:54.886Z"}],"details":{"listingId":"941af27b-f8ed-4b8d-b5ad-1b9917f57fed","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"perspective","github":{"repo":"bergside/awesome-design-skills","stars":277,"topics":["agent-skills","agentic-ai","agentic-workflow","agents","ai","ai-agents","ai-tools","awesome","awesome-list","awesome-readme","claude-design","codex","cursor","design","design-md","design-system","google-stitch","skills"],"license":"mit","html_url":"https://github.com/bergside/awesome-design-skills","pushed_at":"2026-05-01T09:16:36Z","description":"List of awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools","skill_md_sha":"8d3677abe98575c634839c91ff8a152ef19173c5","skill_md_path":"skills/perspective/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/perspective"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"perspective","license":"MIT","description":"Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/perspective"},"updatedAt":"2026-05-02T12:53:54.886Z"}}