❝ One conductor for 24 specialist skills. It picks the right tool, makes the work fit your codebase, and composes the pieces into a coherent, performant, accessible result. ❞

💜 If this skill makes your frontend work easier, please give it a ⭐ — it helps others find it!

The frontend skill ecosystem is powerful but heavily overlapping, and picking the wrong tool is the single most common failure: GSAP vs AOS, Three.js vs React Three Fiber, Lottie vs Rive, Motion vs React Spring. A beautiful component that fights your stack — or two libraries animating the same property — is a defect, not a feature.

Universal Designer does not reimplement any animation/3D/design logic. It guarantees three things no specialist skill can guarantee on its own:

1. 🧱 The work fits your project's actual architecture — stack, conventions, dependencies, peer-dep constraints (React 19, SSR/RSC boundaries, "don't break the Flutter app").
2. 🎯 The right tool is chosen — overlaps resolved with an explicit decision matrix.
3. 🧩 The pieces compose — layer assignment, conflict resolution, performance, accessibility, responsive, and cleanup.

Use it as the first stop for any visual/frontend task — on web or Flutter.

Universal Designer runs a mandatory 5-phase workflow, invoking specialist skills via the Skill tool rather than reinventing them:

Claude Code reads the description in SKILL.md and auto-activates Universal Designer whenever a task involves building, designing, redesigning, reviewing, fixing, or animating any UI/UX, web page, landing page, dashboard, component, hero, scroll experience, page transition, 3D scene, product viewer, data-viz, micro-interaction, or visual effect.

💡 Universal Designer is the conductor — it works best when the specialist skills above are also installed. It will still set direction and route correctly without them, but execution detail lives in the specialists.

• Simple fade/slide on scroll → scroll-reveal-libraries (AOS). Don't reach for GSAP.
• Complex scroll timeline / pin / scrub / parallax → gsap-scrolltrigger (+ locomotive-scroll if a smooth-scroll container is required).
• React UI animation / gestures / layout / exit → motion-framer.
• Physics-real, interruptible, momentum motion → react-spring-physics.
• Vanilla/SVG timeline, no React → animejs.
• Pre-built animated React components, fast → animated-component-libraries.
• Multi-page site, SPA-feel transitions → barba-js.
• 3D in React → react-three-fiber; vanilla/max control → threejs-webgl; physics/game/WebXR → babylonjs-engine; ECS/editor game → playcanvas-engine; VR/AR/360 → aframe-webxr.
• Designer-made AE animation → lottie-animations; stateful interactive vector → rive-interactive; decorative bg/tilt → lightweight-3d-effects; thousands of 2D sprites → pixijs-2d.
• Need 3D assets → author with blender-web-pipeline / spline-interactive, texture with substance-3d-texturing.
• Combining 3+ libraries → web3d-integration-patterns.

Claude Code loads skills from ~/.claude/skills/ (personal) or <project>/.claude/skills/ (project-scoped). Clone the whole folder so references/ and scripts/ travel with SKILL.md.

git clone https://github.com/satishTheLegend/universal-designer.git \
 ~/.claude/skills/universal-designer

# from your project root
git clone https://github.com/satishTheLegend/universal-designer.git \
 .claude/skills/universal-designer

git submodule add https://github.com/satishTheLegend/universal-designer.git \
 .claude/skills/universal-designer

Restart Claude Code (or start a new session) to discover the skill. ✅ The bundled detector is plain bash (coreutils + grep, no extra deps):

bash ~/.claude/skills/universal-designer/scripts/detect_stack.sh [project-root] # defaults to CWD

"Build a landing page with a pinned hero, a scroll-scrubbed product reveal, and a 3D model the user can orbit."

→ Phase 0 detects your stack; Phase 1 sets direction; Phase 2 routes to gsap-scrolltrigger for the pin/scrub and react-three-fiber (React) or threejs-webgl (vanilla) for the model; Phase 3 assigns layers so GSAP and the render loop don't fight; Phase 4 enforces reduced-motion, lazy-loading, and GPU disposal.

"Should I use AOS or GSAP for these section reveals?"

→ Routes to scroll-reveal-libraries (AOS) for simple reveals and reserves gsap-scrolltrigger for genuine timelines/pinning — and won't stack both on the same reveal.

"Make our dashboard feel modern without breaking the shared components or the Flutter app."

→ Reuses existing design infra instead of rebuilding, honors peer-dep constraints, and runs the mobile-app safety gate before declaring done.

universal-designer/
├── SKILL.md # the orchestration workflow + golden rules
├── references/
│ ├── architecture-playbook.md # stack detection + per-architecture adaptation (Phase 0)
│ ├── decision-matrix.md # intent → skill routing + overlap tie-breakers (Phase 2)
│ ├── integration-and-quality.md # composition, layering, perf & a11y gates (Phases 3–4)
│ └── skill-catalog.md # deep dossier on every skill (what/when/gotchas/pairings)
├── scripts/
│ └── detect_stack.sh # Phase 0 stack detector (bash, no deps)
├── README.md # this file
├── LICENSE # MIT
└── .gitignore

1. Architecture before aesthetics. Phase 0 is non-negotiable.
2. Reuse before rebuild. Extend existing infra; don't duplicate it.
3. One tool per job. Resolve overlaps with the decision matrix.
4. Verify deps before suggesting installs. Honor React 19 / SSR-RSC / Flutter constraints.
5. Always ship the quality gates — reduced-motion, responsive, and cleanup are not optional.
6. Invoke, don't reinvent. Delegate execution to the specialist; orchestrate and integrate.

Contributions are welcome! 🎉

1. 🍴 Fork the repository.
2. ✏️ Edit SKILL.md (workflow/rules) or the relevant references/*.md file. Keep the frontmatter name/description accurate — description drives auto-activation.
3. 🧭 If you add or change a routing decision, update references/decision-matrix.md and references/skill-catalog.md so they stay consistent.
4. 🛡️ Keep recommendations stack-aware and quality-gated (performance, accessibility, responsive, cleanup).
5. 🚀 Open a pull request describing the change and its rationale.

If Universal Designer helped you ship something beautiful, please give it a star — it genuinely helps others discover the project and motivates continued work. 🙏

Star this repo

💬 Have an idea or found a bug? Open an issue or submit a PR.

Released under the MIT License — free to use, modify, and distribute.