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

frontend-design

poranthropics·anthropics· v1.0.0 · atualizado em 2026-04-10
85
Score

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

frontend-developmentui-designweb-designcsshtmljavascriptreactweb-components
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdfrontend-design/workflow
1. Gather user requirements and understand the purpose of the frontend interface.
2. Define a bold and unique aesthetic direction, considering tone, differentiation, and constraints.
3. Choose distinctive typography, color schemes, and motion effects that align with the aesthetic direction.
4. Design the spatial composition and visual details to create a visually striking and memorable interface.
5. Implement the frontend code (HTML/CSS/JS, React, Vue, etc.) with meticulous attention to detail.
6. Review and evaluate the implemented frontend against the defined aesthetic direction and user requirements.
7. Iterate on the design and implementation based on feedback and evaluation.

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

Compõe com ←Using Skills
70%
Hebbian Synapse
Composite0.700
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar aVercel React Best Practices
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←React Composition Patterns
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Web Interface Guidelines
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
81
Similar a ←Popup CRO
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
85
Similar a ←Signup Flow CRO
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←remotion-best-practices
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a ←shadcn/ui
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Next.js Best Practices
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←use-my-browser
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar a ←readme-i18n
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
83
Similar a ←Enhance Prompt for Stitch
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a ←algorithmic-art
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Stitch Build Loop
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a ←Web Artifacts Builder
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
77
Similar a ←shadcn/ui Component Integration
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a ←Cache Components (Next.js 16+)
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a ←Markdown to HTML Converter
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
77
Similar a ←Vue Best Practices Workflow
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
81
Similar a ←Stitch to Remotion Walkthrough Videos
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar a ←Extract Design System
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
82
Similar a ←Vue
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80

Árvore do Skill

frontend-design
frontend-design
Fases Cognitivas6
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.EVALUATE
6.REFLECT
Triggers10
build a web componentcreate a landing pagedesign a dashboarddevelop a React componentgenerate HTML/CSS layoutstyle a web UIbeautify a web UIcreate a websitedesign a posterbuild a web application

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 frontend-design
$ synaptic skills detail frontend-design
$ synaptic skills live frontend-design

Dependências

HTMLCSSJavaScriptReactVue

Links

GitHub Repository