AgentHubAgentHub

css-effects

SkillSkillsMP

io.github.ReadyToGo-Education/fluxo_criativo/css-effects · vmain

Aplica efeitos visuais CSS e JavaScript em qualquer elemento de site — texto, cards, botões, formulários, navegação, modais, imagens, loaders, scroll, cursor, fundos, e microinterações. Use SEMPRE que o usuário pedir para "adicionar efeito", "deixar mais bonito", "animar", "modernizar", "tornar interativo", "estilizar", "deixar profissional", ou enviar print/screenshot/descrição de um elemento (botão, card, título, seção, navbar, hero, formulário, menu, modal) pedindo melhorias visuais. Também ativa em pedidos como "que efeito posso usar aqui", "sugere algo legal pra essa parte", "como deixar esse site mais interessante", "essa seção tá sem graça", "como faz aquele efeito do site X", ou qualquer pergunta sobre o que cada efeito CSS faz e como funciona. Use mesmo se o usuário não citar "CSS" explicitamente — qualquer pedido de melhoria visual em UI web aciona esta skill. Também ativa quando o usuário diz que está construindo um site, landing page, portfolio, dashboard, e quer torná-lo memorável ou competitivo.

概览

css-effects 是一个Agent Skill,收录自 SkillsMP。本页提供 Cursor、Claude Code 等客户端的安装配置片段。

Agent Skill 是带 SKILL.md 的指令包。安装后,AI 会根据 description 在匹配任务时自动加载,无需每次手动粘贴提示词。

安装

选择你的平台查看安装方式

# 通用 CLI(Cursor / Claude Code / Codex 等均支持)
npx skills add ReadyToGo-Education/fluxo_criativo@css-effects

使用方式

安装完成后,在对话中直接描述你的任务(或提及技能名称)。Agent 会先读取 SKILL.md 的 description 判断是否启用,再按其中的步骤执行。可用 /skills(Claude Code)或在设置中查看已加载的 Skills。

相关资源

统一 Manifest

{
  "id": "io.github.ReadyToGo-Education/fluxo_criativo/css-effects",
  "type": "skill",
  "version": "main",
  "displayName": "css-effects",
  "description": "Aplica efeitos visuais CSS e JavaScript em qualquer elemento de site — texto, cards, botões, formulários, navegação, modais, imagens, loaders, scroll, cursor, fundos, e microinterações. Use SEMPRE que o usuário pedir para \"adicionar efeito\", \"deixar mais bonito\", \"animar\", \"modernizar\", \"tornar interativo\", \"estilizar\", \"deixar profissional\", ou enviar print/screenshot/descrição de um elemento (botão, card, título, seção, navbar, hero, formulário, menu, modal) pedindo melhorias visuais. Também ativa em pedidos como \"que efeito posso usar aqui\", \"sugere algo legal pra essa parte\", \"como deixar esse site mais interessante\", \"essa seção tá sem graça\", \"como faz aquele efeito do site X\", ou qualquer pergunta sobre o que cada efeito CSS faz e como funciona. Use mesmo se o usuário não citar \"CSS\" explicitamente — qualquer pedido de melhoria visual em UI web aciona esta skill. Também ativa quando o usuário diz que está construindo um site, landing page, portfolio, dashboard, e quer torná-lo memorável ou competitivo.",
  "author": {
    "name": "ReadyToGo-Education",
    "url": "https://github.com/ReadyToGo-Education"
  },
  "repository": {
    "url": "https://github.com/ReadyToGo-Education/fluxo_criativo",
    "source": "github",
    "subfolder": ".claude/skills/css-effects"
  },
  "homepage": "https://skillsmp.com/skills/readytogo-education-fluxo-criativo-claude-skills-css-effects-skill-md",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "ReadyToGo-Education/fluxo_criativo@css-effects",
        "version": "main",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "stars:13"
  ],
  "provenance": {
    "origin": "skillsmp",
    "originalId": "readytogo-education-fluxo-criativo-claude-skills-css-effects-skill-md",
    "originalUrl": "https://skillsmp.com/skills/readytogo-education-fluxo-criativo-claude-skills-css-effects-skill-md",
    "isOfficial": false,
    "status": "active"
  }
}
css-effects — Agent Skill 安装与配置 · AgentHub