[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AFZ22T8SQFS4NEQR6ABWKA":3,"skill-same:01M6AFZ22T8SQFS4NEQR6ABWKA":108},{"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":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":63,"repositoryHtmlUrl":64,"repositoryHomepageUrl":65,"ownerHtmlUrl":66,"ownerBlogUrl":67,"ownerDescription":68,"updatedAt":69,"install":70,"resources":83},"01M6AFZ22T8SQFS4NEQR6ABWKA","design-mirror",null,"Replicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look like', 'match the design of', 'copy the style from', 'I want my app to look like X', 'mirror this design', 'inspired by [url]', or any time the user points at a website and says they want their frontend to match it.","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33332,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"design","design mirror","mirror","apply","frontend","Existing","at","my","URL","make","visual style","trigger","app","visual","time","aesthetic","use","replicate","ui","website","2026-11-10 10:12:30",false,"---\nname: design-mirror\ndescription: \"Replicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look like', 'match the design of', 'copy the style from', 'I want my app to look like X', 'mirror this design', 'inspired by [url]', or any time the user points at a website and says they want their frontend to match it.\"\n---\n\n# Design Mirror\n\nCapture the visual design language of any website and apply it to your existing codebase — colors, typography, spacing, layout rhythm, component shapes, and overall aesthetic — all extracted live via Bright Data's Web Unlocker.\n\n## What This Skill Does\n\n1. **Capture** — Screenshot + HTML scrape the inspiration site via Bright Data\n2. **Extract** — Identify the full design system: colors, fonts, spacing scale, border radii, shadows, component patterns\n3. **Analyze** — Study the screenshot visually and the CSS structurally to understand the design language\n4. **Apply** — Translate that design system into the user's existing codebase (their framework, their components)\n\nYou are not copying content or functionality. You're understanding the *design language* — the palette, the type scale, the card shapes, the hover states, the overall aesthetic feel.\n\n> **Important:** This skill is for design inspiration and learning — extracting publicly visible design tokens (colors, fonts, spacing) to inform your own UI work. Always use it respectfully and in accordance with the terms of service of the sites you reference.\n\n## Setup\n\nRequires:\n- `BRIGHTDATA_API_KEY` — from [brightdata.com\u002Fcp](https:\u002F\u002Fbrightdata.com\u002Fcp) → Account Settings\n- `BRIGHTDATA_UNLOCKER_ZONE` — create an Unlocker zone at brightdata.com\u002Fcp\n\n```bash\nexport BRIGHTDATA_API_KEY=\"your-api-key\"\nexport BRIGHTDATA_UNLOCKER_ZONE=\"your-zone-name\"\n```\n\n## Step-by-Step Process\n\n### Step 1: Capture the Inspiration Site\n\nRun both captures in parallel — screenshot (for visual analysis) and HTML scrape (for CSS extraction):\n\n```bash\n# Screenshot (save as PNG)\nbash scripts\u002Fscreenshot.sh \"https:\u002F\u002Finspiration-site.com\" \"\u002Ftmp\u002Ftarget_screenshot.png\"\n\n# HTML + CSS scrape\nbash scripts\u002Fscrape_html.sh \"https:\u002F\u002Finspiration-site.com\" \"\u002Ftmp\u002Ftarget_page.html\"\n```\n\nRead `references\u002Fcapture-guide.md` for how to extract CSS from the raw HTML and handle common issues.\n\n### Step 2: Analyze the Design System\n\nAfter capturing, analyze both in parallel:\n\n**Visual analysis (screenshot):** Read the PNG image and identify:\n- Primary, secondary, accent colors\n- Background colors (page bg, card bg, surface hierarchy)\n- Typography: font families visible, size hierarchy (h1 → body → caption)\n- Layout: is it centered\u002Fconstrained-width? Grid? Sidebar?\n- Card\u002Fcontainer shapes: border radius size, shadow style (hard, soft, none, colored)\n- Button styles: pill, rectangle, ghost, gradient?\n- Navigation: sticky? Glass\u002Fblur effect? Dark or light?\n- Overall mood: dark, light, minimal, brutalist, glassmorphism, corporate, startup?\n\n**CSS analysis (HTML):** Extract from `\u003Cstyle>` tags and inline styles:\n- CSS custom properties (`:root { --color-... }`) — publicly declared design tokens\n- Font imports (`@import` from Google Fonts, etc.)\n- Tailwind config if present\n- Repeated class patterns that reveal the spacing scale\n\nRead `references\u002Fcss-extraction.md` for the extraction playbook.\n\n### Step 3: Build the Design Token Map\n\nProduce a structured design token map before touching any code:\n\n```\nDESIGN TOKENS FROM [site]\n==========================\nColors:\n  --bg-primary: #0a0a0f      (page background)\n  --bg-surface: #13131a      (card\u002Fpanel background)\n  --text-primary: #ffffff\n  --text-muted: #8888aa\n  --accent: #7c3aed          (primary CTA color)\n  --accent-hover: #6d28d9\n  --border: rgba(255,255,255,0.08)\n\nTypography:\n  --font-heading: 'Inter', sans-serif\n  --font-body: 'Inter', sans-serif\n  font-scale: 12\u002F14\u002F16\u002F20\u002F24\u002F32\u002F48px\n  heading-weight: 700\n  body-weight: 400\n\nSpacing:\n  base-unit: 8px\n  scale: 4\u002F8\u002F12\u002F16\u002F24\u002F32\u002F48\u002F64px\n\nBorders & Shadows:\n  --radius-sm: 6px\n  --radius-md: 12px\n  --radius-lg: 20px\n  --shadow: 0 4px 24px rgba(0,0,0,0.4)\n\nSpecial effects:\n  glass-blur: backdrop-filter: blur(16px)\n  gradient: linear-gradient(135deg, #7c3aed, #2563eb)\n```\n\nShow this token map to the user before proceeding. It's the foundation — if it's wrong, the output will be wrong.\n\n### Step 4: Understand the User's Codebase\n\nBefore writing any code, read the relevant parts of their codebase:\n\n- What framework? (React, Vue, Next.js, plain HTML?)\n- What styling approach? (Tailwind, CSS modules, styled-components, plain CSS?)\n- Where are global styles defined? (globals.css, theme.ts, tailwind.config.js?)\n- What components need restyling? (ask the user if unclear)\n\nDo not rewrite everything — surgical precision. Apply the design tokens to the existing structure.\n\n### Step 5: Apply the Design\n\nThe application strategy depends on their stack:\n\n**If Tailwind:** Update `tailwind.config.js` with the new color palette, font family, border radius scale. Add custom CSS variables for anything Tailwind can't handle natively.\n\n**If CSS\u002FCSS Modules:** Create or update a `:root` variables block in globals.css. Update component stylesheets to use the new variables.\n\n**If styled-components\u002FEmotion:** Update the theme object. Replace hardcoded color\u002Fspacing values with theme tokens.\n\n**In all cases:**\n- Apply colors, typography, and spacing globally first\n- Then tackle component-level details (buttons, cards, nav) one at a time\n- Preserve all existing functionality and layout structure — only visual properties change\n- Add any special effects (glass blur, gradients, animations) that define the inspiration site's character\n\nRead `references\u002Fapply-guide.md` for framework-specific implementation patterns.\n\n### Step 6: Show the Before\u002FAfter\n\nAfter applying changes, clearly present:\n- Which files were modified\n- The design token mapping (source → what you set it to)\n- Any special effects added\n- What the user should check visually (hover states, dark\u002Flight mode, mobile)\n\nIf the user has a dev server running, remind them to check it. Offer to iterate on specific components.\n\n## Key Principles\n\n**Design language, not markup.** The inspiration site's HTML structure and content are theirs. You're extracting the *design language* — how colors relate, how spacing flows, what gives the site its character — to apply as your own creative foundation.\n\n**Design tokens first, code second.** Rushing to apply colors before understanding the full system leads to inconsistent results. Always build the token map first.\n\n**Ask about scope.** \"Apply the design everywhere\" vs \"just make the homepage feel like it\" vs \"only restyle the navbar\" are very different jobs. Clarify before proceeding.\n\n**Don't break what works.** The user's components work. Only change visual properties. If you're uncertain whether a change might break layout, err on the side of caution and flag it.\n\n**Iterative is fine.** It's often better to get the foundation right (colors, type, spacing) and let the user review before tackling component-level details.\n\n## What to Do When...\n\n**The site uses a design system (Material, shadcn, etc.):** Identify it, tell the user, and ask if they want to adopt the same system or just extract the visual tokens.\n\n**The CSS is minified\u002Fobfuscated:** Fall back to the screenshot + visual analysis. You can still extract colors, spacing, and shapes from visual inspection.\n\n**The inspiration site is JS-rendered and the HTML scrape comes back mostly empty:** Note this to the user — the screenshot will still work for visual analysis, but CSS extraction will be limited. You can still infer most tokens visually.\n\n**The user's codebase uses a component library (shadcn, Chakra, MUI):** Apply the design by customizing the library's theme\u002Fconfig rather than overriding individual components.\n\n**Multiple pages need to match:** Use the homepage for overall design tokens, but offer to check inner pages (e.g., `\u002Fpricing`, `\u002Fdocs`) if the user wants to match a specific page's look.\n","# Design Mirror\n\nCapture the visual design language of any website and apply it to your existing codebase — colors, typography, spacing, layout rhythm, component shapes, and overall aesthetic — all extracted live via Bright Data's Web Unlocker.\n\n## What This Skill Does\n\n1. **Capture** — Screenshot + HTML scrape the inspiration site via Bright Data\n2. **Extract** — Identify the full design system: colors, fonts, spacing scale, border radii, shadows, component patterns\n3. **Analyze** — Study the screenshot visually and the CSS structurally to understand the design language\n4. **Apply** — Translate that design system into the user's existing codebase (their framework, their components)\n\nYou are not copying content or functionality. You're understanding the *design language* — the palette, the type scale, the card shapes, the hover states, the overall aesthetic feel.\n\n> **Important:** This skill is for design inspiration and learning — extracting publicly visible design tokens (colors, fonts, spacing) to inform your own UI work. Always use it respectfully and in accordance with the terms of service of the sites you reference.\n\n## Setup\n\nRequires:\n- `BRIGHTDATA_API_KEY` — from [brightdata.com\u002Fcp](https:\u002F\u002Fbrightdata.com\u002Fcp) → Account Settings\n- `BRIGHTDATA_UNLOCKER_ZONE` — create an Unlocker zone at brightdata.com\u002Fcp\n\n```bash\nexport BRIGHTDATA_API_KEY=\"your-api-key\"\nexport BRIGHTDATA_UNLOCKER_ZONE=\"your-zone-name\"\n```\n\n## Step-by-Step Process\n\n### Step 1: Capture the Inspiration Site\n\nRun both captures in parallel — screenshot (for visual analysis) and HTML scrape (for CSS extraction):\n\n```bash\n# Screenshot (save as PNG)\nbash scripts\u002Fscreenshot.sh \"https:\u002F\u002Finspiration-site.com\" \"\u002Ftmp\u002Ftarget_screenshot.png\"\n\n# HTML + CSS scrape\nbash scripts\u002Fscrape_html.sh \"https:\u002F\u002Finspiration-site.com\" \"\u002Ftmp\u002Ftarget_page.html\"\n```\n\nRead `references\u002Fcapture-guide.md` for how to extract CSS from the raw HTML and handle common issues.\n\n### Step 2: Analyze the Design System\n\nAfter capturing, analyze both in parallel:\n\n**Visual analysis (screenshot):** Read the PNG image and identify:\n- Primary, secondary, accent colors\n- Background colors (page bg, card bg, surface hierarchy)\n- Typography: font families visible, size hierarchy (h1 → body → caption)\n- Layout: is it centered\u002Fconstrained-width? Grid? Sidebar?\n- Card\u002Fcontainer shapes: border radius size, shadow style (hard, soft, none, colored)\n- Button styles: pill, rectangle, ghost, gradient?\n- Navigation: sticky? Glass\u002Fblur effect? Dark or light?\n- Overall mood: dark, light, minimal, brutalist, glassmorphism, corporate, startup?\n\n**CSS analysis (HTML):** Extract from `\u003Cstyle>` tags and inline styles:\n- CSS custom properties (`:root { --color-... }`) — publicly declared design tokens\n- Font imports (`@import` from Google Fonts, etc.)\n- Tailwind config if present\n- Repeated class patterns that reveal the spacing scale\n\nRead `references\u002Fcss-extraction.md` for the extraction playbook.\n\n### Step 3: Build the Design Token Map\n\nProduce a structured design token map before touching any code:\n\n```\nDESIGN TOKENS FROM [site]\n==========================\nColors:\n  --bg-primary: #0a0a0f      (page background)\n  --bg-surface: #13131a      (card\u002Fpanel background)\n  --text-primary: #ffffff\n  --text-muted: #8888aa\n  --accent: #7c3aed          (primary CTA color)\n  --accent-hover: #6d28d9\n  --border: rgba(255,255,255,0.08)\n\nTypography:\n  --font-heading: 'Inter', sans-serif\n  --font-body: 'Inter', sans-serif\n  font-scale: 12\u002F14\u002F16\u002F20\u002F24\u002F32\u002F48px\n  heading-weight: 700\n  body-weight: 400\n\nSpacing:\n  base-unit: 8px\n  scale: 4\u002F8\u002F12\u002F16\u002F24\u002F32\u002F48\u002F64px\n\nBorders & Shadows:\n  --radius-sm: 6px\n  --radius-md: 12px\n  --radius-lg: 20px\n  --shadow: 0 4px 24px rgba(0,0,0,0.4)\n\nSpecial effects:\n  glass-blur: backdrop-filter: blur(16px)\n  gradient: linear-gradient(135deg, #7c3aed, #2563eb)\n```\n\nShow this token map to the user before proceeding. It's the foundation — if it's wrong, the output will be wrong.\n\n### Step 4: Understand the User's Codebase\n\nBefore writing any code, read the relevant parts of their codebase:\n\n- What framework? (React, Vue, Next.js, plain HTML?)\n- What styling approach? (Tailwind, CSS modules, styled-components, plain CSS?)\n- Where are global styles defined? (globals.css, theme.ts, tailwind.config.js?)\n- What components need restyling? (ask the user if unclear)\n\nDo not rewrite everything — surgical precision. Apply the design tokens to the existing structure.\n\n### Step 5: Apply the Design\n\nThe application strategy depends on their stack:\n\n**If Tailwind:** Update `tailwind.config.js` with the new color palette, font family, border radius scale. Add custom CSS variables for anything Tailwind can't handle natively.\n\n**If CSS\u002FCSS Modules:** Create or update a `:root` variables block in globals.css. Update component stylesheets to use the new variables.\n\n**If styled-components\u002FEmotion:** Update the theme object. Replace hardcoded color\u002Fspacing values with theme tokens.\n\n**In all cases:**\n- Apply colors, typography, and spacing globally first\n- Then tackle component-level details (buttons, cards, nav) one at a time\n- Preserve all existing functionality and layout structure — only visual properties change\n- Add any special effects (glass blur, gradients, animations) that define the inspiration site's character\n\nRead `references\u002Fapply-guide.md` for framework-specific implementation patterns.\n\n### Step 6: Show the Before\u002FAfter\n\nAfter applying changes, clearly present:\n- Which files were modified\n- The design token mapping (source → what you set it to)\n- Any special effects added\n- What the user should check visually (hover states, dark\u002Flight mode, mobile)\n\nIf the user has a dev server running, remind them to check it. Offer to iterate on specific components.\n\n## Key Principles\n\n**Design language, not markup.** The inspiration site's HTML structure and content are theirs. You're extracting the *design language* — how colors relate, how spacing flows, what gives the site its character — to apply as your own creative foundation.\n\n**Design tokens first, code second.** Rushing to apply colors before understanding the full system leads to inconsistent results. Always build the token map first.\n\n**Ask about scope.** \"Apply the design everywhere\" vs \"just make the homepage feel like it\" vs \"only restyle the navbar\" are very different jobs. Clarify before proceeding.\n\n**Don't break what works.** The user's components work. Only change visual properties. If you're uncertain whether a change might break layout, err on the side of caution and flag it.\n\n**Iterative is fine.** It's often better to get the foundation right (colors, type, spacing) and let the user review before tackling component-level details.\n\n## What to Do When...\n\n**The site uses a design system (Material, shadcn, etc.):** Identify it, tell the user, and ask if they want to adopt the same system or just extract the visual tokens.\n\n**The CSS is minified\u002Fobfuscated:** Fall back to the screenshot + visual analysis. You can still extract colors, spacing, and shapes from visual inspection.\n\n**The inspiration site is JS-rendered and the HTML scrape comes back mostly empty:** Note this to the user — the screenshot will still work for visual analysis, but CSS extraction will be limited. You can still infer most tokens visually.\n\n**The user's codebase uses a component library (shadcn, Chakra, MUI):** Apply the design by customizing the library's theme\u002Fconfig rather than overriding individual components.\n\n**Multiple pages need to match:** Use the homepage for overall design tokens, but offer to check inner pages (e.g., `\u002Fpricing`, `\u002Fdocs`) if the user wants to match a specific page's look.\n",{"name":5,"description":7},"main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror",3911,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-11 21:38:31",{"source":8,"skillName":5,"commands":71,"prompt":81,"zipAvailable":82},[72,75,78],{"tool":73,"command":74},"npx","npx skills add davila7\u002Fclaude-code-templates --skill design-mirror",{"tool":76,"command":77},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill design-mirror",{"tool":79,"command":80},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill design-mirror","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002FSKILL.md",true,[84,90,94,98,104],{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fapply-guide.md","REFERENCE","参考文档",6526,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002Freferences\u002Fapply-guide.md",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fcapture-guide.md",3020,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002Freferences\u002Fcapture-guide.md",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fcss-extraction.md",4682,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002Freferences\u002Fcss-extraction.md",{"path":99,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":102,"sourceHtmlUrl":103},"scripts\u002Fscrape_html.sh","SCRIPT","脚本",999,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002Fscripts\u002Fscrape_html.sh",{"path":105,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":106,"sourceHtmlUrl":107},"scripts\u002Fscreenshot.sh",1030,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fdesign-mirror\u002Fscripts\u002Fscreenshot.sh",[109,136,163,194,225,249],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":116,"publishedAt":55},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[115],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[117,118,119,120,121,122,123,124,51,125,126,127,128,129,130,131,132,133,134,135],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","when","reduce","with","record","track","verdict","evm","solana","how","public","look",{"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":143,"publishedAt":55},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[142],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[144,145,146,147,148,149,150,151,152,153,154,125,155,156,157,158,159,160,161,162],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","signals","audit","dependency",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":176,"publishedAt":55},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[169,172,173],{"categoryNo":170,"categoryName":171,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":174,"categoryName":175,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000033","数据分析师",[177,178,179,180,181,182,183,122,184,185,186,187,188,189,190,51,191,192,125,193],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":198,"licenseFileUrl":199,"sourceHtmlUrl":200,"categories":201,"keywords":203,"publishedAt":55},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[202],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[204,205,206,207,208,209,210,211,212,213,39,53,214,215,216,217,218,219,220,221,222,223,122,224],"artifacts builder","web","web artifacts builder","artifacts","builder","state","routing","state management","component","css","Tools","file","components","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":198,"licenseFileUrl":229,"sourceHtmlUrl":230,"categories":231,"keywords":236,"publishedAt":55},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[232,235],{"categoryNo":233,"categoryName":234,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[237,238,239,240,241,205,242,39,53,243,244,245,246,122,247,127,248],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":250,"name":251,"nameZh":6,"description":252,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":198,"licenseFileUrl":253,"sourceHtmlUrl":254,"categories":255,"keywords":263,"publishedAt":55},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[256,259,260],{"categoryNo":257,"categoryName":258,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":261,"categoryName":262,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000036","内容创作者",[264,265,266,267,268,269,270,271,207,272,215,155,273,274,275,276,277,189,278,125,279,280,281,282,283,133,284],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]