Agent Skills
› freestyle-voice/freestyle
freestyle-voice/freestyle
GitHub指导创建具有独特设计感和生产级质量的 Web 前端界面。适用于构建网页、组件、仪表盘等，强调打破通用 AI 审美，通过大胆的色调、排版和动效实现高视觉冲击力。
Install All Skills
npx skills add freestyle-voice/freestyle --all -g -y
Skills in Collection (8)
指导创建具有独特设计感和生产级质量的 Web 前端界面。适用于构建网页、组件、仪表盘等，强调打破通用 AI 审美，通过大胆的色调、排版和动效实现高视觉冲击力。
用户要求构建网页或 UI 组件
需要美化或重新设计现有前端界面
生成具有高艺术性的 HTML/CSS/React 代码
npx skills add freestyle-voice/freestyle --skill frontend-design -g -y
提供 Hono Web 应用构建的 API 参考与 CLI 使用指南，涵盖路由、中间件、上下文处理及端点测试方法，辅助 AI 生成和调试基于 Hono 的后端服务代码。
用户询问 Hono API、路由或中间件用法
代码中导入 'hono' 或 'hono/*'
需要测试 HTTP 端点
npx skills add freestyle-voice/freestyle --skill hono -g -y
管理 shadcn/ui 组件与项目，支持添加、搜索、修复、调试、样式调整及组合 UI。提供上下文、文档和使用示例，指导遵循最佳实践构建前端界面。
使用 shadcn/ui 构建或修改用户界面
需要添加、查找或调试 shadcn 组件
执行 shadcn CLI 命令如 init 或 search
项目中存在 components.json 文件
npx skills add freestyle-voice/freestyle --skill shadcn -g -y
提供React组件组合最佳实践，指导重构布尔属性泛滥、构建灵活API及审查架构。涵盖复合组件、状态提升和React 19新特性，助力代码可扩展性。
重构包含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
处理复合组件或上下文提供者
npx skills add freestyle-voice/freestyle --skill vercel-composition-patterns -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端性能等70条规则，用于指导代码编写、审查与重构以提升应用性能。
编写或重构React组件/Next.js页面
实施客户端或服务端数据获取
审查代码中的性能问题
优化包体积或加载速度
npx skills add freestyle-voice/freestyle --skill vercel-react-best-practices -g -y
提供 React Native 和 Expo 应用的开发最佳实践，涵盖列表性能优化、动画实现、导航配置、UI 模式及原生模块集成等核心领域。
构建 React Native 或 Expo 应用
优化列表和滚动性能
使用 Reanimated 实现动画
处理图片、媒体或原生模块
npx skills add freestyle-voice/freestyle --skill vercel-react-native-skills -g -y
用于审查Web界面代码是否符合设计规范，支持UI检查、无障碍审计和UX评估。通过获取最新指南并比对文件输出合规性问题。
review my UI
check accessibility
audit design
review UX
npx skills add freestyle-voice/freestyle --skill web-design-guidelines -g -y
提供涵盖22种技术栈的UI/UX设计智能支持，包含样式、配色、排版及无障碍等规则库。用于辅助页面设计、组件构建、视觉审查及交互体验优化，确保界面一致性与可用性。
进行网页或移动端UI结构设计
制定颜色方案与字体搭配
审查界面的可访问性（a11y）与一致性
实现响应式布局或交互动画
npx skills add freestyle-voice/freestyle --skill ui-ux-pro-max -g -y
