[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71NSGKZNFYNNN5SFK3VJHKP":3,"skill-same:01M71NSGKZNFYNNN5SFK3VJHKP":111},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":65,"commitSha":66,"skillDirectory":67,"forksCount":68,"repositoryHtmlUrl":69,"repositoryHomepageUrl":70,"ownerHtmlUrl":71,"ownerBlogUrl":72,"ownerDescription":6,"updatedAt":73,"install":74,"resources":87},"01M71NSGKZNFYNNN5SFK3VJHKP","responsive-design",null,"Use when implementing responsive CSS layouts: mobile-first breakpoints, container queries, fluid typography, Grid and Flexbox, and responsive images. Covers touch targets, logical properties and common overflow issues.","monoes\u002Fmonomind","monoes","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F276744696?v=4","01M71KWF37AJ2NJBP3KWBVSDGT","01M71KWF4CSF8ADH0M6HA09VD2",23,"MIT","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,5,49,50],"responsive design","responsive","design","targets","ui-design","queries","common","grid","fluid","when","use","touch","container","frontend","implementing","issues","fix","css","images","2026-11-10 10:56:23",false,"---\nname: responsive-design\ndescription: \"Use when implementing responsive CSS layouts: mobile-first breakpoints, container queries, fluid typography, Grid and Flexbox, and responsive images. Covers touch targets, logical properties and common overflow issues.\"\ntags: [\"design\",\"frontend\",\"ui\",\"accessibility\"]\ntools: [\"monodesign_detect\",\"monodesign_fix\"]\nlicense: MIT\nsource: https:\u002F\u002Fgithub.com\u002Fwshobson\u002Fagents\nsource_path: \"plugins\u002Fui-design\u002Fskills\u002Fresponsive-design\"\nsource_commit: 4236bb91f8395b0435f1d8b8baf9e8e4c69a8620\n---\n# Responsive Design\n\nMaster modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.\n\n## When to Use This Skill\n\n- Implementing mobile-first responsive layouts\n- Using container queries for component-based responsiveness\n- Creating fluid typography and spacing scales\n- Building complex layouts with CSS Grid and Flexbox\n- Designing breakpoint strategies for design systems\n- Implementing responsive images and media\n- Creating adaptive navigation patterns\n- Building responsive tables and data displays\n\n## Detailed patterns and worked examples\n\nDetailed pattern documentation lives in `references\u002Fdetails.md`. Read that file when the navigation tier above is insufficient.\n\n## Best Practices\n\n1. **Mobile-First**: Start with mobile styles, enhance for larger screens\n2. **Content Breakpoints**: Set breakpoints based on content, not devices\n3. **Fluid Over Fixed**: Use fluid values for typography and spacing\n4. **Container Queries**: Use for component-level responsiveness\n5. **Test Real Devices**: Simulators don't catch all issues\n6. **Performance**: Optimize images, lazy load off-screen content\n7. **Touch Targets**: Maintain 44x44px minimum on mobile\n8. **Logical Properties**: Use inline\u002Fblock for internationalization\n\n## Common Issues\n\n- **Horizontal Overflow**: Content breaking out of viewport\n- **Fixed Widths**: Using px instead of relative units\n- **Viewport Height**: 100vh issues on mobile browsers\n- **Font Size**: Text too small on mobile\n- **Touch Targets**: Buttons too small to tap accurately\n- **Aspect Ratio**: Images squishing or stretching\n- **Z-Index Stacking**: Overlays breaking on different screens\n","# Responsive Design\n\nMaster modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.\n\n## When to Use This Skill\n\n- Implementing mobile-first responsive layouts\n- Using container queries for component-based responsiveness\n- Creating fluid typography and spacing scales\n- Building complex layouts with CSS Grid and Flexbox\n- Designing breakpoint strategies for design systems\n- Implementing responsive images and media\n- Creating adaptive navigation patterns\n- Building responsive tables and data displays\n\n## Detailed patterns and worked examples\n\nDetailed pattern documentation lives in `references\u002Fdetails.md`. Read that file when the navigation tier above is insufficient.\n\n## Best Practices\n\n1. **Mobile-First**: Start with mobile styles, enhance for larger screens\n2. **Content Breakpoints**: Set breakpoints based on content, not devices\n3. **Fluid Over Fixed**: Use fluid values for typography and spacing\n4. **Container Queries**: Use for component-level responsiveness\n5. **Test Real Devices**: Simulators don't catch all issues\n6. **Performance**: Optimize images, lazy load off-screen content\n7. **Touch Targets**: Maintain 44x44px minimum on mobile\n8. **Logical Properties**: Use inline\u002Fblock for internationalization\n\n## Common Issues\n\n- **Horizontal Overflow**: Content breaking out of viewport\n- **Fixed Widths**: Using px instead of relative units\n- **Viewport Height**: 100vh issues on mobile browsers\n- **Font Size**: Text too small on mobile\n- **Touch Targets**: Buttons too small to tap accurately\n- **Aspect Ratio**: Images squishing or stretching\n- **Z-Index Stacking**: Overlays breaking on different screens\n",{"name":5,"tags":56,"tools":59,"source":62,"license":14,"description":7,"source_path":63,"source_commit":64},[34,45,57,58],"ui","accessibility",[60,61],"monodesign_detect","monodesign_fix","https:\u002F\u002Fgithub.com\u002Fwshobson\u002Fagents","plugins\u002Fui-design\u002Fskills\u002Fresponsive-design","4236bb91f8395b0435f1d8b8baf9e8e4c69a8620","main","f7cd4595d0f8959822163e14f9787117765c931a","packages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design",2,"https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind","https:\u002F\u002Fmonoes.github.io\u002Fmonomind\u002F","https:\u002F\u002Fgithub.com\u002Fmonoes","https:\u002F\u002Fmonoes.me","2026-11-10 01:53:48",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":86},[76,79,82],{"tool":77,"command":78},"npx","npx skills add monoes\u002Fmonomind --skill responsive-design",{"tool":80,"command":81},"bunx","bunx skills add monoes\u002Fmonomind --skill responsive-design",{"tool":83,"command":84},"pnpm","pnpm dlx skills add monoes\u002Fmonomind --skill responsive-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002FSKILL.md",true,[88,93,99,103,107],{"path":89,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":92,"sourceHtmlUrl":15},"LICENSE.txt","LICENSE","许可证",1068,{"path":94,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fbreakpoint-strategies.md","REFERENCE","参考文档",10658,"https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002Freferences\u002Fbreakpoint-strategies.md",{"path":100,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fcontainer-queries.md",9913,"https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002Freferences\u002Fcontainer-queries.md",{"path":104,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fdetails.md",10667,"https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002Freferences\u002Fdetails.md",{"path":108,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Ffluid-layouts.md",10731,"https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fresponsive-design\u002Freferences\u002Ffluid-layouts.md",[112,140,171,197,222,249],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":116,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":139},"01M71PB3SHWKMNJM6MD65VX8D6","zk-steward","Org role guidance for a ZK steward: engineer zero-knowledge proof systems with circuit design, SNARK vs STARK choice and security review. This is zero-knowledge cryptography, not Zettelkasten note-taking.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fzk-steward\u002FSKILL.md",[],[120,121,122,123,124,125,34,126,127,128,129,130,131,132,133,134,135,136,137,138],"zk","zk steward","steward","zero-knowledge","engineer","choice","knowledge","impact","query","snark","review","monomind","security review","stark","zettelkasten","cryptography","security","org","blockchain","2026-11-10 13:02:02",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":144,"sourceHtmlUrl":145,"categories":146,"keywords":153,"publishedAt":139},"01M71PB18SDG28WBKPKJNB814K","writing-plans","Use when you have a spec or requirements for a multi-step coding task and must write an implementation plan before touching code. Produces bite-sized TDD tasks with exact file paths, code and commands for an engineer with zero context.","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwriting-plans\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwriting-plans\u002FSKILL.md",[147,150],{"categoryNo":148,"categoryName":149,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":151,"categoryName":152,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[154,155,156,124,157,158,41,159,128,160,161,162,163,164,165,166,167,168,169,170],"writing","writing plans","plans","superpowers","implementation plan","you","code","tasks","plan","product","write","commands","paths","suggest","coding","context","ZeRO",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":116,"licenseFileUrl":175,"sourceHtmlUrl":176,"categories":177,"keywords":181,"publishedAt":139},"01M71PAXFM488X9ARXK0T04TF5","write-spec","Write a feature spec or PRD from a problem statement or feature idea. Use when turning a vague idea or user request into a structured document, scoping a feature with goals and non-goals, defining success metrics and acceptance criteria, or breaking a big ask into a phased spec.","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwrite-spec\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwrite-spec\u002FSKILL.md",[178],{"categoryNo":179,"categoryName":180,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000031","产品经理",[164,182,183,184,185,126,186,41,187,188,189,163,190,191,192,193,194,195,42,196],"write spec","spec","user request","problem","acceptance","ask","vague","work","request","scoping","idea","metrics","feature","problem statement","document",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":116,"licenseFileUrl":201,"sourceHtmlUrl":202,"categories":203,"keywords":207,"publishedAt":139},"01M71PASSZY800C0RPEARBS918","write-query","Write optimized SQL for your dialect with best practices. Use when translating a natural-language data need into SQL, building a multi-CTE query with joins and aggregations, optimizing a query against a large partitioned table, or getting dialect-specific syntax for Snowflake, BigQuery, Postgres, etc.","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwrite-query\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fwrite-query\u002FSKILL.md",[204],{"categoryNo":205,"categoryName":206,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000033","数据分析师",[128,164,208,209,210,211,126,42,41,212,213,214,215,189,216,217,218,219,220,221],"write query","postgres","for","snowflake","best practices","natural-language","with","multi","github","sql","https","syntax","plugins","data",{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":116,"licenseFileUrl":6,"sourceHtmlUrl":226,"categories":227,"keywords":234,"publishedAt":139},"01M71PAPTX0T3PF6ETFVR96SJJ","workflow-automation","Org role guidance for workflow automation: build and maintain CI\u002FCD definitions in GitHub Actions or equivalent: triggers, jobs, matrices, caching. Covers path filters, dependency caching, parallel jobs, timeouts and fail-fast ordering.","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fworkflow-automation\u002FSKILL.md",[228,231],{"categoryNo":229,"categoryName":230,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":232,"categoryName":233,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[235,236,237,238,210,239,240,241,242,127,243,244,245,128,131,216,246,247,248,218],"Workflow Automation","automation","workflow","parallel","actions","ci","triggers","github actions","maintain","filters","caching","build","dependency","devops",{"skillNo":250,"name":251,"nameZh":6,"description":252,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":116,"licenseFileUrl":6,"sourceHtmlUrl":253,"categories":254,"keywords":256,"publishedAt":139},"01M71PAM19Z1XTV9NPCFSE2MY8","workflow-architect","Org role guidance for a workflow architect: map full workflow trees for systems, user journeys and agents, covering every branch and failure. Covers discovering workflows from code, handoff contracts, timeouts, recovery paths and observable state.","https:\u002F\u002Fgithub.com\u002Fmonoes\u002Fmonomind\u002Fblob\u002Fmain\u002Fpackages\u002F@monomind\u002Fcli\u002Forg-skills\u002Fworkflow-architect\u002FSKILL.md",[255],{"categoryNo":232,"categoryName":233,"taxonomyType":21,"taxonomyTypeDesc":22},[237,257,258,259,260,261,262,210,263,264,160,265,266,267,131,216,268,269,218,270],"workflow architect","architect","trees","user journeys","branch","planning","map","workflows","architecture","state","leadership","recovery","operations","systems"]