[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"extension-skill-jwynia-frontend-design-pt-BR":3,"guides-for-jwynia-frontend-design":227,"similar-k171f477n3e7072bp8naebmft986757y":228},{"_creationTime":4,"_id":5,"children":6,"community":7,"display":9,"evaluation":29,"identity":193,"isFallback":198,"parentExtension":199,"providers":200,"relations":204,"repo":206,"workflow":224},1778053622473.6697,"k171f477n3e7072bp8naebmft986757y",[],{"reviewCount":8},0,{"description":10,"installMethods":11,"name":12,"sourceUrl":13,"tags":14},"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",[15,16,17,18,19,20,21,22,23,24,25,26,27,28],"design","ui","frontend","css","components","palette","typography","tokens","accessibility","react","vue","svelte","html","deno",{"_creationTime":30,"_id":31,"extensionId":5,"locale":32,"result":33,"trustSignals":181,"workflow":191},1778054012697.0383,"kn7c0mw3hy0p5cam2ahgqnp691866kra","en",{"checks":34,"evaluatedAt":171,"extensionSummary":172,"promptVersionExtension":173,"promptVersionScoring":174,"rationale":175,"score":176,"summary":177,"tags":178,"targetMarket":179,"tier":180},[35,40,43,46,50,53,57,61,64,67,71,76,79,83,86,89,92,95,98,101,104,108,112,116,120,123,126,129,133,136,139,142,145,148,152,155,158,161,164,168],{"category":36,"check":37,"severity":38,"summary":39},"Practical Utility","Problem relevance","pass","The description clearly names the problem of creating distinctive, production-grade frontend interfaces and specifies use cases like building web components and auditing CSS.",{"category":36,"check":41,"severity":38,"summary":42},"Unique selling proposition","The skill offers distinct capabilities beyond default LLM behavior by providing specialized analysis and generation tools for color palettes, typography, design tokens, and component templates, supporting multiple frameworks and aesthetics.",{"category":36,"check":44,"severity":38,"summary":45},"Production readiness","The extension appears production-ready, covering analysis, specification, and generation for frontend design tasks, with clear examples and documentation for its full lifecycle.",{"category":47,"check":48,"severity":38,"summary":49},"Scope","Single responsibility principle","The skill focuses on frontend design, including analysis and generation of design artifacts, and does not extend into unrelated domains.",{"category":47,"check":51,"severity":38,"summary":52},"Description quality","The description is accurate, concise, well-organized, and accurately reflects the capabilities outlined in the skill's documentation and scripts.",{"category":54,"check":55,"severity":38,"summary":56},"Invocation","Scoped tools","The skill uses narrowly scoped tools (e.g., `analyze-styles.ts`, `generate-palette.ts`) rather than a single generalist tool, improving clarity and selection.",{"category":58,"check":59,"severity":38,"summary":60},"Documentation","Configuration & parameter reference","All options and parameters for the various scripts are clearly documented in the SKILL.md file, including their purpose and format.",{"category":47,"check":62,"severity":38,"summary":63},"Tool naming","Tool names like `analyze-styles.ts` and `generate-palette.ts` are descriptive and follow a clear naming convention.",{"category":47,"check":65,"severity":38,"summary":66},"Minimal I/O surface","The scripts accept specific arguments and options, and the outputs are structured (JSON or formatted text), avoiding unnecessary data dumps.",{"category":68,"check":69,"severity":38,"summary":70},"License","License usability","The extension is licensed under MIT, a permissive open-source license.",{"category":72,"check":73,"severity":74,"summary":75},"Maintenance","Commit recency","not_applicable","Commit recency check is not applicable as the provided context does not include commit history or pushedAt date.",{"category":72,"check":77,"severity":74,"summary":78},"Dependency Management","The extension uses Deno, which manages its dependencies internally, so no external dependency management checks are applicable.",{"category":80,"check":81,"severity":38,"summary":82},"Security","Secret Management","No secrets are used or managed by the scripts, and no sensitive information is outputted.",{"category":80,"check":84,"severity":38,"summary":85},"Injection","The skill does not load or execute untrusted third-party data; all scripts and assets are bundled within the repository.",{"category":80,"check":87,"severity":38,"summary":88},"Transitive Supply-Chain Grenades","The skill does not fetch remote code or data at runtime and all operations are contained within the skill's directory.",{"category":80,"check":90,"severity":38,"summary":91},"Sandbox Isolation","The scripts operate on CSS files and generate output, adhering to the `--allow-read` and `--allow-write` permissions, and do not touch files outside the project or user-specific scopes.",{"category":80,"check":93,"severity":38,"summary":94},"Sandbox escape primitives","No detached processes or retry loops around denied tool calls were detected.",{"category":80,"check":96,"severity":38,"summary":97},"Data Exfiltration","The skill does not access or submit any confidential data or personal information to third parties.",{"category":80,"check":99,"severity":38,"summary":100},"Hidden Text Tricks","The bundled files do not contain any hidden-steering tricks, invisible characters, or obfuscated content.",{"category":80,"check":102,"severity":38,"summary":103},"Opaque code execution","All scripts are written in plain, readable TypeScript and are not obfuscated or executed via `eval` or base64 decoding.",{"category":105,"check":106,"severity":38,"summary":107},"Portability","Structural Assumption","The skill operates on CSS files or directories provided as input and does not make assumptions about user project structure outside of the input path.",{"category":109,"check":110,"severity":74,"summary":111},"Trust","Issues Attention","No GitHub issues data was provided, so this check is not applicable.",{"category":113,"check":114,"severity":38,"summary":115},"Versioning","Release Management","The SKILL.md frontmatter includes a 'version: \"1.0\"' field, indicating a managed release.",{"category":117,"check":118,"severity":38,"summary":119},"Code Execution","Validation","The CLI argument parsing and schema validation for inputs (like color hex codes, font names, etc.) appear to be handled robustly by Deno's utilities and the script's internal checks.",{"category":80,"check":121,"severity":38,"summary":122},"Unguarded Destructive Operations","The scripts perform file read/write operations based on explicit arguments and do not contain any inherently destructive primitives.",{"category":117,"check":124,"severity":38,"summary":125},"Error Handling","The scripts include error handling for file operations, invalid arguments, and parsing issues, exiting with informative messages.",{"category":117,"check":127,"severity":74,"summary":128},"Logging","The skill is not inherently destructive and does not require audit logging of its operations.",{"category":130,"check":131,"severity":38,"summary":132},"Compliance","GDPR","The skill operates on CSS files and generates design tokens or components; it does not handle personal data.",{"category":130,"check":134,"severity":38,"summary":135},"Target market","The extension focuses on general frontend design practices and tools, with no apparent regional or jurisdictional limitations; targetMarket is global.",{"category":105,"check":137,"severity":38,"summary":138},"Runtime stability","The skill requires Deno and specifies necessary permissions, indicating it's designed for the Deno runtime and is reasonably portable.",{"category":54,"check":140,"severity":38,"summary":141},"Precise Purpose","The description clearly states the skill's purpose: generating design artifacts and auditing styles, and includes explicit 'When to Use' and 'Don't use' sections.",{"category":54,"check":143,"severity":38,"summary":144},"Concise Frontmatter","The frontmatter is concise and contains essential metadata like name, description, license, and compatibility requirements.",{"category":58,"check":146,"severity":38,"summary":147},"Concise Body","The SKILL.md body is well-structured with clear sections, examples, and references, staying under reasonable length.",{"category":149,"check":150,"severity":38,"summary":151},"Context","Progressive Disclosure","The skill uses separate files for schema definitions (`assets/`) and detailed guidance (`references/`), adhering to progressive disclosure principles.",{"category":149,"check":153,"severity":74,"summary":154},"Forked exploration","This skill is not an exploration or deep audit skill that would require forked context.",{"category":36,"check":156,"severity":38,"summary":157},"Usage examples","The SKILL.md provides multiple ready-to-use examples for analyzing styles, generating palettes, typography, tokens, and components, demonstrating input and expected outcome.",{"category":36,"check":159,"severity":38,"summary":160},"Edge cases","The skill handles common issues like invalid CSS syntax, color contrast failures, and unknown formats with specific error messages and suggestions.",{"category":117,"check":162,"severity":74,"summary":163},"Tool Fallback","The skill relies solely on Deno runtime and does not depend on external tools that would require fallbacks.",{"category":165,"check":166,"severity":38,"summary":167},"Safety","Halt on unexpected state","The scripts validate inputs and provide specific error messages for invalid states, halting execution gracefully.",{"category":105,"check":169,"severity":38,"summary":170},"Cross-skill coupling","The skill is self-contained and does not implicitly rely on other skills; related skills are mentioned in documentation for optional use.",1778053909931,"This skill provides specialized CLI tools for frontend development, enabling users to audit existing CSS, extract design tokens, generate color palettes and typography systems, and create framework-specific component templates. It supports various design aesthetics and output formats.","2.0.0","3.4.0","The frontend-design skill is well-documented, offers a clear value proposition, and is production-ready. It adheres to best practices in scope, security, and error handling, with good use of progressive disclosure and examples.",99,"A comprehensive toolset for generating and analyzing frontend design elements like color palettes, typography, and components.",[15,16,17,18,19,20,21,22,23,24,25,26,27,28],"global","verified",{"codeQuality":182,"collectedAt":183,"documentation":184,"maintenance":186,"security":187,"testCoverage":190},{},1778053903193,{"descriptionLength":185,"readmeSize":8},448,{},{"hasNpmPackage":188,"license":189,"smitheryVerified":188},false,"MIT",{"hasCi":188,"hasTests":188},{"updatedAt":192},1778054012696,{"githubOwner":194,"githubRepo":195,"locale":32,"slug":196,"type":197},"jwynia","agent-skills","frontend-design","skill",true,null,{"extract":201,"llm":203},{"commitSha":202,"license":189},"e02ec7e226a6e4f8419fd3b88a1d8e472d421b32",{"promptVersionExtension":173,"promptVersionScoring":174,"score":176,"targetMarket":179,"tier":180},{"repoId":205},"kd7efn3mprpa8rd8vm5hw5ebzx864fph",{"_creationTime":207,"_id":205,"identity":208,"providers":210,"workflow":221},1777995558409.897,{"githubOwner":194,"githubRepo":195,"sourceUrl":209},"https://github.com/jwynia/agent-skills",{"discover":211,"github":214},{"sources":212},[213],"skills-sh",{"closedIssues90d":8,"forks":215,"openIssues90d":216,"pushedAt":217,"readmeSize":218,"stars":219,"topics":220},10,2,1771900514000,11924,70,[],{"discoverAt":222,"extractAt":223,"githubAt":223,"updatedAt":223},1777995558409,1778053628601,{"anyEnrichmentAt":225,"extractAt":226,"githubAt":225,"llmAt":192,"updatedAt":192},1778053625386,1778053622473,[],[229,254,280,307,333,356],{"_creationTime":230,"_id":231,"community":232,"display":233,"identity":239,"providers":242,"relations":248,"workflow":250},1778053100136.2432,"k172mxtfqpq8byws1fyd2va1018674xt",{"reviewCount":8},{"description":234,"installMethods":235,"name":12,"sourceUrl":236,"tags":237},"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",[17,15,16,238,27,18,24,25],"web-components",{"githubOwner":240,"githubRepo":241,"locale":32,"slug":196,"type":197},"bytedance","deer-flow",{"extract":243,"llm":246},{"commitSha":244,"license":245},"1336872b15c25d45ebcb7c1cf72369c2bdd53187","MIT-0",{"promptVersionExtension":173,"promptVersionScoring":174,"score":247,"targetMarket":179,"tier":180},98,{"repoId":249},"kd789sm7egx1h0t1jag6zzhcq98656wv",{"anyEnrichmentAt":251,"extractAt":252,"githubAt":251,"llmAt":253,"updatedAt":253},1778053101076,1778053100136,1778053169012,{"_creationTime":255,"_id":256,"community":257,"display":258,"identity":266,"providers":269,"relations":274,"workflow":276},1778054491434.2573,"k17akerbcb9qg85yjeq5b9a0fd8672fp",{"reviewCount":8},{"description":259,"installMethods":260,"name":261,"sourceUrl":262,"tags":263},"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",[16,15,17,18,264,21,265],"animation","polish",{"githubOwner":267,"githubRepo":268,"locale":32,"slug":268,"type":197},"jakubkrehel","make-interfaces-feel-better",{"extract":270,"llm":272},{"commitSha":271,"license":189},"384562064fcdd99778fcbafd8729626fe6aab02f",{"promptVersionExtension":173,"promptVersionScoring":174,"score":273,"targetMarket":179,"tier":180},95,{"repoId":275},"kd73vz76v1h3vbkcs55q5pr89s8640jq",{"anyEnrichmentAt":277,"extractAt":278,"githubAt":277,"llmAt":279,"updatedAt":279},1778054491631,1778054491434,1778054509344,{"_creationTime":281,"_id":282,"community":283,"display":284,"identity":292,"providers":296,"relations":301,"workflow":303},1778053038365.4285,"k17bkkf71rqak85n36k4z7r13h8662kk",{"reviewCount":8},{"description":285,"installMethods":286,"name":287,"sourceUrl":288,"tags":289},"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",[18,17,16,290,291,23],"design-systems","performance",{"githubOwner":293,"githubRepo":294,"locale":32,"slug":295,"type":197},"ccheney","robust-skills","modern-css",{"extract":297,"llm":299},{"commitSha":298,"license":189},"85e5e2698d9753fb690666ccd59598e8a0b6f004",{"promptVersionExtension":173,"promptVersionScoring":174,"score":300,"targetMarket":179,"tier":180},96,{"repoId":302},"kd75qepasjckthmb72881rzdj58655g4",{"anyEnrichmentAt":304,"extractAt":305,"githubAt":304,"llmAt":306,"updatedAt":306},1778053039088,1778053038365,1778053066880,{"_creationTime":308,"_id":309,"community":310,"display":311,"identity":321,"providers":323,"relations":327,"workflow":329},1778054691785.2559,"k17ac35xsa43hhrp4547zcey758667vk",{"reviewCount":8},{"description":312,"installMethods":313,"name":314,"sourceUrl":315,"tags":316},"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",[17,16,317,24,318,319,18,23,320],"design-system","typescript","tailwind","web-development",{"githubOwner":322,"githubRepo":195,"locale":32,"slug":196,"type":197},"answerzhao",{"extract":324,"llm":326},{"commitSha":325,"license":189},"aad73edbd0d9ffbc3d6a402b6eafa6dab96d5ebb",{"promptVersionExtension":173,"promptVersionScoring":174,"score":273,"targetMarket":179,"tier":180},{"repoId":328},"kd712v2g1pay70swwj0jpv2ggs864zgh",{"anyEnrichmentAt":330,"extractAt":331,"githubAt":330,"llmAt":332,"updatedAt":332},1778054692243,1778054691785,1778054738050,{"_creationTime":334,"_id":335,"community":336,"display":337,"identity":344,"providers":346,"relations":350,"workflow":352},1778054425877.205,"k1788s1zmn7ntdbw621xdwznvx8664ht",{"reviewCount":8},{"description":338,"installMethods":339,"name":340,"sourceUrl":341,"tags":342},"Brand checking of React Elements.",{},"react-is","https://github.com/facebook/react/tree/HEAD/packages/react-is",[24,343,17,16],"javascript",{"githubOwner":345,"githubRepo":24,"locale":32,"slug":340,"type":197},"facebook",{"extract":347,"llm":349},{"commitSha":348,"license":189},"9635257c1b557acc81f95b1e974a54c752e703a2",{"promptVersionExtension":173,"promptVersionScoring":174,"score":247,"targetMarket":179,"tier":180},{"repoId":351},"kd73v9dy7vwq94hgzc7eh43b9s865rhq",{"anyEnrichmentAt":353,"extractAt":354,"githubAt":353,"llmAt":355,"updatedAt":355},1778054428301,1778054425877,1778054588390,{"_creationTime":357,"_id":358,"community":359,"display":360,"identity":369,"providers":373,"relations":377,"workflow":379},1778054663200.055,"k178cddejr2k0qx90ptb4aqw658675r6",{"reviewCount":8},{"description":361,"installMethods":362,"name":363,"sourceUrl":364,"tags":365},"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",[366,15,20,367,368,18,319],"color","extraction","generation",{"githubOwner":370,"githubRepo":371,"locale":32,"slug":372,"type":197},"onewave-ai","claude-skills","color-palette-extractor",{"extract":374,"llm":376},{"commitSha":375,"license":189},"eb3d80be32b6cafcf0d5df1c1b8a95df75838271",{"promptVersionExtension":173,"promptVersionScoring":174,"score":273,"targetMarket":179,"tier":180},{"repoId":378},"kd71e43dj0b7ak5e55pyshxp4n864t6p",{"anyEnrichmentAt":380,"extractAt":381,"githubAt":380,"llmAt":382,"updatedAt":382},1778054667983,1778054663200,1778055270278]