[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FK8P8ZEPW2YVQ63N4QQQKA":3,"skill-same:01M6FK8P8ZEPW2YVQ63N4QQQKA":48},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":21,"linkOnly":22,"markdownContent":23,"markdownBody":23,"frontMatter":24,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":30,"ownerHtmlUrl":31,"ownerBlogUrl":6,"ownerDescription":32,"updatedAt":33,"install":34,"resources":47},"01M6FK8P8ZEPW2YVQ63N4QQQKA","web-designer",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fwprig\u002Fwprig\u002Fweb-designer\u002FSKILL.md",[],[18,19,20],"web","designer","web designer","2026-11-10 10:12:30",false,"# Web Designer Skill\n\nThis skill guides the agent in acting as an expert Web Designer within the WP Rig environment. The goal is to create high-quality, accessible, and performant style guides and to style Gutenberg blocks with a focus on design principles.\n\n## Core Responsibilities\n\n1.  **Style Guide Creation:** Creatively conjure aesthetically pleasing, satisfyingly interactive, performant, and accessible style guides for the theme and its components (Gutenberg blocks, navigation items, sub-menus, etc.).\n2.  **Theme Assessment:** Effectively assess whether the theme is classic, universal, or block-based by examining the theme configuration and structure, and apply styling strategies accordingly.\n3.  **AI Style Guide Maintenance:** Responsible for writing and regularly updating a `STYLE-GUIDE.md` file in the `.ai\u002F` folder. This document serves as the living source of truth for all design decisions (color palette, typography, spacing, interactive patterns) and must accompany all feature plans.\n4.  **Block Styling:** Focus on styling standard Gutenberg blocks responsibly and expertly, rather than inventing new markup from scratch.\n5.  **Design Expertise:** Apply common design concepts such as symmetry, repetition, balance, contrast, and hierarchy to all theme elements.\n6.  **Design Token Definition:** Determine and inform the agent about the required CSS styles, including color palettes, layout spacing, typography (fonts, sizes, weights), etc.\n7.  **Accessibility & Performance:** Ensure all designs are accessible (meeting WCAG standards) and performant (minimizing CSS bloat and ensuring fast rendering).\n\n## The Process\n\n### Step 1: Discover Blocks and Components\n\nBefore styling, you must understand the theme's type and what needs to be styled:\n\n- **Theme Assessment:** Reference the `config\u002Fconfig.json`.\n    - **Theme Type:** Check the `theme.themeType` property (`classic`, `universal`, or `block-based`).\n    - **PostCSS Features:** Verify enabled modern CSS features in `dev.styles.features` before implementation.\n    - **Theme.json:** Check for the existence of `theme.json` in the root.\n    - **Classic:** Focus on CSS partials in `assets\u002Fcss\u002Fsrc\u002F`.\n    - **Universal\u002FBlock-based:** Leverage `theme.json` for design tokens and block styles, using CSS partials for enhancements.\n- **Theme Blocks:** Run `npm run block:list` to see all theme-scoped Gutenberg blocks.\n- **Registered Blocks:** If WP-CLI is available, run `wp block-type list` to see a complete list of all registered blocks (including core blocks) in the development environment.\n- **Navigation:** Use `wp rig menu list` to understand existing navigation structures.\n\n### Step 2: Establish the Design System\n\nDefine the core design tokens:\n\n- **Global Settings:** For `universal` or `block-based` themes, define colors, typography, and spacing in `theme.json` under `settings`.\n- **CSS Variables:** For all theme types, define additional or complementary design tokens in `assets\u002Fcss\u002Fsrc\u002F_custom-properties.css`.\n\n### Step 3: Styling Strategy\n\nWhen styling blocks and components:\n\n1.  **Identify Targets:** Determine which blocks need custom styling.\n2.  **theme.json First (if applicable):** In `universal` or `block-based` themes, use `theme.json` for block-specific styles (e.g., `styles.blocks.core\u002Fbutton`) to leverage core styling engines.\n3.  **Standard Blocks (CSS):** For styles not possible in `theme.json`, use the `_blocks.css` partial to style core Gutenberg blocks.\n4.  **Theme Components:** Style WP Rig-specific components and navigation elements in their respective partials (e.g., `_navigation.css`, `_header.css`).\n5.  **Consistency:** Ensure all components adhere to the established design system (symmetry, balance, etc.).\n\n### Step 4: Documentation and Implementation\n\n- **Inform the Agent:** Explicitly state the CSS styles, variables, and rules that need to be implemented.\n- **Update AI Style Guide:** Regularly update `.ai\u002FSTYLE-GUIDE.md` with new design decisions, patterns, or tokens introduced by the current task.\n- **Contract-First:** Use the [Feature Planning skill](..\u002Ffeature-planning\u002FSKILL.md) to draft a `SPEC.md` before making significant style changes. Ensure the `SPEC.md` references the current `STYLE-GUIDE.md`.\n- **Visual Verification:** Use the [Styles skill](..\u002Fstyles\u002FSKILL.md) and the \"Ralph Loop\" (screenshots) to verify changes and prevent regressions.\n\n## Best Practices\n\n- **Don't reinvent the wheel:** Leverage standard Gutenberg block classes and structures.\n- **Use CSS Variables:** Always use custom properties for colors, spacing, and typography to ensure theme-wide consistency.\n- **Mobile First:** Design for smaller screens first and use `_custom-media.css` for responsive adjustments.\n- **A11y First:** Ensure sufficient color contrast and clear focus states for interactive elements.\n- **Symmetry and Balance:** Use these principles to create a sense of stability and professional polish.\n- **Repetition:** Use repeating patterns and styles to create a cohesive user experience.\n\n## Skill Relationships\n\nThe Web Designer skill is the aesthetic and interactive heart of the theme, and it relies on:\n\n- **Architecture:** The design tokens and styles must be implemented within the theme's structural conventions (e.g., `_custom-properties.css`, `_blocks.css`). See [Architecture skill](..\u002Farchitecture\u002FSKILL.md).\n- **Feature Planning:** Any major visual or interactive feature (like a new style guide or a complex block layout) must be planned and agreed upon using the \"Contract-First\" approach in the [Feature Planning skill](..\u002Ffeature-planning\u002FSKILL.md). The `STYLE-GUIDE.md` informs plans, and plans update the `STYLE-GUIDE.md`.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fwprig\u002Fwprig\u002Fweb-designer",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":7,"skillName":5,"commands":35,"prompt":45,"zipAvailable":46},[36,39,42],{"tool":37,"command":38},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill web-designer",{"tool":40,"command":41},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill web-designer",{"tool":43,"command":44},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill web-designer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fwprig\u002Fwprig\u002Fweb-designer\u002FSKILL.md",true,[],[49,63,73,82,88,95],{"skillNo":50,"name":51,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":59,"publishedAt":21},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[54],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[60,61,62],"model","model hierarchy","model hierarchy skill",{"skillNo":64,"name":65,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":69,"publishedAt":21},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[68],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},[70,71,72],"MCP","zoom","zoom mcp",{"skillNo":74,"name":75,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":21},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[79,80,81,71],"sdk","zoom apps sdk","apps",{"skillNo":83,"name":84,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":21},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[84],{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":94,"publishedAt":21},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[93],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},[90],{"skillNo":96,"name":97,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":21},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[97]]