A growing library of Claude Code Skills (Clawdbot AgentSkills) — written for designers.

Built for Aura.Build.

These skills are meant to feel like Claude Code skills, but tuned for web design + prompting + shipping:

• practical workflows
• checklists
• copy/paste recipes
• common pitfalls
• versionable files you can reuse (not one-off chat answers)

If it’s good once, it should be reusable.

• store prompts as files
• version them
• build libraries + stylecards

The fastest way to consistent output is:

• clear constraints
• clear hierarchy
• “change 1–2 things only” iteration

Screenshots and examples carry:

• fonts, spacing, colors
• layout rhythm
• icon style

agent-skills/
  ui/
    mengto-ui-prompting/
      SKILL.md
      ARTICLE.md
      REFERENCES.md
  web-design/
    pricing-page/
      SKILL.md
      REFERENCES.md
    landing-page/
      SKILL.md
      REFERENCES.md
    gsap/
      SKILL.md
      REFERENCES.md
    threejs/
      SKILL.md
      REFERENCES.md
    tailwindcss/
      SKILL.md
      REFERENCES.md
    matterjs/
      SKILL.md
    globe-gl/
      SKILL.md
    css-border-gradient/
      SKILL.md
    progressive-blur/
      SKILL.md
    animation-on-scroll/
      SKILL.md
    css-alpha-masking/
      SKILL.md
    vantajs/
      SKILL.md
      REFERENCES.md
    cobejs/
      SKILL.md
      REFERENCES.md
    unicorn-studio/
      SKILL.md
      REFERENCES.md

Conventions:

• SKILL.md is the skill (what the agent loads + follows).
• REFERENCES.md is links only (keep SKILL.md lean).
• Keep skills procedural (steps, patterns, guardrails), not encyclopedic.

Design-first UI prompting system:

• prompt template (goal → format → layout → type → color → constraints)
• “variants > rerolls” workflow
• negative prompts / guardrails
• 2-pass typography workflow (generate layout, typeset in Figma)

Files:

• agent-skills/ui/mengto-ui-prompting/SKILL.md
• agent-skills/ui/mengto-ui-prompting/ARTICLE.md

High-conversion SaaS pricing page skill:

• structure (above/below fold)
• plan design + comparison patterns
• conversion strategies + copy templates
• SEO/AEO checklist + FAQ schema hints
• layout types (3-card, slider, persona split, enterprise)

High-conversion landing page (single-offer) skill:

• structure + section order
• layout types (classic, long-form, minimal, comparison)
• conversion strategies
• SEO/AEO guidance (when to index vs noindex)

GSAP animation skill:

• timelines, staggers, ScrollTrigger
• performance + cleanup patterns (SPA/React)

Three.js 3D scene skill:

• scene/camera/renderer mental model
• loaders + controls
• performance + disposal/cleanup

Matter.js physics skill:

• engine/world/render setup
• bodies and interaction patterns
• cleanup for SPA usage

Globe.GL data visualization skill:

• globe setup and textures
• data layers (points, arcs, polygons)
• sizing and performance tips

Tailwind CSS skill:

• responsive/state variants
• safe dynamic class patterns
• component extraction + conventions

CSS gradient border utility:

• masked pseudo-element technique
• Tailwind-friendly usage
• quick customization knobs

Layered progressive blur overlay:

• top or bottom blur stacks
• performance considerations
• adjustable height and steps

Scroll-reveal animation trigger:

• IntersectionObserver setup
• Tailwind animation class usage
• timing and trigger tweaks

Alpha masking utilities:

• horizontal or vertical edge fades
• Safari-friendly mask-image fallback
• inline or class usage

Vanta.js animated background skill:

• init/resize/destroy
• performance + fallbacks

cobe globe skill:

• canvas sizing/DPR
• markers + onRender rotation
• resize patterns

Unicorn Studio embed skill:

• embed patterns + attributes
• performance knobs (scale/dpi/fps/lazyload)
• common site-builder pitfalls

1. Create a folder:

• agent-skills/<category>/<skill-name>/

2. Add SKILL.md:

• frontmatter: name, description
• content: when to use, workflow, pitfalls, recipes, what to ask

3. (Optional) add REFERENCES.md:

• doc links only

4. Commit:

• small commits per skill

Web design libraries / systems:

• Framer Motion
• Radix UI
• shadcn/ui
• Next.js patterns (app router, perf, SEO)
• Webflow / Framer template checklists

Design ops:

• “Stylecards” (how to turn references into promptable systems)
• “Changelog writing” (benefit-first release notes)

GitHub: MengTo/Skills

Push updates:

cd /Users/mengto/clawd/@MengTo/Skills
git push origin main

TBD.