[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70M5ENE9FH237CYB3C2GKPZ":3,"skill-same:01M70M5ENE9FH237CYB3C2GKPZ":68},{"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":18,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":50,"ownerHtmlUrl":51,"ownerBlogUrl":52,"ownerDescription":53,"updatedAt":54,"install":55,"resources":67},"01M70M5ENE9FH237CYB3C2GKPZ","extract",null,"Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fextract\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"reusable","library","design tokens","systematic","ui patterns","build","component","create","consolidate","components","when","use","component library","design","reuse","true","tokens","system","for","2026-11-10 10:12:30",false,"---\nname: extract\ndescription: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.\nuser-invocable: true\nargument-hint: \"[target]\"\n---\n\nIdentify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.\n\n## Discover\n\nAnalyze the target area to identify extraction opportunities:\n\n1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for \"design system\", \"ui\", \"components\", etc.). Understand its structure:\n   - Component organization and naming conventions\n   - Design token structure (if any)\n   - Documentation patterns\n   - Import\u002Fexport conventions\n   \n   **CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.\n\n2. **Identify patterns**: Look for:\n   - **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)\n   - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens\n   - **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)\n   - **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing\n\n3. **Assess value**: Not everything should be extracted. Consider:\n   - Is this used 3+ times, or likely to be reused?\n   - Would systematizing this improve consistency?\n   - Is this a general pattern or context-specific?\n   - What's the maintenance cost vs benefit?\n\n## Plan Extraction\n\nCreate a systematic extraction plan:\n\n- **Components to extract**: Which UI elements become reusable components?\n- **Tokens to create**: Which hard-coded values become design tokens?\n- **Variants to support**: What variations does each component need?\n- **Naming conventions**: Component names, token names, prop names that match existing patterns\n- **Migration path**: How to refactor existing uses to consume the new shared versions\n\n**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.\n\n## Extract & Enrich\n\nBuild improved, reusable versions:\n\n- **Components**: Create well-designed components with:\n  - Clear props API with sensible defaults\n  - Proper variants for different use cases\n  - Accessibility built in (ARIA, keyboard navigation, focus management)\n  - Documentation and usage examples\n  \n- **Design tokens**: Create tokens with:\n  - Clear naming (primitive vs semantic)\n  - Proper hierarchy and organization\n  - Documentation of when to use each token\n  \n- **Patterns**: Document patterns with:\n  - When to use this pattern\n  - Code examples\n  - Variations and combinations\n\n**NEVER**:\n- Extract one-off, context-specific implementations without generalization\n- Create components so generic they're useless\n- Extract without considering existing design system conventions\n- Skip proper TypeScript types or prop documentation\n- Create tokens for every single value (tokens should have semantic meaning)\n\n## Migrate\n\nReplace existing uses with the new shared versions:\n\n- **Find all instances**: Search for the patterns you've extracted\n- **Replace systematically**: Update each use to consume the shared version\n- **Test thoroughly**: Ensure visual and functional parity\n- **Delete dead code**: Remove the old implementations\n\n## Document\n\nUpdate design system documentation:\n\n- Add new components to the component library\n- Document token usage and values\n- Add examples and guidelines\n- Update any Storybook or component catalog\n\nRemember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.","Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.\n\n## Discover\n\nAnalyze the target area to identify extraction opportunities:\n\n1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for \"design system\", \"ui\", \"components\", etc.). Understand its structure:\n   - Component organization and naming conventions\n   - Design token structure (if any)\n   - Documentation patterns\n   - Import\u002Fexport conventions\n   \n   **CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.\n\n2. **Identify patterns**: Look for:\n   - **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)\n   - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens\n   - **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)\n   - **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing\n\n3. **Assess value**: Not everything should be extracted. Consider:\n   - Is this used 3+ times, or likely to be reused?\n   - Would systematizing this improve consistency?\n   - Is this a general pattern or context-specific?\n   - What's the maintenance cost vs benefit?\n\n## Plan Extraction\n\nCreate a systematic extraction plan:\n\n- **Components to extract**: Which UI elements become reusable components?\n- **Tokens to create**: Which hard-coded values become design tokens?\n- **Variants to support**: What variations does each component need?\n- **Naming conventions**: Component names, token names, prop names that match existing patterns\n- **Migration path**: How to refactor existing uses to consume the new shared versions\n\n**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.\n\n## Extract & Enrich\n\nBuild improved, reusable versions:\n\n- **Components**: Create well-designed components with:\n  - Clear props API with sensible defaults\n  - Proper variants for different use cases\n  - Accessibility built in (ARIA, keyboard navigation, focus management)\n  - Documentation and usage examples\n  \n- **Design tokens**: Create tokens with:\n  - Clear naming (primitive vs semantic)\n  - Proper hierarchy and organization\n  - Documentation of when to use each token\n  \n- **Patterns**: Document patterns with:\n  - When to use this pattern\n  - Code examples\n  - Variations and combinations\n\n**NEVER**:\n- Extract one-off, context-specific implementations without generalization\n- Create components so generic they're useless\n- Extract without considering existing design system conventions\n- Skip proper TypeScript types or prop documentation\n- Create tokens for every single value (tokens should have semantic meaning)\n\n## Migrate\n\nReplace existing uses with the new shared versions:\n\n- **Find all instances**: Search for the patterns you've extracted\n- **Replace systematically**: Update each use to consume the shared version\n- **Test thoroughly**: Ensure visual and functional parity\n- **Delete dead code**: Remove the old implementations\n\n## Document\n\nUpdate design system documentation:\n\n- Add new components to the component library\n- Document token usage and values\n- Add examples and guidelines\n- Update any Storybook or component catalog\n\nRemember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.",{"name":5,"description":7,"argument-hint":43,"user-invocable":44},"[target]",true,"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002Fextract",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":44},[57,60,63],{"tool":58,"command":59},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill extract",{"tool":61,"command":62},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill extract",{"tool":64,"command":65},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill extract","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fextract\u002FSKILL.md",[],[69,88,122,146,168,188],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":80,"publishedAt":38},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[75],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",[81,82,83,84,85,86,87],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":102,"publishedAt":38},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[94,97],{"categoryNo":95,"categoryName":96,"taxonomyType":78,"taxonomyTypeDesc":79},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":98,"categoryName":99,"taxonomyType":100,"taxonomyTypeDesc":101},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[90,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":132,"publishedAt":38},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[128,129],{"categoryNo":95,"categoryName":96,"taxonomyType":78,"taxonomyTypeDesc":79},{"categoryNo":130,"categoryName":131,"taxonomyType":100,"taxonomyTypeDesc":101},"01JBSEEDCAT000000000000036","内容创作者",[124,133,134,135,136,137,138,139,111,140,26,141,29,30,142,143,144,145],"user","content","视频","creator","generate video","videos","launch","video content","upload","auto","types","Video","创作",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":38},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[152],{"categoryNo":95,"categoryName":96,"taxonomyType":78,"taxonomyTypeDesc":79},[154,155,124,156,157,144,158,159,160,161,162,163,164,165,109,166,29,30,103,167],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":178,"publishedAt":38},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[174,175,176,177],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},{"categoryNo":95,"categoryName":96,"taxonomyType":78,"taxonomyTypeDesc":79},{"categoryNo":98,"categoryName":99,"taxonomyType":100,"taxonomyTypeDesc":101},{"categoryNo":130,"categoryName":131,"taxonomyType":100,"taxonomyTypeDesc":101},[179,86,180,181,182,183,119,29,30,184,185,186,187],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":196,"publishedAt":38},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[194,195],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},{"categoryNo":130,"categoryName":131,"taxonomyType":100,"taxonomyTypeDesc":101},[197,86,198,107,199,185,29,180,183,30,186],"Rules","writing rules","project rules"]