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
screen reader support
keyboard navigation
make accessible
npx skills add legions-developer/evilcharts --skill accessibility -g -y
将模糊的动画描述反向查找为精确术语，帮助用户命名动效效果。适用于用户询问“某效果叫什么”或描述运动效果但不知其名的场景。
用户询问特定视觉效果的名称
用户描述动画感觉但未提供专业术语
npx skills add legions-developer/evilcharts --skill animation-vocabulary -g -y
提供React组件组合模式指南，涵盖架构、状态管理及实现规范，旨在解决布尔属性泛滥问题，提升代码可维护性与复用性，支持React 19新特性。
重构包含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件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美学。指导用户构建网页组件、页面或应用，强调大胆的美学方向、排版、色彩和动效，生成高质量且富有创意的代码。
构建网页组件或页面
开发React/Vue等前端应用
美化或重新设计Web UI
制作海报或落地页
npx skills add legions-developer/evilcharts --skill frontend-design -g -y
Hallmark 是面向 AI 编码助手的 UI 设计技能，旨在消除 AI 生成的平庸感。支持新建页面、审计评分、视觉重构及从截图/URL 提取设计 DNA，强调结构多样性与高品质设计输出。
用户要求构建新应用或着陆页
要求进行 UI 重新设计或审计
调用 Hallmark 名称
使用 audit/redesign/study 命令
npx skills add legions-developer/evilcharts --skill hallmark -g -y
提供Node.js后端开发最佳实践，涵盖Express/Fastify框架使用、分层架构设计、中间件配置及数据库集成，助力构建可扩展的生产级API与微服务。
构建REST API或GraphQL服务
创建Node.js微服务
实现认证授权机制
设计后端架构模式
npx skills add legions-developer/evilcharts --skill nodejs-backend-patterns -g -y
提供2025年Node.js开发的最佳实践与决策指南，涵盖框架选型、运行时配置及分层架构设计。旨在培养开发者独立思考能力，根据具体场景选择合适技术栈，而非盲目复制代码模式。
进行Node.js项目架构决策
选择Web框架或运行时环境
设计异步处理模式
规划安全与部署策略
npx skills add legions-developer/evilcharts --skill nodejs-best-practices -g -y
提供React和Next.js性能优化指南，涵盖消除数据瀑布、代码包体积优化及服务端渲染最佳实践。用于指导编写、审查或重构前端代码，确保应用性能最优。
编写React组件或Next.js页面
实施数据获取逻辑
审查代码以发现性能问题
重构现有React/Next.js代码
优化包体积或加载速度
npx skills add legions-developer/evilcharts --skill vercel-react-best-practices -g -y
专注于动画代码审查的专业技能，依据 Emil Kowalski 的设计工程哲学设定高标准。严格检查运动合理性、性能（GPU属性）、可访问性及交互细节，默认标记问题，确保动画体验流畅且符合最佳实践。
请求审查前端动画或动效代码
评估 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
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 组件与项目，支持添加、搜索、修复及样式调整。提供上下文、文档和使用示例，遵循组合优先原则和严格的 Tailwind/CSS 规范，确保 UI 一致性。
使用 shadcn/ui 构建或维护前端界面
需要添加、查找或调试 shadcn 组件
涉及 shadcn CLI 命令如 init, search, docs
npx skills add legions-developer/evilcharts --skill shadcn -g -y
提供Tailwind CSS v4.1+开发模式，涵盖响应式布局、组件样式及设计系统实现。用于React/Vue等框架的UI构建与CSS工作流优化。
需要构建响应式用户界面
使用Tailwind CSS进行组件样式编写
实现移动端优先的布局策略
npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y
提供 Tailwind CSS v4 与 shadcn/ui、Vite 及 React 的生产级初始化配置指南。涵盖架构设计、暗色模式实现、语义化颜色令牌、插件配置及常见陷阱修复，旨在加速前端项目搭建并避免典型错误。
初始化包含 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或Bug排查
需要自动化Electron桌面应用操作
涉及Slack工作区自动化任务
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前回合中提交并推送代码变更。若涉及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、安全漏洞或技术债务
生成供其他模型执行的实施计划
npx skills add legions-developer/evilcharts --skill improve -g -y
用于诊断网站SEO问题，涵盖技术SEO、索引状态、爬虫能力及页面优化。通过结构化审计框架提供改进建议，解决排名下降或流量流失等问题。
用户请求SEO审计
提及技术SEO或核心网页指标
询问为何未获得排名
报告流量下降或Google更新影响
npx skills add legions-developer/evilcharts --skill seo-audit -g -y
提供浏览器自动化CLI，支持网页导航、表单填写、截图及数据提取。兼容Electron应用、Slack及云环境，适用于QA测试与Web交互自动化。
需要与网站或Web应用进行程序化交互
执行网页自动化操作如填表、点击、截图或抓取数据
对Electron桌面应用或Slack工作区进行自动化控制
进行探索性测试、QA或Bug排查
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前交互轮次中提交代码更改并推送到仓库。若涉及PR需同步更新描述，并在推送前清理临时文件。
需要保存当前工作成果
需要将本地更改同步到远程仓库
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
