{"id":"0d72c6c9-a6d3-4b4f-80d9-2663a2031a85","slug":"clawhub-akdira-design-taste-frontend-condensed","name":"Design Taste Frontend","description":"Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces tha...","canonicalUrl":"https://www.xpersona.co/agent/clawhub-akdira-design-taste-frontend-condensed","sourceUrl":"https://clawhub.ai/akdira/design-taste-frontend-condensed","homepage":"https://clawhub.ai/akdira/skills/design-taste-frontend-condensed","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/akdira/skills/design-taste-frontend-condensed"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"1.0.0","freshnessAt":"2026-10-10T03:09:58.913Z","freshnessLabel":"Oct 10, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 10, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"1.0.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/akdira/skills/design-taste-frontend-condensed","sourceUrl":"https://clawhub.ai/akdira/skills/design-taste-frontend-condensed","sourceType":"profile","confidence":"medium","observedAt":"2026-10-10T03:09:58.913Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-akdira-design-taste-frontend-condensed/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-akdira-design-taste-frontend-condensed/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-10T03:09:58.913Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"1.7K downloads","href":"https://clawhub.ai/akdira/design-taste-frontend-condensed","sourceUrl":"https://clawhub.ai/akdira/design-taste-frontend-condensed","sourceType":"profile","confidence":"medium","observedAt":"2026-10-10T03:09:58.913Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"1.0.0","href":"https://clawhub.ai/akdira/design-taste-frontend-condensed","sourceUrl":"https://clawhub.ai/akdira/design-taste-frontend-condensed","sourceType":"release","confidence":"medium","observedAt":"2026-06-17T18:32:20.158Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-akdira-design-taste-frontend-condensed/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-akdira-design-taste-frontend-condensed/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["1.7K downloads","Trust evidence available"],"agentCard":{"name":"Design Taste Frontend","description":"Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces tha...","source":"CLAWHUB","sourceId":"clawhub:s171w2df9actg46d1j6bxdcp5188vyk0:design-taste-frontend-condensed","homepage":"https://clawhub.ai/akdira/skills/design-taste-frontend-condensed","repository":"https://clawhub.ai/akdira/design-taste-frontend-condensed","documentation":"https://www.xpersona.co/agent/clawhub-akdira-design-taste-frontend-condensed","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"tsx","snippet":"\"use client\";\nimport { useRef, useEffect } from \"react\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { useReducedMotion } from \"motion/react\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport function StickyStack({ cards }: { cards: React.ReactNode[] }) {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n\n  useEffect(() => {\n    if (reduce || !ref.current) return;\n    const ctx = gsap.context(() => {\n      const cardEls = gsap.utils.toArray<HTMLElement>(\".stack-card\");\n      cardEls.forEach((card, i) => {\n        if (i === cardEls.length - 1) return;\n        ScrollTrigger.create({\n          trigger: card,\n          start: \"top top\",                              // pin at viewport top\n          endTrigger: cardEls[cardEls.length - 1],\n          end: \"top top\",\n          pin: true,\n          pinSpacing: false,\n        });\n        gsap.to(card, {\n          scale: 0.92,\n          opacity: 0.55,\n          ease: \"none\",\n          scrollTrigger: {\n            trigger: cardEls[i + 1],\n            start: \"top bottom\",\n            end: \"top top\",\n            scrub: true,\n          },\n        });\n      });\n    }, ref);\n    return () => ctx.revert();\n  }, [reduce]);\n\n  return (\n    <div ref={ref} className=\"relative\">\n      {cards.map((card, i) => (\n        <div\n          key={i}\n          className=\"stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center\"\n        >\n          {card}\n        </div>\n      ))}\n    </div>\n  );\n}"},{"kind":"example","language":"tsx","snippet":"\"use client\";\nimport { useRef, useEffect } from \"react\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { useReducedMotion } from \"motion/react\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport function HorizontalPan({ children }: { children: React.ReactNode }) {\n  const wrap = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n\n  useEffect(() => {\n    if (reduce || !wrap.current || !track.current) return;\n    const ctx = gsap.context(() => {\n      const distance = track.current!.scrollWidth - window.innerWidth;\n      gsap.to(track.current, {\n        x: -distance,\n        ease: \"none\",\n        scrollTrigger: {\n          trigger: wrap.current,\n          start: \"top top\",                              // pin starts when section top hits viewport top\n          end: () => `+=${distance}`,                    // scroll distance = track width minus viewport\n          pin: true,\n          scrub: 1,\n          invalidateOnRefresh: true,\n        },\n      });\n    }, wrap);\n    return () => ctx.revert();\n  }, [reduce]);\n\n  return (\n    <section ref={wrap} className=\"relative overflow-hidden\">\n      <div ref={track} className=\"flex h-[100dvh] items-center\">\n        {children}\n      </div>\n    </section>\n  );\n}"}]}}