Synaptic SkillsSynapticSkills
MarketplaceSkill GraphCriar SkillMCP ServerPlataformaEnterprise
v0.1.0-beta
Voltar ao Marketplace
ContentAvançado

Framer Code Development

porfredm00n·fredm00n· v1.0.0 · atualizado em 2026-04-11
84
Score

Create Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration errors and font handling.

framercode-componentscode-overridesreactdesign-toolwebglanimation
Linguagens
TypeScriptJavaScriptReact
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdframer-code-components-overrides/workflow
1. Determine whether a Code Component or Code Override is needed based on the requirement for property controls.
2. Add required annotations like `@framerDisableUnlink` and `@framerIntrinsicWidth/Height`.
3. Implement the component logic, ensuring font properties are spread and hydration safety is maintained.
4. Add property controls using `addPropertyControls` for Code Components.
5. Handle canvas vs. preview detection using `RenderTarget.current()` for debugging and performance optimization.
6. Test the component thoroughly in both canvas and preview modes.
7. Optimize for mobile by implementing resize debouncing and handling orientation changes.

Telemetria de Agentes

Execuções
0
total
Taxa de Sucesso
0%
últimos 30d
Latência Média
0.0s
p50
Alucinação
0.0%
detecção
Tokens Entrada
0
avg 0/exec
Tokens Saída
0
avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar a ←UI Design Brain
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
83
Similar a ←Sync Figma Token
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
81
Similar a ←Blueprinter
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Sketch Implement Design
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a ←Frontend Design Review
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Modern Frontend Design
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
82
Similar a ←Design Thinking
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
81
Similar a ←Design Lab Skill
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
82
Similar a ←Pencil To Code
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar a ←Visual Explainer
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
84
Similar a ←Moai Domain UI/UX
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Info Card Designer
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
76
Similar a ←AI Slide Generator - AnyGen
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
82
Similar a ←UI/UX Design Pro
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
84

Árvore do Skill

Framer Code Development
framer-code-components-overrides
Fases Cognitivas6
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.EVALUATE
6.REFLECT
Triggers9
create a Framer code componentcreate a Framer code overrideimplement property controls in Framerdebug Framer hydration errorsadd custom React components to Framerwork with Framer Motion animationsuse WebGL shaders in Framerfix font issues in Frameroptimize Framer components for mobile

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%
🤖Sucesso de Agentes0%
🕐Atualidade100%
🔗Saúde de Dependências100%
🕸️Centralidade no Grafo0%
🛡️Segurança50%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download framer-code-components-overrides
$ synaptic skills detail framer-code-components-overrides
$ synaptic skills live framer-code-components-overrides

Dependências

framerframer-motionreactreact-dom

Links

GitHub Repository