[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2FT0WT5KAY0T3B8T0YHRB":3,"skill-same:01M6D2FT0WT5KAY0T3B8T0YHRB":64},{"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":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":44,"repositoryHtmlUrl":45,"repositoryHomepageUrl":46,"ownerHtmlUrl":47,"ownerBlogUrl":46,"ownerDescription":48,"updatedAt":49,"install":50,"resources":63},"01M6D2FT0WT5KAY0T3B8T0YHRB","ui-reference-studio",null,"A worked reference, measured from a hand-designed studio site: a small studio, consultancy or freelancer showing its work as decisions rather than thumbnails, then a way to get in touch. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a studio, agency, consultant or project portfolio page.","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-studio\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"ui","ui reference studio","reference","page","work","before building","decisions","read","portfolio","take","site","thumbnails","project","get","wireframes","anatomy","component","2026-11-10 10:12:30",false,"---\nname: ui-reference-studio\ndescription: \"A worked reference, measured from a hand-designed studio site: a small studio, consultancy or freelancer showing its work as decisions rather than thumbnails, then a way to get in touch. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a studio, agency, consultant or project portfolio page.\"\n---\n\n# Reference: a studio that shows its decisions\n\nMeasured from a hand-designed site (enowxlabs.com, a small software studio).\nTake its structure and its decisions; its words, name and colours belong to\nit. Its concept is its own: find yours from your studio's work (the `ui`\nskill, section 1).\n\n**Its concept**: the studio's notebook. Each project is written up as an\nentry, with the decision the studio made and why, the way an engineer would\nexplain it to a colleague. No grid of screenshots, no list of services, no\nlogos of clients.\n\n## Skeleton\n\n1. A quiet header: the wordmark, two links (Work, Contact), a theme toggle.\n2. Hero, one screen: a label naming the studio and what it is, a two-line\n   claim, a paragraph, two outline buttons, a hairline.\n3. Selected work: one entry per project, numbered, separated by hairlines.\n4. Contact: a closing line beside the ways to reach the studio.\n5. A footer of one line.\n\nThree sections are enough when each carries real content.\n\n## Wireframes (wide screen)\n\n```\n│ WORDMARK                                         WORK  CONTACT  ◐   │\n│                                                                    │\n│      STUDIO NAME, A KIND OF STUDIO                                 │\n│      The claim in a large serif,                                   │\n│      its second line in the muted colour.                          │\n│      A paragraph of about 60 characters a line: who the studio     │\n│      works for and what it hands back.                             │\n│      ( START A PROJECT )  ( SEE THE WORK )                         │\n│      ───────────────────────────────────────────                   │\n├────────────────────────────────────────────────────────────────────┤\n│      01                                     ▏ DECISION             │\n│      project name  a muted description     ▏ What was chosen.     │\n│      that runs to two or three lines.       ▏ WHY                  │\n│      A paragraph on what it is and does,    ▏ The reason, in       │\n│      set at a readable measure.             ▏ plain sentences.     │\n│      ( VIEW REPOSITORY )                    ▏ STACK                │\n│                                             ▏ [Go] [SQLite] [MCP]  │\n│                                             ▏ Last touched \u003Cdate>  │\n│      ───────────────────────────────────────────────────────────── │\n│      02 ...                                                        │\n├────────────────────────────────────────────────────────────────────┤\n│      A closing line in the         EMAIL        name@domain.com   │\n│      large serif, over             ──────────────────────────────  │\n│      three lines.                  GITHUB              @handle    │\n│                                    ──────────────────────────────  │\n│                                    COMMUNITY        invite link   │\n│ WORDMARK                                                           │\n```\n\nOn a phone: one column; each entry's side column moves under its text, and\nits left rule becomes a rule above; the contact list follows the closing\nline.\n\n## Measures\n\n- Content about 960px wide, set a little left of centre in a wide window;\n  sections 120 to 160px apart.\n- Entry: 592 and 300px, gap 64px; the narrow column has a 1px rule on its\n  left and 20px of padding. Contact: 566 and 320px, gap 70px.\n- Type: one serif family (Newsreader) for everything. H1 104px, weight 400;\n  the entry titles 54px; H2 31px; body 17px with generous line height.\n  Labels 11 to 12px uppercase with 2 to 3px tracking, in the muted colour.\n- Colour: near-black warm background (about 5% lightness) with a faint\n  texture on the hero only, warm off-white text, a warm grey for second\n  lines and labels, and one brick red used only on the primary button's\n  outline and text.\n- Buttons: rectangular outlines, uppercase 12px with tracking; no fills.\n\n## Anatomy worth taking\n\n- **Eyebrow label, then a two-line claim**: the studio's name and kind in\n  small tracked capitals, then the claim with its second line muted.\n- **A project as an entry, not a card**: a small index number, the project's\n  name in the text colour followed by its one-line description in the muted\n  colour, both in the heading's size; a paragraph; one outline button to the\n  real thing.\n- **The side column of decisions**: labelled rows (Decision, Why, Stack) in\n  small capitals, each with a short answer; the stack as small bordered\n  chips; a dated \"last touched\" line. It shows judgement, which is what a\n  studio sells.\n- **Contact as a definition list**: label at the left, value at the right,\n  hairlines between rows; only channels that exist.\n- **Restraint**: one family, one accent, outline buttons, hairlines. The\n  large serif does the work a hero image would.\n\n## When it fits, and when not\n\nFor a studio, consultant, freelancer or engineer whose work is best judged by\nits reasoning. A photographer or an illustrator shows the pictures first\n(`ui-page-portfolio`); a studio selling to shops or restaurants may want\nlight paper instead of near-black. Keep the entry anatomy either way.\n","# Reference: a studio that shows its decisions\n\nMeasured from a hand-designed site (enowxlabs.com, a small software studio).\nTake its structure and its decisions; its words, name and colours belong to\nit. Its concept is its own: find yours from your studio's work (the `ui`\nskill, section 1).\n\n**Its concept**: the studio's notebook. Each project is written up as an\nentry, with the decision the studio made and why, the way an engineer would\nexplain it to a colleague. No grid of screenshots, no list of services, no\nlogos of clients.\n\n## Skeleton\n\n1. A quiet header: the wordmark, two links (Work, Contact), a theme toggle.\n2. Hero, one screen: a label naming the studio and what it is, a two-line\n   claim, a paragraph, two outline buttons, a hairline.\n3. Selected work: one entry per project, numbered, separated by hairlines.\n4. Contact: a closing line beside the ways to reach the studio.\n5. A footer of one line.\n\nThree sections are enough when each carries real content.\n\n## Wireframes (wide screen)\n\n```\n│ WORDMARK                                         WORK  CONTACT  ◐   │\n│                                                                    │\n│      STUDIO NAME, A KIND OF STUDIO                                 │\n│      The claim in a large serif,                                   │\n│      its second line in the muted colour.                          │\n│      A paragraph of about 60 characters a line: who the studio     │\n│      works for and what it hands back.                             │\n│      ( START A PROJECT )  ( SEE THE WORK )                         │\n│      ───────────────────────────────────────────                   │\n├────────────────────────────────────────────────────────────────────┤\n│      01                                     ▏ DECISION             │\n│      project name  a muted description     ▏ What was chosen.     │\n│      that runs to two or three lines.       ▏ WHY                  │\n│      A paragraph on what it is and does,    ▏ The reason, in       │\n│      set at a readable measure.             ▏ plain sentences.     │\n│      ( VIEW REPOSITORY )                    ▏ STACK                │\n│                                             ▏ [Go] [SQLite] [MCP]  │\n│                                             ▏ Last touched \u003Cdate>  │\n│      ───────────────────────────────────────────────────────────── │\n│      02 ...                                                        │\n├────────────────────────────────────────────────────────────────────┤\n│      A closing line in the         EMAIL        name@domain.com   │\n│      large serif, over             ──────────────────────────────  │\n│      three lines.                  GITHUB              @handle    │\n│                                    ──────────────────────────────  │\n│                                    COMMUNITY        invite link   │\n│ WORDMARK                                                           │\n```\n\nOn a phone: one column; each entry's side column moves under its text, and\nits left rule becomes a rule above; the contact list follows the closing\nline.\n\n## Measures\n\n- Content about 960px wide, set a little left of centre in a wide window;\n  sections 120 to 160px apart.\n- Entry: 592 and 300px, gap 64px; the narrow column has a 1px rule on its\n  left and 20px of padding. Contact: 566 and 320px, gap 70px.\n- Type: one serif family (Newsreader) for everything. H1 104px, weight 400;\n  the entry titles 54px; H2 31px; body 17px with generous line height.\n  Labels 11 to 12px uppercase with 2 to 3px tracking, in the muted colour.\n- Colour: near-black warm background (about 5% lightness) with a faint\n  texture on the hero only, warm off-white text, a warm grey for second\n  lines and labels, and one brick red used only on the primary button's\n  outline and text.\n- Buttons: rectangular outlines, uppercase 12px with tracking; no fills.\n\n## Anatomy worth taking\n\n- **Eyebrow label, then a two-line claim**: the studio's name and kind in\n  small tracked capitals, then the claim with its second line muted.\n- **A project as an entry, not a card**: a small index number, the project's\n  name in the text colour followed by its one-line description in the muted\n  colour, both in the heading's size; a paragraph; one outline button to the\n  real thing.\n- **The side column of decisions**: labelled rows (Decision, Why, Stack) in\n  small capitals, each with a short answer; the stack as small bordered\n  chips; a dated \"last touched\" line. It shows judgement, which is what a\n  studio sells.\n- **Contact as a definition list**: label at the left, value at the right,\n  hairlines between rows; only channels that exist.\n- **Restraint**: one family, one accent, outline buttons, hairlines. The\n  large serif does the work a hero image would.\n\n## When it fits, and when not\n\nFor a studio, consultant, freelancer or engineer whose work is best judged by\nits reasoning. A photographer or an illustrator shows the pictures first\n(`ui-page-portfolio`); a studio selling to shops or restaurants may want\nlight paper instead of near-black. Keep the entry anatomy either way.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-reference-studio",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":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-reference-studio",{"tool":56,"command":57},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-reference-studio",{"tool":59,"command":60},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-reference-studio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-studio\u002FSKILL.md",true,[],[65,80,104,118,145,166],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":36},"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",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[77,78,79,31,26],"demo skill","demo","tests",{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":94,"publishedAt":36},"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",[86,89],{"categoryNo":87,"categoryName":88,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[82,95,96,97,98,99,26,22,100,101,102,103],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":105,"name":19,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":112,"publishedAt":36},"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",[109],{"categoryNo":110,"categoryName":111,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000032","设计师",[19,113,114,115,116,22,117,26,24],"icons","components","SET","responsive","layout",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":130,"publishedAt":36},"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",[124,127],{"categoryNo":125,"categoryName":126,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":128,"categoryName":129,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000030","开发工程师",[19,131,132,133,134,135,136,137,138,26,24,139,22,140,141,142,113,143,144],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":36},"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",[151,152,153],{"categoryNo":87,"categoryName":88,"taxonomyType":74,"taxonomyTypeDesc":75},{"categoryNo":128,"categoryName":129,"taxonomyType":92,"taxonomyTypeDesc":93},{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},[155,19,156,114,157,158,140,159,160,34,117,134,161,162,163,26,24,22,164,165],"structure","ui structure","pricing","dashboard","Blueprint","article","styling","primitives","list","why","how",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":179,"publishedAt":36},"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",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":176,"categoryName":177,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":110,"categoryName":111,"taxonomyType":92,"taxonomyTypeDesc":93},[19,180,181,182,183,184,185,186,117,31,187,188,26,189,190,191,192,193,194,195],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]