[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2ABVDE2KJ94W2QFRHV0ZW":3,"skill-same:01M6D2ABVDE2KJ94W2QFRHV0ZW":77},{"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":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":59,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6D2ABVDE2KJ94W2QFRHV0ZW","ui-page-portfolio",null,"A portfolio (a person's or a studio's work: developer, designer, photographer, writer, studio): the job for each kind, the skeleton with a wireframe, selected work as case studies, entries that carry the facts, one built from a GitHub account with real data, about and contact, a CV as a page and a PDF, photography portfolios, image weight, search for a person's name, and the generic developer look to avoid. Read before building or reworking one.","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-page-portfolio\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"ui page portfolio","ui","page","portfolio","before building","entries","case studies","writer","photography","look","wireframe","read","PDF","work","designer","data","developer","search","github","image","2026-11-10 10:12:30",false,"---\nname: ui-page-portfolio\ndescription: \"A portfolio (a person's or a studio's work: developer, designer, photographer, writer, studio): the job for each kind, the skeleton with a wireframe, selected work as case studies, entries that carry the facts, one built from a GitHub account with real data, about and contact, a CV as a page and a PDF, photography portfolios, image weight, search for a person's name, and the generic developer look to avoid. Read before building or reworking one.\"\n---\n\n# Portfolio\n\nThe generated portfolio greets instead of showing: \"Hi, I'm X\" with a\nwaving hand, a job title, skill bars, repository cards with a star count on\neach, a dark page in monospace. The work is the page. A portfolio is judged\nin its first screen by one question: what does this person make, and is it\ngood? Answer it with the work, not with a greeting. One kind of page: the\nmeasures (container, grid, spacing, type) are in `ui-layout`, and each part\nit uses has its own `ui-part-*` skill. Start from this skeleton, then cut\nand reorder for the content.\n\n## 1. The job, by kind\n\n| Kind | Judged by | The work shown as | First screen |\n|---|---|---|---|\n| Developer | what they built, and how well | projects: what each does and for whom, a screenshot or a real command and its output, links to the source and the live thing | the claim, the first projects beginning |\n| Designer | how they think, and the craft | three to six case studies (section 3), large images of the real work | the claim and the first case study's image |\n| Photographer | the photographs | series, full-bleed and in sequence, words small and few (section 7) | a photograph; the name small in the header |\n| Writer | the writing | pieces with the publication, the date and one line, linking to the published text | the claim (subjects, where published) and the latest pieces |\n| Studio | its judgement, and results | projects as decisions (`ui-reference-studio`); clients named only with permission | the claim and the first entry |\n\n## 2. Skeleton\n\n1. Header: the name, three links at most, the one contact link\n   (`ui-part-header`).\n2. First screen: a claim that says what this person makes, specifically,\n   and the work beginning in the same screen (`ui-part-hero`: \"claim and\n   proof side by side\", \"statement over the work\" or \"index first\").\n3. The work: the strongest three to eight pieces, led by the best. Each with\n   its name, what it is for someone who has not seen it (two plain\n   sentences), one concrete detail, and its evidence: a screenshot, a\n   photograph, a short real example of it in use. Group them by what they do\n   when there are many (\"Agents\", \"Automation\", \"Game tools\"), not by\n   language or date (`ui-part-sections`).\n4. About: three to five sentences in the first person with specifics: where,\n   what they work on, what they care about in the work. A real photo if one\n   is given.\n5. Contact: the email as a link (or a placeholder), and the profiles that\n   exist.\n6. Footer: one line (`ui-part-footer`).\n\nThe header sticks and stays slim so it does not crop the work, and a page of\nprojects runs long, so it has a back-to-top control\n(`ui-part-back-to-top`).\n\n```\n│ [Name]                                    Work   Writing   Contact │ sticky\n│ The claim: what this person makes, for whom,                       │\n│ its consequence in the muted colour.  [City] · [open to, if given] │\n│ Agents (a group's heading)                                         │\n│ [screenshot from its README]    Lead project: two plain sentences, │\n│ [with a caption            ]    one concrete detail.               │\n│                                 Go · 2026 · Source · Live site     │\n│ name       one line on what it does                 Rust · Source  │\n│ name       one line on what it does                   Go · Source  │\n│ All 16 repositories on GitHub                                      │\n│ About: three to five sentences            [photo, when given]      │\n│ [your email] · GitHub · LinkedIn                      [Name], 2026 │\n```\n\n## 3. Selected work as case studies\n\n- For designers, studios and anyone whose work needs its reasoning: a page\n  per project (`\u002Fwork\u002F\u003Cslug>`), linked from its entry on the index.\n- In order: the title and the outcome in one line; a row of facts (client\n  or context, role, when, team, tools or medium, links); the problem and\n  its constraints; the decisions, each with its reason and shown (a\n  sketch, a before and after, the shipped screen); the result, what\n  shipped and what changed, with numbers only when real and permitted; the\n  next project. Captions say what each image shows and why it matters.\n- Team work says who did what (\"I led the research and the booking flow;\n  [Name] built the front end\"). Work under NDA says so and shows what is\n  allowed; never an invented stand-in.\n\n## 4. Entries that carry the facts\n\n- Each entry: the name as the link, what it is and for whom in one or two\n  plain sentences, and a meta line with the facts that help a decision (the\n  stack or medium, the year, the role); links named for where they go\n  (\"Live site\", \"Source\", \"Case study\").\n- The lead ones larger with their evidence, the rest compact rows\n  (`ui-part-sections` section 5); one image ratio per group, screenshots in\n  their own ratio, never cropped through the interface (`ui-part-images`).\n- A dead live link or a demo behind a sign-in says so (\"Archived, source\n  only\") rather than leading nowhere.\n\n## 5. Built from a GitHub account\n\n- Read each chosen repository's README, not only its one-line description:\n  that is where what it does, how it works and its screenshots are. Use the\n  README's own images (screenshots, diagrams) as the evidence, taken from\n  the repository; when it has none, a short real usage example from the\n  README (the command that installs or runs it) in a code block.\n- Choose; do not list everything. Forks, empty repositories, dotfiles,\n  configuration and abandoned experiments stay out. Four to eight projects,\n  grouped by what they do.\n- Rewrite each description for this page in plain words; do not paste the\n  repository's tagline.\n- The lead projects (one to three) show an image when their README has one:\n  a screenshot or a diagram, with a caption. The rest are compact rows.\n- Stars, followers and language counts are not content. A star count may sit\n  in a project's meta when it would impress a stranger (hundreds); a table of\n  how many repositories use each language never.\n- The chosen projects are written into the page. The repositories left out\n  are one link (\"All 16 repositories on GitHub\"), not a second list of their\n  one-line descriptions fetched at load time.\n- Repository creation dates are not a career history: there is no timeline\n  unless the user gives one.\n- Anything about the person beyond GitHub (email, employer, history, photo)\n  is a visible placeholder until the user gives it. The placeholder reads as\n  one (\"[your email]\"); how to fill it in goes in the README, never as a note\n  on the page.\n- Start from the pinned repositories (the person chose them) and the facts\n  the API gives, fetched at build time and written into the page, never\n  from the browser on load (60 requests an hour without a token, and a\n  token in the page is a leaked secret):\n\n  ```sh\n  # Public repositories and their facts, no token (add &page=2 past 100).\n  curl -s \"https:\u002F\u002Fapi.github.com\u002Fusers\u002F\u003Clogin>\u002Frepos?per_page=100&sort=pushed\" |\n    jq '.[] | select(.fork | not) | {name, description, language, stargazers_count, pushed_at, homepage, archived}'\n  # The pinned ones, through GraphQL (needs a token: gh auth login).\n  gh api graphql -f query='query { user(login: \"\u003Clogin>\") { pinnedItems(first: 6, types: REPOSITORY) {\n    nodes { ... on Repository { name description url homepageUrl stargazerCount primaryLanguage { name } } } } } }'\n  ```\n\n- Copy the README's images into the site's own assets and optimise them; a\n  relative path in a README resolves to\n  `https:\u002F\u002Fraw.githubusercontent.com\u002F\u003Cowner>\u002F\u003Crepo>\u002F\u003Cbranch>\u002F\u003Cpath>`. Check\n  that each `homepage` still answers before calling it the live site. No\n  invented metrics: downloads or users only from a real source (the npm,\n  PyPI or crates.io API), with the date.\n\n## 6. About, contact and the CV\n\n- The about adds where they are and their time zone when given (\"Based in\n  Bandung, UTC+7\") and what they are looking for, in their words; no skill\n  bars or list of thirty technologies (the tools show in the projects).\n  Availability only when the user states it, as a dated line (\"Taking on\n  one project from March 2026\"), never a pulsing dot.\n- Contact: the email as a visible `mailto:` link people can read and copy;\n  the profiles that exist, named; a form only when it sends somewhere real\n  and says what happens next (`ui-page-form`).\n- The CV as a page (`\u002Fcv`): roles with dates in one format, education,\n  selected work linking to its entries, in headings, lists and `time`\n  elements, with a print stylesheet (no header, navigation or footer; one\n  column, black on white). The PDF is printed from that same page at build\n  time so the two never drift (Playwright's `page.pdf({ format: \"A4\" })`),\n  linked with its type and real size: \"CV (PDF, 90 KB)\". Employers, dates\n  and degrees only from the user.\n\n## 7. Photography\n\n- The photographs are the design: full-bleed or large on a quiet ground,\n  near-white or near-black (a mid-grey wall reads dull on screen, and\n  `preview` reports it), with the words small and few.\n- Series as sequences: a page per series in the photographer's order, each\n  photograph whole in the full view, never cropped through its frame; an\n  index of series with one cover each. Grids in one ratio, or justified\n  rows that keep each photograph's own ratio.\n- A lightbox is a modal dialog: arrows, Escape, swipe, a counter (\"3 of\n  12\"), the caption, the photograph in the URL; each thumbnail a link that\n  works without script (`ui-part-images` section 6).\n- Captions give the place, the year, the client or publication when given;\n  alt text says what is seen. Export in sRGB, strip GPS from the metadata,\n  and skip right-click blocking: it stops nobody.\n\n## 8. Weight and speed\n\n- The first image is the LCP element: `fetchpriority=\"high\"`, never lazy;\n  every other image `loading=\"lazy\"` with its width and height, `srcset`\n  and `sizes`, AVIF or WebP from a pipeline (`ui-part-images` section 3).\n- Thumbnails under about 40 KB, the lead image under about 200 KB, the\n  full-size file only when the lightbox opens it; a video as a poster with\n  `preload=\"none\"`, an embed loaded on a click. Long galleries take\n  `content-visibility: auto` with `contain-intrinsic-size` per series, so\n  rows off screen are not rendered. LCP under 2.5s on a mid-range phone\n  (`frontend-performance`).\n\n## 9. Search for a person's name\n\n- The home page's `title` carries the name and what they make, 50 to 60\n  characters (\"[Name], [what they make] in [city]\"); each case study its\n  own title and description; one `h1` per page.\n- JSON-LD `Person` on the home page, real values only, `image` only for a\n  real photo (`frontend-seo`):\n\n  ```html\n  \u003Cscript type=\"application\u002Fld+json\">\n  {\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"Person\", \"name\": \"[Name]\",\n   \"url\": \"https:\u002F\u002F[domain]\u002F\", \"jobTitle\": \"[Role]\", \"sameAs\": [\"https:\u002F\u002Fgithub.com\u002F[login]\"]}\n  \u003C\u002Fscript>\n  ```\n\n- A domain of their own as the canonical URL; the profiles link back to it\n  (GitHub's website field, LinkedIn), with `rel=\"me\"` on links to profiles\n  that verify it (Mastodon). An Open Graph image of 1200 by 630 with the\n  name and a piece of real work; static HTML and a `sitemap.xml`.\n\n## 10. The default to avoid\n\nThe generated developer portfolio: a dark page, monospace for everything\ntechnical, one amber or green accent, a name with a coloured full stop, a\n64px avatar, a claim and a \"See the projects\" button, \"Selected work \u002F\nAbout \u002F Contact\" as hairline lists with a star count on every row, a\nlanguage table, and a \"Built with\" footer. Dark with monospace can be right\nfor a developer, but as a decision a concept asks for (a page that reads\nlike a well-made manual, with real command output as its images), not as the\nstarting point. The terminal costume goes with it: a fake terminal as the\nhero, a typing effect, `>` prompts and `~\u002Fabout` paths as labels, neon green\non black, glitch text; only when the person's own concept is a terminal.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: at 360px the claim and the start of the\n  work in the first screen; the header sticks and the long page has its\n  back-to-top control; no repeated-block report (the lead projects\n  have room, the rest are rows); no image without alt; no code past the edge.\n- Follow every link: sources, live sites, case studies, the CV's PDF.\n- Every star count, language and date matches the API at build time;\n  nothing is invented; each placeholder is listed in the report.\n- Lighthouse on mobile for the home page and the heaviest gallery; the\n  JSON-LD through validator.schema.org.\n\n## Avoid\n\nA greeting as the headline; a job title in its place; skill bars and\npercentages; every repository listed, forks included; star counts on every\nrow and a language table; descriptions pasted from repository taglines; a\ntimeline made of creation dates; invented clients, metrics or availability;\nstock or generated photos of the person; a photograph cropped through its\nframe; a lightbox that lets focus escape or ignores Escape; a 4000px\noriginal scaled down in CSS; a contact form that sends nowhere.\n","# Portfolio\n\nThe generated portfolio greets instead of showing: \"Hi, I'm X\" with a\nwaving hand, a job title, skill bars, repository cards with a star count on\neach, a dark page in monospace. The work is the page. A portfolio is judged\nin its first screen by one question: what does this person make, and is it\ngood? Answer it with the work, not with a greeting. One kind of page: the\nmeasures (container, grid, spacing, type) are in `ui-layout`, and each part\nit uses has its own `ui-part-*` skill. Start from this skeleton, then cut\nand reorder for the content.\n\n## 1. The job, by kind\n\n| Kind | Judged by | The work shown as | First screen |\n|---|---|---|---|\n| Developer | what they built, and how well | projects: what each does and for whom, a screenshot or a real command and its output, links to the source and the live thing | the claim, the first projects beginning |\n| Designer | how they think, and the craft | three to six case studies (section 3), large images of the real work | the claim and the first case study's image |\n| Photographer | the photographs | series, full-bleed and in sequence, words small and few (section 7) | a photograph; the name small in the header |\n| Writer | the writing | pieces with the publication, the date and one line, linking to the published text | the claim (subjects, where published) and the latest pieces |\n| Studio | its judgement, and results | projects as decisions (`ui-reference-studio`); clients named only with permission | the claim and the first entry |\n\n## 2. Skeleton\n\n1. Header: the name, three links at most, the one contact link\n   (`ui-part-header`).\n2. First screen: a claim that says what this person makes, specifically,\n   and the work beginning in the same screen (`ui-part-hero`: \"claim and\n   proof side by side\", \"statement over the work\" or \"index first\").\n3. The work: the strongest three to eight pieces, led by the best. Each with\n   its name, what it is for someone who has not seen it (two plain\n   sentences), one concrete detail, and its evidence: a screenshot, a\n   photograph, a short real example of it in use. Group them by what they do\n   when there are many (\"Agents\", \"Automation\", \"Game tools\"), not by\n   language or date (`ui-part-sections`).\n4. About: three to five sentences in the first person with specifics: where,\n   what they work on, what they care about in the work. A real photo if one\n   is given.\n5. Contact: the email as a link (or a placeholder), and the profiles that\n   exist.\n6. Footer: one line (`ui-part-footer`).\n\nThe header sticks and stays slim so it does not crop the work, and a page of\nprojects runs long, so it has a back-to-top control\n(`ui-part-back-to-top`).\n\n```\n│ [Name]                                    Work   Writing   Contact │ sticky\n│ The claim: what this person makes, for whom,                       │\n│ its consequence in the muted colour.  [City] · [open to, if given] │\n│ Agents (a group's heading)                                         │\n│ [screenshot from its README]    Lead project: two plain sentences, │\n│ [with a caption            ]    one concrete detail.               │\n│                                 Go · 2026 · Source · Live site     │\n│ name       one line on what it does                 Rust · Source  │\n│ name       one line on what it does                   Go · Source  │\n│ All 16 repositories on GitHub                                      │\n│ About: three to five sentences            [photo, when given]      │\n│ [your email] · GitHub · LinkedIn                      [Name], 2026 │\n```\n\n## 3. Selected work as case studies\n\n- For designers, studios and anyone whose work needs its reasoning: a page\n  per project (`\u002Fwork\u002F\u003Cslug>`), linked from its entry on the index.\n- In order: the title and the outcome in one line; a row of facts (client\n  or context, role, when, team, tools or medium, links); the problem and\n  its constraints; the decisions, each with its reason and shown (a\n  sketch, a before and after, the shipped screen); the result, what\n  shipped and what changed, with numbers only when real and permitted; the\n  next project. Captions say what each image shows and why it matters.\n- Team work says who did what (\"I led the research and the booking flow;\n  [Name] built the front end\"). Work under NDA says so and shows what is\n  allowed; never an invented stand-in.\n\n## 4. Entries that carry the facts\n\n- Each entry: the name as the link, what it is and for whom in one or two\n  plain sentences, and a meta line with the facts that help a decision (the\n  stack or medium, the year, the role); links named for where they go\n  (\"Live site\", \"Source\", \"Case study\").\n- The lead ones larger with their evidence, the rest compact rows\n  (`ui-part-sections` section 5); one image ratio per group, screenshots in\n  their own ratio, never cropped through the interface (`ui-part-images`).\n- A dead live link or a demo behind a sign-in says so (\"Archived, source\n  only\") rather than leading nowhere.\n\n## 5. Built from a GitHub account\n\n- Read each chosen repository's README, not only its one-line description:\n  that is where what it does, how it works and its screenshots are. Use the\n  README's own images (screenshots, diagrams) as the evidence, taken from\n  the repository; when it has none, a short real usage example from the\n  README (the command that installs or runs it) in a code block.\n- Choose; do not list everything. Forks, empty repositories, dotfiles,\n  configuration and abandoned experiments stay out. Four to eight projects,\n  grouped by what they do.\n- Rewrite each description for this page in plain words; do not paste the\n  repository's tagline.\n- The lead projects (one to three) show an image when their README has one:\n  a screenshot or a diagram, with a caption. The rest are compact rows.\n- Stars, followers and language counts are not content. A star count may sit\n  in a project's meta when it would impress a stranger (hundreds); a table of\n  how many repositories use each language never.\n- The chosen projects are written into the page. The repositories left out\n  are one link (\"All 16 repositories on GitHub\"), not a second list of their\n  one-line descriptions fetched at load time.\n- Repository creation dates are not a career history: there is no timeline\n  unless the user gives one.\n- Anything about the person beyond GitHub (email, employer, history, photo)\n  is a visible placeholder until the user gives it. The placeholder reads as\n  one (\"[your email]\"); how to fill it in goes in the README, never as a note\n  on the page.\n- Start from the pinned repositories (the person chose them) and the facts\n  the API gives, fetched at build time and written into the page, never\n  from the browser on load (60 requests an hour without a token, and a\n  token in the page is a leaked secret):\n\n  ```sh\n  # Public repositories and their facts, no token (add &page=2 past 100).\n  curl -s \"https:\u002F\u002Fapi.github.com\u002Fusers\u002F\u003Clogin>\u002Frepos?per_page=100&sort=pushed\" |\n    jq '.[] | select(.fork | not) | {name, description, language, stargazers_count, pushed_at, homepage, archived}'\n  # The pinned ones, through GraphQL (needs a token: gh auth login).\n  gh api graphql -f query='query { user(login: \"\u003Clogin>\") { pinnedItems(first: 6, types: REPOSITORY) {\n    nodes { ... on Repository { name description url homepageUrl stargazerCount primaryLanguage { name } } } } } }'\n  ```\n\n- Copy the README's images into the site's own assets and optimise them; a\n  relative path in a README resolves to\n  `https:\u002F\u002Fraw.githubusercontent.com\u002F\u003Cowner>\u002F\u003Crepo>\u002F\u003Cbranch>\u002F\u003Cpath>`. Check\n  that each `homepage` still answers before calling it the live site. No\n  invented metrics: downloads or users only from a real source (the npm,\n  PyPI or crates.io API), with the date.\n\n## 6. About, contact and the CV\n\n- The about adds where they are and their time zone when given (\"Based in\n  Bandung, UTC+7\") and what they are looking for, in their words; no skill\n  bars or list of thirty technologies (the tools show in the projects).\n  Availability only when the user states it, as a dated line (\"Taking on\n  one project from March 2026\"), never a pulsing dot.\n- Contact: the email as a visible `mailto:` link people can read and copy;\n  the profiles that exist, named; a form only when it sends somewhere real\n  and says what happens next (`ui-page-form`).\n- The CV as a page (`\u002Fcv`): roles with dates in one format, education,\n  selected work linking to its entries, in headings, lists and `time`\n  elements, with a print stylesheet (no header, navigation or footer; one\n  column, black on white). The PDF is printed from that same page at build\n  time so the two never drift (Playwright's `page.pdf({ format: \"A4\" })`),\n  linked with its type and real size: \"CV (PDF, 90 KB)\". Employers, dates\n  and degrees only from the user.\n\n## 7. Photography\n\n- The photographs are the design: full-bleed or large on a quiet ground,\n  near-white or near-black (a mid-grey wall reads dull on screen, and\n  `preview` reports it), with the words small and few.\n- Series as sequences: a page per series in the photographer's order, each\n  photograph whole in the full view, never cropped through its frame; an\n  index of series with one cover each. Grids in one ratio, or justified\n  rows that keep each photograph's own ratio.\n- A lightbox is a modal dialog: arrows, Escape, swipe, a counter (\"3 of\n  12\"), the caption, the photograph in the URL; each thumbnail a link that\n  works without script (`ui-part-images` section 6).\n- Captions give the place, the year, the client or publication when given;\n  alt text says what is seen. Export in sRGB, strip GPS from the metadata,\n  and skip right-click blocking: it stops nobody.\n\n## 8. Weight and speed\n\n- The first image is the LCP element: `fetchpriority=\"high\"`, never lazy;\n  every other image `loading=\"lazy\"` with its width and height, `srcset`\n  and `sizes`, AVIF or WebP from a pipeline (`ui-part-images` section 3).\n- Thumbnails under about 40 KB, the lead image under about 200 KB, the\n  full-size file only when the lightbox opens it; a video as a poster with\n  `preload=\"none\"`, an embed loaded on a click. Long galleries take\n  `content-visibility: auto` with `contain-intrinsic-size` per series, so\n  rows off screen are not rendered. LCP under 2.5s on a mid-range phone\n  (`frontend-performance`).\n\n## 9. Search for a person's name\n\n- The home page's `title` carries the name and what they make, 50 to 60\n  characters (\"[Name], [what they make] in [city]\"); each case study its\n  own title and description; one `h1` per page.\n- JSON-LD `Person` on the home page, real values only, `image` only for a\n  real photo (`frontend-seo`):\n\n  ```html\n  \u003Cscript type=\"application\u002Fld+json\">\n  {\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"Person\", \"name\": \"[Name]\",\n   \"url\": \"https:\u002F\u002F[domain]\u002F\", \"jobTitle\": \"[Role]\", \"sameAs\": [\"https:\u002F\u002Fgithub.com\u002F[login]\"]}\n  \u003C\u002Fscript>\n  ```\n\n- A domain of their own as the canonical URL; the profiles link back to it\n  (GitHub's website field, LinkedIn), with `rel=\"me\"` on links to profiles\n  that verify it (Mastodon). An Open Graph image of 1200 by 630 with the\n  name and a piece of real work; static HTML and a `sitemap.xml`.\n\n## 10. The default to avoid\n\nThe generated developer portfolio: a dark page, monospace for everything\ntechnical, one amber or green accent, a name with a coloured full stop, a\n64px avatar, a claim and a \"See the projects\" button, \"Selected work \u002F\nAbout \u002F Contact\" as hairline lists with a star count on every row, a\nlanguage table, and a \"Built with\" footer. Dark with monospace can be right\nfor a developer, but as a decision a concept asks for (a page that reads\nlike a well-made manual, with real command output as its images), not as the\nstarting point. The terminal costume goes with it: a fake terminal as the\nhero, a typing effect, `>` prompts and `~\u002Fabout` paths as labels, neon green\non black, glitch text; only when the person's own concept is a terminal.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: at 360px the claim and the start of the\n  work in the first screen; the header sticks and the long page has its\n  back-to-top control; no repeated-block report (the lead projects\n  have room, the rest are rows); no image without alt; no code past the edge.\n- Follow every link: sources, live sites, case studies, the CV's PDF.\n- Every star count, language and date matches the API at build time;\n  nothing is invented; each placeholder is listed in the report.\n- Lighthouse on mobile for the home page and the heaviest gallery; the\n  JSON-LD through validator.schema.org.\n\n## Avoid\n\nA greeting as the headline; a job title in its place; skill bars and\npercentages; every repository listed, forks included; star counts on every\nrow and a language table; descriptions pasted from repository taglines; a\ntimeline made of creation dates; invented clients, metrics or availability;\nstock or generated photos of the person; a photograph cropped through its\nframe; a lightbox that lets focus escape or ignores Escape; a 4000px\noriginal scaled down in CSS; a contact form that sends nowhere.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-page-portfolio",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":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-page-portfolio",{"tool":69,"command":70},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-page-portfolio",{"tool":72,"command":73},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-page-portfolio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-page-portfolio\u002FSKILL.md",true,[],[78,92,114,128,153,175],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":49},"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",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90,91,40],"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":104,"publishedAt":49},"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":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":102,"categoryName":103,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000036","内容创作者",[94,105,106,107,108,109,40,31,110,111,112,113],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":115,"name":30,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":122,"publishedAt":49},"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",[119],{"categoryNo":120,"categoryName":121,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师",[30,123,124,125,126,31,127,40,33],"icons","components","SET","responsive","layout",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":138,"publishedAt":49},"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",[134,137],{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[30,139,140,141,142,143,144,145,146,40,33,147,31,148,149,150,123,151,152],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":49},"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",[159,160,161],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},{"categoryNo":102,"categoryName":103,"taxonomyType":26,"taxonomyTypeDesc":27},[163,30,164,124,165,166,148,167,168,169,127,142,170,171,172,40,33,31,173,174],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":188,"publishedAt":49},"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",[181,184,187],{"categoryNo":182,"categoryName":183,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":185,"categoryName":186,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":120,"categoryName":121,"taxonomyType":26,"taxonomyTypeDesc":27},[30,189,190,191,192,193,194,195,127,91,196,197,40,198,199,200,201,202,203,204],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]