{"id":"1a8d834a-6048-499c-9fce-8d5511aac645","shortId":"8PMAEu","kind":"skill","title":"Penpot Uiux Design","tagline":"Awesome Copilot skill by Github","description":"# Penpot UI/UX Design Guide\n\nCreate professional, user-centered designs in Penpot using the `penpot/penpot-mcp` MCP server and proven UI/UX principles.\n\n## Available MCP Tools\n\n| Tool | Purpose |\n| ---- | ------- |\n| `mcp__penpot__execute_code` | Run JavaScript in Penpot plugin context to create/modify designs |\n| `mcp__penpot__export_shape` | Export shapes as PNG/SVG for visual inspection |\n| `mcp__penpot__import_image` | Import images (icons, photos, logos) into designs |\n| `mcp__penpot__penpot_api_info` | Retrieve Penpot API documentation |\n\n## MCP Server Setup\n\nThe Penpot MCP tools require the `penpot/penpot-mcp` server running locally. For detailed installation and troubleshooting, see [setup-troubleshooting.md](references/setup-troubleshooting.md).\n\n### Before Setup: Check If Already Running\n\n**Always check if the MCP server is already available before attempting setup:**\n\n1. **Try calling a tool first**: Attempt `mcp__penpot__penpot_api_info` - if it succeeds, the server is running and connected. No setup needed.\n\n2. **If the tool fails**, ask the user:\n   > \"The Penpot MCP server doesn't appear to be connected. Is the server already installed and running? If so, I can help troubleshoot. If not, I can guide you through the setup.\"\n\n3. **Only proceed with setup instructions if the user confirms the server is not installed.**\n\n### Quick Start (Only If Not Installed)\n\n```bash\n# Clone and install\ngit clone https://github.com/penpot/penpot-mcp.git\ncd penpot-mcp\nnpm install\n\n# Build and start servers\nnpm run bootstrap\n```\n\nThen in Penpot:\n1. Open a design file\n2. Go to **Plugins** → **Load plugin from URL**\n3. Enter: `http://localhost:4400/manifest.json`\n4. Click **\"Connect to MCP server\"** in the plugin UI\n\n### VS Code Configuration\n\nAdd to `settings.json`:\n```json\n{\n  \"mcp\": {\n    \"servers\": {\n      \"penpot\": {\n        \"url\": \"http://localhost:4401/sse\"\n      }\n    }\n  }\n}\n```\n\n### Troubleshooting (If Server Is Installed But Not Working)\n\n| Issue | Solution |\n| ----- | -------- |\n| Plugin won't connect | Check servers are running (`npm run start:all` in penpot-mcp dir) |\n| Browser blocks localhost | Allow local network access prompt, or disable Brave Shield, or try Firefox |\n| Tools not appearing in client | Restart VS Code/Claude completely after config changes |\n| Tool execution fails/times out | Ensure Penpot plugin UI is open and shows \"Connected\" |\n| \"WebSocket connection failed\" | Check firewall allows ports 4400, 4401, 4402 |\n\n## Quick Reference\n\n| Task | Reference File |\n| ---- | -------------- |\n| MCP server installation & troubleshooting | [setup-troubleshooting.md](references/setup-troubleshooting.md) |\n| Component specs (buttons, forms, nav) | [component-patterns.md](references/component-patterns.md) |\n| Accessibility (contrast, touch targets) | [accessibility.md](references/accessibility.md) |\n| Screen sizes & platform specs | [platform-guidelines.md](references/platform-guidelines.md) |\n\n## Core Design Principles\n\n### The Golden Rules\n\n1. **Clarity over cleverness**: Every element must have a purpose\n2. **Consistency builds trust**: Reuse patterns, colors, and components\n3. **User goals first**: Design for tasks, not features\n4. **Accessibility is not optional**: Design for everyone\n5. **Test with real users**: Validate assumptions early\n\n### Visual Hierarchy (Priority Order)\n\n1. **Size**: Larger = more important\n2. **Color/Contrast**: High contrast draws attention\n3. **Position**: Top-left (LTR) gets seen first\n4. **Whitespace**: Isolation emphasizes importance\n5. **Typography weight**: Bold stands out\n\n## Design Workflow\n\n1. **Check for design system first**: Ask user if they have existing tokens/specs, or discover from current Penpot file\n2. **Understand the page**: Call `mcp__penpot__execute_code` with `penpotUtils.shapeStructure()` to see hierarchy\n3. **Find elements**: Use `penpotUtils.findShapes()` to locate elements by type or name\n4. **Create/modify**: Use `penpot.createBoard()`, `penpot.createRectangle()`, `penpot.createText()` etc.\n5. **Apply layout**: Use `addFlexLayout()` for responsive containers\n6. **Validate**: Call `mcp__penpot__export_shape` to visually check your work\n\n## Design System Handling\n\n**Before creating designs, determine if the user has an existing design system:**\n\n1. **Ask the user**: \"Do you have a design system or brand guidelines to follow?\"\n2. **Discover from Penpot**: Check for existing components, colors, and patterns\n\n```javascript\n// Discover existing design patterns in current file\nconst allShapes = penpotUtils.findShapes(() => true, penpot.root);\n\n// Find existing colors in use\nconst colors = new Set();\nallShapes.forEach(s => {\n  if (s.fills) s.fills.forEach(f => colors.add(f.fillColor));\n});\n\n// Find existing text styles (font sizes, weights)\nconst textStyles = allShapes\n  .filter(s => s.type === 'text')\n  .map(s => ({ fontSize: s.fontSize, fontWeight: s.fontWeight }));\n\n// Find existing components\nconst components = penpot.library.local.components;\n\nreturn { colors: [...colors], textStyles, componentCount: components.length };\n```\n\n**If user HAS a design system:**\n\n- Use their specified colors, spacing, typography\n- Match their existing component patterns\n- Follow their naming conventions\n\n**If user has NO design system:**\n\n- Use the default tokens below as a starting point\n- Offer to help establish consistent patterns\n- Reference specs in [component-patterns.md](references/component-patterns.md)\n\n## Key Penpot API Gotchas\n\n- `width`/`height` are READ-ONLY → use `shape.resize(w, h)`\n- `parentX`/`parentY` are READ-ONLY → use `penpotUtils.setParentXY(shape, x, y)`\n- Use `insertChild(index, shape)` for z-ordering (not `appendChild`)\n- Flex children array order is REVERSED for `dir=\"column\"` or `dir=\"row\"`\n- After `text.resize()`, reset `growType` to `\"auto-width\"` or `\"auto-height\"`\n\n## Positioning New Boards\n\n**Always check existing boards before creating new ones** to avoid overlap:\n\n```javascript\n// Find all existing boards and calculate next position\nconst boards = penpotUtils.findShapes(s => s.type === 'board', penpot.root);\nlet nextX = 0;\nconst gap = 100; // Space between boards\n\nif (boards.length > 0) {\n  // Find rightmost board edge\n  boards.forEach(b => {\n    const rightEdge = b.x + b.width;\n    if (rightEdge + gap > nextX) {\n      nextX = rightEdge + gap;\n    }\n  });\n}\n\n// Create new board at calculated position\nconst newBoard = penpot.createBoard();\nnewBoard.x = nextX;\nnewBoard.y = 0;\nnewBoard.resize(375, 812);\n```\n\n**Board spacing guidelines:**\n\n- Use 100px gap between related screens (same flow)\n- Use 200px+ gap between different sections/flows\n- Align boards vertically (same y) for visual organization\n- Group related screens horizontally in user flow order\n\n## Default Design Tokens\n\n**Use these defaults only when user has no design system. Always prefer user's tokens if available.**\n\n### Spacing Scale (8px base)\n\n| Token | Value | Usage |\n| ----- | ----- | ----- |\n| `spacing-xs` | 4px | Tight inline elements |\n| `spacing-sm` | 8px | Related elements |\n| `spacing-md` | 16px | Default padding |\n| `spacing-lg` | 24px | Section spacing |\n| `spacing-xl` | 32px | Major sections |\n| `spacing-2xl` | 48px | Page-level spacing |\n\n### Typography Scale\n\n| Level | Size | Weight | Usage |\n| ----- | ---- | ------ | ----- |\n| Display | 48-64px | Bold | Hero headlines |\n| H1 | 32-40px | Bold | Page titles |\n| H2 | 24-28px | Semibold | Section headers |\n| H3 | 20-22px | Semibold | Subsections |\n| Body | 16px | Regular | Main content |\n| Small | 14px | Regular | Secondary text |\n| Caption | 12px | Regular | Labels, hints |\n\n### Color Usage\n\n| Purpose | Recommendation |\n| ------- | -------------- |\n| Primary | Main brand color, CTAs |\n| Secondary | Supporting actions |\n| Success | #22C55E range (confirmations) |\n| Warning | #F59E0B range (caution) |\n| Error | #EF4444 range (errors) |\n| Neutral | Gray scale for text/borders |\n\n## Common Layouts\n\n### Mobile Screen (375×812)\n\n```text\n┌─────────────────────────────┐\n│ Status Bar (44px)           │\n├─────────────────────────────┤\n│ Header/Nav (56px)           │\n├─────────────────────────────┤\n│                             │\n│ Content Area                │\n│ (Scrollable)                │\n│ Padding: 16px horizontal    │\n│                             │\n├─────────────────────────────┤\n│ Bottom Nav/CTA (84px)       │\n└─────────────────────────────┘\n\n```\n\n### Desktop Dashboard (1440×900)\n\n```text\n┌──────┬──────────────────────────────────┐\n│      │ Header (64px)                    │\n│ Side │──────────────────────────────────│\n│ bar  │ Page Title + Actions             │\n│      │──────────────────────────────────│\n│ 240  │ Content Grid                     │\n│ px   │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │\n│      │ │Card │ │Card │ │Card │ │Card │ │\n│      │ └─────┘ └─────┘ └─────┘ └─────┘ │\n│      │                                  │\n└──────┴──────────────────────────────────┘\n\n```\n\n## Component Checklist\n\n### Buttons\n\n- [ ] Clear, action-oriented label (2-3 words)\n- [ ] Minimum touch target: 44×44px\n- [ ] Visual states: default, hover, active, disabled, loading\n- [ ] Sufficient contrast (3:1 against background)\n- [ ] Consistent border radius across app\n\n### Forms\n\n- [ ] Labels above inputs (not just placeholders)\n- [ ] Required field indicators\n- [ ] Error messages adjacent to fields\n- [ ] Logical tab order\n- [ ] Input types match content (email, tel, etc.)\n\n### Navigation\n\n- [ ] Current location clearly indicated\n- [ ] Consistent position across screens\n- [ ] Maximum 7±2 top-level items\n- [ ] Touch-friendly on mobile (48px targets)\n\n## Accessibility Quick Checks\n\n1. **Color contrast**: Text 4.5:1, Large text 3:1\n2. **Touch targets**: Minimum 44×44px\n3. **Focus states**: Visible keyboard focus indicators\n4. **Alt text**: Meaningful descriptions for images\n5. **Hierarchy**: Proper heading levels (H1→H2→H3)\n6. **Color independence**: Never rely solely on color\n\n## Design Review Checklist\n\nBefore finalizing any design:\n\n- [ ] Visual hierarchy is clear\n- [ ] Consistent spacing and alignment\n- [ ] Typography is readable (16px+ body text)\n- [ ] Color contrast meets WCAG AA\n- [ ] Interactive elements are obvious\n- [ ] Mobile-friendly touch targets\n- [ ] Loading/empty/error states considered\n- [ ] Consistent with design system\n\n## Validating Designs\n\nUse these validation approaches with `mcp__penpot__execute_code`:\n\n| Check | Method |\n| ----- | ------ |\n| Elements outside bounds | `penpotUtils.analyzeDescendants()` with `isContainedIn()` |\n| Text too small (<12px) | `penpotUtils.findShapes()` filtering by `fontSize` |\n| Missing contrast | Call `mcp__penpot__export_shape` and visually inspect |\n| Hierarchy structure | `penpotUtils.shapeStructure()` to review nesting |\n\n### Export CSS\n\nUse `penpot.generateStyle(selection, { type: 'css', includeChildren: true })` via `mcp__penpot__execute_code` to extract CSS from designs.\n\n## Tips for Great Designs\n\n1. **Start with content**: Real content reveals layout needs\n2. **Design mobile-first**: Constraints breed creativity\n3. **Use a grid**: 8px base grid keeps things aligned\n4. **Limit colors**: 1 primary + 1 secondary + neutrals\n5. **Limit fonts**: 1-2 typefaces maximum\n6. **Embrace whitespace**: Breathing room improves comprehension\n7. **Be consistent**: Same action = same appearance everywhere\n8. **Provide feedback**: Every action needs a response","tags":["penpot","uiux","design","awesome","copilot","github"],"capabilities":["skill","source-github","category-awesome-copilot"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/penpot-uiux-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under github/awesome-copilot","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T19:40:26.818Z","embedding":null,"createdAt":"2026-04-18T20:25:16.674Z","updatedAt":"2026-04-22T19:40:26.818Z","lastSeenAt":"2026-04-22T19:40:26.818Z","tsv":"'-2':1313 '-22':946 '-28':939 '-3':1044 '-40':932 '-64':925 '/penpot/penpot-mcp.git':211 '0':775,784,814 '1':118,228,381,429,462,549,1061,1120,1125,1129,1274,1304,1306,1312 '100':778 '100px':822 '12px':961,1230 '1440':1017 '14px':956 '16px':894,951,1010,1184 '2':142,233,391,434,481,564,1043,1105,1130,1283 '20':945 '200px':830 '22c55e':978 '24':938 '240':1027 '24px':900 '2xl':911 '3':182,241,400,440,495,1060,1128,1136,1291 '32':931 '32px':906 '375':816,998 '4':245,409,449,507,1143,1301 '4.5':1124 '44':1049,1134 '4400':342 '4400/manifest.json':244 '4401':343 '4401/sse':267 '4402':344 '44px':1003,1050,1135 '48':924 '48px':912,1115 '4px':881 '5':417,454,514,1150,1309 '56px':1005 '6':522,1158,1316 '64px':1021 '7':1104,1323 '8':1331 '812':817,999 '84px':1014 '8px':873,888,1295 '900':1018 'aa':1191 'access':301,363,410,1117 'accessibility.md':367 'across':1067,1101 'action':976,1026,1040,1327,1335 'action-ori':1039 'activ':1055 'add':258 'addflexlayout':518 'adjac':1081 'align':835,1180,1300 'allow':298,340 'allshap':584,614 'allshapes.foreach':597 'alreadi':104,113,163 'alt':1144 'alway':106,746,864 'api':73,77,128,686 'app':1068 'appear':156,312,1329 'appendchild':718 'appli':515 'approach':1213 'area':1007 'array':721 'ask':147,468,550 'assumpt':423 'attempt':116,124 'attent':439 'auto':737,741 'auto-height':740 'auto-width':736 'avail':30,114,870 'avoid':755 'awesom':4 'b':790 'b.width':794 'b.x':793 'background':1063 'bar':1002,1023 'base':874,1296 'bash':203 'block':296 'board':745,749,761,767,771,781,787,804,818,836 'boards.foreach':789 'boards.length':783 'bodi':950,1185 'bold':457,927,934 'bootstrap':224 'border':1065 'bottom':1012 'bound':1223 'brand':560,971 'brave':305 'breath':1319 'breed':1289 'browser':295 'build':218,393 'button':358,1037 'calcul':763,806 'call':120,485,524,1237 'caption':960 'card':1031,1032,1033,1034 'category-awesome-copilot' 'caution':984 'cd':212 'center':17 'chang':321 'check':102,107,282,338,463,531,568,747,1119,1219 'checklist':1036,1168 'children':720 'clariti':382 'clear':1038,1097,1176 'clever':384 'click':246 'client':314 'clone':204,208 'code':38,256,489,1218,1264 'code/claude':317 'color':397,572,590,594,632,633,646,965,972,1121,1159,1165,1187,1303 'color/contrast':435 'colors.add':603 'column':727 'common':994 'complet':318 'compon':356,399,571,627,629,652,1035 'component-patterns.md':361,682 'componentcount':635 'components.length':636 'comprehens':1322 'config':320 'configur':257 'confirm':191,980 'connect':138,159,247,281,334,336 'consid':1203 'consist':392,677,1064,1099,1177,1204,1325 'const':583,593,612,628,766,776,791,808 'constraint':1288 'contain':521 'content':954,1006,1028,1090,1277,1279 'context':44 'contrast':364,437,1059,1122,1188,1236 'convent':657 'copilot':5 'core':375 'creat':13,538,751,802 'create/modify':46,508 'creativ':1290 'css':1252,1257,1267 'ctas':973 'current':478,581,1095 'dashboard':1016 'default':666,851,856,895,1053 'descript':1147 'design':3,11,18,47,69,231,376,404,414,460,465,534,539,547,557,578,641,662,852,862,1166,1172,1206,1209,1269,1273,1284 'desktop':1015 'detail':93 'determin':540 'differ':833 'dir':294,726,729 'disabl':304,1056 'discov':476,565,576 'display':923 'document':78 'doesn':154 'draw':438 'earli':424 'edg':788 'ef4444':986 'element':386,497,502,884,890,1193,1221 'email':1091 'embrac':1317 'emphas':452 'ensur':326 'enter':242 'error':985,988,1079 'establish':676 'etc':513,1093 'everi':385,1334 'everyon':416 'everywher':1330 'execut':37,323,488,1217,1263 'exist':473,546,570,577,589,606,626,651,748,760 'export':50,52,527,1240,1251 'extract':1266 'f':602 'f.fillcolor':604 'f59e0b':982 'fail':146,337 'fails/times':324 'featur':408 'feedback':1333 'field':1077,1083 'file':232,349,480,582 'filter':615,1232 'final':1170 'find':496,588,605,625,758,785 'firefox':309 'firewal':339 'first':123,403,448,467,1287 'flex':719 'flow':828,849 'focus':1137,1141 'follow':563,654 'font':609,1311 'fontsiz':621,1234 'fontweight':623 'form':359,1069 'friend':1112,1198 'gap':777,797,801,823,831 'get':446 'git':207 'github':8 'github.com':210 'github.com/penpot/penpot-mcp.git':209 'go':234 'goal':402 'golden':379 'gotcha':687 'gray':990 'great':1272 'grid':1029,1294,1297 'group':843 'growtyp':734 'guid':12,177 'guidelin':561,820 'h':697 'h1':930,1155 'h2':937,1156 'h3':944,1157 'handl':536 'head':1153 'header':943,1020 'header/nav':1004 'headlin':929 'height':689,742 'help':171,675 'hero':928 'hierarchi':426,494,1151,1174,1245 'high':436 'hint':964 'horizont':846,1011 'hover':1054 'icon':65 'imag':62,64,1149 'import':61,63,433,453 'improv':1321 'includechildren':1258 'independ':1160 'index':711 'indic':1078,1098,1142 'info':74,129 'inlin':883 'input':1072,1087 'insertchild':710 'inspect':58,1244 'instal':94,164,196,202,206,217,272,352 'instruct':187 'interact':1192 'iscontainedin':1226 'isol':451 'issu':276 'item':1109 'javascript':40,575,757 'json':261 'keep':1298 'key':684 'keyboard':1140 'label':963,1042,1070 'larg':1126 'larger':431 'layout':516,995,1281 'left':444 'let':773 'level':915,919,1108,1154 'lg':899 'limit':1302,1310 'load':237,1057 'loading/empty/error':1201 'local':91,299 'localhost':243,266,297 'locat':501,1096 'logic':1084 'logo':67 'ltr':445 'main':953,970 'major':907 'map':619 'match':649,1089 'maximum':1103,1315 'mcp':24,31,35,48,59,70,79,84,110,125,152,215,249,262,293,350,486,525,1215,1238,1261 'md':893 'meaning':1146 'meet':1189 'messag':1080 'method':1220 'minimum':1046,1133 'miss':1235 'mobil':996,1114,1197,1286 'mobile-first':1285 'mobile-friend':1196 'must':387 'name':506,656 'nav':360 'nav/cta':1013 'navig':1094 'need':141,1282,1336 'nest':1250 'network':300 'neutral':989,1308 'never':1161 'new':595,744,752,803 'newboard':809 'newboard.resize':815 'newboard.x':811 'newboard.y':813 'next':764 'nextx':774,798,799,812 'npm':216,222,286 'obvious':1195 'offer':673 'one':753 'open':229,331 'option':413 'order':428,716,722,850,1086 'organ':842 'orient':1041 'outsid':1222 'overlap':756 'pad':896,1009 'page':484,914,935,1024 'page-level':913 'parenti':699 'parentx':698 'pattern':396,574,579,653,678 'penpot':1,9,20,36,42,49,60,71,72,76,83,126,127,151,214,227,264,292,327,479,487,526,567,685,1216,1239,1262 'penpot-mcp':213,291 'penpot.createboard':510,810 'penpot.createrectangle':511 'penpot.createtext':512 'penpot.generatestyle':1254 'penpot.library.local.components':630 'penpot.root':587,772 'penpot/penpot-mcp':23,88 'penpotutils.analyzedescendants':1224 'penpotutils.findshapes':499,585,768,1231 'penpotutils.setparentxy':705 'penpotutils.shapestructure':491,1247 'photo':66 'placehold':1075 'platform':371 'platform-guidelines.md':373 'plugin':43,236,238,253,278,328 'png/svg':55 'point':672 'port':341 'posit':441,743,765,807,1100 'prefer':865 'primari':969,1305 'principl':29,377 'prioriti':427 'proceed':184 'profession':14 'prompt':302 'proper':1152 'proven':27 'provid':1332 'purpos':34,390,967 'px':926,933,940,947,1030 'quick':197,345,1118 'radius':1066 'rang':979,983,987 'read':692,702 'read-on':691,701 'readabl':1183 'real':420,1278 'recommend':968 'refer':346,348,679 'references/accessibility.md':368 'references/component-patterns.md':362,683 'references/platform-guidelines.md':374 'references/setup-troubleshooting.md':99,355 'regular':952,957,962 'relat':825,844,889 'reli':1162 'requir':86,1076 'reset':733 'respons':520,1338 'restart':315 'retriev':75 'return':631 'reus':395 'reveal':1280 'revers':724 'review':1167,1249 'rightedg':792,796,800 'rightmost':786 'room':1320 'row':730 'rule':380 'run':39,90,105,136,166,223,285,287 's.fills':600 's.fills.foreach':601 's.fontsize':622 's.fontweight':624 's.type':617,770 'scale':872,918,991 'screen':369,826,845,997,1102 'scrollabl':1008 'secondari':958,974,1307 'section':901,908,942 'sections/flows':834 'see':97,493 'seen':447 'select':1255 'semibold':941,948 'server':25,80,89,111,134,153,162,193,221,250,263,270,283,351 'set':596 'settings.json':260 'setup':81,101,117,140,181,186 'setup-troubleshooting.md':98,354 'shape':51,53,528,706,712,1241 'shape.resize':695 'shield':306 'show':333 'side':1022 'size':370,430,610,920 'skill':6 'sm':887 'small':955,1229 'sole':1163 'solut':277 'source-github' 'space':647,779,819,871,879,886,892,898,902,904,910,916,1178 'spacing-2xl':909 'spacing-lg':897 'spacing-md':891 'spacing-sm':885 'spacing-x':878 'spacing-xl':903 'spec':357,372,680 'specifi':645 'stand':458 'start':198,220,288,671,1275 'state':1052,1138,1202 'status':1001 'structur':1246 'style':608 'subsect':949 'succeed':132 'success':977 'suffici':1058 'support':975 'system':466,535,548,558,642,663,863,1207 'tab':1085 'target':366,1048,1116,1132,1200 'task':347,406 'tel':1092 'test':418 'text':607,618,959,1000,1019,1123,1127,1145,1186,1227 'text.resize':732 'text/borders':993 'textstyl':613,634 'thing':1299 'tight':882 'tip':1270 'titl':936,1025 'token':667,853,868,875 'tokens/specs':474 'tool':32,33,85,122,145,310,322 'top':443,1107 'top-left':442 'top-level':1106 'touch':365,1047,1111,1131,1199 'touch-friend':1110 'tri':119,308 'troubleshoot':96,172,268,353 'true':586,1259 'trust':394 'type':504,1088,1256 'typefac':1314 'typographi':455,648,917,1181 'ui':254,329 'ui/ux':10,28 'uiux':2 'understand':482 'url':240,265 'usag':877,922,966 'use':21,498,509,517,592,643,664,694,704,709,821,829,854,1210,1253,1292 'user':16,149,190,401,421,469,543,552,638,659,848,859,866 'user-cent':15 'valid':422,523,1208,1212 'valu':876 'vertic':837 'via':1260 'visibl':1139 'visual':57,425,530,841,1051,1173,1243 'vs':255,316 'w':696 'warn':981 'wcag':1190 'websocket':335 'weight':456,611,921 'whitespac':450,1318 'width':688,738 'won':279 'word':1045 'work':275,533 'workflow':461 'x':707 'xl':905 'xs':880 'y':708,839 'z':715 'z-order':714","prices":[{"id":"6f9fa49b-eb17-4ef4-a20f-51a277dc2fee","listingId":"1a8d834a-6048-499c-9fce-8d5511aac645","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:25:16.674Z"}],"sources":[{"listingId":"1a8d834a-6048-499c-9fce-8d5511aac645","source":"github","sourceId":"github/awesome-copilot/penpot-uiux-design","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/penpot-uiux-design","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:25.807Z","lastSeenAt":"2026-04-22T18:53:01.289Z"},{"listingId":"1a8d834a-6048-499c-9fce-8d5511aac645","source":"skills_sh","sourceId":"github/awesome-copilot/penpot-uiux-design","sourceUrl":"https://skills.sh/github/awesome-copilot/penpot-uiux-design","isPrimary":true,"firstSeenAt":"2026-04-18T20:25:16.674Z","lastSeenAt":"2026-04-22T19:40:26.818Z"}],"details":{"listingId":"1a8d834a-6048-499c-9fce-8d5511aac645","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"penpot-uiux-design","source":"skills_sh","category":"awesome-copilot","skills_sh_url":"https://skills.sh/github/awesome-copilot/penpot-uiux-design"},"updatedAt":"2026-04-22T19:40:26.818Z"}}