Agent Skills
› legions-developer/evilcharts
legions-developer/evilcharts
GitHub提供基于WCAG 2.2的Web无障碍审计与改进指南，涵盖感知、可操作等原则及具体代码示例。
Install All Skills
npx skills add legions-developer/evilcharts --all -g -y
Skills in Collection (24)
提供基于WCAG 2.2的Web无障碍审计与改进指南，涵盖感知、可操作等原则及具体代码示例。
improve accessibility
a11y audit
WCAG compliance
screen reader support
keyboard navigation
make accessible
npx skills add legions-developer/evilcharts --skill accessibility -g -y
提供Web动效术语的反向查询服务，将模糊描述转化为精确动画名称。适用于用户询问特定动效效果或需要准确词汇进行AI/设计师沟通的场景，不涉及实际设计或编码。
用户询问某个动效效果的名称
用户描述视觉感受但不知晓专业术语
npx skills add legions-developer/evilcharts --skill animation-vocabulary -g -y
提供React组件组合模式指南，用于重构布尔属性泛滥、构建灵活库或设计可复用API。涵盖复合组件、渲染属性和上下文提供者等架构最佳实践及React 19更新。
重构具有大量布尔属性的组件
构建可复用的组件库
审查组件架构
涉及复合组件或上下文提供者的任务
npx skills add legions-developer/evilcharts --skill vercel-composition-patterns -g -y
基于 Emil Kowalski 的设计工程哲学，提供 UI 打磨、组件设计、动画决策及细节优化的指导。专注于通过训练出的品味和隐形细节提升软件体验，要求以表格形式进行代码审查。
UI 界面设计与优化咨询
CSS/JS 动画与交互细节审查
前端组件视觉与行为评审
npx skills add legions-developer/evilcharts --skill emil-design-eng -g -y
指导创建具有独特设计感的生产级前端界面，避免通用AI审美。适用于构建网页组件、页面、海报及应用，强调大胆的视觉风格与精致代码实现。
构建网站或落地页
开发React/Vue组件
设计仪表盘或UI布局
美化Web界面
npx skills add legions-developer/evilcharts --skill frontend-design -g -y
专为AI编码助手设计的UI设计技能，旨在生成高质量、非模板化的前端页面。支持新建页面设计、现有页面审计评分、视觉重构及从URL/截图提取设计DNA，强调结构多样性与反AI套路风格。
用户要求构建新应用或落地页
用户希望重新设计现有界面
用户显式调用Hallmark名称
用户请求审计、重设计或研究分析
npx skills add legions-developer/evilcharts --skill hallmark -g -y
提供 Node.js 后端开发的最佳实践，涵盖 Express/Fastify 框架使用、中间件配置、认证授权、数据库集成及分层架构设计，助力构建高性能、可维护的生产级后端服务。
创建 Node.js REST API 或 GraphQL 服务器
实现微服务架构
设计后端分层结构
集成数据库或设置错误处理
npx skills add legions-developer/evilcharts --skill nodejs-backend-patterns -g -y
提供Node.js开发原则与决策指南，涵盖框架选型、异步模式、安全及架构设计。旨在培养思考能力而非机械复制代码，指导开发者根据具体场景做出合理技术选择。
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页面
实现数据获取逻辑
审查代码性能问题
重构现有React/Next.js代码
优化打包体积或加载速度
npx skills add legions-developer/evilcharts --skill vercel-react-best-practices -g -y
专门审查动画与运动代码的高级技能，基于 Emil Kowalski 的设计工程哲学设定高工艺标准。默认持怀疑态度，重点检查动画合理性、性能、可访问性及物理正确性，确保交互体验流畅且符合最佳实践。
需要审查前端动画或运动代码的实现质量
评估 UI 动效是否符合高性能和高用户体验标准
npx skills add legions-developer/evilcharts --skill review-animations -g -y
提供基于 Lighthouse 和 Google 指南的 SEO 优化技能，涵盖技术 SEO、页面优化及结构化数据，指导 robots.txt、Sitemap 配置与 URL 规范。
improve SEO
optimize for search
fix meta tags
add structured data
sitemap optimization
search engine 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。提供上下文、文档和示例，指导使用 CLI 命令和最佳实践构建前端界面。
使用 shadcn/ui 组件
运行 shadcn CLI 命令
涉及 components.json 的项目
npx skills add legions-developer/evilcharts --skill shadcn -g -y
提供 Tailwind CSS v4.1+ 实用工具类开发模式，涵盖响应式布局、Flexbox/Grid、暗色模式及组件样式构建，适用于 React/Vue/Svelte 前端 UI 开发与设计系统实现。
使用 Tailwind CSS 进行前端组件样式编写
构建响应式网页布局或网格系统
配置暗色模式支持
优化前端 CSS 工作流
npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y
提供 Tailwind CSS v4 与 shadcn/ui 的生产级 React 项目初始化指南，涵盖 Vite 配置、暗色模式、语义化颜色及常见陷阱修复。
初始化 React 项目并集成 Tailwind v4
设置 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
提供Zod模式验证的最佳实践，涵盖类型安全、解析及错误处理。用于定义z.object、使用safeParse或z.infer等场景，指导自动化重构与代码生成。
编写新的Zod模式
选择parse或safeParse方法
实现z.infer类型推断
处理用户输入验证错误
审查Zod代码规范
npx skills add legions-developer/evilcharts --skill zod -g -y
AI代理浏览器自动化CLI，支持网页导航、表单填写、截图、数据提取及Electron应用测试。适用于QA、探索性测试及各类Web和桌面应用的程序化交互与自动化任务。
打开网站
填写表单
点击按钮
截取屏幕
抓取页面数据
测试Web应用
登录网站
自动化浏览器操作
探索性测试或QA
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
执行单次代码提交和推送操作。需清理临时文件，若涉及PR则更新描述。仅当前轮次有效，不自动累积后续变更。
用户要求提交代码
完成修改后请求推送
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
专注于撰写、重写和优化营销文案（如首页、落地页、定价页等），通过收集产品背景和目标受众信息，遵循清晰、利益导向等原则生成高转化率的 persuasive 文本。
用户要求撰写或改进营销文案
涉及标题、CTA、价值主张等具体文案元素
用户提到让文案更具说服力或描述产品
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
AI智能体浏览器自动化CLI工具，支持网页交互、表单填写、截图及数据提取。扩展支持Electron桌面应用、Slack工作区操作及云环境测试，提供可观测性面板。
需要与网站进行程序化交互
执行网页表单填写或按钮点击
截取网页屏幕快照
从页面提取或抓取数据
对Web应用进行测试或QA
自动化Electron桌面应用操作
在Vercel Sandbox或AWS Bedrock中运行浏览器任务
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在单次交互中提交并推送代码变更。执行前需清理临时文件，若涉及PR则更新描述，确保仅在当前轮次生效。
用户要求保存当前工作成果
需要向版本控制系统推送更改
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
