[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2FKFQZJMF7C05M6NDQ4KA":3,"skill-same:01M6D2FKFQZJMF7C05M6NDQ4KA":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":45,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6D2FKFQZJMF7C05M6NDQ4KA","ui-reference-marketplace",null,"A worked reference, measured from a hand-designed marketplace: a store of many products from many sellers, organised in shelves, with search first, product cards that carry every buying fact, and a playful but systematic look. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a store, marketplace or product catalogue.","enowdev\u002Fenowxcli","enowdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F179420349?v=4","01M6D1MVX2KC0X3Z9NESE7P22K","Enow Dev.","01M6D1MW1FMZGBDKWAJY4GQX81",67,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-marketplace\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"ui","marketplace","reference","ui reference marketplace","component","product","search","first","before building","read","search first","take","look","but","wireframes","anatomy","2026-11-10 10:12:30",false,"---\nname: ui-reference-marketplace\ndescription: \"A worked reference, measured from a hand-designed marketplace: a store of many products from many sellers, organised in shelves, with search first, product cards that carry every buying fact, and a playful but systematic look. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a store, marketplace or product catalogue.\"\n---\n\n# Reference: a marketplace of shelves\n\nMeasured from a hand-designed store (mastumbas.id, a marketplace for digital\nproducts). Take its structure and its decisions; its words, name, colours\nand window motif belong to it. Its concept is its own: find yours from your\nstore (the `ui` skill, section 1).\n\n**Its concept**: a retro desktop. Every shelf of products is a window with a\ntitle bar and its buttons; each category has its own colour, carried from\nthe shelf's title bar to the header strip of every card in it. Loud, but\nevery loud thing is a rule applied the same way everywhere.\n\n## Skeleton\n\n1. A ticker across the top: live facts (a discount, a new listing, a stock\n   note), moving slowly.\n2. Header, sticky, 62px: logo, a wide search field, Catalogue, Categories,\n   notifications, cart, account.\n3. Hero window: the promise in one line, a second search field, and one\n   featured deal.\n4. Shelves, one after another: best sellers, newly listed, then one per\n   category, each four products wide with \"See all\".\n5. Footer: the promise in one line, \"Explore\" links, \"Help and legal\" links.\n\nSearch appears twice above the fold: in a store, finding is the job.\n\n## Wireframes (wide screen)\n\n```\n│ ◀ ticker: 99% off · item name · just listed · stock tip · ... ◀     │\n│ [logo]  [ ⌕ Search products or shops ....................... ]      │\n│                    [CATALOGUE] [CATEGORIES▾] [bell] [cart] [account] │ sticky\n│ ┌ WINDOW_NAME [HOME] ─────────────────────────────────── _ □ ✕ ┐   │\n│ │ [tag] [tag]                                                    │   │\n│ │ THE PROMISE IN CAPITALS WITH ONE [HIGHLIGHTED] WORD            │   │\n│ │ Two lines on what is sold and how it is protected.             │   │\n│ │ [ > search again ...................................... ][⌕]   │   │\n│ │ ┌──────┬─────────────────────────────────────┬──────────────┐ │   │\n│ │ │ 99%  │ FEATURED DEAL NAME                  │ [ GET IT ]   │ │   │\n│ │ │ OFF  │ Rp 1.200  Rp 170.000                │              │ │   │\n│ │ └──────┴─────────────────────────────────────┴──────────────┘ │   │\n│ └────────────────────────────────────────────────────────────────┘   │\n│ ┌ BEST_SELLERS ───────────────────────────── [SEE ALL →] _ □ ✕ ┐   │\n│ │ ┌card────────┐ ┌card────────┐ ┌card────────┐ ┌card────────┐  │   │\n│ └────────────────────────────────────────────────────────────────┘   │\n```\n\nA product card:\n\n```\n┌──────────────────────────────────────┐\n│ [icon] CATEGORY     [TAG]    [heart] │ header strip in the category's colour\n├──────────────────────────────────────┤\n│ [icon INSTANT]               [-98%] │ chips over the image\n│              product image           │\n│ [#1 BEST SELLER]                     │\n├──────────────────────────────────────┤\n│ Product name on one line, cut with … │\n│ [icon] Shop name                     │\n│ Rp 123.456  Save 98%                 │ old price struck through\n│ WHOLESALE FROM 15 PCS                │\n│ Rp 2.400                             │ the price, largest\n│ ★ 5 (5) · 210 SOLD                   │ meta in small monospace capitals\n└──────────────────────────────────────┘\n```\n\nOn a phone: the ticker stays; the header keeps the logo, search and cart;\nshelves go two cards wide; card chips shrink but stay.\n\n## Measures\n\n- Content 1180px wide, centred. Shelves: 4 columns of 334px, gap 12px,\n  inside a window with 12px padding; 2 columns on phones.\n- Borders 1.5 to 2px in the ink colour on every window, card, chip and\n  button; hard offset shadows (no blur) on windows; square corners or 4px.\n- Type: a grotesque (Space Grotesk) in capitals for headings and titles, a\n  humanist sans (Plus Jakarta Sans) for body text, a monospace in small\n  capitals for meta, tags and window names.\n- Colour: a pale lavender page with a faint grid and soft colour in two\n  corners; ink near-black; one colour per category (blue, pink, purple,\n  green) on title bars and card strips; yellow for actions and highlights;\n  pink for discounts. Each colour has one job.\n\n## Anatomy worth taking\n\n- **Search first**: a wide field in the sticky header, and again in the hero,\n  with example queries as its placeholder.\n- **Shelves, not one endless grid**: best sellers, newly listed, then one\n  shelf per category, each with its title and \"See all\"; the order says what\n  matters.\n- **A card that answers every buying question**: category, delivery time,\n  discount, rank or age, name, seller, old and new price, wholesale terms,\n  rating, sold count, stock or guarantee. Each fact in a fixed place, so the\n  eye compares cards without reading them.\n- **Category colour as a system**: the same colour on the shelf's title bar,\n  the card's strip and the category chips, so a colour means a category.\n- **Real, live facts in the ticker**, not slogans.\n- **Footer as help**: what the store is in one line, the shopper's links\n  (catalogue, orders, cart, affiliate), and the legal ones (terms, privacy,\n  refunds, contact, FAQ).\n\n## When it fits, and when not\n\nFor a store with many products and sellers, a young audience, and a brand\nthat can be playful. The window motif is this store's identity: a pharmacy,\na furniture shop or a bookshop keeps the structure (search first, shelves,\nthe fact-complete card, colour as a system) and takes a quieter look from\nits own concept.\n","# Reference: a marketplace of shelves\n\nMeasured from a hand-designed store (mastumbas.id, a marketplace for digital\nproducts). Take its structure and its decisions; its words, name, colours\nand window motif belong to it. Its concept is its own: find yours from your\nstore (the `ui` skill, section 1).\n\n**Its concept**: a retro desktop. Every shelf of products is a window with a\ntitle bar and its buttons; each category has its own colour, carried from\nthe shelf's title bar to the header strip of every card in it. Loud, but\nevery loud thing is a rule applied the same way everywhere.\n\n## Skeleton\n\n1. A ticker across the top: live facts (a discount, a new listing, a stock\n   note), moving slowly.\n2. Header, sticky, 62px: logo, a wide search field, Catalogue, Categories,\n   notifications, cart, account.\n3. Hero window: the promise in one line, a second search field, and one\n   featured deal.\n4. Shelves, one after another: best sellers, newly listed, then one per\n   category, each four products wide with \"See all\".\n5. Footer: the promise in one line, \"Explore\" links, \"Help and legal\" links.\n\nSearch appears twice above the fold: in a store, finding is the job.\n\n## Wireframes (wide screen)\n\n```\n│ ◀ ticker: 99% off · item name · just listed · stock tip · ... ◀     │\n│ [logo]  [ ⌕ Search products or shops ....................... ]      │\n│                    [CATALOGUE] [CATEGORIES▾] [bell] [cart] [account] │ sticky\n│ ┌ WINDOW_NAME [HOME] ─────────────────────────────────── _ □ ✕ ┐   │\n│ │ [tag] [tag]                                                    │   │\n│ │ THE PROMISE IN CAPITALS WITH ONE [HIGHLIGHTED] WORD            │   │\n│ │ Two lines on what is sold and how it is protected.             │   │\n│ │ [ > search again ...................................... ][⌕]   │   │\n│ │ ┌──────┬─────────────────────────────────────┬──────────────┐ │   │\n│ │ │ 99%  │ FEATURED DEAL NAME                  │ [ GET IT ]   │ │   │\n│ │ │ OFF  │ Rp 1.200  Rp 170.000                │              │ │   │\n│ │ └──────┴─────────────────────────────────────┴──────────────┘ │   │\n│ └────────────────────────────────────────────────────────────────┘   │\n│ ┌ BEST_SELLERS ───────────────────────────── [SEE ALL →] _ □ ✕ ┐   │\n│ │ ┌card────────┐ ┌card────────┐ ┌card────────┐ ┌card────────┐  │   │\n│ └────────────────────────────────────────────────────────────────┘   │\n```\n\nA product card:\n\n```\n┌──────────────────────────────────────┐\n│ [icon] CATEGORY     [TAG]    [heart] │ header strip in the category's colour\n├──────────────────────────────────────┤\n│ [icon INSTANT]               [-98%] │ chips over the image\n│              product image           │\n│ [#1 BEST SELLER]                     │\n├──────────────────────────────────────┤\n│ Product name on one line, cut with … │\n│ [icon] Shop name                     │\n│ Rp 123.456  Save 98%                 │ old price struck through\n│ WHOLESALE FROM 15 PCS                │\n│ Rp 2.400                             │ the price, largest\n│ ★ 5 (5) · 210 SOLD                   │ meta in small monospace capitals\n└──────────────────────────────────────┘\n```\n\nOn a phone: the ticker stays; the header keeps the logo, search and cart;\nshelves go two cards wide; card chips shrink but stay.\n\n## Measures\n\n- Content 1180px wide, centred. Shelves: 4 columns of 334px, gap 12px,\n  inside a window with 12px padding; 2 columns on phones.\n- Borders 1.5 to 2px in the ink colour on every window, card, chip and\n  button; hard offset shadows (no blur) on windows; square corners or 4px.\n- Type: a grotesque (Space Grotesk) in capitals for headings and titles, a\n  humanist sans (Plus Jakarta Sans) for body text, a monospace in small\n  capitals for meta, tags and window names.\n- Colour: a pale lavender page with a faint grid and soft colour in two\n  corners; ink near-black; one colour per category (blue, pink, purple,\n  green) on title bars and card strips; yellow for actions and highlights;\n  pink for discounts. Each colour has one job.\n\n## Anatomy worth taking\n\n- **Search first**: a wide field in the sticky header, and again in the hero,\n  with example queries as its placeholder.\n- **Shelves, not one endless grid**: best sellers, newly listed, then one\n  shelf per category, each with its title and \"See all\"; the order says what\n  matters.\n- **A card that answers every buying question**: category, delivery time,\n  discount, rank or age, name, seller, old and new price, wholesale terms,\n  rating, sold count, stock or guarantee. Each fact in a fixed place, so the\n  eye compares cards without reading them.\n- **Category colour as a system**: the same colour on the shelf's title bar,\n  the card's strip and the category chips, so a colour means a category.\n- **Real, live facts in the ticker**, not slogans.\n- **Footer as help**: what the store is in one line, the shopper's links\n  (catalogue, orders, cart, affiliate), and the legal ones (terms, privacy,\n  refunds, contact, FAQ).\n\n## When it fits, and when not\n\nFor a store with many products and sellers, a young audience, and a brand\nthat can be playful. The window motif is this store's identity: a pharmacy,\na furniture shop or a bookshop keeps the structure (search first, shelves,\nthe fact-complete card, colour as a system) and takes a quieter look from\nits own concept.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-reference-marketplace",21,"https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli","https:\u002F\u002Fenowx.ai","https:\u002F\u002Fgithub.com\u002Fenowdev","Pretending to be a Developer","2026-10-06 02:05:35",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-reference-marketplace",{"tool":55,"command":56},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-reference-marketplace",{"tool":58,"command":59},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-reference-marketplace","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-marketplace\u002FSKILL.md",true,[63,69],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Fapi_reference.md","REFERENCE","参考文档",10694,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fdatabases\u002Fclinicaltrials-database\u002Freferences\u002Fapi_reference.md",{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"scripts\u002Fquery_clinicaltrials.py","SCRIPT","脚本",6992,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fdatabases\u002Fclinicaltrials-database\u002Fscripts\u002Fquery_clinicaltrials.py",[76,92,117,131,158,179],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":87,"publishedAt":35},"01M6D2HQYSQD9N7MTNDT4A7CBM","demo-skill","Project-scope demo skill for tests.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fworkspace\u002F.agents\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[88,89,90,91,28],"demo skill","demo","tests","project",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":106,"publishedAt":35},"01M6D2HM0GCPM0TM2HPG9HHR2R","writing","Writing words people read: the specific thing instead of claims, words to drop, sentences, interface copy (buttons, labels, errors, empty states, confirmations), page copy, notifications and emails, alt text and link text, numbers and dates, words that translate well, documentation and voice. Read before writing a page's copy, an interface's text or a document.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fwriting\u002FSKILL.md",[98,101],{"categoryNo":99,"categoryName":100,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":102,"categoryName":103,"taxonomyType":104,"taxonomyTypeDesc":105},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[94,107,108,109,110,111,28,112,113,114,115,116],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":118,"name":19,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":125,"publishedAt":35},"01M6D2HG07YS49NM196Q0R3AZ8","Designing or restyling an interface: direction, layout, type, colour, icons, components, states, responsive behaviour. Read before building a page, a screen or a set of components.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui\u002FSKILL.md",[122],{"categoryNo":123,"categoryName":124,"taxonomyType":104,"taxonomyTypeDesc":105},"01JBSEEDCAT000000000000032","设计师",[19,126,127,128,129,112,130,28,27],"icons","components","SET","responsive","layout",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":143,"publishedAt":35},"01M6D2HB59HZHWG1RYZDV4SJ91","ui-themes","Light and dark themes, and colour that holds in both: tokens with a value per theme, and what each kind of content needs to stay visible (icons, SVG drawings and line art, logos, photos, screenshots, charts, code, maps, borders, shadows, focus, form controls), switching without a flash, and checking both. Read before building a second theme or a theme toggle, and before any drawing, logo or chart on a page that has two themes.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-themes\u002FSKILL.md",[137,140],{"categoryNo":138,"categoryName":139,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":141,"categoryName":142,"taxonomyType":104,"taxonomyTypeDesc":105},"01JBSEEDCAT000000000000030","开发工程师",[19,144,145,146,147,148,149,150,151,28,27,152,112,153,154,155,126,156,157],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":167,"publishedAt":35},"01M6D2H5R5KRAE524C8QX0T7Q0","ui-structure","Structure before styling: the blueprint written before any interface code (the screen's job, the regions its kind of page needs, their order and why, the layout skeleton in numbers, the components and their states), the anatomy and order of a homepage, a dashboard, a list, a detail page, settings, a form, sign-in, pricing, docs, an article and a checkout, and how to turn the blueprint into code (tokens, layout primitives, components, sections, page). Read first, before building or rebuilding any page or screen.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-structure\u002FSKILL.md",[164,165,166],{"categoryNo":99,"categoryName":100,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":141,"categoryName":142,"taxonomyType":104,"taxonomyTypeDesc":105},{"categoryNo":102,"categoryName":103,"taxonomyType":104,"taxonomyTypeDesc":105},[168,19,169,127,170,171,153,172,173,34,130,147,174,175,176,28,27,112,177,178],"structure","ui structure","pricing","dashboard","Blueprint","article","styling","primitives","list","why","how",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":192,"publishedAt":35},"01M6D2H0ZZBJG77MBGPZHA6MWD","ui-stack-vue","Building interfaces in Vue 3 and Nuxt: project layout, script setup with typed defineProps, defineEmits and defineModel, attribute fallthrough, slots and scoped slots, template refs, ref, reactive and computed, watch versus watchEffect, composables and VueUse, provide and inject, Pinia, keyed v-for, transitions, Nuxt 4 (app directory, pages, layouts, useFetch and useAsyncData keys, $fetch in handlers, server routes, runtime config, useSeoMeta, NuxtImg, middleware), VeeValidate forms, Reka UI and Nuxt UI, testing, vue-tsc, and the traps. Read when the project uses Vue or Nuxt.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-stack-vue\u002FSKILL.md",[185,188,191],{"categoryNo":186,"categoryName":187,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":189,"categoryName":190,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":123,"categoryName":124,"taxonomyType":104,"taxonomyTypeDesc":105},[19,193,194,195,196,197,198,199,130,91,200,201,28,202,203,204,205,206,207,208],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]