{"id":"9b6220c4-f972-4286-bfb6-68e4d50e916e","shortId":"U86EQh","kind":"skill","title":"frontend-design","tagline":"You are a frontend designer-engineer, not a layout generator.","description":"# Frontend Design (Distinctive, Production-Grade)\n\nYou are a **frontend designer-engineer**, not a layout generator.\n\nYour goal is to create **memorable, high-craft interfaces** that:\n\n* Avoid generic “AI UI” patterns\n* Express a clear aesthetic point of view\n* Are fully functional and production-ready\n* Translate design intent directly into code\n\nThis skill prioritizes **intentional design systems**, not default frameworks.\n\n---\n\n## 1. Core Design Mandate\n\nEvery output must satisfy **all four**:\n\n1. **Intentional Aesthetic Direction**\n   A named, explicit design stance (e.g. *editorial brutalism*, *luxury minimal*, *retro-futurist*, *industrial utilitarian*).\n\n2. **Technical Correctness**\n   Real, working HTML/CSS/JS or framework code — not mockups.\n\n3. **Visual Memorability**\n   At least one element the user will remember 24 hours later.\n\n4. **Cohesive Restraint**\n   No random decoration. Every flourish must serve the aesthetic thesis.\n\n❌ No default layouts\n❌ No design-by-components\n❌ No “safe” palettes or fonts\n✅ Strong opinions, well executed\n\n---\n\n## 2. Design Feasibility & Impact Index (DFII)\n\nBefore building, evaluate the design direction using DFII.\n\n### DFII Dimensions (1–5)\n\n| Dimension                      | Question                                                     |\n| ------------------------------ | ------------------------------------------------------------ |\n| **Aesthetic Impact**           | How visually distinctive and memorable is this direction?    |\n| **Context Fit**                | Does this aesthetic suit the product, audience, and purpose? |\n| **Implementation Feasibility** | Can this be built cleanly with available tech?               |\n| **Performance Safety**         | Will it remain fast and accessible?                          |\n| **Consistency Risk**           | Can this be maintained across screens/components?            |\n\n### Scoring Formula\n\n```\nDFII = (Impact + Fit + Feasibility + Performance) − Consistency Risk\n```\n\n**Range:** `-5 → +15`\n\n### Interpretation\n\n| DFII      | Meaning   | Action                      |\n| --------- | --------- | --------------------------- |\n| **12–15** | Excellent | Execute fully               |\n| **8–11**  | Strong    | Proceed with discipline     |\n| **4–7**   | Risky     | Reduce scope or effects     |\n| **≤ 3**   | Weak      | Rethink aesthetic direction |\n\n---\n\n## 3. Mandatory Design Thinking Phase\n\nBefore writing code, explicitly define:\n\n### 1. Purpose\n\n* What action should this interface enable?\n* Is it persuasive, functional, exploratory, or expressive?\n\n### 2. Tone (Choose One Dominant Direction)\n\nExamples (non-exhaustive):\n\n* Brutalist / Raw\n* Editorial / Magazine\n* Luxury / Refined\n* Retro-futuristic\n* Industrial / Utilitarian\n* Organic / Natural\n* Playful / Toy-like\n* Maximalist / Chaotic\n* Minimalist / Severe\n\n⚠️ Do not blend more than **two**.\n\n### 3. Differentiation Anchor\n\nAnswer:\n\n> “If this were screenshotted with the logo removed, how would someone recognize it?”\n\nThis anchor must be visible in the final UI.\n\n---\n\n## 4. Aesthetic Execution Rules (Non-Negotiable)\n\n### Typography\n\n* Avoid system fonts and AI-defaults (Inter, Roboto, Arial, etc.)\n* Choose:\n\n  * 1 expressive display font\n  * 1 restrained body font\n* Use typography structurally (scale, rhythm, contrast)\n\n### Color & Theme\n\n* Commit to a **dominant color story**\n* Use CSS variables exclusively\n* Prefer:\n\n  * One dominant tone\n  * One accent\n  * One neutral system\n* Avoid evenly-balanced palettes\n\n### Spatial Composition\n\n* Break the grid intentionally\n* Use:\n\n  * Asymmetry\n  * Overlap\n  * Negative space OR controlled density\n* White space is a design element, not absence\n\n### Motion\n\n* Motion must be:\n\n  * Purposeful\n  * Sparse\n  * High-impact\n* Prefer:\n\n  * One strong entrance sequence\n  * A few meaningful hover states\n* Avoid decorative micro-motion spam\n\n### Texture & Depth\n\nUse when appropriate:\n\n* Noise / grain overlays\n* Gradient meshes\n* Layered translucency\n* Custom borders or dividers\n* Shadows with narrative intent (not defaults)\n\n---\n\n## 5. Implementation Standards\n\n### Code Requirements\n\n* Clean, readable, and modular\n* No dead styles\n* No unused animations\n* Semantic HTML\n* Accessible by default (contrast, focus, keyboard)\n\n### Framework Guidance\n\n* **HTML/CSS**: Prefer native features, modern CSS\n* **React**: Functional components, composable styles\n* **Animation**:\n\n  * CSS-first\n  * Framer Motion only when justified\n\n### Complexity Matching\n\n* Maximalist design → complex code (animations, layers)\n* Minimalist design → extremely precise spacing & type\n\nMismatch = failure.\n\n---\n\n## 6. Required Output Structure\n\nWhen generating frontend work:\n\n### 1. Design Direction Summary\n\n* Aesthetic name\n* DFII score\n* Key inspiration (conceptual, not visual plagiarism)\n\n### 2. Design System Snapshot\n\n* Fonts (with rationale)\n* Color variables\n* Spacing rhythm\n* Motion philosophy\n\n### 3. Implementation\n\n* Full working code\n* Comments only where intent isn’t obvious\n\n### 4. Differentiation Callout\n\nExplicitly state:\n\n> “This avoids generic UI by doing X instead of Y.”\n\n---\n\n## 7. Anti-Patterns (Immediate Failure)\n\n❌ Inter/Roboto/system fonts\n❌ Purple-on-white SaaS gradients\n❌ Default Tailwind/ShadCN layouts\n❌ Symmetrical, predictable sections\n❌ Overused AI design tropes\n❌ Decoration without intent\n\nIf the design could be mistaken for a template → restart.\n\n---\n\n## 8. Integration With Other Skills\n\n* **page-cro** → Layout hierarchy & conversion flow\n* **copywriting** → Typography & message rhythm\n* **marketing-psychology** → Visual persuasion & bias alignment\n* **branding** → Visual identity consistency\n* **ab-test-setup** → Variant-safe design systems\n\n---\n\n## 9. Operator Checklist\n\nBefore finalizing output:\n\n* [ ] Clear aesthetic direction stated\n* [ ] DFII ≥ 8\n* [ ] One memorable design anchor\n* [ ] No generic fonts/colors/layouts\n* [ ] Code matches design ambition\n* [ ] Accessible and performant\n\n---\n\n## 10. Questions to Ask (If Needed)\n\n1. Who is this for, emotionally?\n2. Should this feel trustworthy, exciting, calm, or provocative?\n3. Is memorability or clarity more important?\n4. Will this scale to other pages/components?\n5. What should users *feel* in the first 3 seconds?\n\n---\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["frontend","design","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-frontend-design","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (6,669 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-04-24T00:50:59.574Z","embedding":null,"createdAt":"2026-04-18T21:37:38.743Z","updatedAt":"2026-04-24T00:50:59.574Z","lastSeenAt":"2026-04-24T00:50:59.574Z","tsv":"'+15':239 '-5':238 '1':77,87,177,277,375,379,553,712 '10':706 '11':250 '12':244 '15':245 '2':106,161,292,567,718 '24':128 '3':117,262,267,329,580,727,749 '4':131,255,355,592,734 '5':178,484,741 '6':545 '7':256,607 '8':249,644,691 '9':680 'ab':672 'ab-test-setup':671 'absenc':436 'accent':406 'access':219,501,703 'across':226 'action':243,280,763 'aesthet':51,89,142,181,195,265,356,557,687 'ai':45,368,628 'ai-default':367 'align':666 'ambit':702 'anchor':331,347,695 'anim':498,520,535 'answer':332 'anti':609 'anti-pattern':608 'applic':757 'appropri':466 'arial':372 'ask':709,801 'asymmetri':422 'audienc':199 'avail':210 'avoid':43,363,410,456,598 'balanc':413 'bias':665 'blend':325 'bodi':381 'border':475 'boundari':809 'brand':667 'break':417 'brutal':98 'brutalist':302 'build':168 'built':207 'callout':594 'calm':724 'chaotic':320 'checklist':682 'choos':294,374 'clarif':803 'clariti':731 'clean':208,489 'clear':50,686,776 'code':67,114,274,487,534,584,699 'cohes':132 'color':389,395,574 'comment':585 'commit':391 'complex':529,533 'compon':151,517 'compos':518 'composit':416 'conceptu':563 'consist':220,235,670 'context':191 'contrast':388,504 'control':427 'convers':654 'copywrit':656 'core':78 'correct':108 'could':637 'craft':40 'creat':36 'criteria':812 'cro':651 'css':398,514,522 'css-first':521 'custom':474 'dead':494 'decor':136,457,631 'default':75,145,369,483,503,621 'defin':276 'densiti':428 'depth':463 'describ':764,780 'design':3,9,16,26,63,72,79,94,149,162,171,269,433,532,538,554,568,629,636,678,694,701 'design-by-compon':148 'designer-engin':8,25 'dfii':166,174,175,230,241,559,690 'differenti':330,593 'dimens':176,179 'direct':65,90,172,190,266,297,555,688 'disciplin':254 'display':377 'distinct':17,185 'divid':477 'domin':296,394,403 'e.g':96 'editori':97,304 'effect':261 'element':123,434 'emot':717 'enabl':284 'engin':10,27 'entranc':449 'environ':792 'environment-specif':791 'etc':373 'evalu':169 'even':412 'evenly-balanc':411 'everi':81,137 'exampl':298 'excel':246 'excit':723 'exclus':400 'execut':160,247,357,759 'exhaust':301 'expert':797 'explicit':93,275,595 'exploratori':289 'express':48,291,376 'extrem':539 'failur':544,612 'fast':217 'feasibl':163,203,233 'featur':512 'feel':721,745 'final':353,684 'first':523,748 'fit':192,232 'flourish':138 'flow':655 'focus':505 'font':156,365,378,382,571,614 'fonts/colors/layouts':698 'formula':229 'four':86 'framer':524 'framework':76,113,507 'frontend':2,7,15,24,551 'frontend-design':1 'full':582 'fulli':56,248 'function':57,288,516 'futurist':103,310 'generat':14,31,550 'generic':44,599,697 'goal':33 'grade':20 'gradient':470,620 'grain':468 'grid':419 'guidanc':508 'hierarchi':653 'high':39,444 'high-craft':38 'high-impact':443 'hour':129 'hover':454 'html':500 'html/css':509 'html/css/js':111 'ident':669 'immedi':611 'impact':164,182,231,445 'implement':202,485,581 'import':733 'index':165 'industri':104,311 'input':806 'inspir':562 'instead':604 'integr':645 'intent':64,71,88,420,481,588,633 'inter':370 'inter/roboto/system':613 'interfac':41,283 'interpret':240 'isn':589 'justifi':528 'key':561 'keyboard':506 'later':130 'layer':472,536 'layout':13,30,146,623,652 'least':121 'like':318 'limit':768 'logo':339 'luxuri':99,306 'magazin':305 'maintain':225 'mandat':80 'mandatori':268 'market':661 'marketing-psycholog':660 'match':530,700,777 'maximalist':319,531 'mean':242 'meaning':453 'memor':37,119,187,693,729 'mesh':471 'messag':658 'micro':459 'micro-mot':458 'minim':100 'minimalist':321,537 'mismatch':543 'miss':814 'mistaken':639 'mockup':116 'modern':513 'modular':492 'motion':437,438,460,525,578 'must':83,139,348,439 'name':92,558 'narrat':480 'nativ':511 'natur':314 'need':711 'negat':424 'negoti':361 'neutral':408 'nois':467 'non':300,360 'non-exhaust':299 'non-negoti':359 'obvious':591 'one':122,295,402,405,407,447,692 'oper':681 'opinion':158 'organ':313 'output':82,547,685,786 'overlap':423 'overlay':469 'overus':627 'overview':767 'page':650 'page-cro':649 'pages/components':740 'palett':154,414 'pattern':47,610 'perform':212,234,705 'permiss':807 'persuas':287,664 'phase':271 'philosophi':579 'plagiar':566 'play':315 'point':52 'precis':540 'predict':625 'prefer':401,446,510 'priorit':70 'proceed':252 'product':19,60,198 'production-grad':18 'production-readi':59 'provoc':726 'psycholog':662 'purpl':616 'purple-on-whit':615 'purpos':201,278,441 'question':180,707 'random':135 'rang':237 'rational':573 'raw':303 'react':515 'readabl':490 'readi':61 'real':109 'recogn':344 'reduc':258 'refin':307 'remain':216 'rememb':127 'remov':340 'requir':488,546,805 'restart':643 'restrain':380 'restraint':133 'rethink':264 'retro':102,309 'retro-futurist':101,308 'review':798 'rhythm':387,577,659 'risk':221,236 'riski':257 'roboto':371 'rule':358 'saa':619 'safe':153,677 'safeti':213,808 'satisfi':84 'scale':386,737 'scope':259,779 'score':228,560 'screens/components':227 'screenshot':336 'second':750 'section':626 'semant':499 'sequenc':450 'serv':140 'setup':674 'sever':322 'shadow':478 'skill':69,648,755,771 'skill-frontend-design' 'snapshot':570 'someon':343 'source-sickn33' 'space':425,430,541,576 'spam':461 'spars':442 'spatial':415 'specif':793 'stanc':95 'standard':486 'state':455,596,689 'stop':799 'stori':396 'strong':157,251,448 'structur':385,548 'style':495,519 'substitut':789 'success':811 'suit':196 'summari':556 'symmetr':624 'system':73,364,409,569,679 'tailwind/shadcn':622 'task':775 'tech':211 'technic':107 'templat':642 'test':673,795 'textur':462 'theme':390 'thesi':143 'think':270 'tone':293,404 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'toy':317 'toy-lik':316 'translat':62 'transluc':473 'treat':784 'trope':630 'trustworthi':722 'two':328 'type':542 'typographi':362,384,657 'ui':46,354,600 'unus':497 'use':173,383,397,421,464,753,769 'user':125,744 'utilitarian':105,312 'valid':794 'variabl':399,575 'variant':676 'variant-saf':675 'view':54 'visibl':350 'visual':118,184,565,663,668 'weak':263 'well':159 'white':429,618 'without':632 'work':110,552,583 'workflow':761 'would':342 'write':273 'x':603 'y':606","prices":[{"id":"06b27d59-3403-408e-aca5-791043d025dd","listingId":"9b6220c4-f972-4286-bfb6-68e4d50e916e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:38.743Z"}],"sources":[{"listingId":"9b6220c4-f972-4286-bfb6-68e4d50e916e","source":"github","sourceId":"sickn33/antigravity-awesome-skills/frontend-design","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-design","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:38.743Z","lastSeenAt":"2026-04-24T00:50:59.574Z"}],"details":{"listingId":"9b6220c4-f972-4286-bfb6-68e4d50e916e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"frontend-design","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"a0ad9915a0b4816c678693a2210c995d9f6ed0c3","skill_md_path":"skills/frontend-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-design"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"frontend-design","description":"You are a frontend designer-engineer, not a layout generator."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-design"},"updatedAt":"2026-04-24T00:50:59.574Z"}}