Agent Skills
› legions-developer/evilcharts
legions-developer/evilcharts
GitHub提供基于WCAG 2.2的Web无障碍审计与改进指南，涵盖POUR原则、合规级别及感知性规范。用于修复图片Alt、按钮命名、色彩对比度等问题，提升屏幕阅读器支持和键盘导航体验。
Install All Skills
npx skills add legions-developer/evilcharts --all -g -y
Skills in Collection (24)
提供基于WCAG 2.2的Web无障碍审计与改进指南，涵盖POUR原则、合规级别及感知性规范。用于修复图片Alt、按钮命名、色彩对比度等问题，提升屏幕阅读器支持和键盘导航体验。
improve accessibility
a11y audit
WCAG compliance
screen reader support
keyboard navigation
npx skills add legions-developer/evilcharts --skill accessibility -g -y
将用户对网页动画的模糊描述反向查找为精确术语，帮助用户准确命名动效以便与AI或设计师沟通，不涉及设计或开发实现。
询问某个动画效果的名称
描述视觉感受但不知道专业术语
npx skills add legions-developer/evilcharts --skill animation-vocabulary -g -y
提供React组件组合模式指南，解决布尔属性泛滥问题，涵盖复合组件、状态提升及React 19新API，助力构建灵活可维护的组件库与架构。
重构包含大量布尔属性的组件
构建可复用组件库
设计灵活的组件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审美。用于构建网站、组件、页面等，强调大胆的美学方向和精致细节。
用户要求构建网页或Web组件
需要美化或重新设计现有UI
生成高设计质量的HTML/CSS/React代码
npx skills add legions-developer/evilcharts --skill frontend-design -g -y
Hallmark 是面向 AI 编码助手的 UI 设计技能，旨在生成具有结构多样性的反模板化界面。支持新建页面、UI 审计评分、现有页面视觉重构及从 URL/截图提取设计 DNA。
构建新应用或落地页
请求重新设计现有界面
使用 hallmark audit/redesign/study 命令
分析设计灵感或提取 UI DNA
npx skills add legions-developer/evilcharts --skill hallmark -g -y
提供 Node.js 后端开发的最佳实践，涵盖 Express/Fastify 框架使用、REST/GraphQL API 设计、微服务架构、中间件、错误处理及数据库集成。
构建 REST API 或 GraphQL 服务器
创建 Node.js 微服务
设计可扩展的后端架构
实现身份验证和授权
npx skills add legions-developer/evilcharts --skill nodejs-backend-patterns -g -y
提供Node.js开发原则与决策指南，涵盖框架选型、异步模式、安全及架构设计。旨在培养思考能力而非代码复制，指导用户根据上下文选择最佳实践。
进行Node.js架构决策
选择开发框架
设计异步模式
应用安全最佳实践
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 的设计工程哲学设定高标准。默认标记问题，确保动画符合直觉、性能及无障碍要求，不编写功能或修复无关 Bug。
请求审查前端动画代码
评估 UI 动效实现质量
检查 CSS/JS 动画性能与可访问性
npx skills add legions-developer/evilcharts --skill review-animations -g -y
提供基于Lighthouse和Google指南的SEO优化方案，涵盖技术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 组件。提供项目上下文、文档及使用示例，规范 Tailwind 样式与表单结构。
shadcn init
create an app with --preset
switch to --preset
working with shadcn/ui
component registries
presets
--preset codes
project with a components.json file
npx skills add legions-developer/evilcharts --skill shadcn -g -y
提供基于 Tailwind CSS v4.1+ 的现代 UI 开发模式，涵盖响应式布局、组件构建、暗黑模式及设计系统实现。适用于 React/Vue/Svelte 等前端框架的样式开发与工作流优化。
需要构建响应式网页布局
使用 Tailwind CSS 编写组件样式
实现暗黑模式或设计系统
npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y
提供 Tailwind CSS v4 与 shadcn/ui、Vite 和 React 的生产级配置指南，涵盖初始化、暗色模式、主题切换及常见陷阱修复。
初始化 React 项目并集成 Tailwind v4
配置 shadcn/ui 组件库
实现或调试暗色模式与主题切换
解决 Tailwind v3 到 v4 的迁移问题
排查 CSS 变量或颜色主题相关错误
npx skills add legions-developer/evilcharts --skill tailwind-v4-shadcn -g -y
指导掌握TypeScript高级类型系统，包括泛型、条件类型、映射类型等，用于构建类型安全的应用、创建可复用组件及实现复杂类型逻辑。
实现复杂的类型推断逻辑
创建可复用的泛型组件或工具类型
确保TypeScript项目的编译时类型安全
npx skills add legions-developer/evilcharts --skill typescript-advanced-types -g -y
提供 TypeScript Zod 库的 Schema 验证最佳实践，涵盖类型安全、解析、错误处理及性能优化等规则。
定义 Zod 对象或字符串验证 Schema
使用 safeParse 进行输入校验
通过 z.infer 推断类型
处理前端表单或 API 请求的验证错误
npx skills add legions-developer/evilcharts --skill zod -g -y
用于AI代理的浏览器自动化CLI，支持网页交互、表单填写、截图、数据提取及Web应用测试。扩展支持Electron桌面应用、Slack工作区自动化、探索性QA及云环境运行。
open a website
fill out a form
take a screenshot
scrape data from a page
test this web app
automate browser actions
exploratory testing
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
用于撰写、重写和优化营销文案，包括首页、落地页等。通过收集产品、受众及上下文信息，遵循清晰、利益导向等原则生成高转化率文本。
用户需要撰写或改进营销文案
涉及标题、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或SEO问题
用户询问为何未获得排名或流量下降
用户请求检查元标签、核心网页指标或抓取错误
npx skills add legions-developer/evilcharts --skill seo-audit -g -y
AI代理的浏览器自动化CLI工具，支持网页交互、表单填写、截图、数据提取及Electron应用测试。提供CDP连接、无障碍树快照及多平台扩展能力。
需要与网站交互或导航页面
填写表单或点击按钮
截取网页屏幕截图
从页面提取数据
测试Web应用质量或进行探索性测试
npx skills add legions-developer/evilcharts --skill agent-browser -g -y
用于在当前回合执行代码提交和推送操作。若涉及PR，需更新描述并清理临时文件，确保变更仅作用于当前步骤。
需要保存当前工作成果
完成阶段性开发后推送代码
npx skills add legions-developer/evilcharts --skill commit-and-push -g -y
