[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AD7RE2VRNR4ZK16YQVPPCG":3,"skill-same:01M6AD7RE2VRNR4ZK16YQVPPCG":71},{"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":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M6AD7RE2VRNR4ZK16YQVPPCG","css-styling",null,"CSS Modules conventions, design tokens, container queries, and CSS-vs-component boundaries. USE WHEN: editing any `*.css` \u002F `*.module.css` file in this repo, or writing styles for a new component.","github\u002Freplica","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6AD7D93S1YD5K71F61E6ASB",267,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fcoreai\u002F.agents\u002Fskills\u002Fcss-styling\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"css styling","css","styling","conventions","design tokens","styles","queries","use","module","container","tokens","editing","repo","for","modules","file","writing","component","design","2026-11-10 10:12:30",false,"---\nname: css-styling\ndescription: 'CSS Modules conventions, design tokens, container queries, and CSS-vs-component boundaries. USE WHEN: editing any `*.css` \u002F `*.module.css` file in this repo, or writing styles for a new component.'\n---\n\n# CSS Editing Instructions\n\n## CRITICAL: Before Editing Any CSS File\n\n**REQUIRED STEP**: Before making any changes to a `.css` file, you MUST read the corresponding `.tsx` file(s) that use it:\n\n1. Look for `.tsx` files with the same base name (e.g., `ComponentName.tsx` for `ComponentName.module.css`)\n2. Search for imports of the exact CSS filename, including side-effect imports.\n3. Read ALL `.tsx` files that import the CSS file before proceeding with edits\n\nYou may also need to edit the matching `.tsx` file and its structure to properly edit CSS.\n\n## CSS Architecture\n\nThis project uses **CSS Modules**. Component CSS files should be named `*.module.css` and placed alongside their corresponding `.tsx` component files. App-level stylesheets in `app\u002Fstyles\u002F` provide foundational styles such as resets and font registration; do not put component styles there.\n\nDo not write inline css in the style attribute (unless there is a javascript value being attached).\n\n### Custom Fluent Components\n\nDo not use CSS to recreate components that already exist in CoreAI or Fluent. Before editing components, invoke the `react-components` skill for proper component usage guidelines. Most appearance and interaction styles are already handled by documented CoreAI components and props. If an appropriate prop is available, use it instead of writing CSS.\n\n### CSS @layers\n\nThere are 3 named CSS `@layer`s in this app, ordered `base`, `griffel`, and `common`, plus unlayered CSS (which is not a named layer). The `base` layer contains the foundational box-sizing reset in `app\u002Fstyles\u002Fglobals.css`. The `griffel` layer encapsulates Fluent's styles through the app-owned layered renderer - NEVER write CSS into the `griffel` layer. The `common` layer is for common components inside the `app\u002Fcomponents\u002Fcommon` folder and app-level resets; all components in this folder should use this layer, and component styles outside it should not. All other component styles should be written outside of these layers.\n\n## General Guidelines\n\n**No Global CSS**: Do not write global CSS selectors (e.g., `body`, `h1`) outside of a scoped CSS class for component styling. All component styles must be scoped using CSS Modules. App-level stylesheets in `app\u002Fstyles\u002F` provide foundational resets, font registration, and app-wide variable defaults, not component styling.\n**Use Nested Classes**: Scope styles to specific elements within the component using nested class selectors.\n**Avoid `!important`**: Do not use `!important` in CSS rules. Instead, refactor the CSS or component structure to achieve the desired specificity.\n\n## Responsive Breakpoints — Container Queries\n\n**CRITICAL**: Do NOT use `@media (width ...)` for responsive width breakpoints. Use `@container app (width ...)` instead.\n\nThis app uses **CSS container queries** so that responsive behavior responds to the actual available content width, not the viewport. Panels that reduce the content container's available width affect its breakpoints; the app-local floating feature selector is fixed-position and does not consume layout width.\n\nThe `ContainerQueryProvider` component (wrapping the app children with `styles.fullscreenContainer` in `app\u002Fcomponents\u002Fshell\u002FAppContent.tsx`) establishes `container-type: inline-size` with `container-name: app`.\n\n### Correct — Container Query\n\n```css\n@container app (width \u003C= 768px) {\n  .sidebar {\n    display: none;\n  }\n}\n```\n\n### Wrong — Viewport Media Query\n\n```css\n\u002F* ❌ DO NOT use @media for width breakpoints *\u002F\n@media (width \u003C= 768px) {\n  .sidebar {\n    display: none;\n  }\n}\n```\n\n### When to still use `@media`\n\n- **Height queries**: `@media (height \u003C= 480px)` — container queries only support inline-size\n- **User preferences**: `@media (prefers-color-scheme: dark)`, `@media (prefers-reduced-motion: reduce)`\n- **Accessibility**: `@media (forced-colors: active)`\n- **Elements in portals\u002Ftop-layer**: Dialogs, popovers, and other portal-rendered elements that exist outside the container tree (these still need viewport `@media` queries)\n\n## Layout\n\nCSS should primarily be used for layout, spacing, borders, and backgrounds. Avoid using CSS for text styles, component styles, or interaction styles. Most of these are handled by React components and props. Prefer using flexbox with gap for most layouts instead of block with margin. Grid is acceptable for more complex layouts.\n\nReduce nesting of HTML elements where possible - prefer a flatter structure.\n\n## Text Styling\n\n**Text Properties**: Avoid writing these CSS properties directly in CSS files. The components handle most of these by default.\n\n- `font-size`\n- `font-weight`\n- `font-family`\n- `line-height`\n- `color` (for text color)\n\n**EXCEPTION**: Text properties inside `@container` queries for responsive typography (e.g., scaling a heading on mobile) should be kept in CSS — the `Text` component doesn't handle container-based sizing.\n\n**INSTEAD**: Where these properties are applied to a `Text`, `span`, or other text element, refactor to use the documented `Text` component from `@coreai-ds\u002Freact-components` and replace any text CSS properties with `preset` and `foreground` props.\n\n```tsx\nimport { Text } from '@coreai-ds\u002Freact-components';\n\n\u003CText preset=\"body\" foreground={3}>\n  Your text here\n\u003C\u002FText>;\n```\n\n### Text Component Presets & Foreground\n\n**Presets** (size from smallest to largest):\n\n- `bodyXS` (10px) \u002F `bodyXSStrong` (10px semibold)\n- `bodyS` (12px) \u002F `bodySStrong` (12px semibold); `heading6` is an alias of `bodySStrong`\n- `body` (14px) \u002F `bodyStrong` (14px semibold); `heading5` is an alias of `bodyStrong`\n- `heading4` (16px semibold)\n- `heading3` (20px semibold)\n- `heading2` (28px semibold)\n- `heading1` (40px semibold)\n\n**Foreground** (text color intensity):\n\n- `1` - Headings\n- `2` - Body text\n- `3` - Subtle\u002Fmuted\u002Fsecondary\n- `4` - Disabled\u002Fplaceholder\n- `'disabled'` - Disabled text\n\nAdditional properties:\n\n- `block` - makes the text a block element\n- `italic` - makes the text italic\n- `font` - sets the font family - `base` | `monospace`\n- `as` - html element to render as (e.g., 'p', 'span', 'h1', etc.)\n\nDon't use Fluent's fixed typography components (like `\u003CBody1>` or `\u003CTitle2>`) directly. Always use CoreAI `\u003CText>` with `preset` and `foreground` props.\n\n**When you encounter these properties in existing CSS**: Refactor the code to remove them from CSS and use the `Text` component in the `.tsx` file instead.\n\n## Combining CSS Classes\n\nWhen applying multiple CSS classes, use the `clsx` utility:\n\n```tsx\nimport clsx from 'clsx';\nimport styles from '.\u002FComponent.module.css';\n\n\u003Cdiv\n  className={clsx(\n    styles.class1,\n    condition && styles.class2,\n    className, \u002F\u002F props.className mapped on to root element\n  )}\n\u002F>;\n```\n\n## CSS Variables\n\nUse Fluent semantic color tokens directly.\n\n### Background\n\n- `--colorNeutralBackground1` - Lighter primary background\n- `--colorNeutralBackground2` - Middle background (uncommon)\n- `--colorNeutralBackground3` - Darker background\n- `--colorNeutralBackground4` - Very dark background (rarely used)\n\n### Border\u002FStroke\n\n- `--colorNeutralBackground4` - Existing panel-divider color\n- `--colorNeutralStroke1` - Standard border color for elements\n\nUsage: `border: 1px solid var(--colorNeutralStroke1);`\n\n### Foreground\u002FText\n\nPrefer using the `Text` component's `foreground` prop instead of setting text color in CSS.\n\n- `--colorNeutralForeground1` - Intense (primary text\u002Fheadings)\n- `--colorNeutralForeground2` - Default body text color\n- `--colorNeutralForeground3` - Subtle\u002Fmuted (secondary text)\n- `--colorNeutralForeground4` - Dim (disabled\u002Fplaceholder text)\n- `--colorBrandForeground1` - Brand color\n- `--colorBrandForegroundLink` - Link color\n\n### Interactive\u002FStates\n\nComponents own their hover, pressed, and selected states. Use the component API instead of\nintroducing application-level interaction-color aliases.\n\n### Spacing - REQUIRED\n\n**NEVER use hardcoded pixel values or rem values for spacing values less than 32px**. Always use these CSS variables:\n\n- `--spacingNone` (0)\n- `--spacingXXS` (2px)\n- `--spacingXS` (4px)\n- `--spacingSNudge` (6px)\n- `--spacingS` (8px)\n- `--spacingMNudge` (10px)\n- `--spacingM` (12px)\n- `--spacingL` (16px)\n- `--spacingXL` (20px)\n- `--spacingXXL` (24px)\n- `--spacingXXXL` (32px)\n- `--spacingPagePadding` - Special variable for horizontal page padding (adjusts by app container width, with a viewport-based fallback in the global stylesheet)\n\n**DO NOT** use Fluent spacing variables that include \"Horizontal\" or \"Vertical\" in their names.\n\nFor pixel values 32px and above, you may use hardcoded values if necessary, but prefer using spacing variables where possible for consistency.\n\n### Border Radius\n\n- `--borderRadiusNone` (0)\n- `--borderRadiusSmall` (2px)\n- `--borderRadiusMedium` (4px)\n- `--borderRadiusLarge` (6px)\n- `--borderRadiusXLarge` (8px)\n- `--borderRadius2XLarge` (12px)\n- `--borderRadius3XLarge` (16px)\n- `--borderRadius4XLarge` (24px)\n- `--borderRadius5XLarge` (32px)\n- `--borderRadius6XLarge` (40px)\n- `--borderRadiusCircular` (9999px)\n\n## Example CSS Patterns\n\n### Good - Uses Variables\n\n```css\n.container {\n  padding: var(--spacingL);\n  background-color: var(--colorNeutralBackground1);\n  border: 1px solid var(--colorNeutralStroke1);\n  gap: var(--spacingM);\n}\n```\n\n### Bad - Hardcoded Values\n\n```css\n.container {\n  padding: 16px; \u002F* WRONG - use var(--spacingL) *\u002F\n  background-color: #f5f5f5; \u002F* WRONG - use var(--colorNeutralBackground1) *\u002F\n  font-size: 14px; \u002F* WRONG - use Text component instead *\u002F\n  color: #333; \u002F* WRONG - use Text component instead *\u002F\n}\n```\n\n## Summary Checklist\n\nBefore submitting CSS edits, verify:\n\n- [ ] Read corresponding `.tsx` file(s) that use this CSS\n- [ ] All colors use Fluent semantic tokens\n- [ ] All spacing uses `--spacing*` variables\n- [ ] Component CSS file is named `*.module.css`; any app-level stylesheet edit stays within the foundational-style exception\n- [ ] Classes combined with `clsx` when multiple are needed\n","# CSS Editing Instructions\n\n## CRITICAL: Before Editing Any CSS File\n\n**REQUIRED STEP**: Before making any changes to a `.css` file, you MUST read the corresponding `.tsx` file(s) that use it:\n\n1. Look for `.tsx` files with the same base name (e.g., `ComponentName.tsx` for `ComponentName.module.css`)\n2. Search for imports of the exact CSS filename, including side-effect imports.\n3. Read ALL `.tsx` files that import the CSS file before proceeding with edits\n\nYou may also need to edit the matching `.tsx` file and its structure to properly edit CSS.\n\n## CSS Architecture\n\nThis project uses **CSS Modules**. Component CSS files should be named `*.module.css` and placed alongside their corresponding `.tsx` component files. App-level stylesheets in `app\u002Fstyles\u002F` provide foundational styles such as resets and font registration; do not put component styles there.\n\nDo not write inline css in the style attribute (unless there is a javascript value being attached).\n\n### Custom Fluent Components\n\nDo not use CSS to recreate components that already exist in CoreAI or Fluent. Before editing components, invoke the `react-components` skill for proper component usage guidelines. Most appearance and interaction styles are already handled by documented CoreAI components and props. If an appropriate prop is available, use it instead of writing CSS.\n\n### CSS @layers\n\nThere are 3 named CSS `@layer`s in this app, ordered `base`, `griffel`, and `common`, plus unlayered CSS (which is not a named layer). The `base` layer contains the foundational box-sizing reset in `app\u002Fstyles\u002Fglobals.css`. The `griffel` layer encapsulates Fluent's styles through the app-owned layered renderer - NEVER write CSS into the `griffel` layer. The `common` layer is for common components inside the `app\u002Fcomponents\u002Fcommon` folder and app-level resets; all components in this folder should use this layer, and component styles outside it should not. All other component styles should be written outside of these layers.\n\n## General Guidelines\n\n**No Global CSS**: Do not write global CSS selectors (e.g., `body`, `h1`) outside of a scoped CSS class for component styling. All component styles must be scoped using CSS Modules. App-level stylesheets in `app\u002Fstyles\u002F` provide foundational resets, font registration, and app-wide variable defaults, not component styling.\n**Use Nested Classes**: Scope styles to specific elements within the component using nested class selectors.\n**Avoid `!important`**: Do not use `!important` in CSS rules. Instead, refactor the CSS or component structure to achieve the desired specificity.\n\n## Responsive Breakpoints — Container Queries\n\n**CRITICAL**: Do NOT use `@media (width ...)` for responsive width breakpoints. Use `@container app (width ...)` instead.\n\nThis app uses **CSS container queries** so that responsive behavior responds to the actual available content width, not the viewport. Panels that reduce the content container's available width affect its breakpoints; the app-local floating feature selector is fixed-position and does not consume layout width.\n\nThe `ContainerQueryProvider` component (wrapping the app children with `styles.fullscreenContainer` in `app\u002Fcomponents\u002Fshell\u002FAppContent.tsx`) establishes `container-type: inline-size` with `container-name: app`.\n\n### Correct — Container Query\n\n```css\n@container app (width \u003C= 768px) {\n  .sidebar {\n    display: none;\n  }\n}\n```\n\n### Wrong — Viewport Media Query\n\n```css\n\u002F* ❌ DO NOT use @media for width breakpoints *\u002F\n@media (width \u003C= 768px) {\n  .sidebar {\n    display: none;\n  }\n}\n```\n\n### When to still use `@media`\n\n- **Height queries**: `@media (height \u003C= 480px)` — container queries only support inline-size\n- **User preferences**: `@media (prefers-color-scheme: dark)`, `@media (prefers-reduced-motion: reduce)`\n- **Accessibility**: `@media (forced-colors: active)`\n- **Elements in portals\u002Ftop-layer**: Dialogs, popovers, and other portal-rendered elements that exist outside the container tree (these still need viewport `@media` queries)\n\n## Layout\n\nCSS should primarily be used for layout, spacing, borders, and backgrounds. Avoid using CSS for text styles, component styles, or interaction styles. Most of these are handled by React components and props. Prefer using flexbox with gap for most layouts instead of block with margin. Grid is acceptable for more complex layouts.\n\nReduce nesting of HTML elements where possible - prefer a flatter structure.\n\n## Text Styling\n\n**Text Properties**: Avoid writing these CSS properties directly in CSS files. The components handle most of these by default.\n\n- `font-size`\n- `font-weight`\n- `font-family`\n- `line-height`\n- `color` (for text color)\n\n**EXCEPTION**: Text properties inside `@container` queries for responsive typography (e.g., scaling a heading on mobile) should be kept in CSS — the `Text` component doesn't handle container-based sizing.\n\n**INSTEAD**: Where these properties are applied to a `Text`, `span`, or other text element, refactor to use the documented `Text` component from `@coreai-ds\u002Freact-components` and replace any text CSS properties with `preset` and `foreground` props.\n\n```tsx\nimport { Text } from '@coreai-ds\u002Freact-components';\n\n\u003CText preset=\"body\" foreground={3}>\n  Your text here\n\u003C\u002FText>;\n```\n\n### Text Component Presets & Foreground\n\n**Presets** (size from smallest to largest):\n\n- `bodyXS` (10px) \u002F `bodyXSStrong` (10px semibold)\n- `bodyS` (12px) \u002F `bodySStrong` (12px semibold); `heading6` is an alias of `bodySStrong`\n- `body` (14px) \u002F `bodyStrong` (14px semibold); `heading5` is an alias of `bodyStrong`\n- `heading4` (16px semibold)\n- `heading3` (20px semibold)\n- `heading2` (28px semibold)\n- `heading1` (40px semibold)\n\n**Foreground** (text color intensity):\n\n- `1` - Headings\n- `2` - Body text\n- `3` - Subtle\u002Fmuted\u002Fsecondary\n- `4` - Disabled\u002Fplaceholder\n- `'disabled'` - Disabled text\n\nAdditional properties:\n\n- `block` - makes the text a block element\n- `italic` - makes the text italic\n- `font` - sets the font family - `base` | `monospace`\n- `as` - html element to render as (e.g., 'p', 'span', 'h1', etc.)\n\nDon't use Fluent's fixed typography components (like `\u003CBody1>` or `\u003CTitle2>`) directly. Always use CoreAI `\u003CText>` with `preset` and `foreground` props.\n\n**When you encounter these properties in existing CSS**: Refactor the code to remove them from CSS and use the `Text` component in the `.tsx` file instead.\n\n## Combining CSS Classes\n\nWhen applying multiple CSS classes, use the `clsx` utility:\n\n```tsx\nimport clsx from 'clsx';\nimport styles from '.\u002FComponent.module.css';\n\n\u003Cdiv\n  className={clsx(\n    styles.class1,\n    condition && styles.class2,\n    className, \u002F\u002F props.className mapped on to root element\n  )}\n\u002F>;\n```\n\n## CSS Variables\n\nUse Fluent semantic color tokens directly.\n\n### Background\n\n- `--colorNeutralBackground1` - Lighter primary background\n- `--colorNeutralBackground2` - Middle background (uncommon)\n- `--colorNeutralBackground3` - Darker background\n- `--colorNeutralBackground4` - Very dark background (rarely used)\n\n### Border\u002FStroke\n\n- `--colorNeutralBackground4` - Existing panel-divider color\n- `--colorNeutralStroke1` - Standard border color for elements\n\nUsage: `border: 1px solid var(--colorNeutralStroke1);`\n\n### Foreground\u002FText\n\nPrefer using the `Text` component's `foreground` prop instead of setting text color in CSS.\n\n- `--colorNeutralForeground1` - Intense (primary text\u002Fheadings)\n- `--colorNeutralForeground2` - Default body text color\n- `--colorNeutralForeground3` - Subtle\u002Fmuted (secondary text)\n- `--colorNeutralForeground4` - Dim (disabled\u002Fplaceholder text)\n- `--colorBrandForeground1` - Brand color\n- `--colorBrandForegroundLink` - Link color\n\n### Interactive\u002FStates\n\nComponents own their hover, pressed, and selected states. Use the component API instead of\nintroducing application-level interaction-color aliases.\n\n### Spacing - REQUIRED\n\n**NEVER use hardcoded pixel values or rem values for spacing values less than 32px**. Always use these CSS variables:\n\n- `--spacingNone` (0)\n- `--spacingXXS` (2px)\n- `--spacingXS` (4px)\n- `--spacingSNudge` (6px)\n- `--spacingS` (8px)\n- `--spacingMNudge` (10px)\n- `--spacingM` (12px)\n- `--spacingL` (16px)\n- `--spacingXL` (20px)\n- `--spacingXXL` (24px)\n- `--spacingXXXL` (32px)\n- `--spacingPagePadding` - Special variable for horizontal page padding (adjusts by app container width, with a viewport-based fallback in the global stylesheet)\n\n**DO NOT** use Fluent spacing variables that include \"Horizontal\" or \"Vertical\" in their names.\n\nFor pixel values 32px and above, you may use hardcoded values if necessary, but prefer using spacing variables where possible for consistency.\n\n### Border Radius\n\n- `--borderRadiusNone` (0)\n- `--borderRadiusSmall` (2px)\n- `--borderRadiusMedium` (4px)\n- `--borderRadiusLarge` (6px)\n- `--borderRadiusXLarge` (8px)\n- `--borderRadius2XLarge` (12px)\n- `--borderRadius3XLarge` (16px)\n- `--borderRadius4XLarge` (24px)\n- `--borderRadius5XLarge` (32px)\n- `--borderRadius6XLarge` (40px)\n- `--borderRadiusCircular` (9999px)\n\n## Example CSS Patterns\n\n### Good - Uses Variables\n\n```css\n.container {\n  padding: var(--spacingL);\n  background-color: var(--colorNeutralBackground1);\n  border: 1px solid var(--colorNeutralStroke1);\n  gap: var(--spacingM);\n}\n```\n\n### Bad - Hardcoded Values\n\n```css\n.container {\n  padding: 16px; \u002F* WRONG - use var(--spacingL) *\u002F\n  background-color: #f5f5f5; \u002F* WRONG - use var(--colorNeutralBackground1) *\u002F\n  font-size: 14px; \u002F* WRONG - use Text component instead *\u002F\n  color: #333; \u002F* WRONG - use Text component instead *\u002F\n}\n```\n\n## Summary Checklist\n\nBefore submitting CSS edits, verify:\n\n- [ ] Read corresponding `.tsx` file(s) that use this CSS\n- [ ] All colors use Fluent semantic tokens\n- [ ] All spacing uses `--spacing*` variables\n- [ ] Component CSS file is named `*.module.css`; any app-level stylesheet edit stays within the foundational-style exception\n- [ ] Classes combined with `clsx` when multiple are needed\n",{"name":5,"description":7},"main","b1c5f43989de1ef281b6dd719840a0f8ee964417","starters\u002Fcoreai\u002F.agents\u002Fskills\u002Fcss-styling",33,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-14 06:24:56",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add github\u002Freplica --skill css-styling",{"tool":63,"command":64},"bunx","bunx skills add github\u002Freplica --skill css-styling",{"tool":66,"command":67},"pnpm","pnpm dlx skills add github\u002Freplica --skill css-styling","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fcoreai\u002F.agents\u002Fskills\u002Fcss-styling\u002FSKILL.md",true,[],[72,93,105,113,124,136],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":86,"publishedAt":43},"01M6AD93V99PC60JK4VK50HKXB","visual-design-review","Reviews page hierarchy, grouping, density, actions and state design using consumer-owned product and design-system guidance. Use when asked for a visual design review, page critique or whether a new page communicates its task clearly.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Fvisual-design-review\u002FSKILL.md",[78,81],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[87,42,88,89,90,91,92],"visual design review","review","design review","state","product","actions",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":43},"01M6AD91PX2VVM9NCAEHVTV12J","setup-skills","Configures shared sources and drafts context with independent writers. Plain\u002Ffresh setup offers installation of user-named packages and reuses built-in browser capabilities, adding browser tooling only for an evidenced required-check gap. Use for setup, source repair, writing context or refreshing drafts. Configure-only skips tooling and authoring; installations and activation require separate approval.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Fsetup-skills\u002FSKILL.md",[],[100,101,102,103,104,40],"setup","setup skills","browser","capabilities","packages",{"skillNo":106,"name":107,"nameZh":6,"description":108,"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":43},"01M6AD907YGYR4MJXMYKWF384R","review-hub-feedback","Review Hub feedback for reusable design themes through discovery, independent judging and synthesis. No diagnosis or optimization.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Freview-hub-feedback\u002FSKILL.md",[],[88,112,42],"review hub feedback",{"skillNo":114,"name":115,"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":119,"publishedAt":43},"01M6AD8YR85DPBCPRAW8S112RD","responsive-audit","Audits UI layout, overflow and navigation across product-defined viewports using consumer context and browser tools. Use when asked to check responsiveness, test mobile layout or audit breakpoint behavior.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Fresponsive-audit\u002FSKILL.md",[],[120,121,102,122,123,91],"responsive audit","audit","ui","test",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":43},"01M6AD8WA6KSR3GQ57WJ0T6M0D","prototype-controls","Create and wire Replica prototype controls. Use when asked to add or change dropdowns, sliders, input fields, toggles or action buttons that configure variants, scenarios, visible UI, app state or data sources, even without canvas terminology. Covers declarations, typed bindings, defaults, conditions, resets and actions. Product UI form fields and filters alone belong to create-prototype.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Fprototype-controls\u002FSKILL.md",[],[131,132,133,134,135,90,91,122,92],"prototype controls","prototype","change","canvas","create",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":147,"publishedAt":43},"01M6AD8SK1BWKZS74PEPDD8QRH","product-design","Guides product-design decisions using the consuming repository's design-system, product, and repository context. Use when designing UI, choosing layout or navigation, handling states and forms, messaging, disclosure, onboarding, visualization, copy, delete, filter, or search interactions. Triggers on 'design guidance', 'how to design', 'UI pattern', 'product design', 'scenario pattern', 'confirmation dialog', 'delete flow', 'copy to clipboard', 'filter', and 'search'.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Freplica\u002Fblob\u002Fmain\u002Fstarters\u002Fshared\u002F.agents\u002Fskills\u002Fproduct-design\u002FSKILL.md",[142,143,146],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":144,"categoryName":145,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[42,148,91,149,150,151,152,153,122,154],"product design","delete","visualization","onboarding","search","messaging","repository"]