Agent Skills
› legions-developer/evilcharts
legions-developer/evilcharts
GitHub提供基于 WCAG 2.2 的 Web 无障碍审计与改进指南，涵盖 POUR 原则、合规级别及感知性、可操作性等具体实现规范。
Install All Skills
npx skills add legions-developer/evilcharts --all -g -y
Skills in Collection (24)
提供基于 WCAG 2.2 的 Web 无障碍审计与改进指南，涵盖 POUR 原则、合规级别及感知性、可操作性等具体实现规范。
提升无障碍性
a11y 审计
WCAG 合规检查
屏幕阅读器支持优化
键盘导航改进
npx skills add legions-developer/evilcharts --skill accessibility -g -y
将模糊的动画描述转换为精确术语，辅助用户准确命名或向AI/设计师提问。
询问动画效果名称
描述视觉感受但不知专业术语
npx skills add legions-developer/evilcharts --skill animation-vocabulary -g -y
提供React组件组合模式指南，用于重构含布尔参数泛滥的组件、构建可复用库及设计灵活API。涵盖复合组件、渲染属性、上下文提供者等架构优化方案，并包含React 19新API规范。
重构包含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
处理复合组件或上下文提供者
npx skills add legions-developer/evilcharts --skill vercel-composition-patterns -g -y
基于Emil Kowalski的设计工程哲学，提供UI打磨、组件设计、动画决策及细微体验优化的指导。旨在通过训练品味和关注隐形细节，提升软件界面的质感与竞争力，强调美感作为产品差异化杠杆的作用。
UI界面代码审查
前端组件设计咨询
CSS动画与交互优化
提升用户体验细节
npx skills add legions-developer/evilcharts --skill emil-design-eng -g -y
指导创建具有独特设计感的生产级前端界面，避免通用AI美学。适用于构建网页组件、页面、应用或UI美化，强调大胆的审美方向、精细的排版、色彩和动效，生成高质量代码。
构建网页组件
开发前端页面
美化Web UI
制作海报或落地页
npx skills add legions-developer/evilcharts --skill frontend-design -g -y
专注前端界面设计的技能，旨在消除AI生成的平庸感。支持新建页面、审计现有设计、重构视觉结构及从截图或URL提取设计DNA，强调结构多样性而非简单模板替换。
用户要求构建新应用或落地页
要求进行设计审计或重设计
提及Hallmark名称
提供截图或URL请求分析设计
npx skills add legions-developer/evilcharts --skill hallmark -g -y
提供 Node.js 后端开发最佳实践，涵盖 Express/Fastify 框架搭建、REST/GraphQL API 设计、微服务架构、中间件、鉴权及数据库集成，助力构建高可用生产级服务。
创建 Node.js REST API
设计微服务架构
实现后端鉴权与中间件
npx skills add legions-developer/evilcharts --skill nodejs-backend-patterns -g -y
提供Node.js开发决策原则，涵盖框架选型、异步模式、安全及架构设计。指导用户根据上下文选择Hono、Fastify等方案，强调思考而非复制代码。
Node.js项目框架选型
Node.js架构设计咨询
异步编程模式决策
Node.js安全最佳实践
npx skills add legions-developer/evilcharts --skill nodejs-best-practices -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端性能等70条规则。用于指导代码编写、审查及重构，确保应用达到最佳性能表现。
编写或重构React组件和Next.js页面
审查代码以识别性能瓶颈
优化数据获取策略
减少JavaScript包体积和提升加载速度
npx skills add legions-developer/evilcharts --skill vercel-react-best-practices -g -y
专门用于审查前端动画代码的技能，依据高标准的工艺规范评估运动效果。重点检查动画的合理性、频率适配、响应式缓动、性能优化（GPU属性）及无障碍访问，确保动画体验流畅且符合设计规范。
用户请求审查动画或运动相关的代码变更
需要评估UI过渡效果的视觉质量和性能表现
npx skills add legions-developer/evilcharts --skill review-animations -g -y
提供基于Lighthouse审计的SEO优化指南，涵盖robots.txt、元标签、规范URL及站点地图等技术实现，旨在提升搜索引擎可见性与排名。
improve SEO
optimize for search
fix meta tags
add structured data
sitemap optimization
npx skills add legions-developer/evilcharts --skill seo -g -y
配置工程技能所需的仓库初始化设置，包括问题追踪器、分类标签及领域文档布局。通过探索现有状态并与用户确认，为其他工程技能提供基础环境支持。
首次使用工程技能前
需要初始化或修复仓库的工程配置
npx skills add legions-developer/evilcharts --skill setup-matt-pocock-skills -g -y
管理 shadcn/ui 组件库，支持添加、搜索、修复、调试、样式调整和组合 UI 组件。提供项目上下文、组件文档及使用示例，适用于涉及 shadcn/ui 或 components.json 的项目。
使用 shadcn/ui 构建或修改 UI 界面
执行 shadcn CLI 命令如 init, add, search
处理包含 components.json 的项目配置
npx skills add legions-developer/evilcharts --skill shadcn -g -y
提供Tailwind CSS v4.1+的开发模式，涵盖响应式布局、组件样式及CSS配置。用于React/Vue等框架的UI构建、设计系统实现及样式优化。
使用Tailwind CSS进行前端组件开发
构建响应式布局和网格系统
实现暗色模式或设计系统
npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y
提供基于 Tailwind CSS v4、shadcn/ui、Vite 和 React 的生产级项目初始化指南。涵盖配置、暗色模式、CSS变量架构及常见陷阱修复，旨在加速前端开发并减少错误。
初始化包含 Tailwind v4 的 React 项目
配置 shadcn/ui 组件库
解决 CSS 变量或主题切换问题
从 Tailwind v3 迁移至 v4
npx skills add legions-developer/evilcharts --skill tailwind-v4-shadcn -g -y
提供TypeScript高级类型系统指南，涵盖泛型、条件类型、映射类型及工具类型，用于构建类型安全应用、实现复杂类型逻辑及创建可复用类型组件。
需要实现复杂的类型推断或约束
构建类型安全的库或框架
迁移JavaScript代码到TypeScript
npx skills add legions-developer/evilcharts --skill typescript-advanced-types -g -y
提供TypeScript中Zod库的模式定义、解析验证、类型推断及错误处理的最佳实践指南，用于提升代码类型安全与健壮性。
编写新的Zod模式
选择parse或safeParse
实现z.infer类型推断
处理用户输入验证错误
npx skills add legions-developer/evilcharts --skill zod -g -y
AI代理浏览器自动化CLI，支持网页导航、表单填写、截图、数据提取及Electron应用和Slack自动化。提供可观测性面板，用于QA测试、探索性测试及跨平台Web交互。
打开网站
填写表单
点击按钮
截图
抓取页面数据
测试Web应用
登录网站
自动化浏览器操作
进行探索性测试或QA
自动化Electron桌面应用
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前轮次中提交代码更改并推送到仓库。若涉及PR，需更新PR描述；推送前务必清理临时文件（如截图、测试文件等），且仅限本次操作生效。
需要保存当前工作进度到版本控制系统
完成单次修改后需要推送代码
需要清理临时文件并提交最终结果
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
专为转化型营销文案设计的专家技能，涵盖首页、落地页等网站文本的撰写与优化。通过明确目标、受众及产品背景，遵循清晰、利益导向及客户语言原则，提升文案说服力与转化率。
用户需要撰写或改进营销文案
请求优化标题、CTA或价值主张
提及'write copy for'或'make this more compelling'
npx skills add legions-developer/evilcharts --skill copywriting -g -y
作为高级顾问审计代码库，生成自包含的优化实施计划供其他模型执行。专注于发现bug、安全、性能及债务问题，严格只读不修改代码。
审计代码库
寻找改进机会
生成实施计划
npx skills add legions-developer/evilcharts --skill improve -g -y
用于诊断网站SEO问题、技术SEO审查及流量下降原因，提供涵盖抓取、索引、技术及内容的优化建议。
用户提到SEO审计、技术SEO或排名下降
用户询问核心网页指标、爬取错误或索引问题
npx skills add legions-developer/evilcharts --skill seo-audit -g -y
基于CDP的快速浏览器自动化CLI，支持网页交互、表单填写、截图及数据提取。扩展支持Electron桌面应用、Slack自动化、探索性测试及云端沙箱环境，为AI代理提供程序化Web交互能力。
需要打开网站或导航页面
填写表单或点击按钮
截取网页屏幕截图
从页面抓取或提取数据
测试Web应用质量或进行QA
自动化Electron桌面应用操作
在Vercel Sandbox或云浏览器中运行任务
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前回合提交并推送代码变更，支持更新PR描述，并清理临时文件。
需要保存当前工作成果
完成阶段性开发任务
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
