Design on the Flank skill
A skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
- 65 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill generates component code and takes no actions outside the project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/design-on-the-flankDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill generates component code and takes no actions outside the project.
This is third-party code. Review the repository files before installing.
What it does
Design on the Flank teaches an agent to build Framer code components from a description or a reference. Each component comes out as one ready TSX file that is pasted into Framer. Colour, text, image and motion settings are exposed in the Properties panel, so no code editing is needed for them. The skill covers 3D scenes and particles, WebGL distortions and transitions, GSAP timelines and scroll-driven animation, responsive layout and converting existing code into a component. Codex and Claude get a skill install, and ChatGPT gets a knowledge document.
Who it is for. Framer site designers and front-end builders who need complex 3D and scroll effects without writing shaders by hand.
Good fit when
- A Framer landing page needs an interactive 3D product scene.
- An image distortion effect is wanted on cursor hover.
- Text and block animation should follow page scroll.
- A ready React snippet has to become a component with settings in the Framer panel.
Not a fit when
- The site is not built in Framer.
- Plain static layout with no animation is enough.
- A finished video or raster graphic is needed instead of code.
Example request
Build a Framer component: a 3D particle sphere that reacts to mouse movement, with colour and speed in the properties panel.Limitations
The skill targets Framer: the result is pasted into the project by hand and nothing is published automatically. The repository licence is not auto-detected (`NOASSERTION`), so read the licence file before commercial use. Guides are written in Vietnamese, though the skill itself accepts requests in any language. Complex WebGL scenes load the GPU on weak devices, so test on mobile. The Codex install is a text request to the agent, not a command.
How to disable. Delete the skill folder from the agent skills directory. Built components stay in the Framer project and are removed there separately.
FAQ
How do I install the skill in Codex?
Send Codex a request to install the skill from the `skills/design-on-the-flank` repository folder and start a new conversation. The request text is in the README.
What should a Claude user do?
Download the skill archive from the `downloads` folder and add it in the Skills section. In Claude Code it is enough to ask the agent to install the skill.
Does it work with ChatGPT?
Yes, through a knowledge document: attach it to the chat and describe the component. ChatGPT asks for missing modules as files.
What comes out?
A single TSX file with the component and settings in the Framer Properties panel. Copy it into the Framer project.
Can I extend an existing component?
Yes. The skill adds features and fixes bugs in existing code without touching unrelated settings.
Discussion
No questions or reviews yet.
Related
SkillsThree Framer skills: code components and overrides, Framer Agent and plugins, plus a collection of tricks and notes
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Design on the Flank (this card) | no | 65 | |
| GSAP AI Skills | no | 18,390 | teaches GSAP animation in general; here the result is a Framer component with a properties panel |
| Framer Motion AI Skills | no | 10 | about the Framer Motion library; this skill builds Framer code components |
README in short
A kit for Framer components with Three.js, WebGL and GSAP. The result is one TSX file with Properties panel settings, with install paths for Codex, Claude and ChatGPT.