{"id":"366bfe7d-2255-44f1-97d2-1638aeaa6712","shortId":"MQ4mtv","kind":"skill","title":"energetic","tagline":"Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Energetic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Energetic.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nEnergetic design style embodies vibrant, dynamic, and bold aesthetics. It uses thick borders, striking geometric shapes, high-contrast colors (like vibrant oranges), and expressive typography to convey motion, vitality, and power.\n\n## Style Foundations\n- Visual style: bold, geometric, vibrant, thick-bordered\n- Typography scale: 12/14/16/20/24/32/48 | Fonts: primary=Limelight, display=Limelight, mono=JetBrains Mono | weights=400\n- Color palette: primary, secondary, neutral | Tokens: primary=#EA580B, secondary=#F59E0B, background=#FFEDD5, surface=#FDBA74, text=#EA580C\n- Spacing scale: 4/8/12/16/24/32/48/64\n- Borders: Thick 4px borders are a signature element.\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states. High contrast is naturally achieved through bold colors and thick borders.\n\n## Writing Tone\npunchy, dynamic, motivating, bold\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- use thick (4px) borders for structural elements and containers\n- preserve visual hierarchy with bold typography and scale\n- keep interaction states explicit with scale/transform animations\n\n## Rules: Don't\n- avoid thin or delicate borders\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid subtle or slow animations; prefer snappy, spring-based motion\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":["energetic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-energetic","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/energetic","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,692 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.276Z","embedding":null,"createdAt":"2026-04-18T22:11:20.597Z","updatedAt":"2026-05-02T12:53:53.276Z","lastSeenAt":"2026-05-02T12:53:53.276Z","tsv":"'1':263 '12/14/16/20/24/32/48':98 '2':274 '2.2':138 '3':285 '4':294 '4/8/12/16/24/32/48/64':127 '400':108 '4px':130,174 '5':304 '6':316 'aa':139 'accept':297,361 'access':136,235,296,357,442,463,466 'achiev':151 'activ':388 'add':305 'adject':430 'aesthet':62,461 'alon':431 'altern':249 'ambigu':429 'anatomi':288,352 'anchor':432 'anim':195,216 'anti':307,370 'anti-pattern':306,369 'author':35,261 'avoid':199,204,208,212 'background':119 'base':221 'behavior':224,293,356,396,413 'bold':61,90,153,163,185 'border':7,66,95,128,131,157,175,203 'brand':53 'case':416 'checklist':321,376 'clariti':237 'code':327 'color':13,73,109,154,407 'color-token':406 'compon':230,282,287,349,377,505 'component-level':281,348 'concis':255 'concret':241,490 'conflict':459 'consist':231,451 'constraint':279,468 'contain':180 'content':301,363 'content-writ':300 'context':341 'contrast':12,72,148,206 'convey':17,81 'creat':38 'criteria':298,362 'default':242,383 'defin':275,380 'delic':202 'depend':427 'describ':394 'design':22,32,52,55,266,335,344 'design-system':31,334 'direct':47 'disabl':389 'display':102 'do-rul':483 'dynam':2,59,161 'ea580b':116 'ea580c':124 'edg':415 'element':135,178 'embodi':57 'empti':419 'end':317 'energet':1,21,37,54 'engin':50 'error':391 'everi':441,482 'exampl':368,440,467,494 'execut':325 'exist':313,504 'expect':223,303,379 'expert':30 'explain':244 'explicit':192,410 'express':15,78 'f59e0b':118 'fdba74':122 'ffedd5':120 'first':142,228 'flag':458 'focus':145,259,386 'focus-vis':385 'follow':225 'font':99 'foundat':87,227,278,347 'gate':423 'generat':333 'geometr':8,68,91 'goal':343 'guidanc':43,253,284,337,502 'guidelin':34,260 'hierarchi':183 'high':11,71,147 'high-contrast':10,70 'hover':384 'implement':41,258,374,448 'implementation-focus':257 'implementation-readi':40 'includ':295,411,500 'inconsist':209,314 'intent':267 'interact':143,190,292,395 'introduc':496 'jetbrain':105 'keep':189,252 'keyboard':141,398 'keyboard-first':140 'label':418 'languag':469 'least':488 'level':283,350 'like':74 'limelight':101,103 'load':390 'local':456 'long':417 'low':205 'migrat':310,501 'mission':26 'mono':104,106 'motion':18,82,222 'motiv':162 'must':444,471 'natur':150 'negoti':475 'neutral':113 'new':498 'non':474 'non-negoti':473 'note':311 'novelti':239 'off':247 'one':269,454,489 'one-off':453 'opinion':254 'optim':457 'orang':76 'output':330 'overflow':421 'pair':481 'palett':110 'pattern':308,371,499 'pointer':399 'possibl':251 'power':85 'practic':39 'prefer':166,217,449 'preserv':181 'primari':100,111,115 'priorit':234,465 'prohibit':373 'propos':272 'provid':240 'punchi':160 'qa':320,375 'qualiti':422 'raw':170 'readi':42 'recommend':480 'relev':393 'requir':329,358,381 'respons':355,412 'restat':264 'review':328 'rhythm':211 'rule':164,196,273,351,378,425,434,476,485 'scale':97,126,188 'scale/transform':194 'secondari':112,117 'semant':167 'sentenc':270 'shape':9,69 'signatur':134 'skill':24 'skill-energetic' 'slow':215 'snappi':218 'source-bergside' 'space':125,210,403 'specifi':286 'spring':220 'spring-bas':219 'standard':366 'state':146,191,289,354,382,402,420 'statement':443 'strike':67 'structur':177,331,340 'style':4,56,86,89 'subtl':213 'surfac':121 'system':23,33,336,450 't-exampl':492 'testabl':360,446 'text':123,207 'thick':6,65,94,129,156,173 'thick-bord':93 'thin':200 'threshold':438 'token':114,168,276,345,408,437 'tone':159,365 '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':401 'trade':246 'trade-off':245 'typographi':16,79,96,186,404 'ui':315 'uncertain':233 'univers':25 'usag':409 'use':48,64,172,338,470 'valu':171 'variant':290,353 'vibrant':3,58,75,92 'visibl':144,387 'visual':88,182 'vital':20,83 'wcag':137 'weight':107 'workflow':262 'write':158,302","prices":[{"id":"a512ad61-cb67-4918-927d-27ee348e0f0d","listingId":"366bfe7d-2255-44f1-97d2-1638aeaa6712","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:20.597Z"}],"sources":[{"listingId":"366bfe7d-2255-44f1-97d2-1638aeaa6712","source":"github","sourceId":"bergside/awesome-design-skills/energetic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/energetic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:20.597Z","lastSeenAt":"2026-05-02T12:53:53.276Z"}],"details":{"listingId":"366bfe7d-2255-44f1-97d2-1638aeaa6712","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"energetic","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":"b39690f5ac3e4e90b7b8a6765e631da7dc9cc4c2","skill_md_path":"skills/energetic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/energetic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"energetic","license":"MIT","description":"Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/energetic"},"updatedAt":"2026-05-02T12:53:53.276Z"}}