[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GG9JXYN737989M37SCNRGF":3,"skill-same:01M6GG9JXYN737989M37SCNRGF":57},{"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":27,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":40,"ownerHtmlUrl":41,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":42,"install":43,"resources":56},"01M6GG9JXYN737989M37SCNRGF","guidelines-design",null,"n8nfelipe\u002Fapp-security","n8nfelipe","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F262289180?v=4","01M6GG96HTCD7F4TY84K3VWRWY","Felipe Web","01M6GG96P6Q2J15CXTG8D0JRD6",2,"MIT","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fguidelines-design\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30],"design","guidelines","guidelines design","2026-11-10 10:12:30",false,"Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.\n\n## Rules\n\n### Accessibility\n\n- Icon-only buttons need `aria-label`\n- Form controls need `\u003Clabel>` or `aria-label`\n- Interactive elements need keyboard handlers (`onKeyDown`\u002F`onKeyUp`)\n- `\u003Cbutton>` for actions, `\u003Ca>`\u002F`\u003CLink>` for navigation (not `\u003Cdiv onClick>`)\n- Images need `alt` (or `alt=\"\"` if decorative)\n- Decorative icons need `aria-hidden=\"true\"`\n- Async updates (toasts, validation) need `aria-live=\"polite\"`\n- Use semantic HTML (`\u003Cbutton>`, `\u003Ca>`, `\u003Clabel>`, `\u003Ctable>`) before ARIA\n- Headings hierarchical `\u003Ch1>`–`\u003Ch6>`; include skip link for main content\n- `scroll-margin-top` on heading anchors\n\n### Focus States\n\n- Interactive elements need visible focus: `focus-visible:ring-*` or equivalent\n- Never `outline-none` \u002F `outline: none` without focus replacement\n- Use `:focus-visible` over `:focus` (avoid focus ring on click)\n- Group focus with `:focus-within` for compound controls\n\n### Forms\n\n- Inputs need `autocomplete` and meaningful `name`\n- Use correct `type` (`email`, `tel`, `url`, `number`) and `inputmode`\n- Never block paste (`onPaste` + `preventDefault`)\n- Labels clickable (`htmlFor` or wrapping control)\n- Disable spellcheck on emails, codes, usernames (`spellCheck={false}`)\n- Checkboxes\u002Fradios: label + control share single hit target (no dead zones)\n- Submit button stays enabled until request starts; spinner during request\n- Errors inline next to fields; focus first error on submit\n- Placeholders end with `…` and show example pattern\n- `autocomplete=\"off\"` on non-auth fields to avoid password manager triggers\n- Warn before navigation with unsaved changes (`beforeunload` or router guard)\n\n### Animation\n\n- Honor `prefers-reduced-motion` (provide reduced variant or disable)\n- Animate `transform`\u002F`opacity` only (compositor-friendly)\n- Never `transition: all`—list properties explicitly\n- Set correct `transform-origin`\n- SVG: transforms on `\u003Cg>` wrapper with `transform-box: fill-box; transform-origin: center`\n- Animations interruptible—respond to user input mid-animation\n\n### Typography\n\n- `…` not `...`\n- Curly quotes `\"` `\"` not straight `\"`\n- Non-breaking spaces: `10 MB`, `⌘ K`, brand names\n- Loading states end with `…`: `\"Loading…\"`, `\"Saving…\"`\n- `font-variant-numeric: tabular-nums` for number columns\u002Fcomparisons\n- Use `text-wrap: balance` or `text-pretty` on headings (prevents widows)\n\n### Content Handling\n\n- Text containers handle long content: `truncate`, `line-clamp-*`, or `break-words`\n- Flex children need `min-w-0` to allow text truncation\n- Handle empty states—don't render broken UI for empty strings\u002Farrays\n- User-generated content: anticipate short, average, and very long inputs\n\n### Images\n\n- `\u003Cimg>` needs explicit `width` and `height` (prevents CLS)\n- Below-fold images: `loading=\"lazy\"`\n- Above-fold critical images: `priority` or `fetchpriority=\"high\"`\n\n### Performance\n\n- Large lists (>50 items): virtualize (`virtua`, `content-visibility: auto`)\n- No layout reads in render (`getBoundingClientRect`, `offsetHeight`, `offsetWidth`, `scrollTop`)\n- Batch DOM reads\u002Fwrites; avoid interleaving\n- Prefer uncontrolled inputs; controlled inputs must be cheap per keystroke\n- Add `\u003Clink rel=\"preconnect\">` for CDN\u002Fasset domains\n- Critical fonts: `\u003Clink rel=\"preload\" as=\"font\">` with `font-display: swap`\n\n### Navigation & State\n\n- URL reflects state—filters, tabs, pagination, expanded panels in query params\n- Links use `\u003Ca>`\u002F`\u003CLink>` (Cmd\u002FCtrl+click, middle-click support)\n- Deep-link all stateful UI (if uses `useState`, consider URL sync via nuqs or similar)\n- Destructive actions need confirmation modal or undo window—never immediate\n\n### Touch & Interaction\n\n- `touch-action: manipulation` (prevents double-tap zoom delay)\n- `-webkit-tap-highlight-color` set intentionally\n- `overscroll-behavior: contain` in modals\u002Fdrawers\u002Fsheets\n- During drag: disable text selection, `inert` on dragged elements\n- `autoFocus` sparingly—desktop only, single primary input; avoid on mobile\n\n### Safe Areas & Layout\n\n- Full-bleed layouts need `env(safe-area-inset-*)` for notches\n- Avoid unwanted scrollbars: `overflow-x-hidden` on containers, fix content overflow\n- Flex\u002Fgrid over JS measurement for layout\n\n### Dark Mode & Theming\n\n- `color-scheme: dark` on `\u003Chtml>` for dark themes (fixes scrollbar, inputs)\n- `\u003Cmeta name=\"theme-color\">` matches page background\n- Native `\u003Cselect>`: explicit `background-color` and `color` (Windows dark mode)\n\n### Locale & i18n\n\n- Dates\u002Ftimes: use `Intl.DateTimeFormat` not hardcoded formats\n- Numbers\u002Fcurrency: use `Intl.NumberFormat` not hardcoded formats\n- Detect language via `Accept-Language` \u002F `navigator.languages`, not IP\n- Brand names, code tokens, identifiers: wrap with `translate=\"no\"` to prevent garbled auto-translation\n\n### Hydration Safety\n\n- Inputs with `value` need `onChange` (or use `defaultValue` for uncontrolled)\n- Date\u002Ftime rendering: guard against hydration mismatch (server vs client)\n- `suppressHydrationWarning` only where truly needed\n\n### Hover & Interactive States\n\n- Buttons\u002Flinks need `hover:` state (visual feedback)\n- Interactive states increase contrast: hover\u002Factive\u002Ffocus more prominent than rest\n\n### Content & Copy\n\n- Active voice: \"Install the CLI\" not \"The CLI will be installed\"\n- Title Case for headings\u002Fbuttons (Chicago style)\n- Numerals for counts: \"8 deployments\" not \"eight\"\n- Specific button labels: \"Save API Key\" not \"Continue\"\n- Error messages include fix\u002Fnext step, not just problem\n- Second person; avoid first person\n- `&` over \"and\" where space-constrained\n\n### Anti-patterns (flag these)\n\n- `user-scalable=no` or `maximum-scale=1` disabling zoom\n- `onPaste` with `preventDefault`\n- `transition: all`\n- `outline-none` without focus-visible replacement\n- Inline `onClick` navigation without `\u003Ca>`\n- `\u003Cdiv>` or `\u003Cspan>` with click handlers (should be `\u003Cbutton>`)\n- Images without dimensions\n- Large arrays `.map()` without virtualization\n- Form inputs without labels\n- Icon buttons without `aria-label`\n- Hardcoded date\u002Fnumber formats (use `Intl.*`)\n- `autoFocus` without clear justification\n\n## Output Format\n\nGroup by file. Use `file:line` format (VS Code clickable). Terse findings.\n\n```text\n## src\u002FButton.tsx\n\nsrc\u002FButton.tsx:42 - icon button missing aria-label\nsrc\u002FButton.tsx:18 - input lacks label\nsrc\u002FButton.tsx:55 - animation missing prefers-reduced-motion\nsrc\u002FButton.tsx:67 - transition: all → list properties\n\n## src\u002FModal.tsx\n\nsrc\u002FModal.tsx:12 - missing overscroll-behavior: contain\nsrc\u002FModal.tsx:34 - \"...\" → \"…\"\n\n## src\u002FCard.tsx\n\n✓ pass\n```\n\nState issue + location. Skip explanation unless fix non-obvious. No preamble.",{},"main","a766d740e2c317fefc6d16513c277e6d76b19ca8",".opencode\u002Fskills\u002Fguidelines-design",0,"https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fwiki","https:\u002F\u002Fgithub.com\u002Fn8nfelipe","2026-10-22 04:00:21",{"source":7,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add n8nfelipe\u002Fapp-security --skill guidelines-design",{"tool":49,"command":50},"bunx","bunx skills add n8nfelipe\u002Fapp-security --skill guidelines-design",{"tool":52,"command":53},"pnpm","pnpm dlx skills add n8nfelipe\u002Fapp-security --skill guidelines-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fguidelines-design\u002FSKILL.md",true,[],[58,70,79,88,95,110],{"skillNo":59,"name":60,"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":61,"categories":62,"keywords":66,"publishedAt":31},"01M6GGA29V2DZPNHAM4XQYCSXE","test-runner","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Ftest-runner\u002FSKILL.md",[63],{"categoryNo":64,"categoryName":65,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",[67,68,69],"runner","test runner","test",{"skillNo":71,"name":72,"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":73,"categories":74,"keywords":75,"publishedAt":31},"01M6GGA0PVB628F24Y5ZE6SHV7","security-scan","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsecurity-scan\u002FSKILL.md",[],[76,77,78],"scan","security scan","security",{"skillNo":80,"name":81,"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":82,"categories":83,"keywords":84,"publishedAt":31},"01M6GG9XKCJF29YVHK28MXAMYZ","project-setup","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fproject-setup\u002FSKILL.md",[],[85,86,87],"project","project setup","setup",{"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":93,"publishedAt":31},"01M6GG9SYVA6TXMN9NXQKZ1Z6F","manter-cobertura","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fmanter-cobertura\u002FSKILL.md",[],[94],"manter cobertura",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":104,"publishedAt":31},"01M6GG9Q1G860K1DWV65XNFGAN","lint-format","Padroniza código com ESLint e Prettier","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Flint-format\u002FSKILL.md",[101],{"categoryNo":102,"categoryName":103,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",[105,106,107,108,109],"lint format","format","lint","eslint","prettier",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":119,"publishedAt":31},"01M6GG9GSB3QGBNGNSQVQ40K6M","full-ci-pipeline","Executa pipeline completa estilo CI\u002FCD","https:\u002F\u002Fgithub.com\u002Fn8nfelipe\u002Fapp-security\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Ffull-ci-pipeline\u002FSKILL.md",[116],{"categoryNo":117,"categoryName":118,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",[120,121,122,123,124,125],"ci","full ci pipeline","full","pipeline","CI\u002FCD","cd"]