[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"extension-skill-arvindrk-extract-design-system-en":3,"guides-for-arvindrk-extract-design-system":358,"similar-k17crev4d2b28httehcp2fbj1n86ne6p-en":359},{"_creationTime":4,"_id":5,"children":6,"community":7,"display":9,"evaluation":15,"identity":243,"isFallback":233,"parentExtension":247,"providers":277,"relations":281,"repo":282,"tags":355,"workflow":356},1778675594920.0764,"k17crev4d2b28httehcp2fbj1n86ne6p",[],{"reviewCount":8},0,{"description":10,"installMethods":11,"name":13,"sourceUrl":14},"Extract design primitives from a public website and generate starter token files for your project.",{"claudeCode":12},"arvindrk/extract-design-system","extract-design-system","https://github.com/arvindrk/extract-design-system",{"_creationTime":16,"_id":17,"extensionId":5,"locale":18,"result":19,"trustSignals":224,"workflow":241},1778675640657.8293,"kn7arqyw4ecz6mntd7vbn3sd8n86mrb9","en",{"checks":20,"evaluatedAt":192,"extensionSummary":193,"features":194,"nonGoals":200,"promptVersionExtension":205,"promptVersionScoring":206,"purpose":207,"rationale":208,"score":209,"summary":210,"tags":211,"targetMarket":217,"tier":218,"useCases":219},[21,26,29,32,36,39,43,47,50,53,57,61,64,68,71,74,77,80,83,86,90,94,98,102,106,109,113,117,121,124,127,130,133,136,139,143,147,150,153,157,160,163,166,169,173,176,179,182,185,189],{"category":22,"check":23,"severity":24,"summary":25},"Practical Utility","Problem relevance","pass","The description clearly states the problem of extracting design primitives from a public website and generating starter token files.",{"category":22,"check":27,"severity":24,"summary":28},"Unique selling proposition","The skill offers a concrete workflow for extracting design tokens, which goes beyond basic prompting and provides value for initializing projects with design systems.",{"category":22,"check":30,"severity":24,"summary":31},"Production readiness","The skill provides a complete workflow from extraction to generating starter files and includes setup instructions for playwright, making it ready for use in real workflows.",{"category":33,"check":34,"severity":24,"summary":35},"Scope","Single responsibility principle","The extension focuses on a single domain: extracting design primitives from websites and generating token files.",{"category":33,"check":37,"severity":24,"summary":38},"Description quality","The displayed description accurately and concisely reflects the skill's functionality.",{"category":40,"check":41,"severity":24,"summary":42},"Invocation","Scoped tools","The skill exposes specific, well-defined tools for design system extraction and initialization, avoiding generalist command execution.",{"category":44,"check":45,"severity":24,"summary":46},"Documentation","Configuration & parameter reference","The SKILL.md and README provide clear instructions, including parameters like `--extract-only` and `init`, with implicit defaults readily apparent.",{"category":33,"check":48,"severity":24,"summary":49},"Tool naming","Tools like `extract_design_system` and `init_design_system` are descriptive and follow kebab-case conventions.",{"category":33,"check":51,"severity":24,"summary":52},"Minimal I/O surface","The tool's input parameters and output structures are well-defined, focusing only on necessary data for extraction and token generation.",{"category":54,"check":55,"severity":24,"summary":56},"License","License usability","The extension is licensed under the MIT license, clearly stated in the LICENSE file and README, which is a permissive open-source license.",{"category":58,"check":59,"severity":24,"summary":60},"Maintenance","Commit recency","The last commit was on May 10, 2026, which is within the last 90 days.",{"category":58,"check":62,"severity":24,"summary":63},"Dependency Management","The project uses npm and playwright, and the README mentions Node.js 20+ and the need to install playwright, indicating good dependency awareness.",{"category":65,"check":66,"severity":24,"summary":67},"Security","Secret Management","The skill does not appear to handle or expose secrets.",{"category":65,"check":69,"severity":24,"summary":70},"Injection","The skill treats third-party website content as data and includes safety boundaries to prevent executing instructions from external sources.",{"category":65,"check":72,"severity":24,"summary":73},"Transitive Supply-Chain Grenades","The skill fetches public website content but does not execute arbitrary code or follow instructions from remote sources.",{"category":65,"check":75,"severity":24,"summary":76},"Sandbox Isolation","The skill operates within the project directory and only touches generated output files, with safety boundaries preventing modifications outside the scope.",{"category":65,"check":78,"severity":24,"summary":79},"Sandbox escape primitives","No evidence of detached-process spawns or deny-retry loops in the provided scripts.",{"category":65,"check":81,"severity":24,"summary":82},"Data Exfiltration","The skill only analyzes public website content and does not submit confidential data to any third party.",{"category":65,"check":84,"severity":24,"summary":85},"Hidden Text Tricks","The bundled content and descriptions appear to be free of hidden-steering tricks or suspicious Unicode characters.",{"category":87,"check":88,"severity":24,"summary":89},"Hooks","Opaque code execution","The bundled scripts are plain and readable; no obfuscation like base64 payloads or runtime fetches are used.",{"category":91,"check":92,"severity":24,"summary":93},"Portability","Structural Assumption","The skill focuses on generating files within the project and does not make rigid assumptions about the user's existing project structure beyond the output locations.",{"category":95,"check":96,"severity":24,"summary":97},"Trust","Issues Attention","There are 0 open and 0 closed issues in the last 90 days, indicating active maintenance or a lack of recent issues.",{"category":99,"check":100,"severity":24,"summary":101},"Versioning","Release Management","The skill is available via npm and the README indicates Node.js 20+ requirement, and the commit history suggests active development, though explicit versioning in frontmatter or releases is not detailed.",{"category":103,"check":104,"severity":24,"summary":105},"Execution","Validation","The CLI and skill instructions imply validation of inputs like URLs and that output is structured, fitting the task.",{"category":65,"check":107,"severity":24,"summary":108},"Unguarded Destructive Operations","The skill primarily generates files and analyzes public data; modifications to existing app code require explicit confirmation.",{"category":110,"check":111,"severity":24,"summary":112},"Code Execution","Error Handling","The SKILL.md and workflow suggest structured handling of inputs and outputs, implying that errors would be reported meaningfully.",{"category":110,"check":114,"severity":115,"summary":116},"Logging","not_applicable","The skill is primarily analytical and focused on output generation rather than destructive actions or sensitive outbound calls, making detailed audit logging less critical.",{"category":118,"check":119,"severity":24,"summary":120},"Compliance","GDPR","The skill only processes public website data and does not handle personal data, thus avoiding GDPR concerns.",{"category":118,"check":122,"severity":24,"summary":123},"Target market","The extension operates on public websites globally and has no regional or jurisdictional limitations.",{"category":91,"check":125,"severity":24,"summary":126},"Runtime stability","The skill has clear prerequisites (Node.js 20+, playwright) and its CLI nature suggests POSIX compatibility.",{"category":44,"check":128,"severity":24,"summary":129},"README","The README is comprehensive, clearly stating the extension's purpose, capabilities, and usage.",{"category":33,"check":131,"severity":24,"summary":132},"Tool surface size","The skill exposes a manageable number of tools: `extract_design_system`, `init_design_system`, and `get_tokens`.",{"category":40,"check":134,"severity":24,"summary":135},"Overlapping near-synonym tools","The tools provided (`extract_design_system`, `init_design_system`, `get_tokens`) have distinct and non-overlapping functionalities.",{"category":44,"check":137,"severity":24,"summary":138},"Phantom features","All advertised features, such as token extraction and file generation, have corresponding implementations in the CLI and skill instructions.",{"category":140,"check":141,"severity":24,"summary":142},"Install","Installation instruction","Clear installation instructions via `npx skills add` are provided in the README, along with example usage prompts.",{"category":144,"check":145,"severity":24,"summary":146},"Errors","Actionable error messages","The documentation and workflow descriptions imply that errors related to extraction or file generation would be clear and provide guidance.",{"category":103,"check":148,"severity":24,"summary":149},"Pinned dependencies","The project relies on npm and specifies Node.js 20+, and the use of playwright implies specific versions are managed, suggesting pinned dependencies.",{"category":33,"check":151,"severity":24,"summary":152},"Dry-run preview","The `--extract-only` flag provides a preview of the extraction without generating starter files, and the skill emphasizes asking for confirmation before modifying existing code.",{"category":154,"check":155,"severity":115,"summary":156},"Protocol","Idempotent retry & timeouts","The skill operates on extracting public data and generating files locally; it does not involve remote state-changing operations or require complex retry logic.",{"category":118,"check":158,"severity":24,"summary":159},"Telemetry opt-in","There is no mention of telemetry collection; the focus is on local file generation and analysis, implying no opt-out telemetry.",{"category":40,"check":161,"severity":24,"summary":162},"Precise Purpose","The purpose is precisely defined: extract design primitives from a public website and generate starter token files, with clear use cases and boundaries outlined.",{"category":40,"check":164,"severity":24,"summary":165},"Concise Frontmatter","The frontmatter is concise and effectively summarizes the core capability of extracting design tokens.",{"category":44,"check":167,"severity":24,"summary":168},"Concise Body","The SKILL.md is concise, outlining the workflow and delegating detailed references to separate files.",{"category":170,"check":171,"severity":24,"summary":172},"Context","Progressive Disclosure","The SKILL.md outlines the workflow and links to `references/workflow.md` and `references/outputs.md` for deeper material.",{"category":170,"check":174,"severity":115,"summary":175},"Forked exploration","The skill's workflow is not explorative in a way that would flood the main conversation; it's a focused extraction task.",{"category":22,"check":177,"severity":24,"summary":178},"Usage examples","The README provides multiple clear, ready-to-use example prompts demonstrating how to invoke the skill for various extraction scenarios.",{"category":22,"check":180,"severity":24,"summary":181},"Edge cases","The SKILL.md documents limitations such as dynamic sites yielding incomplete output and the need to review extracted data, along with safety boundaries.",{"category":110,"check":183,"severity":115,"summary":184},"Tool Fallback","The skill does not rely on an external MCP server; it bundles its own CLI implementation.",{"category":186,"check":187,"severity":24,"summary":188},"Safety","Halt on unexpected state","The SKILL.md lists safety boundaries including not modifying project files without confirmation and treating extracted output as untrusted, implying a halt on unexpected states.",{"category":91,"check":190,"severity":24,"summary":191},"Cross-skill coupling","The skill is self-contained and does not rely on other skills being loaded in the same session.",1778675640516,"This skill extracts design primitives such as colors, typography, spacing, border radius, and shadows from public websites. It generates starter `tokens.json` and `tokens.css` files for local project use, along with raw and normalized JSON outputs for debugging.",[195,196,197,198,199],"Extracts colors, typography, spacing, radius, and shadows","Generates starter `tokens.json` and `tokens.css` files","Provides raw and normalized JSON outputs","Requires explicit confirmation before modifying existing project files","Analyzes public websites only",[201,202,203,204],"Claiming the extracted system is complete or pixel-perfect","Inferring components or semantic tokens not explicitly extracted","Treating extracted output as authoritative without review","Automatic broad app rewrites or framework config patching","3.0.0","4.4.0","To provide developers with a quick way to reverse-engineer design tokens from any public website and generate foundational style files for their projects.","The extension demonstrates high quality across all evaluated aspects, including clear documentation, robust safety features, and a well-defined scope. Its workflow is production-ready and handles potential issues gracefully.",99,"Excellent skill for extracting design tokens from websites.",[212,213,214,215,216],"design-tokens","css","web-development","cli","javascript","global","verified",[220,221,222,223],"Initialize a new project with design tokens based on an existing website's style","Analyze a competitor's or inspiration site's design primitives","Generate foundational style assets for rapid prototyping","Establish a repeatable workflow for design token extraction",{"codeQuality":225,"collectedAt":227,"documentation":228,"maintenance":231,"popularity":236,"security":238,"testCoverage":240},{"hasLockfile":226},true,1778675618312,{"descriptionLength":229,"readmeSize":230},98,8133,{"closedIssues90d":8,"forks":232,"hasChangelog":233,"openIssues90d":8,"pushedAt":234,"stars":235},5,false,1778372685000,36,{"npmDownloads":237},167868,{"hasNpmPackage":226,"license":239,"smitheryVerified":233},"MIT",{"hasCi":226,"hasTests":226},{"updatedAt":242},1778675640657,{"basePath":244,"githubOwner":245,"githubRepo":13,"locale":18,"slug":13,"type":246},"skills/extract-design-system","arvindrk","skill",{"_creationTime":248,"_id":249,"community":250,"display":251,"identity":254,"parentExtension":257,"providers":258,"relations":270,"tags":272,"workflow":273},1778675594920.0762,"k1762merk28sjnss4c76tj3wg186mqq5",{"reviewCount":8},{"description":252,"installMethods":253,"name":13,"sourceUrl":14},"Extract design primitives from public websites into starter token files.",{"claudeCode":13},{"basePath":255,"githubOwner":245,"githubRepo":13,"locale":18,"slug":13,"type":256},"","plugin",null,{"evaluate":259,"extract":265},{"promptVersionExtension":205,"promptVersionScoring":206,"score":260,"tags":261,"targetMarket":217,"tier":218},96,[212,262,213,263,215,264],"website-scraping","json","mcp",{"commitSha":266,"plugin":267},"HEAD",{"mcpCount":8,"provider":268,"skillCount":269},"classify",1,{"repoId":271},"kd70eqr3jg8v1kx2h8ctrm3tp186n6w0",[215,213,212,263,264,262],{"evaluatedAt":274,"extractAt":275,"updatedAt":276},1778675618062,1778675594920,1778675715285,{"evaluate":278,"extract":280},{"promptVersionExtension":205,"promptVersionScoring":206,"score":209,"tags":279,"targetMarket":217,"tier":218},[212,213,214,215,216],{"commitSha":266},{"parentExtensionId":249,"repoId":271},{"_creationTime":283,"_id":271,"identity":284,"providers":285,"workflow":350},1778675588522.468,{"githubOwner":245,"githubRepo":13,"sourceUrl":14},{"classify":286,"discover":326,"extract":329,"github":330,"npm":349},{"commitSha":266,"extensions":287},[288,304,314],{"basePath":255,"description":252,"displayName":13,"installMethods":289,"rationale":290,"selectedPaths":291,"source":303,"sourceLanguage":18,"type":256},{"claudeCode":13},"plugin manifest at .codex-plugin/plugin.json",[292,295,297,300],{"path":293,"priority":294},".codex-plugin/plugin.json","mandatory",{"path":296,"priority":294},"README.md",{"path":298,"priority":299},"LICENSE","high",{"path":301,"priority":302},"skills/extract-design-system/SKILL.md","medium","rule",{"basePath":244,"description":10,"displayName":13,"installMethods":305,"rationale":306,"selectedPaths":307,"source":303,"sourceLanguage":18,"type":246},{"claudeCode":12},"SKILL.md frontmatter at skills/extract-design-system/SKILL.md",[308,310,312],{"path":309,"priority":294},"SKILL.md",{"path":311,"priority":302},"references/outputs.md",{"path":313,"priority":302},"references/workflow.md",{"basePath":255,"description":315,"displayName":13,"installMethods":316,"license":239,"rationale":317,"selectedPaths":318,"source":303,"sourceLanguage":18,"type":264},"Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.",{"npm":13},"package.json @modelcontextprotocol/sdk dep + bin at package.json",[319,321,322,323],{"path":320,"priority":294},"package.json",{"path":296,"priority":294},{"path":298,"priority":299},{"path":324,"priority":325},"src/mcp.ts","low",{"sources":327},[328],"manual",{"npmPackage":13},{"closedIssues90d":8,"description":315,"forks":232,"homepage":331,"license":239,"openIssues90d":8,"pushedAt":234,"readmeSize":230,"stars":235,"topics":332},"https://www.npmjs.com/package/extract-design-system",[333,334,215,335,336,337,338,339,340,341,212,342,343,264,344,345,346,213,347,348],"agent-skills","automation","cursor-skills","design-system","skills-sh","token-extractor","claude-code-skills","claude-skills","design-ops","developer-experience","frontend","playwright","ui-audit","brand-audit","design-md","nodejs",{"downloads":237},{"classifiedAt":351,"discoverAt":352,"extractAt":353,"githubAt":353,"npmAt":354,"updatedAt":351},1778675594493,1778675588522,1778675590640,1778675592702,[215,213,212,216,214],{"evaluatedAt":242,"extractAt":275,"updatedAt":357},1778675715462,[],[360,391,412,433,461,488],{"_creationTime":361,"_id":362,"community":363,"display":364,"identity":370,"providers":375,"relations":384,"tags":387,"workflow":388},1778668208695.1423,"k17f06zww13em2avbhz248f60d86m8fc",{"reviewCount":8},{"description":365,"installMethods":366,"name":368,"sourceUrl":369},"Color-only audit to extract, evaluate, and recommend improvements for the project's color system",{"claudeCode":367},"Aboudjem/ui-ux-suite","Color Audit","https://github.com/Aboudjem/ui-ux-suite",{"basePath":371,"githubOwner":372,"githubRepo":373,"locale":18,"slug":374,"type":246},"skills/color-audit","Aboudjem","ui-ux-suite","color-audit",{"evaluate":376,"extract":383},{"promptVersionExtension":205,"promptVersionScoring":206,"score":377,"tags":378,"targetMarket":217,"tier":218},100,[379,380,381,382,213,216,215],"design","ui","ux","accessibility",{"commitSha":266,"license":239},{"parentExtensionId":385,"repoId":386},"k178zeec8jajqdrczrynw6x3fx86mm8h","kd75532596tdmk72j9k55b0qqn86n5et",[382,215,213,379,216,380,381],{"evaluatedAt":389,"extractAt":390,"updatedAt":389},1778669948021,1778668208695,{"_creationTime":392,"_id":393,"community":394,"display":395,"identity":399,"providers":402,"relations":408,"tags":409,"workflow":410},1778668208695.1453,"k176sf1kx7rrk3aq3ywq0dfdrs86mwp1",{"reviewCount":8},{"description":396,"installMethods":397,"name":398,"sourceUrl":369},"Typography-only audit covering font selection, type scale, readability, hierarchy, performance",{"claudeCode":367},"Type Audit",{"basePath":400,"githubOwner":372,"githubRepo":373,"locale":18,"slug":401,"type":246},"skills/type-audit","type-audit",{"evaluate":403,"extract":407},{"promptVersionExtension":205,"promptVersionScoring":206,"score":377,"tags":404,"targetMarket":217,"tier":218},[379,381,405,406,213,214,343],"typography","audit",{"commitSha":266,"license":239},{"parentExtensionId":385,"repoId":386},[406,213,379,343,405,381,214],{"evaluatedAt":411,"extractAt":390,"updatedAt":411},1778670163933,{"_creationTime":413,"_id":414,"community":415,"display":416,"identity":420,"providers":423,"relations":429,"tags":430,"workflow":431},1778668208695.1443,"k1756c58e7z3k8dc64z3v01hfx86n77f",{"reviewCount":8},{"description":417,"installMethods":418,"name":419,"sourceUrl":369},"Layout and spacing audit covering grid, spacing consistency, density, responsive behavior",{"claudeCode":367},"Layout Audit",{"basePath":421,"githubOwner":372,"githubRepo":373,"locale":18,"slug":422,"type":246},"skills/layout-audit","layout-audit",{"evaluate":424,"extract":428},{"promptVersionExtension":205,"promptVersionScoring":206,"score":377,"tags":425,"targetMarket":217,"tier":218},[426,427,213,216,343],"ui-ux","design-audit",{"commitSha":266,"license":239},{"parentExtensionId":385,"repoId":386},[213,427,343,216,426],{"evaluatedAt":432,"extractAt":390,"updatedAt":432},1778670082566,{"_creationTime":434,"_id":435,"community":436,"display":437,"identity":443,"providers":447,"relations":454,"tags":457,"workflow":458},1778690831986.3765,"k179x509d3fng6rhce5txz8grx86m5mw",{"reviewCount":8},{"description":438,"installMethods":439,"name":441,"sourceUrl":442},"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.",{"claudeCode":440},"hyf0/vue-skills","vue-router-best-practices","https://github.com/hyf0/vue-skills",{"basePath":444,"githubOwner":445,"githubRepo":446,"locale":18,"slug":441,"type":246},"skills/vue-router-best-practices","hyf0","vue-skills",{"evaluate":448,"extract":453},{"promptVersionExtension":205,"promptVersionScoring":206,"score":377,"tags":449,"targetMarket":217,"tier":218},[450,451,216,452,214],"vue","vue-router","typescript",{"commitSha":266},{"parentExtensionId":455,"repoId":456},"k17fvvpt61wrah7aepwqhgjp4d86n8jx","kd7a1a0bdc2ez150x3razht61n86m6a8",[216,452,450,451,214],{"evaluatedAt":459,"extractAt":460,"updatedAt":459},1778691174475,1778690831986,{"_creationTime":462,"_id":463,"community":464,"display":465,"identity":471,"providers":475,"relations":482,"tags":484,"workflow":485},1778685991755.7456,"k17djff3pz3wam5kpz7pkg92h586menn",{"reviewCount":8},{"description":466,"installMethods":467,"name":469,"sourceUrl":470},"Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.",{"claudeCode":468},"davila7/claude-code-templates","develop-web-game","https://github.com/davila7/claude-code-templates",{"basePath":472,"githubOwner":473,"githubRepo":474,"locale":18,"slug":469,"type":246},"cli-tool/components/skills/creative-design/develop-web-game","davila7","claude-code-templates",{"evaluate":476,"extract":481},{"promptVersionExtension":205,"promptVersionScoring":206,"score":377,"tags":477,"targetMarket":217,"tier":218},[214,478,216,479,344,480,334],"game-development","html","testing",{"commitSha":266},{"repoId":483},"kd71fzn4s7r0269fkw47wt670n86ndz0",[334,478,479,216,344,480,214],{"evaluatedAt":486,"extractAt":487,"updatedAt":486},1778690648090,1778685991755,{"_creationTime":489,"_id":490,"community":491,"display":492,"identity":498,"providers":502,"relations":510,"tags":513,"workflow":514},1778675056600.2688,"k17axft429eg7cgac59w07hp9n86n548",{"reviewCount":8},{"description":493,"installMethods":494,"name":496,"sourceUrl":497},"UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.",{"claudeCode":495},"alirezarezvani/claude-skills","UI Design System Toolkit","https://github.com/alirezarezvani/claude-skills",{"basePath":499,"githubOwner":500,"githubRepo":340,"locale":18,"slug":501,"type":246},"product-team/skills/ui-design-system","alirezarezvani","ui-design-system",{"evaluate":503,"extract":509},{"promptVersionExtension":205,"promptVersionScoring":206,"score":209,"tags":504,"targetMarket":217,"tier":218},[212,505,213,506,216,507,508],"ui-design","scss","figma","tailwind",{"commitSha":266,"license":239},{"parentExtensionId":511,"repoId":512},"k17104ysr0smp7vvp26mnn1fzh86nynm","kd7ff9s1w43mfyy1n7hf87816186m6px",[213,212,507,216,506,508,505],{"evaluatedAt":515,"extractAt":516,"updatedAt":515},1778685759619,1778675056600]