{"id":"b431f269-929c-4288-a05c-5b32e29c2ef5","shortId":"7V6qk6","kind":"skill","title":"futuristic","tagline":"Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Futuristic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Futuristic.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\n\n## Style Foundations\n- Visual style: modern\n- Typography scale: desktop-first expressive scale | Fonts: primary=Roboto, display=Audiowide, mono=Anonymous Pro | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, 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":["futuristic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-futuristic","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/futuristic","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,173 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:53.740Z","embedding":null,"createdAt":"2026-04-18T22:11:25.112Z","updatedAt":"2026-05-02T12:53:53.740Z","lastSeenAt":"2026-05-02T12:53:53.740Z","tsv":"'1':193 '100':74 '111827':104 '16a34a':96 '2':204 '2.2':110 '200':75 '3':215 '300':76 '3b82f6':92 '4':224 '4/8/12/16/24/32':107 '400':77 '5':234 '500':78 '6':246 '600':79 '700':80 '800':81 '8b5cf6':94 '900':82 'aa':111 'accept':227,291 'access':108,165,226,287,372,393,396 'activ':318 'add':235 'adject':360 'aesthet':19,391 'alon':361 'altern':179 'ambigu':151,359 'anatomi':218,282 'anchor':362 'anonym':71 'anti':237,300 'anti-pattern':236,299 'audiowid':69 'author':34,191 'avoid':142,146,150 'behavior':154,223,286,326,343 'brand':52 'case':346 'checklist':251,306 'clariti':167 'code':257 'color':83,337 'color-token':336 'compon':160,212,217,279,307,435 'component-level':211,278 'concis':121,185 'concret':171,420 'confid':122 'conflict':389 'consist':161,381 'constraint':209,398 'content':231,293 'content-writ':230 'context':271 'contrast':144 'creat':37 'criteria':228,292 'd97706':98 'danger':89,99 'dc2626':100 'default':172,313 'defin':205,310 'depend':357 'describ':324 'design':5,21,31,51,196,265,274 'design-system':30,264 'desktop':61 'desktop-first':60 'direct':46 'disabl':319 'display':68 'do-rul':413 'driven':18 'edg':345 'empti':349 'end':247 'engin':49 'error':321 'everi':371,412 'exampl':298,370,397,424 'execut':255 'exist':243,434 'expect':153,233,309 'expert':29 'explain':174 'explicit':138,340 'express':63 'ffffff':102 'first':62,114,158 'flag':388 'focus':117,189,316 'focus-vis':315 'follow':155 'font':65 'forward':3 'forward-look':2 'foundat':54,157,208,277 'futurist':1,20,36 'gate':353 'generat':263 'goal':273 'guidanc':42,183,214,267,432 'guidelin':33,190 'help':123 'hierarchi':134 'hover':314 'implement':40,188,304,378 'implementation-focus':187 'implementation-readi':39 'includ':225,341,430 'inconsist':147,244 'innov':17 'innovation-driven':16 'inspir':9 'intent':197 'interact':115,136,222,325 'introduc':426 'keep':135,182 'keyboard':113,328 'keyboard-first':112 'label':152,348 'languag':399 'layout':12 'least':418 'level':213,280 'load':320 'local':386 'long':347 'look':4 'low':143 'migrat':240,431 'mission':25 'modern':11,57 'mono':70 'must':374,401 'negoti':405 'neutral':86 'new':428 'non':404 'non-negoti':403 'note':241 'novelti':169 'off':177 'one':199,384,419 'one-off':383 'opinion':184 'optim':387 'output':260 'overflow':351 'pair':411 'palett':84 'pattern':238,301,429 'pointer':329 'possibl':181 'practic':38 'prefer':126,379 'preserv':132 'primari':66,85,91 'priorit':164,395 'pro':72 'prohibit':303 'propos':202 'provid':170 'qa':250,305 'qualiti':352 'raw':130 'readi':41 'recommend':410 'relev':323 'requir':259,288,311 'respons':285,342 'restat':194 'review':258 'rhythm':149 'roboto':67 'rule':124,139,203,281,308,355,364,406,415 'scale':59,64,106 'secondari':93 'semant':127 'sentenc':200 'skill':23 'skill-futuristic' 'sleek':15 'source-bergside' 'space':105,148,333 'specifi':216 'standard':296 'state':118,137,219,284,312,332,350 'statement':373 'structur':261,270 'style':53,56 'success':87,95 'surfac':101 'system':22,32,266,380 't-exampl':422 'tech':8 'tech-inspir':7 'testabl':290,376 'text':103,145 'threshold':368 'token':90,128,206,275,338,367 'tone':120,295 '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':331 'trade':176 'trade-off':175 'typographi':10,58,334 'ui':245 'uncertain':163 'univers':24 'usag':339 'use':47,268,400 'valu':131 'variant':220,283 'visibl':116,317 'visual':55,133 'warn':88,97 'wcag':109 'weight':73 'workflow':192 'write':119,232","prices":[{"id":"f2b5d179-9fd1-4006-9f9f-d512ac8540e0","listingId":"b431f269-929c-4288-a05c-5b32e29c2ef5","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:25.112Z"}],"sources":[{"listingId":"b431f269-929c-4288-a05c-5b32e29c2ef5","source":"github","sourceId":"bergside/awesome-design-skills/futuristic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/futuristic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:25.112Z","lastSeenAt":"2026-05-02T12:53:53.740Z"}],"details":{"listingId":"b431f269-929c-4288-a05c-5b32e29c2ef5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"futuristic","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":"0ab78492893c312c3d6efe64944f88f9d43e3f5b","skill_md_path":"skills/futuristic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/futuristic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"futuristic","license":"MIT","description":"Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/futuristic"},"updatedAt":"2026-05-02T12:53:53.740Z"}}