[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EX04T6V1HT3875KGA0CK32":3,"skill-same:01M6EX04T6V1HT3875KGA0CK32":59},{"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":23,"linkOnly":24,"markdownContent":25,"markdownBody":26,"frontMatter":27,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":6,"ownerDescription":38,"updatedAt":39,"install":40,"resources":52},"01M6EX04T6V1HT3875KGA0CK32","typeset",null,"Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fpbakaus\u002Ftypeset\u002FSKILL.md",[],[5,19,20,21,22],"improve","text","typography","readability","2026-11-10 10:12:30",false,"---\nname: typeset\ndescription: Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.\nuser-invocable: true\nargument-hint: [TARGET=\u003Cvalue>]\n---\n\nAssess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type.\n\n## MANDATORY PREPARATION\n\nUse the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first.\n\n---\n\n## Assess Current Typography\n\nAnalyze what's weak or generic about the current type:\n\n1. **Font choices**:\n   - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults)\n   - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface)\n   - Are there too many font families? (More than 2-3 is almost always a mess)\n\n2. **Hierarchy**:\n   - Can you tell headings from body from captions at a glance?\n   - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy)\n   - Are weight contrasts strong enough? (Medium vs Regular is barely visible)\n\n3. **Sizing & scale**:\n   - Is there a consistent type scale, or are sizes arbitrary?\n   - Does body text meet minimum readability? (16px+)\n   - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing\u002Fcontent page headings)\n\n4. **Readability**:\n   - Are line lengths comfortable? (45-75 characters ideal)\n   - Is line-height appropriate for the font and context?\n   - Is there enough contrast between text and background?\n\n5. **Consistency**:\n   - Are the same elements styled the same way throughout?\n   - Are font weights used consistently? (Not bold in one section, semibold in another for the same role)\n   - Is letter-spacing intentional or default everywhere?\n\n**CRITICAL**: The goal isn't to make text \"fancier\" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting.\n\n## Plan Typography Improvements\n\nConsult the [typography reference](reference\u002Ftypography.md) from the frontend-design skill for detailed guidance on scales, pairing, and loading strategies.\n\nCreate a systematic plan:\n\n- **Font selection**: Do fonts need replacing? What fits the brand\u002Fcontext?\n- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy\n- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits)\n- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements\n\n## Improve Typography Systematically\n\n### Font Selection\n\nIf fonts need replacing:\n- Choose fonts that reflect the brand personality\n- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights\n- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks)\n\n### Establish Hierarchy\n\nBuild a clear type scale:\n- **5 sizes cover most needs**: caption, secondary, body, subheading, heading\n- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5)\n- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone\n- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need\n- **Marketing \u002F content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed\n\n### Fix Readability\n\n- Set `max-width` on text containers using `ch` units (`max-width: 65ch`)\n- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7)\n- Increase line-height slightly for light-on-dark text\n- Ensure body text is at least 16px \u002F 1rem\n\n### Refine Details\n\n- Use `tabular-nums` for data tables and numbers that should align\n- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text\n- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`)\n- Set `font-kerning: normal` and consider OpenType features where appropriate\n\n### Weight Consistency\n\n- Define clear roles for each weight and stick to them\n- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty)\n- Load only the weights you actually use (each weight adds to page load)\n\n**NEVER**:\n- Use more than 2-3 font families\n- Pick sizes arbitrarily — commit to a scale\n- Set body text below 16px\n- Use decorative\u002Fdisplay fonts for body text\n- Disable browser zoom (`user-scalable=no`)\n- Use `px` for font sizes — use `rem` to respect user settings\n- Default to Inter\u002FRoboto\u002FOpen Sans when personality matters\n- Pair fonts that are similar but not identical (two geometric sans-serifs)\n\n## Verify Typography Improvements\n\n- **Hierarchy**: Can you identify heading vs body vs caption instantly?\n- **Readability**: Is body text comfortable to read in long passages?\n- **Consistency**: Are same-role elements styled identically throughout?\n- **Personality**: Does the typography reflect the brand?\n- **Performance**: Are web fonts loading efficiently without layout shift?\n- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%?\n\nRemember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.","Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type.\n\n## MANDATORY PREPARATION\n\nUse the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first.\n\n---\n\n## Assess Current Typography\n\nAnalyze what's weak or generic about the current type:\n\n1. **Font choices**:\n   - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults)\n   - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface)\n   - Are there too many font families? (More than 2-3 is almost always a mess)\n\n2. **Hierarchy**:\n   - Can you tell headings from body from captions at a glance?\n   - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy)\n   - Are weight contrasts strong enough? (Medium vs Regular is barely visible)\n\n3. **Sizing & scale**:\n   - Is there a consistent type scale, or are sizes arbitrary?\n   - Does body text meet minimum readability? (16px+)\n   - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing\u002Fcontent page headings)\n\n4. **Readability**:\n   - Are line lengths comfortable? (45-75 characters ideal)\n   - Is line-height appropriate for the font and context?\n   - Is there enough contrast between text and background?\n\n5. **Consistency**:\n   - Are the same elements styled the same way throughout?\n   - Are font weights used consistently? (Not bold in one section, semibold in another for the same role)\n   - Is letter-spacing intentional or default everywhere?\n\n**CRITICAL**: The goal isn't to make text \"fancier\" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting.\n\n## Plan Typography Improvements\n\nConsult the [typography reference](reference\u002Ftypography.md) from the frontend-design skill for detailed guidance on scales, pairing, and loading strategies.\n\nCreate a systematic plan:\n\n- **Font selection**: Do fonts need replacing? What fits the brand\u002Fcontext?\n- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy\n- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits)\n- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements\n\n## Improve Typography Systematically\n\n### Font Selection\n\nIf fonts need replacing:\n- Choose fonts that reflect the brand personality\n- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights\n- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks)\n\n### Establish Hierarchy\n\nBuild a clear type scale:\n- **5 sizes cover most needs**: caption, secondary, body, subheading, heading\n- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5)\n- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone\n- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need\n- **Marketing \u002F content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed\n\n### Fix Readability\n\n- Set `max-width` on text containers using `ch` units (`max-width: 65ch`)\n- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7)\n- Increase line-height slightly for light-on-dark text\n- Ensure body text is at least 16px \u002F 1rem\n\n### Refine Details\n\n- Use `tabular-nums` for data tables and numbers that should align\n- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text\n- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`)\n- Set `font-kerning: normal` and consider OpenType features where appropriate\n\n### Weight Consistency\n\n- Define clear roles for each weight and stick to them\n- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty)\n- Load only the weights you actually use (each weight adds to page load)\n\n**NEVER**:\n- Use more than 2-3 font families\n- Pick sizes arbitrarily — commit to a scale\n- Set body text below 16px\n- Use decorative\u002Fdisplay fonts for body text\n- Disable browser zoom (`user-scalable=no`)\n- Use `px` for font sizes — use `rem` to respect user settings\n- Default to Inter\u002FRoboto\u002FOpen Sans when personality matters\n- Pair fonts that are similar but not identical (two geometric sans-serifs)\n\n## Verify Typography Improvements\n\n- **Hierarchy**: Can you identify heading vs body vs caption instantly?\n- **Readability**: Is body text comfortable to read in long passages?\n- **Consistency**: Are same-role elements styled identically throughout?\n- **Personality**: Does the typography reflect the brand?\n- **Performance**: Are web fonts loading efficiently without layout shift?\n- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%?\n\nRemember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.",{"name":5,"description":7,"argument-hint":28,"user-invocable":30},[29],"TARGET=\u003Cvalue>",true,"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fpbakaus\u002Ftypeset",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":30},[42,45,48],{"tool":43,"command":44},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill typeset",{"tool":46,"command":47},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill typeset",{"tool":49,"command":50},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill typeset","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fpbakaus\u002Ftypeset\u002FSKILL.md",[53],{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"skill-report.json","REFERENCE","参考文档",9001,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fpbakaus\u002Ftypeset\u002Fskill-report.json",[60,74,84,93,99,106],{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":70,"publishedAt":23},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[65],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[71,72,73],"model","model hierarchy","model hierarchy skill",{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":80,"publishedAt":23},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[79],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[81,82,83],"MCP","zoom","zoom mcp",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":23},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[90,91,92,82],"sdk","zoom apps sdk","apps",{"skillNo":94,"name":95,"nameZh":6,"description":6,"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":98,"publishedAt":23},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[95],{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":105,"publishedAt":23},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[104],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[101],{"skillNo":107,"name":108,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":23},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[108]]