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 原则、合规等级及图像、色彩对比度等具体实现规范。
improve accessibility
a11y audit
WCAG compliance
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架构
审查组件架构设计
处理复合组件或上下文提供者逻辑
npx skills add legions-developer/evilcharts --skill vercel-composition-patterns -g -y
基于 Emil Kowalski 的设计工程哲学，指导 UI 打磨、组件设计与动画细节，强调通过训练出的品味和不可见细节提升软件体验。
UI 代码审查与优化建议
界面交互与动画设计咨询
前端组件视觉质感提升
npx skills add legions-developer/evilcharts --skill emil-design-eng -g -y
指导创建独特且生产级的前端界面，避免通用AI审美。适用于构建网页组件、页面、海报或应用，生成具有大胆美学方向和精细细节的HTML/CSS/JS或React/Vue代码。
构建网站或着陆页
开发仪表盘或Web应用
设计React或Vue组件
美化现有Web UI
npx skills add legions-developer/evilcharts --skill frontend-design -g -y
Hallmark 是面向 AI 编码助手的 UI 设计技能，旨在生成具有结构多样性和自然感的界面。支持新建页面、审计评分、视觉重构及从截图/URL 提取设计 DNA，拒绝模板化输出。
构建新应用或落地页
请求重新设计现有界面
调用 hallmark audit/redesign/study 命令
分析并提取设计灵感
npx skills add legions-developer/evilcharts --skill hallmark -g -y
提供Node.js后端开发最佳实践，涵盖Express/Fastify框架搭建、分层架构设计、中间件配置、认证授权及数据库集成，用于构建可扩展的生产级REST API、GraphQL或微服务。
创建Node.js后端服务
设计REST API或GraphQL接口
实现微服务架构
配置中间件和错误处理
npx skills add legions-developer/evilcharts --skill nodejs-backend-patterns -g -y
提供Node.js开发的原则与决策指南，涵盖2025年框架选型、异步模式、安全及架构设计。旨在培养用户基于上下文进行技术判断的能力，而非机械复制代码。
进行Node.js架构决策
选择Web框架
设计异步处理模式
应用安全最佳实践
npx skills add legions-developer/evilcharts --skill nodejs-best-practices -g -y
基于Vercel工程的React与Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端渲染规范等70条规则，用于指导代码编写、审查与重构。
编写或重构React组件与Next.js页面
实施客户端或服务端数据获取
审查代码以发现性能瓶颈
优化应用包体积或加载速度
npx skills add legions-developer/evilcharts --skill vercel-react-best-practices -g -y
专注于审查前端动画代码的高标准技能，基于Emil Kowalski的设计工程哲学，检查运动逻辑、性能优化及无障碍访问，默认严格标记问题。
用户请求审查动画或交互效果代码
涉及CSS过渡、关键帧或动画库使用的代码评审
npx skills add legions-developer/evilcharts --skill review-animations -g -y
基于Lighthouse审计和Google指南，提供技术SEO优化方案。涵盖robots.txt配置、Meta robots控制、Canonical URL设置、XML Sitemap生成及URL结构规范，旨在提升搜索引擎可见性和排名。
improve SEO
optimize for search
fix meta tags
add structured data
sitemap optimization
npx skills add legions-developer/evilcharts --skill seo -g -y
用于初始化仓库的工程技能配置，自动设置 Issue 追踪器、Triage 标签及领域文档结构。通过探索仓库现状并与用户确认，生成适配的上下文配置，为后续工程技能提供基础支撑。
首次使用工程技能前需初始化仓库配置
需要设置或重新配置 Issue 追踪器和文档结构
npx skills add legions-developer/evilcharts --skill setup-matt-pocock-skills -g -y
管理 shadcn/ui 组件，支持添加、搜索、修复、调试、样式调整和组合 UI。提供项目上下文、组件文档及用法示例，规范 Tailwind 样式与表单结构。
使用 shadcn/ui 构建或修改 UI
需要添加、搜索或调试 shadcn 组件
处理 components.json 配置文件
执行 shadcn CLI 命令如 init 或 preset
npx skills add legions-developer/evilcharts --skill shadcn -g -y
提供 Tailwind CSS v4.1+ 开发模式，涵盖响应式布局、组件样式、暗色模式及最佳实践，用于快速构建现代化 UI。
需要为 React/Vue/Svelte 组件添加样式
构建响应式布局和网格系统
实现设计系统或暗色模式
npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y
提供Tailwind CSS v4与shadcn/ui在React/Vite环境下的生产级配置指南，涵盖初始化、暗黑模式、主题切换及常见陷阱修复。
初始化React项目并集成Tailwind v4
设置或调试shadcn/ui组件库
实现或修复暗黑模式和主题切换功能
从Tailwind v3迁移至v4
解决CSS变量或颜色主题相关错误
npx skills add legions-developer/evilcharts --skill tailwind-v4-shadcn -g -y
提供TypeScript高级类型系统指南，涵盖泛型、条件类型、映射类型及工具类型。用于构建类型安全应用、创建可复用组件、实现复杂类型推断及迁移JS代码至TS。
实现复杂的TypeScript类型逻辑
创建可复用的类型工具或泛型组件
确保编译时类型安全
将JavaScript代码库迁移到TypeScript
npx skills add legions-developer/evilcharts --skill typescript-advanced-types -g -y
提供 TypeScript 中 Zod 模式验证的最佳实践，涵盖 schema 定义、解析、类型推断及错误处理，指导安全、高效的验证逻辑实现。
编写新的 Zod 模式
选择 parse 或 safeParse
使用 z.infer 进行类型推断
处理用户输入验证错误
审查 Zod 代码规范
npx skills add legions-developer/evilcharts --skill zod -g -y
基于CDP的浏览器自动化CLI，支持网页导航、表单填写、截图、数据提取及Electron应用和Slack自动化。提供无障碍树快照与元素引用，适用于QA测试、探索性验证及各类Web交互任务。
打开网站
填写表单
点击按钮
截取屏幕
抓取页面数据
测试Web应用
登录网站
自动化浏览器操作
探索性测试
QA测试
Bug查找
审查应用质量
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、价值主张等转化性文本
npx skills add legions-developer/evilcharts --skill copywriting -g -y
作为高级顾问审计代码库，识别缺陷、安全及性能问题，生成自包含的实施计划供其他模型执行。严格只读，不直接修改代码，专注于制定高质量的手动交接方案。
要求审计代码库
寻找改进机会（如Bug、安全、性能）
生成实施计划供其他Agent执行
npx skills add legions-developer/evilcharts --skill improve -g -y
用于诊断网站SEO问题、审查技术SEO及提供优化建议的专家技能。涵盖爬取、索引、页面优化等审计框架，帮助提升自然搜索表现。
用户希望审计或诊断网站SEO问题
提及关键词如technical SEO, meta tags review, page speed, crawl errors, indexing issues
npx skills add legions-developer/evilcharts --skill seo-audit -g -y
AI代理的浏览器自动化CLI工具，支持网页导航、表单填写、截图、数据提取及Web应用测试。可扩展至Electron桌面应用、Slack自动化及云浏览器环境，提供高效可靠的程序化Web交互能力。
需要与网站进行交互
自动化填写表单或点击按钮
从页面抓取数据
测试Web应用质量
自动化Electron桌面应用操作
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前对话轮次中提交代码并推送至仓库。执行前需清理临时文件，若关联PR则更新描述。仅限单次操作，不应用于后续轮次。
用户要求提交代码变更
用户要求推送代码到远程仓库
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
