[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"extension-skill-brightdata-design-mirror-tr":3,"guides-for-brightdata-design-mirror":273,"similar-k175v5ts62cjemmr7padbfj4v1866g3x":274},{"_creationTime":4,"_id":5,"children":6,"community":7,"display":9,"evaluation":20,"identity":188,"isFallback":193,"parentExtension":194,"providers":248,"relations":251,"repo":252,"workflow":272},1778054268187.7798,"k175v5ts62cjemmr7padbfj4v1866g3x",[],{"reviewCount":8},0,{"description":10,"installMethods":11,"name":12,"sourceUrl":13,"tags":14},"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.",{},"Design Mirror","https://github.com/brightdata/skills/tree/HEAD/skills/design-mirror",[15,16,17,18,19],"css","design","web-scraping","frontend","code-generation",{"_creationTime":21,"_id":22,"extensionId":5,"locale":23,"result":24,"trustSignals":177,"workflow":186},1778054318963.3447,"kn704f5d7mx24kxb4a0e7rsh1n867gqh","en",{"checks":25,"evaluatedAt":167,"extensionSummary":168,"promptVersionExtension":169,"promptVersionScoring":170,"rationale":171,"score":172,"summary":173,"tags":174,"targetMarket":175,"tier":176},[26,31,34,37,41,44,48,53,56,59,63,68,71,75,78,81,84,87,90,93,97,101,105,109,113,116,119,122,126,129,132,135,138,141,145,148,151,154,157,160,164],{"category":27,"check":28,"severity":29,"summary":30},"Practical Utility","Problem relevance","pass","The description clearly states the user problem of replicating website visual styles and provides specific trigger phrases and use cases.",{"category":27,"check":32,"severity":29,"summary":33},"Unique selling proposition","The skill offers significant value beyond a simple prompt by orchestrating complex web scraping, CSS analysis, and code application workflows that a standard LLM cannot perform natively.",{"category":27,"check":35,"severity":29,"summary":36},"Production readiness","The extension provides a complete lifecycle for design mirroring, from setup and capture to analysis and application, with clear instructions and references for each step.",{"category":38,"check":39,"severity":29,"summary":40},"Scope","Single responsibility principle","The skill focuses on the single, well-defined task of replicating visual design styles from one website to another, without venturing into unrelated domains.",{"category":38,"check":42,"severity":29,"summary":43},"Description quality","The description accurately and concisely reflects the skill's functionality, providing clear use cases and trigger phrases.",{"category":45,"check":46,"severity":29,"summary":47},"Invocation","Scoped tools","The skill utilizes specific bash scripts for distinct tasks like screenshotting and HTML scraping, rather than a single generalist execution tool.",{"category":49,"check":50,"severity":51,"summary":52},"Documentation","Configuration & parameter reference","warning","The skill requires specific environment variables (BRIGHTDATA_API_KEY, BRIGHTDATA_UNLOCKER_ZONE) which are mentioned but lack a default value or explicit precedence order.",{"category":38,"check":54,"severity":29,"summary":55},"Tool naming","The scripts (e.g., `screenshot.sh`, `scrape_html.sh`) are descriptively named and follow kebab-case conventions.",{"category":38,"check":57,"severity":29,"summary":58},"Minimal I/O surface","The input parameters for the scripts are specific URLs and file paths, and the output is clearly defined as a file, without extraneous data.",{"category":60,"check":61,"severity":29,"summary":62},"License","License usability","The repository contains a clear MIT license file, which is a permissive open-source license.",{"category":64,"check":65,"severity":66,"summary":67},"Maintenance","Commit recency","not_applicable","No commit history is available for this specific file or its direct parent directory, making it impossible to assess recency.",{"category":64,"check":69,"severity":66,"summary":70},"Dependency Management","No third-party dependencies are directly used or managed by this skill's scripts, beyond standard system utilities like curl and bash.",{"category":72,"check":73,"severity":51,"summary":74},"Security","Secret Management","The scripts reference BRIGHTDATA_API_KEY and BRIGHTDATA_UNLOCKER_ZONE as environment variables, which, if not handled carefully by the user, could lead to secrets being exposed.",{"category":72,"check":76,"severity":29,"summary":77},"Injection","The scripts use provided URLs as direct arguments and do not appear to execute arbitrary code or instructions from external data sources.",{"category":72,"check":79,"severity":29,"summary":80},"Transitive Supply-Chain Grenades","The scripts rely on the Bright Data API and standard system utilities, with no indication of runtime downloads or execution of untrusted external content.",{"category":72,"check":82,"severity":29,"summary":83},"Sandbox Isolation","The scripts interact with an external API and save files to specified local paths, with no indication of attempts to modify files outside the designated output directory.",{"category":72,"check":85,"severity":29,"summary":86},"Sandbox escape primitives","The bash scripts do not contain any patterns indicative of sandbox escape primitives like detached processes or retry loops around denied calls.",{"category":72,"check":88,"severity":29,"summary":89},"Data Exfiltration","The skill's described function does not involve reading or submitting confidential data to third parties; it interacts with the Bright Data API for web scraping.",{"category":72,"check":91,"severity":29,"summary":92},"Hidden Text Tricks","The bundled files appear to be free of hidden text tricks, invisible characters, or obfuscated instructions.",{"category":94,"check":95,"severity":29,"summary":96},"Hooks","Opaque code execution","The bash scripts are readable and do not employ obfuscation techniques like base64 encoding or eval.",{"category":98,"check":99,"severity":29,"summary":100},"Portability","Structural Assumption","The scripts assume standard bash and curl environments, and the output path is configurable, avoiding assumptions about user project structure.",{"category":102,"check":103,"severity":66,"summary":104},"Trust","Issues Attention","Issue tracking data is not available for this specific skill or its immediate parent directory, making it impossible to assess maintainer engagement.",{"category":106,"check":107,"severity":51,"summary":108},"Versioning","Release Management","There is no discernible versioning information (e.g., manifest version, git tags, CHANGELOG) for this skill, and installation instructions do not appear to reference a specific version, implying use of the main branch.",{"category":110,"check":111,"severity":51,"summary":112},"Code Execution","Validation","The input URL is used directly in the curl command without explicit validation or sanitization against potentially malformed inputs.",{"category":72,"check":114,"severity":29,"summary":115},"Unguarded Destructive Operations","The skill is read-only in nature, focusing on scraping and analysis, and does not perform any destructive operations.",{"category":110,"check":117,"severity":51,"summary":118},"Error Handling","The bash scripts have basic error checking for curl commands and file existence, but lack detailed error categorization or structured reporting for the agent.",{"category":110,"check":120,"severity":51,"summary":121},"Logging","There is no explicit logging of actions or outcomes to a local audit file; only basic echo statements to stderr are present.",{"category":123,"check":124,"severity":29,"summary":125},"Compliance","GDPR","The skill's primary function is to scrape public web data; it does not appear to specifically operate on or transmit personal data without consent.",{"category":123,"check":127,"severity":29,"summary":128},"Target market","The skill is globally applicable and does not contain any regional logic or signals, thus the target market is global.",{"category":98,"check":130,"severity":29,"summary":131},"Runtime stability","The scripts rely on standard bash and curl, making them highly portable across POSIX-compliant systems without specific OS or shell assumptions.",{"category":45,"check":133,"severity":29,"summary":134},"Precise Purpose","The skill clearly defines its purpose as replicating website visual styles and provides specific triggers and use cases.",{"category":45,"check":136,"severity":29,"summary":137},"Concise Frontmatter","The SKILL.md frontmatter is concise, clearly stating the skill's core capability and trigger phrases without excessive keyword stuffing.",{"category":49,"check":139,"severity":29,"summary":140},"Concise Body","The SKILL.md body is well-structured with clear sections and appropriately delegates deeper material to reference files, staying within a reasonable length.",{"category":142,"check":143,"severity":29,"summary":144},"Context","Progressive Disclosure","Detailed guides for capture, CSS extraction, and application are provided in separate markdown files, linked from the main SKILL.md.",{"category":142,"check":146,"severity":66,"summary":147},"Forked exploration","This skill does not involve deep exploration or code review; it performs distinct, short-lived tasks, so `context: fork` is not applicable.",{"category":27,"check":149,"severity":29,"summary":150},"Usage examples","The documentation provides clear, runnable bash commands for capturing screenshots and HTML, along with explanations of the expected output.",{"category":27,"check":152,"severity":29,"summary":153},"Edge cases","The documentation addresses common issues like large HTML files, minified CSS, external CSS, and JS-rendered sites, providing recovery strategies for each.",{"category":98,"check":155,"severity":66,"summary":156},"Tool Fallback","The skill relies on standard system utilities (curl, bash) and the Bright Data API, which are assumed to be available and do not have specific fallbacks required.",{"category":98,"check":158,"severity":29,"summary":159},"Stack assumptions","The skill assumes a POSIX-compliant shell and the availability of `curl`, which are standard environments, and explicitly states the need for Bright Data credentials.",{"category":161,"check":162,"severity":29,"summary":163},"Safety","Halt on unexpected state","The bash scripts include basic checks for API key/zone presence and successful curl operations, halting execution with an error message if prerequisites are not met.",{"category":98,"check":165,"severity":29,"summary":166},"Cross-skill coupling","This skill is self-contained and does not implicitly rely on other skills being loaded; its functionality is independent.",1778054303717,"This skill extracts design tokens such as colors, typography, and spacing from a target website using web scraping and screenshot analysis. It then provides guidance on how to apply these tokens to various frontend frameworks like React, Vue, Next.js, or plain CSS projects.","2.0.0","3.4.0","The 'design-mirror' skill is well-documented, self-contained, and focuses on a clear practical utility. It leverages external scripts for distinct tasks, with good error handling for setup and API calls. Minor warnings for configuration and versioning are outweighed by its overall quality and clarity.",85,"This skill helps replicate website visual styles by capturing design elements and applying them to a user's codebase.",[15,16,17,18,19],"global","verified",{"codeQuality":178,"collectedAt":179,"documentation":180,"maintenance":182,"security":183,"testCoverage":185},{},1778054291390,{"descriptionLength":181,"readmeSize":8},511,{},{"hasNpmPackage":184,"smitheryVerified":184},false,{"hasCi":184,"hasTests":184},{"updatedAt":187},1778054318963,{"githubOwner":189,"githubRepo":190,"locale":23,"slug":191,"type":192},"brightdata","skills","design-mirror","skill",true,{"_creationTime":195,"_id":196,"community":197,"display":198,"identity":211,"parentExtension":214,"providers":241,"relations":246,"workflow":247},1778054268187.776,"k177secs2fy2665c3z8prspg0s867xd1",{"reviewCount":8},{"description":199,"installMethods":200,"name":201,"sourceUrl":202,"tags":203},"Web scraping, Google search, structured data extraction, and MCP server integration powered by Bright Data. Includes 11 skills: scrape any webpage as markdown (with bot detection/CAPTCHA bypass), search Google with structured JSON results, extract data from 40+ websites (Amazon, LinkedIn, Instagram, TikTok, YouTube, and more), orchestrate Bright Data's 60+ MCP tools, Bright Data CLI for terminal-based scraping/search/data extraction/zone management, real-time competitive intelligence (competitor snapshots, pricing comparison, review mining, hiring signals, market landscape mapping), built-in best practices for Web Unlocker, SERP API, Web Scraper API, and Browser API, Python SDK best practices for the brightdata-sdk package, scraper builder for any website, design system mirroring, and Browser API session debugging.",{},"Bright Data Plugin for Claude Code","https://github.com/brightdata/skills",[17,204,205,206,207,208,209,210],"data-extraction","search","mcp","bright-data","cli","competitive-intelligence","python-sdk",{"githubOwner":189,"githubRepo":190,"locale":23,"slug":212,"type":213},"brightdata-plugin","plugin",{"_creationTime":215,"_id":216,"community":217,"display":218,"identity":224,"providers":227,"relations":236,"workflow":238},1778054268187.7754,"k17f4hb22c0s5mwjyyx9xtwwen86727s",{"reviewCount":8},{"description":219,"installMethods":220,"name":221,"sourceUrl":202,"tags":222},"Official Bright Data plugin for Claude Code - Web scraping, search, structured data extraction, and Python SDK",{},"Bright Data Plugin",[17,205,204,210,208,206,189,223],"api",{"githubOwner":189,"githubRepo":190,"locale":23,"slug":225,"type":226},"brightdata-plugins","marketplace",{"extract":228,"llm":234},{"commitSha":229,"license":230,"marketplace":231},"d0eeb1fbab809ffffe7c270186bd3eb78cf0c8ba","MIT",{"name":225,"pluginCount":232,"version":233},1,"1.6.0",{"promptVersionExtension":169,"promptVersionScoring":170,"score":235,"targetMarket":175,"tier":176},98,{"repoId":237},"kd7e4q3ah25vmt87x67vanphhn864r9h",{"anyEnrichmentAt":239,"extractAt":240,"githubAt":239,"llmAt":187,"updatedAt":187},1778054269540,1778054268187,{"extract":242,"llm":243},{"commitSha":229,"license":230},{"promptVersionExtension":169,"promptVersionScoring":170,"score":244,"targetMarket":175,"tier":245},65,"flagged",{"parentExtensionId":216,"repoId":237},{"anyEnrichmentAt":239,"extractAt":240,"githubAt":239,"llmAt":187,"updatedAt":187},{"extract":249,"llm":250},{"commitSha":229,"license":230},{"promptVersionExtension":169,"promptVersionScoring":170,"score":172,"targetMarket":175,"tier":176},{"parentExtensionId":196,"repoId":237},{"_creationTime":253,"_id":237,"identity":254,"providers":255,"workflow":269},1777995558409.835,{"githubOwner":189,"githubRepo":190,"sourceUrl":202},{"discover":256,"github":260},{"sources":257},[258,259],"skills-sh","vskill",{"closedIssues90d":261,"forks":262,"homepage":263,"license":230,"openIssues90d":264,"pushedAt":265,"readmeSize":266,"stars":267,"topics":268},3,19,"https://skills.sh/brightdata",4,1777367346000,36677,111,[],{"discoverAt":270,"extractAt":271,"githubAt":271,"updatedAt":271},1777995558409,1778054276871,{"anyEnrichmentAt":239,"extractAt":240,"githubAt":239,"llmAt":187,"updatedAt":187},[],[275,311,335,361,388,416],{"_creationTime":276,"_id":277,"community":278,"display":279,"identity":296,"providers":300,"relations":305,"workflow":307},1778053622473.6697,"k171f477n3e7072bp8naebmft986757y",{"reviewCount":8},{"description":280,"installMethods":281,"name":282,"sourceUrl":283,"tags":284},"Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.",{},"Frontend Design","https://github.com/jwynia/agent-skills/tree/HEAD/skills/tech/frontend/design/frontend-design",[16,285,18,15,286,287,288,289,290,291,292,293,294,295],"ui","components","palette","typography","tokens","accessibility","react","vue","svelte","html","deno",{"githubOwner":297,"githubRepo":298,"locale":23,"slug":299,"type":192},"jwynia","agent-skills","frontend-design",{"extract":301,"llm":303},{"commitSha":302,"license":230},"e02ec7e226a6e4f8419fd3b88a1d8e472d421b32",{"promptVersionExtension":169,"promptVersionScoring":170,"score":304,"targetMarket":175,"tier":176},99,{"repoId":306},"kd7efn3mprpa8rd8vm5hw5ebzx864fph",{"anyEnrichmentAt":308,"extractAt":309,"githubAt":308,"llmAt":310,"updatedAt":310},1778053625386,1778053622473,1778054012696,{"_creationTime":312,"_id":313,"community":314,"display":315,"identity":321,"providers":324,"relations":329,"workflow":331},1778053100136.2432,"k172mxtfqpq8byws1fyd2va1018674xt",{"reviewCount":8},{"description":316,"installMethods":317,"name":282,"sourceUrl":318,"tags":319},"Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.",{},"https://github.com/bytedance/deer-flow/tree/HEAD/skills/public/frontend-design",[18,16,285,320,294,15,291,292],"web-components",{"githubOwner":322,"githubRepo":323,"locale":23,"slug":299,"type":192},"bytedance","deer-flow",{"extract":325,"llm":328},{"commitSha":326,"license":327},"1336872b15c25d45ebcb7c1cf72369c2bdd53187","MIT-0",{"promptVersionExtension":169,"promptVersionScoring":170,"score":235,"targetMarket":175,"tier":176},{"repoId":330},"kd789sm7egx1h0t1jag6zzhcq98656wv",{"anyEnrichmentAt":332,"extractAt":333,"githubAt":332,"llmAt":334,"updatedAt":334},1778053101076,1778053100136,1778053169012,{"_creationTime":336,"_id":337,"community":338,"display":339,"identity":347,"providers":350,"relations":355,"workflow":357},1778054491434.2573,"k17akerbcb9qg85yjeq5b9a0fd8672fp",{"reviewCount":8},{"description":340,"installMethods":341,"name":342,"sourceUrl":343,"tags":344},"Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, \"make it feel better\", \"feels off\", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.",{},"Make Interfaces Feel Better","https://github.com/jakubkrehel/make-interfaces-feel-better/tree/HEAD/skills/make-interfaces-feel-better",[285,16,18,15,345,288,346],"animation","polish",{"githubOwner":348,"githubRepo":349,"locale":23,"slug":349,"type":192},"jakubkrehel","make-interfaces-feel-better",{"extract":351,"llm":353},{"commitSha":352,"license":230},"384562064fcdd99778fcbafd8729626fe6aab02f",{"promptVersionExtension":169,"promptVersionScoring":170,"score":354,"targetMarket":175,"tier":176},95,{"repoId":356},"kd73vz76v1h3vbkcs55q5pr89s8640jq",{"anyEnrichmentAt":358,"extractAt":359,"githubAt":358,"llmAt":360,"updatedAt":360},1778054491631,1778054491434,1778054509344,{"_creationTime":362,"_id":363,"community":364,"display":365,"identity":373,"providers":377,"relations":382,"workflow":384},1778053038365.4285,"k17bkkf71rqak85n36k4z7r13h8662kk",{"reviewCount":8},{"description":366,"installMethods":367,"name":368,"sourceUrl":369,"tags":370},"Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.",{},"Modern CSS","https://github.com/ccheney/robust-skills/tree/HEAD/skills/modern-css",[15,18,285,371,372,290],"design-systems","performance",{"githubOwner":374,"githubRepo":375,"locale":23,"slug":376,"type":192},"ccheney","robust-skills","modern-css",{"extract":378,"llm":380},{"commitSha":379,"license":230},"85e5e2698d9753fb690666ccd59598e8a0b6f004",{"promptVersionExtension":169,"promptVersionScoring":170,"score":381,"targetMarket":175,"tier":176},96,{"repoId":383},"kd75qepasjckthmb72881rzdj58655g4",{"anyEnrichmentAt":385,"extractAt":386,"githubAt":385,"llmAt":387,"updatedAt":387},1778053039088,1778053038365,1778053066880,{"_creationTime":389,"_id":390,"community":391,"display":392,"identity":402,"providers":406,"relations":410,"workflow":412},1778054663200.055,"k178cddejr2k0qx90ptb4aqw658675r6",{"reviewCount":8},{"description":393,"installMethods":394,"name":395,"sourceUrl":396,"tags":397},"Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.",{},"Color Palette Extractor","https://github.com/onewave-ai/claude-skills/tree/HEAD/color-palette-extractor",[398,16,287,399,400,15,401],"color","extraction","generation","tailwind",{"githubOwner":403,"githubRepo":404,"locale":23,"slug":405,"type":192},"onewave-ai","claude-skills","color-palette-extractor",{"extract":407,"llm":409},{"commitSha":408,"license":230},"eb3d80be32b6cafcf0d5df1c1b8a95df75838271",{"promptVersionExtension":169,"promptVersionScoring":170,"score":354,"targetMarket":175,"tier":176},{"repoId":411},"kd71e43dj0b7ak5e55pyshxp4n864t6p",{"anyEnrichmentAt":413,"extractAt":414,"githubAt":413,"llmAt":415,"updatedAt":415},1778054667983,1778054663200,1778055270278,{"_creationTime":417,"_id":418,"community":419,"display":420,"identity":429,"providers":431,"relations":435,"workflow":437},1778054691785.2559,"k17ac35xsa43hhrp4547zcey758667vk",{"reviewCount":8},{"description":421,"installMethods":422,"name":423,"sourceUrl":424,"tags":425},"Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.",{},"Frontend Design Skill","https://github.com/answerzhao/agent-skills/tree/HEAD/glm-skills/frontend-design",[18,285,426,291,427,401,15,290,428],"design-system","typescript","web-development",{"githubOwner":430,"githubRepo":298,"locale":23,"slug":299,"type":192},"answerzhao",{"extract":432,"llm":434},{"commitSha":433,"license":230},"aad73edbd0d9ffbc3d6a402b6eafa6dab96d5ebb",{"promptVersionExtension":169,"promptVersionScoring":170,"score":354,"targetMarket":175,"tier":176},{"repoId":436},"kd712v2g1pay70swwj0jpv2ggs864zgh",{"anyEnrichmentAt":438,"extractAt":439,"githubAt":438,"llmAt":440,"updatedAt":440},1778054692243,1778054691785,1778054738050]