{"id":"2449a173-ea50-4c7d-8d7d-022ef1848e02","shortId":"R75SG6","kind":"skill","title":"frontend-design","tagline":"Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Built on Impeccable (pbakaus) + Uncodixfy (cyxzdev) + Anthropic original. Includes 20 design commands: /critique, /audit, /normalize, /polish, /harden, /animate, /colorize, /bolder, /quiete","description":"This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic\n\"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic detail\nand creative choices.\n\n---\n\n## Context Protocol\n\nBefore any design work, establish project context in this order:\n\n1. **Check `.impeccable.md`** at project root → if exists, read it and proceed\n2. **Check current instructions** → if a Design Context section is present, proceed\n3. **No context found?** → Ask max 3 questions:\n   - Who uses this? (audience, device context, technical level)\n   - Brand personality? (formal/playful, minimal/rich, technical/consumer)\n   - Existing colors or design system?\n\nSave answers to `.impeccable.md` at project root for future sessions.\n\n---\n\n## Design Direction\n\nCommit to a BOLD aesthetic direction BEFORE writing code:\n\n- **Purpose**: What problem does this solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural,\n  luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric,\n  soft/pastel, industrial/utilitarian\n- **Constraints**: Framework, performance budget, accessibility tier, i18n languages\n- **Differentiation**: What makes this UNFORGETTABLE? The one thing someone will remember\n\n**CRITICAL**: Choose a direction and execute with precision. Bold maximalism and refined minimalism\nboth work — the key is intentionality, not intensity.\n\n---\n\n## Design Guidelines (DO / DON'T)\n\n### Typography\n→ *Deep reference: [reference/typography.md](reference/typography.md)*\n\n**DO**:\n- Pair a distinctive display font with a refined body font\n- Use modular type scale with fluid sizing via `clamp(min, preferred, max)`\n- Vary font weights AND sizes for clear visual hierarchy\n- Name tokens semantically: `--text-body`, `--text-heading` (not `--font-size-16`)\n\n**DON'T**:\n- Inter, Roboto, Arial, Open Sans, Lato, Montserrat, Space Grotesk, or any system default\n- Monospace fonts as lazy \"developer/technical\" shorthand\n- Large icons with rounded corners above every heading (templated look)\n- More than 2-3 font families per project\n\n---\n\n### Color & Theme\n→ *Deep reference: [reference/color-and-contrast.md](reference/color-and-contrast.md)*\n\n**DO**:\n- Use OKLCH for perceptually uniform, maintainable palettes\n- Tint neutrals toward brand hue (even chroma 0.01 creates cohesion)\n- Dominant colors with sharp accents — the 60-30-10 rule\n- Use `color-mix()` and `light-dark()` for maintainable theming\n\n**DON'T**:\n- Gray text on colored backgrounds — use a shade of the background color instead\n- Pure black (#000) or pure white (#fff) — always tint\n- The AI palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark\n- Gradient text for \"impact\" (especially on metrics or headings)\n- Default to dark mode with glowing accents\n\n---\n\n### Layout & Space\n→ *Deep reference: [reference/spatial-design.md](reference/spatial-design.md)*\n\n**DO**:\n- Create rhythm through varied spacing — tight groupings, generous separations\n- Asymmetry and unexpected compositions — break the grid intentionally for emphasis\n- Fluid spacing with `clamp()` that breathes on larger screens\n- Container queries (`@container`) for component-level responsiveness\n\n**DON'T**:\n- Wrap everything in cards — not everything needs a container\n- Nest cards inside cards — visual noise, flatten the hierarchy\n- Identical card grids (icon + heading + text, repeated endlessly)\n- Center everything — left-aligned text with asymmetric layouts feels more designed\n- The hero metric layout: big number + small label + supporting stats + gradient accent\n- Same spacing everywhere — without rhythm, layouts feel monotonous\n\n---\n\n### Visual Details\n\n**DO**:\n- Intentional, purposeful decorative elements that reinforce brand identity\n- Backgrounds that create atmosphere: gradient meshes, noise textures, geometric patterns\n\n**DON'T**:\n- Glassmorphism everywhere — blur effects, glass cards, glow borders as default\n- Rounded rectangles with thick colored border on one side (lazy accent)\n- Sparklines as decoration (tiny charts that convey nothing meaningful)\n- Rounded rects with generic drop shadows — safe, forgettable, immediately recognizable as AI\n- Modals unless truly no better alternative — modals are lazy\n\n---\n\n### Motion\n→ *Deep reference: [reference/motion-design.md](reference/motion-design.md)*\n\n**DO**:\n- Animate `transform` and `opacity` ONLY — everything else causes layout recalculation\n- Use exponential easing: `ease-out-quart`, `ease-out-quint`, `ease-out-expo`\n- For height animations: `grid-template-rows: 0fr → 1fr` (not `height` directly)\n- Always include `@media (prefers-reduced-motion: reduce)` fallback\n- Stagger reveals for page loads: one orchestrated entrance > scattered micro-interactions\n\n**DON'T**:\n- Bounce or elastic easing — dated, tacky, real objects decelerate smoothly\n- Animate layout properties (width, height, padding, margin)\n- Transform animations on hover (translateX on nav links)\n- Shadows over 8px blur as dynamic effects\n\n---\n\n### Interaction\n→ *Deep reference: [reference/interaction-design.md](reference/interaction-design.md)*\n\n**DO**:\n- Design all 8 states: default, hover, focus, active, disabled, loading, error, success\n- Use `:focus-visible` for keyboard focus rings (never remove outline without replacement)\n- Optimistic UI — update immediately, sync later (for low-stakes actions)\n- Empty states that teach the interface\n\n**DON'T**:\n- Remove focus indicators\n- Use placeholder text as labels (they disappear on input)\n- Repeat the same information — redundant headers, intros that restate the heading\n- Make every button primary — use ghost/secondary/text links for hierarchy\n\n---\n\n### Responsive\n→ *Deep reference: [reference/responsive-design.md](reference/responsive-design.md)*\n\n**DO**:\n- Mobile-first: base styles for mobile, `min-width` queries to layer complexity\n- Detect input method (`pointer: fine/coarse`, `hover: hover/none`), not just screen size\n- Use `env(safe-area-inset-*)` for notch/home indicator handling\n\n**DON'T**:\n- Hide critical functionality on mobile — adapt the interface, don't amputate it\n- Desktop-first approach (`max-width` queries)\n- Rely on hover for functionality — touch users can't hover\n\n---\n\n### UX Writing\n→ *Deep reference: [reference/ux-writing.md](reference/ux-writing.md)*\n\n**DO**:\n- Specific verb + object button labels: \"Save changes\", \"Delete project\", \"Create account\"\n- Error messages: what happened + why + how to fix\n- Empty states: acknowledge briefly + explain value + provide action\n\n**DON'T**:\n- \"OK\", \"Submit\", \"Yes/No\", \"Click here\"\n- Blame the user in error messages\n- Vary terminology for variety (\"delete\" / \"remove\" / \"trash\" for same action)\n- Humor for errors — users are frustrated, be helpful not cute\n\n---\n\n## HARD NO: Banned Patterns\n\n→ *Full reference: [reference/anti-patterns.md](reference/anti-patterns.md)*\n\nThese are the fingerprints of AI-generated work from 2024-2025.\nSeeing any of these = redesign that element.\n\n**Components:**\n- Oversized rounded corners (>12px on cards, >8px on buttons)\n- Pill shapes on everything (buttons, badges, inputs, forms)\n- Floating glassmorphism panels as default visual language\n- Soft corporate gradients to fake taste\n- Sidebar ~280px with brand block on top + nav links below as floating detached shell\n\n**Patterns:**\n- Generic dark SaaS: blue-black gradients + cyan accents\n- Eyebrow labels (UPPERCASE WITH LETTER-SPACING above headings)\n- Hero sections inside dashboards or internal UI\n- Decorative copy (\"Operational clarity without the clutter\") as page headers\n- KPI card grid as first dashboard instinct\n- Donut charts with hand-wavy percentages\n- Canvas charts in glass cards with no product reason\n\n**Typography:**\n- `<small>` uppercase headers above headings\n- Rounded `<span>` labels with gradient backgrounds\n- Mixed alignment (some left, some center-floating)\n- Muted gray-blue text that kills contrast\n\n**Decoration:**\n- Status dots via `::before` pseudo-elements\n- Transform hover animations (translateX on nav links)\n- Dramatic box shadows (0 24px 60px rgba(0,0,0,0.35))\n- Trend indicators with colored text classes\n- Nav badges or \"Live\" status indicators (decorative)\n- Random glows, blur haze, conic-gradient donuts\n\n**Headlines:**\n```html\n<!-- BANNED -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n</div>\n\n<!-- BANNED -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief.</strong>\n</div>\n```\n\n---\n\n## The AI Slop Test\n\nBefore shipping, ask: *\"If someone saw this and said 'an AI made this' — would they be right?\"*\n\nA distinctive interface makes people ask \"how was this made?\" — not \"which AI made this?\".\n\nReview the HARD NO list above. Those are the fingerprints.\n\n---\n\n## The 20 Design Commands\n\nThese commands are automatically invoked by the `/frontend` workflow at quality gates.\nThey can also be run manually at any time: `/critique`, `/polish`, etc.\n\n### Analysis (no edits — report only)\n| Command | What it does |\n|---------|--------------|\n| `/critique [area]` | UX review: hierarchy, clarity, emotional resonance, AI slop test |\n| `/audit [area]` | Technical quality: a11y, responsive, performance, all 8 interaction states |\n\n### Fixing\n| Command | What it does |\n|---------|--------------|\n| `/normalize [area]` | Align with design system: fix spacing drift, token violations, typography inconsistency |\n| `/clarify [area]` | Fix unclear UX copy, button labels, error messages, empty states |\n| `/optimize [area]` | Performance: lazy loading, GPU-promoted animations, CSS specificity cleanup |\n| `/harden [area]` | Error handling, i18n edge cases, empty states, loading states, all 8 interaction states |\n\n### Styling\n| Command | What it does |\n|---------|--------------|\n| `/typeset [area]` | Fix font choices, hierarchy, fluid sizing, type scale |\n| `/arrange [area]` | Fix layout, spacing rhythm, visual hierarchy |\n| `/colorize [area]` | Introduce strategic color, fix OKLCH violations, palette consistency |\n| `/bolder [area]` | Amplify timid/generic designs toward distinctive |\n| `/quieter [area]` | Tone down visually overwhelming or cluttered designs |\n\n### Output\n| Command | What it does |\n|---------|--------------|\n| `/polish [area]` | Final pass before shipping — fix every rough edge |\n| `/distill [area]` | Strip to essence, remove decorative noise, simplify |\n| `/extract [area]` | Pull repeated patterns into reusable components |\n\n### Enhancement\n| Command | What it does |\n|---------|--------------|\n| `/animate [area]` | Add purposeful motion: entrances, state changes, micro-interactions |\n| `/delight [area]` | Add moments of joy: Easter eggs, micro-animations, personality touches |\n| `/adapt [area]` | Adapt for mobile, tablet, landscape — don't just shrink |\n| `/onboard [area]` | Design onboarding flow, coach marks, empty states that teach |\n| `/overdrive [area]` | Technically extraordinary effects for showcase/hero moments |\n\n### Setup\n| Command | What it does |\n|---------|--------------|\n| `/teach-impeccable` | Gather project context and write `.impeccable.md` at project root |\n\n---\n\n## Color Selection\n\n**Priority order:**\n1. Read existing CSS variables, Tailwind config, or design tokens from the project\n2. Pick from curated palettes below (choose randomly — don't always pick the first)\n3. Never invent random combinations\n\n### Dark Palettes\n\n| Palette | Background | Surface | Primary | Text |\n|---------|-----------|---------|---------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#f5f5f5` |\n| Deep Ocean | `#001e3c` | `#0a2744` | `#4fc3f7` | `#eceff1` |\n| Carbon Elegance | `#121212` | `#1e1e1e` | `#bb86fc` | `#e1e1e1` |\n| Twilight Mist | `#1a1625` | `#2d2438` | `#9d7cd8` | `#dcd7e8` |\n| Midnight Canvas | `#0a0e27` | `#151b3d` | `#6c8eff` | `#e2e8f0` |\n| Onyx Matrix | `#0e0e10` | `#1c1c21` | `#00ff9f` | `#f0f0f0` |\n\n### Light Palettes\n\n| Palette | Background | Surface | Primary | Text |\n|---------|-----------|---------|---------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#212529` |\n| Ivory Studio | `#f5f5f4` | `#fafaf9` | `#0891b2` | `#1c1917` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#1e293b` |\n| Arctic Breeze | `#f0f9ff` | `#f8fafc` | `#0284c7` | `#0c4a6e` |\n| Sand Warm | `#faf8f5` | `#ffffff` | `#b45309` | `#451a03` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#0f172a` |\n| Linen Soft | `#fef7f0` | `#fffbf5` | `#d97706` | `#292524` |\n| Cream Elegance | `#fefce8` | `#fefce8` | `#65a30d` | `#365314` |\n\n---\n\n## Implementation Principles\n\nMatch implementation complexity to the aesthetic vision:\n- **Maximalist** → elaborate code, extensive animations, dense effects\n- **Minimalist** → restraint, precision, careful spacing and typography\n- **Editorial** → strong typographic hierarchy, generous whitespace, confident layout\n\nNo two designs should be the same. Vary themes, fonts, aesthetics. NEVER converge on the same\nsafe choices across generations.\n\nRemember: extraordinary creative work is possible. Don't hold back.","tags":["frontend","design","synapse","deve1993","agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai","automation","claude-code"],"capabilities":["skill","source-deve1993","skill-frontend-design","topic-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workspace","topic-anti-poisoning","topic-auto-learning-ai","topic-automation","topic-claude-code","topic-code-quality","topic-cursor","topic-developer-tools","topic-devops"],"categories":["Synapse"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/deve1993/Synapse/frontend-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add deve1993/Synapse","source_repo":"https://github.com/deve1993/Synapse","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (13,531 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-18T19:14:13.720Z","embedding":null,"createdAt":"2026-05-18T13:21:46.618Z","updatedAt":"2026-05-18T19:14:13.720Z","lastSeenAt":"2026-05-18T19:14:13.720Z","tsv":"'-10':346 '-2025':931 '-3':309 '-30':345 '/adapt':1403 '/animate':33,1379 '/arrange':1308 '/audit':29,1225 '/bolder':35,1326 '/clarify':1254 '/colorize':34,1316 '/critique':28,1202,1214 '/delight':1390 '/distill':1357 '/extract':1366 '/frontend':1188 '/harden':32,1278 '/normalize':30,1241 '/onboard':1414 '/optimize':1266 '/overdrive':1425 '/polish':31,1203,1347 '/quiete':36 '/quieter':1333 '/teach-impeccable':1438 '/typeset':1298 '0':1087,1091,1092,1093 '0.01':335 '0.35':1094 '000':376 '001e3':1524 '0066cc':1572 '00d4aa':1520 '00ff9f':1553 '0284c7':1597 '0891b2':1578 '0a0e27':1544 '0a2744':1526 '0a84ff':1508 '0c4a6e':1598 '0d1117':1493 '0e0':1550 '0f0f0f':1518 '0f172a':1499,1567,1610 '0f766e':1609 '0fr':630 '1':79,1452 '111827':1585 '121212':1531 '12px':943 '151b3d':1545 '16':274 '161b22':1494 '18181b':1512 '1a1625':1538 '1a1a1a':1519 '1c1917':1579 '1c1c1e':1506 '1c1c21':1552 '1d4ed8':1590 '1e1':1532 '1e293':1500,1591 '1fr':631 '2':91,308,1465 '20':25,1178 '2024':930 '212529':1573 '24px':1088 '2563eb':1566 '27272a':1513 '280px':971 '292524':1616 '2c2c2e':1507 '2d2438':1539 '3':103,109,1479 '365314':1622 '38bdf8':1502 '451a03':1604 '4f46e5':1584 '4fc3f7':1527 '58a6ff':1495 '60':344 '60px':1089 '65a30d':1621 '6c8eff':1546 '8':698,1233,1290 '8px':685,946 '9d7cd8':1540 'a11y':1229 'a855f7':1514 'accent':342,396,414,509,561,993 'access':183 'account':862 'acknowledg':873 'across':1672 'action':731,878,901 'activ':703 'adapt':820,1405 'add':1381,1392 'aesthet':15,53,62,145,1630,1664 'ai':14,51,384,582,926,1132,1145,1164,1222 'ai-gener':925 'alabast':1586 'align':490,1054,1243 'also':1195 'altern':588 'alway':381,635,1475 'amplifi':1328 'amput':825 'analysi':1205 'anim':598,625,668,676,1079,1274,1400,1636 'answer':130 'anthrop':22 'approach':830 'arctic':1593 'area':807,1215,1226,1242,1255,1267,1279,1299,1309,1317,1327,1334,1348,1358,1367,1380,1391,1404,1415,1426 'arial':279 'art':175 'ask':107,1137,1157 'asymmetr':493 'asymmetri':431 'atmospher':532 'attent':60 'audienc':114 'automat':1184 'avoid':12,49 'b':1501,1592 'b45309':1603 'back':1683 'background':365,371,529,1052,1487,1558 'badg':954,1102 'ban':914 'base':781 'bb86fc':1534 'better':587 'big':502 'black':375,990 'blame':886 'block':974 'blue':393,989,1064 'blue-black':988 'blur':543,686,1110 'bodi':238,266 'bold':144,206 'border':548,556 'bounc':658 'box':1085 'brand':119,331,527,973 'break':435 'breath':446 'breez':1594 'brief':1130 'briefli':874 'bright':1606 'brutal':163 'brutalist/raw':174 'budget':182 'built':16 'button':765,855,948,953,1260 'c':1525 'c9d1d9':1496 'canva':1034,1543,1563 'carbon':1529 'card':463,470,472,479,546,945,1021,1038 'care':1642 'case':1284 'caus':605 'center':486,1059 'center-flo':1058 'chang':858,1386 'chao':166 'charcoal':1504 'chart':566,1028,1035 'check':80,92 'choic':66,1302,1671 'choos':199,1471 'chroma':334 'clamp':248,444 'clariti':1013,1219 'class':1100 'clean':1581 'cleanup':1277 'clear':258 'click':884 'cloud':1562 'clutter':1016,1340 'coach':1419 'code':57,149,1634 'cohes':337 'color':125,314,339,350,364,372,555,1098,1320,1448 'color-mix':349 'combin':1483 'command':27,1119,1180,1182,1210,1237,1294,1343,1375,1434 'commit':141 'complex':791,1627 'compon':455,939,1373 'component-level':454 'composit':434 'confid':1652 'config':1458 'conic':1113 'conic-gradi':1112 'consist':1325 'constraint':179 'contain':450,452,468 'context':67,75,98,105,116,1441 'contrast':1068 'converg':1666 'convey':568 'copi':1011,1259 'corner':300,942 'corpor':965 'cream':1617 'creat':4,336,422,531,861 'creation':40 'creativ':65,1676 'critic':198,816 'css':1275,1455 'curat':1468 'current':93 'cute':911 'cyan':387,992 'cyan-on-dark':386 'cyxzdev':21 'd97706':1615 'dark':355,389,398,410,986,1484 'dashboard':1006,1025 'date':662 'dcd7e8':1541 'deceler':666 'deco/geometric':176 'decor':523,564,1010,1069,1107,1363 'deep':225,316,417,593,691,773,847,1522 'default':289,408,550,700,961 'delet':859,896 'dens':1637 'depth':1517 'design':3,26,71,97,127,139,219,497,696,1179,1245,1330,1341,1416,1460,1656 'desktop':828 'desktop-first':827 'detach':982 'detail':63,519 'detect':792 'developer/technical':294 'devic':115 'differenti':187 'direct':140,146,201,634 'disabl':704 'disappear':749 'display':233 'distinct':5,42,232,1153,1332 'domin':338 'donut':1027,1115 'dot':1071 'dramat':1084 'drift':1249 'drop':575 'dynam':688 'e10':1551 'e1e':1533 'e1e1e1':1535 'e2e8f0':1547 'eas':610,612,616,620,661 'ease-out-expo':619 'ease-out-quart':611 'ease-out-quint':615 'easter':1396 'eceff1':1528 'edg':1283,1356 'edit':1207 'editori':1646 'editorial/magazine':173 'effect':544,689,1429,1638 'egg':1397 'elabor':1633 'elast':660 'eleg':1530,1618 'element':524,938,1076 'els':604 'emot':1220 'emphasi':440 'empti':732,871,1264,1285,1421 'endless':485 'enhanc':1374 'entranc':651,1384 'env':804 'error':706,863,890,904,1262,1280 'especi':403 'essenc':1361 'establish':73 'etc':1204 'even':333 'everi':302,764,1354 'everyth':461,465,487,603,952 'everywher':512,542 'except':59 'execut':203 'exist':86,124,1454 'explain':875 'expo':622 'exponenti':609 'extens':1635 'extraordinari':1428,1675 'extrem':162 'eyebrow':994 'f0f0f0':1554 'f0f9ff':1595 'f1f5f9':1503,1607 'f2f2f7':1509 'f5f5f4':1576 'f5f5f5':1521 'f8f9fa':1570 'f8fafc':1596,1608 'f9fafb':1582 'faf8f5':1601 'fafaf9':1577 'fafafa':1515,1564 'fake':968 'fallback':643 'famili':311 'fcfcfc':1588 'feel':495,516 'fef7f0':1613 'fefce8':1619,1620 'fff':380 'fffbf5':1614 'ffffff':1565,1571,1583,1589,1602 'final':1349 'fine/coarse':796 'fingerprint':923,1176 'first':780,829,1024,1478 'fix':870,1236,1247,1256,1300,1310,1321,1353 'flatten':475 'float':957,981,1060 'flow':1418 'fluid':245,441,1304 'focus':702,710,714,741,1127 'focus-vis':709 'font':234,239,253,272,291,310,1301,1663 'font-siz':271 'forgett':578 'form':956 'formal/playful':121 'found':106 'framework':180 'frontend':2,9,46 'frontend-design':1 'frost':1605 'frustrat':907 'full':916 'function':817,839 'futur':137 'futurist':169 'gate':1192 'gather':1439 'generat':927,1673 'generic':13,50,574,985 'generous':429,1650 'geometr':537 'ghost/secondary/text':768 'glass':545,1037 'glassmorph':541,958 'glow':413,547,1109 'gpu':1272 'gpu-promot':1271 'grade':8,45 'gradient':394,399,508,533,966,991,1051,1114 'graphit':1510 'gray':361,1063 'gray-blu':1062 'grid':437,480,627,1022 'grid-template-row':626 'grotesk':285 'group':428 'guid':39 'guidelin':220 'hand':1031 'hand-wavi':1030 'handl':812,1281 'happen':866 'hard':912,1169 'haze':1111 'head':269,303,407,482,762,1002,1047 'header':757,1019,1045 'headlin':1116 'height':624,633,672 'help':909 'hero':499,1003 'hide':815 'hierarchi':260,477,771,1218,1303,1315,1649 'hold':1682 'hover':678,701,797,837,844,1078 'hover/none':798 'html':1117 'hue':332 'humor':902 'i18n':185,1282 'icon':297,481 'ident':478,528 'immedi':579,724 'impact':402 'impecc':18 'impeccable.md':81,132,1444 'implement':54,1623,1626 'includ':24,636 'inconsist':1253 'indic':742,811,1096,1106 'industrial/utilitarian':178 'inform':755 'input':751,793,955 'inset':808 'insid':471,1005 'instead':373 'instinct':1026 'instruct':94 'intens':218 'intent':216,438,521 'inter':277 'interact':655,690,1234,1291,1389 'interfac':10,47,737,822,1154 'intern':1008 'intro':758 'introduc':1318 'invent':1481 'invok':1185 'ivori':1574 'joy':1395 'keep':1128 'key':214 'keyboard':713 'kill':1067 'kpi':1020 'label':505,747,856,995,1049,1261 'landscap':1409 'languag':186,963 'larg':296 'larger':448 'later':726 'lato':282 'layer':790 'layout':415,494,501,515,606,669,1311,1653 'lazi':293,560,591,1269 'left':489,1056 'left-align':488 'letter':999 'letter-spac':998 'level':118,456 'light':354,1555 'light-dark':353 'linen':1611 'link':682,769,978,1083 'list':1171 'live':1104 'load':648,705,1270,1287 'look':305 'low':729 'low-stak':728 'luxury/refined':171 'made':1146,1161,1165 'maintain':326,357 'make':189,763,1155 'manual':1198 'margin':674 'mark':1420 'match':1625 'matrix':1549 'matter':1125 'max':108,251,832 'max-width':831 'maxim':207 'maximalist':165,1632 'meaning':570 'media':637 'mesh':534 'messag':864,891,1263 'method':794 'metric':405,500 'micro':654,1388,1399 'micro-anim':1398 'micro-interact':653,1387 'midnight':1542 'min':249,786 'min-width':785 'minim':164,210,1569 'minimal/rich':122 'minimalist':1639 'mist':1537 'mix':351,1053 'mobil':779,784,819,1407 'mobile-first':778 'modal':583,589 'mode':411 'modular':241 'moment':1393,1432 'monospac':290 'monoton':517 'montserrat':283 'motion':592,641,1383 'mute':1061 'name':261 'nav':681,977,1082,1101 'need':466 'neon':395 'nest':469 'neutral':329 'never':716,1480,1665 'noir':1498 'nois':474,535,1364 'notch/home':810 'noth':569 'number':503 'object':665,854 'obsidian':1516 'ocean':1523 'ok':881 'oklch':322,1322 'onboard':1417 'one':193,558,649,1120 'onyx':1548 'opac':601 'open':280 'oper':1012 'optimist':721 'orchestr':650 'order':78,1451 'organic/natural':170 'origin':23 'outlin':718 'output':1342 'overs':940 'overwhelm':1338 'pad':673 'page':647,1018 'pair':230 'palett':327,385,1324,1469,1485,1486,1556,1557 'panel':959 'pass':1350 'pattern':538,915,984,1370 'pbakaus':19 'pearl':1568 'peopl':1156 'per':312 'percentag':1033 'perceptu':324 'perform':181,1231,1268 'person':120,1401 'pick':160,1466,1476 'pill':949 'place':1121 'placehold':744 'playful/toy-like':172 'pointer':795 'porcelain':1580 'possibl':1679 'precis':205,1641 'prefer':250,639 'prefers-reduced-mot':638 'present':101 'primari':766,1489,1560 'principl':1624 'prioriti':1450 'pro':1511 'problem':152 'proceed':90,102 'product':7,44,1041 'production-grad':6,43 'project':74,83,134,313,860,1440,1446,1464 'promot':1273 'properti':670 'protocol':68 'provid':877 'pseudo':1075 'pseudo-el':1074 'pull':1368 'pure':374,378,1587 'purpl':391 'purple-to-blu':390 'purpos':150,522,1382 'qualiti':1191,1228 'quart':614 'queri':451,788,834 'question':110 'quint':618 'random':1108,1472,1482 'read':87,1453 'real':55,664 'reason':1042 'recalcul':607 'recogniz':580 'rect':572 'rectangl':552 'redesign':936 'reduc':640,642 'redund':756 'refer':226,317,418,594,692,774,848,917 'reference/anti-patterns.md':918,919 'reference/color-and-contrast.md':318,319 'reference/interaction-design.md':693,694 'reference/motion-design.md':595,596 'reference/responsive-design.md':775,776 'reference/spatial-design.md':419,420 'reference/typography.md':227,228 'reference/ux-writing.md':849,850 'refin':209,237 'reinforc':526 'reli':835 'rememb':197,1674 'remov':717,740,897,1362 'repeat':484,752,1369 'replac':720 'report':1208 'reson':1221 'respons':457,772,1230 'restat':760 'restraint':1640 'retro':168 'retro-futurist':167 'reusabl':1372 'reveal':645 'review':1167,1217 'rgba':1090 'rhythm':423,514,1313 'right':1151 'ring':715 'roboto':278 'root':84,135,1447 'rough':1355 'round':299,551,571,941,1048 'row':629 'rule':347 'run':1197 'saa':987 'safe':577,806,1670 'safe-area-inset':805 'said':1143 'san':281 'sand':1599 'save':129,857 'saw':1140 'scale':243,1307 'scatter':652 'screen':449,801 'section':99,1004 'see':932 'select':1449 'semant':263 'separ':430 'session':138 'setup':1433 'shade':368 'shadow':576,683,1086 'shape':950 'sharp':341 'shell':983 'ship':1136,1352 'shorthand':295 'showcase/hero':1431 'shrink':1413 'side':559 'sidebar':970 'simplifi':1365 'size':246,256,273,802,1305 'skill':38 'skill-frontend-design' 'slate':1497 'slop':52,1133,1223 'small':504 'smooth':667 'soft':964,1612 'soft/pastel':177 'solv':155 'someon':195,1139 'source-deve1993' 'space':284,416,426,442,511,1000,1248,1312,1492,1643 'sparklin':562 'specif':852,1276 'stagger':644 'stake':730 'stat':507 'state':699,733,872,1235,1265,1286,1288,1292,1385,1422 'status':1070,1105 'strateg':1319 'strip':1359 'strong':1647 'studio':1505,1575 'style':782,1293 'submit':882 'success':707 'support':506 'surfac':1488,1559 'sync':725 'system':128,288,1246 'tablet':1408 'tacki':663 'tailwind':1457 'tast':969 'teach':735,1424 'team':1118 'technic':117,1227,1427 'technical/consumer':123 'templat':304,628 'terminolog':893 'test':1134,1224 'text':265,268,362,400,483,491,745,1065,1099,1490,1561 'text-bodi':264 'text-head':267 'textur':536 'theme':315,358,1662 'thick':554 'thing':194 'tier':184 'tight':427 'time':1201 'timid/generic':1329 'tini':565 'tint':328,382 'today':1126 'token':262,1250,1461 'tone':159,1335 'top':976 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workspace' 'topic-anti-poisoning' 'topic-auto-learning-ai' 'topic-automation' 'topic-claude-code' 'topic-code-quality' 'topic-cursor' 'topic-developer-tools' 'topic-devops' 'touch':840,1402 'toward':330,1331 'track':1123 'transform':599,675,1077 'translatex':679,1080 'trash':898 'trend':1095 'truli':585 'twilight':1536 'two':1655 'type':242,1306 'typograph':1648 'typographi':224,1043,1252,1645 'ui':722,1009 'unclear':1257 'uncodixfi':20 'unexpect':433 'unforgett':191 'uniform':325 'unless':584 'updat':723,1129 'uppercas':996,1044 'use':112,157,240,321,348,366,608,708,743,767,803 'user':841,888,905 'ux':845,1216,1258 'valu':876 'vari':252,425,892,1661 'variabl':1456 'varieti':895 'verb':853 'via':247,1072 'violat':1251,1323 'visibl':711 'vision':1631 'visual':259,473,518,962,1314,1337 'void':1491 'warm':1600 'wavi':1032 'weight':254 'white':379 'whitespac':1651 'width':671,787,833 'without':513,719,1014 'work':56,72,212,928,1677 'workflow':1189 'would':1148 'wrap':460 'write':148,846,1443 'yes/no':883","prices":[{"id":"96285670-4019-494b-8d06-db78eb1688e2","listingId":"2449a173-ea50-4c7d-8d7d-022ef1848e02","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"deve1993","category":"Synapse","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:46.618Z"}],"sources":[{"listingId":"2449a173-ea50-4c7d-8d7d-022ef1848e02","source":"github","sourceId":"deve1993/Synapse/frontend-design","sourceUrl":"https://github.com/deve1993/Synapse/tree/main/skills/frontend-design","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:46.618Z","lastSeenAt":"2026-05-18T19:14:13.720Z"}],"details":{"listingId":"2449a173-ea50-4c7d-8d7d-022ef1848e02","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"deve1993","slug":"frontend-design","github":{"repo":"deve1993/Synapse","stars":7,"topics":["agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai","automation","claude-code","code-quality","cursor","developer-tools","devops","fullstack-development","multi-agent-systems","nextjs","opencode","persistent-memory","self-improving","telegram-bot"],"license":"other","html_url":"https://github.com/deve1993/Synapse","pushed_at":"2026-05-15T21:34:01Z","description":"Self-improving AI brain for Claude Code & Desktop — 28 MCP tools, 253 skills, collective memory, project tracking, work logs. One server, all your sessions share the same knowledge. Deploy on Coolify in 2 minutes.","skill_md_sha":"6eeaabf42c08ba2ebeb60661eb7a46568d738080","skill_md_path":"skills/frontend-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/deve1993/Synapse/tree/main/skills/frontend-design"},"layout":"multi","source":"github","category":"Synapse","frontmatter":{"name":"frontend-design","description":"Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Built on Impeccable (pbakaus) + Uncodixfy (cyxzdev) + Anthropic original. Includes 20 design commands: /critique, /audit, /normalize, /polish, /harden, /animate, /colorize, /bolder, /quieter, /distill, /clarify, /optimize, /extract, /adapt, /onboard, /typeset, /arrange, /delight, /overdrive, /teach-impeccable. Use when building web components, pages, apps, or any UI."},"skills_sh_url":"https://skills.sh/deve1993/Synapse/frontend-design"},"updatedAt":"2026-05-18T19:14:13.720Z"}}