[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77XTAMNBE26DPNTTY0HDH81":3,"skill-same:01M77XTAMNBE26DPNTTY0HDH81":49},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":31,"ownerHtmlUrl":32,"ownerBlogUrl":6,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M77XTAMNBE26DPNTTY0HDH81","visual-dna",null,"Extract visual identity into reusable Design DNA JSON, then apply it to generate faithful UI from references.","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Fv\u002Fvisual-dna\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: visual-dna\ndescription: \"Extract visual identity into reusable Design DNA JSON, then apply it to generate faithful UI from references.\"\nmetadata:\n  version: \"0.2.2\"\n---\n# Design DNA\n\nExtract visual identity from any reference. Apply it to any content. Reuse it everywhere.\n\nThree phases — use any combination:\n\n1. **Analyze** — screenshots, images, or URLs → Design DNA JSON\n2. **Generate** — Design DNA JSON + your content → faithful implementation\n3. **Structure** — show the full schema when asked\n\nRead `references\u002Fschema.md` for the full field list.\nRead `references\u002Fgeneration-guide.md` for generation rules.\n\n\n## Activation Boundary\n\nUse this skill only when the user explicitly asks for visual DNA extraction, style analysis, brand\u002Fdesign-system extraction, or generation from an existing Design DNA JSON. Do not activate it for generic UI tasks unless the user supplied references or asked to match a reference.\n\nWhen URLs or assets are supplied, use the references the user provided or assets already present in the project. Report which references were used. Do not try to judge ownership, sensitivity, or permission to analyze a reference; that is a human decision. Ask only when the reference itself is ambiguous, unavailable, or requires credentials you do not have.\n\n## The Three Dimensions\n\n| Dimension | What it captures |\n|-----------|-----------------|\n| **design_system** | Measurable tokens: colour, typography, spacing, layout, shape, elevation, motion, components |\n| **design_style** | Qualitative feel: mood, visual language, composition, brand voice, interaction personality |\n| **visual_effects** | Special rendering: Canvas, WebGL, particles, shaders, scroll effects, SVG animation |\n\n## Phase 1: Analyze\n\nWhen the user provides screenshots, images, or URLs:\n\n1. Read `references\u002Fschema.md` — know every field before starting\n2. For each reference: analyze or fetch and analyze\n3. Fill **every field** — no empty strings, no guesswork flagged as guesswork\n4. When references conflict: note the dominant pattern, mention variants\n5. Output complete Design DNA JSON\n6. Ask: \"Want to adjust any values before generating?\"\n\n**Key extraction rules:**\n- Colour: sample dominant palette by area. Primary = largest area, accent = CTA usage\n- Typography: identify font class visually (geometric, humanist, serif). Estimate scale ratios from heading\u002Fbody relationships\n- Spacing: assess density by element proximity. Measure section rhythm consistency\n- Visual effects: scan for Canvas, WebGL, Three.js, GSAP, particles, shaders, custom cursors. Set `enabled: false` for anything not present\n\n## Phase 2: Generate\n\nWhen the user provides DNA JSON + content:\n\n1. Read `references\u002Fgeneration-guide.md`\n2. Build CSS custom properties from `design_system` tokens\n3. Apply `design_style` qualitative fields to subjective decisions\n4. Implement `visual_effects` at the appropriate tech tier (CSS → Canvas → WebGL)\n5. Fetch real assets from original URLs when possible — don't recreate\n6. Default output: self-contained HTML with inline CSS\u002FJS\n\n**Priority order:**\n1. Colour & typography (80% of visual identity)\n2. Spacing & layout\n3. Shape & elevation\n4. Design style qualitative fields\n5. Visual effects\n6. Motion & interaction\n\n**Quality check before delivering:**\n- Does it actually look like the reference?\n- Are all design tokens applied (not just some)?\n- Is the output self-contained (no external dependencies that could break)?\n- Do visual effects degrade gracefully without JS?\n\n## The DNA JSON as an Asset\n\nThe extracted JSON is the key output — not just the generated UI. Once extracted:\n- Commit it to version control\n- Share it across teams and projects\n- Feed it to any agent for any future generation\n- Refine it iteratively\n\nThis turns \"make it look like that site\" into a precise, reproducible spec.\n\n## Pair with no-slop-ui\n\nWhen generating UI from DNA:\n- Apply `no-slop-ui` rules alongside DNA tokens\n- DNA tells you WHAT the design is\n- `no-slop-ui` tells you what NOT to do (no AI defaults slipping in)\n- Together: faithful to reference, clean execution\n","# Design DNA\n\nExtract visual identity from any reference. Apply it to any content. Reuse it everywhere.\n\nThree phases — use any combination:\n\n1. **Analyze** — screenshots, images, or URLs → Design DNA JSON\n2. **Generate** — Design DNA JSON + your content → faithful implementation\n3. **Structure** — show the full schema when asked\n\nRead `references\u002Fschema.md` for the full field list.\nRead `references\u002Fgeneration-guide.md` for generation rules.\n\n\n## Activation Boundary\n\nUse this skill only when the user explicitly asks for visual DNA extraction, style analysis, brand\u002Fdesign-system extraction, or generation from an existing Design DNA JSON. Do not activate it for generic UI tasks unless the user supplied references or asked to match a reference.\n\nWhen URLs or assets are supplied, use the references the user provided or assets already present in the project. Report which references were used. Do not try to judge ownership, sensitivity, or permission to analyze a reference; that is a human decision. Ask only when the reference itself is ambiguous, unavailable, or requires credentials you do not have.\n\n## The Three Dimensions\n\n| Dimension | What it captures |\n|-----------|-----------------|\n| **design_system** | Measurable tokens: colour, typography, spacing, layout, shape, elevation, motion, components |\n| **design_style** | Qualitative feel: mood, visual language, composition, brand voice, interaction personality |\n| **visual_effects** | Special rendering: Canvas, WebGL, particles, shaders, scroll effects, SVG animation |\n\n## Phase 1: Analyze\n\nWhen the user provides screenshots, images, or URLs:\n\n1. Read `references\u002Fschema.md` — know every field before starting\n2. For each reference: analyze or fetch and analyze\n3. Fill **every field** — no empty strings, no guesswork flagged as guesswork\n4. When references conflict: note the dominant pattern, mention variants\n5. Output complete Design DNA JSON\n6. Ask: \"Want to adjust any values before generating?\"\n\n**Key extraction rules:**\n- Colour: sample dominant palette by area. Primary = largest area, accent = CTA usage\n- Typography: identify font class visually (geometric, humanist, serif). Estimate scale ratios from heading\u002Fbody relationships\n- Spacing: assess density by element proximity. Measure section rhythm consistency\n- Visual effects: scan for Canvas, WebGL, Three.js, GSAP, particles, shaders, custom cursors. Set `enabled: false` for anything not present\n\n## Phase 2: Generate\n\nWhen the user provides DNA JSON + content:\n\n1. Read `references\u002Fgeneration-guide.md`\n2. Build CSS custom properties from `design_system` tokens\n3. Apply `design_style` qualitative fields to subjective decisions\n4. Implement `visual_effects` at the appropriate tech tier (CSS → Canvas → WebGL)\n5. Fetch real assets from original URLs when possible — don't recreate\n6. Default output: self-contained HTML with inline CSS\u002FJS\n\n**Priority order:**\n1. Colour & typography (80% of visual identity)\n2. Spacing & layout\n3. Shape & elevation\n4. Design style qualitative fields\n5. Visual effects\n6. Motion & interaction\n\n**Quality check before delivering:**\n- Does it actually look like the reference?\n- Are all design tokens applied (not just some)?\n- Is the output self-contained (no external dependencies that could break)?\n- Do visual effects degrade gracefully without JS?\n\n## The DNA JSON as an Asset\n\nThe extracted JSON is the key output — not just the generated UI. Once extracted:\n- Commit it to version control\n- Share it across teams and projects\n- Feed it to any agent for any future generation\n- Refine it iteratively\n\nThis turns \"make it look like that site\" into a precise, reproducible spec.\n\n## Pair with no-slop-ui\n\nWhen generating UI from DNA:\n- Apply `no-slop-ui` rules alongside DNA tokens\n- DNA tells you WHAT the design is\n- `no-slop-ui` tells you what NOT to do (no AI defaults slipping in)\n- Together: faithful to reference, clean execution\n",{"name":5,"metadata":24,"description":7},{"version":25},"0.2.2","master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fclawhub\u002Fv\u002Fvisual-dna",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill visual-dna",{"tool":41,"command":42},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill visual-dna",{"tool":44,"command":45},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill visual-dna","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Fv\u002Fvisual-dna\u002FSKILL.md",true,[],[50,57,64,71,78,85],{"skillNo":51,"name":52,"nameZh":6,"description":53,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":54,"categories":55,"keywords":56,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":63,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]