All authors
Claude Skills by luokai0
github.com/luokai05,230 skills34 installs6,996 views
- Shadcn Ui 2Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.Votes: 0GitHub stars: 11
- Data Visualization ExpertExpert-level data visualization. Use when creating charts with D3.js, Plotly, Matplotlib, Seaborn, Recharts, or designing effective dashboards.Votes: 0GitHub stars: 11
- Threejs AnimationThree.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.Votes: 0GitHub stars: 11
- Threejs ExpertExpert-level Three.js and WebGL. Use when building 3D scenes, working with geometries, materials, shaders, GLSL, WebGL, or react-three-fiber.Votes: 0GitHub stars: 11
- Threejs FundamentalsThree.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.Votes: 0GitHub stars: 11
- Threejs GeometryThree.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.Votes: 0GitHub stars: 11
- Threejs InteractionThree.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.Votes: 0GitHub stars: 11
- Threejs LightingThree.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.Votes: 0GitHub stars: 11
- Threejs LoadersThree.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.Votes: 0GitHub stars: 11
- Threejs PostprocessingThree.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.Votes: 0GitHub stars: 11
- Threejs ShadersThree.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.Votes: 0GitHub stars: 11
- Threejs TexturesThree.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.Votes: 0GitHub stars: 11
- Accessibility ExpertExpert-level web accessibility. Use when implementing WCAG compliance, ARIA attributes, keyboard navigation, screen reader support, or auditing accessibility issues.Votes: 0GitHub stars: 11
- Webperf ExpertExpert-level web performance optimization. Use when optimizing Core Web Vitals, bundle size, code splitting, lazy loading, image optimization, or CDN configuration.Votes: 0GitHub stars: 11
- Wasm ExpertExpert-level WebAssembly. Use when compiling to WASM, Emscripten, wasm-bindgen, WASI, AssemblyScript, or integrating WASM into web apps.Votes: 0GitHub stars: 11
- Algorithmic ArtCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.Votes: 0GitHub stars: 11
- Analyze IssueAnalyze a GitHub issue and create a detailed technical specificationVotes: 0GitHub stars: 11
- Anthropic Algorithmic ArtCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.Votes: 0GitHub stars: 11
- Anthropic Brand GuidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.Votes: 0GitHub stars: 11
- Anthropic Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.Votes: 0GitHub stars: 11
- Anthropic Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.Votes: 0GitHub stars: 11
- Anthropic Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.Votes: 0GitHub stars: 11
- Anthropic Web Artifacts BuilderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.Votes: 0GitHub stars: 11
- Api DesignerUse this agent when designing new APIs, creating API specifications, or refactoring existing API architecture for scalability and developer experience. Invoke when you need REST/GraphQL endpoint de...Votes: 0GitHub stars: 11
- Artifacts BuilderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.Votes: 0GitHub stars: 11
- Backend DeveloperUse this agent when building server-side APIs, microservices, and backend systems that require robust architecture, scalability planning, and production-ready implementation.Votes: 0GitHub stars: 11
- Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.Votes: 0GitHub stars: 11
- Cm Architecture Diagram CreatorCreate comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.Votes: 0GitHub stars: 11
- Cm Dashboard CreatorCreate HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.Votes: 0GitHub stars: 11
- Cm Flowchart CreatorCreate HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.Votes: 0GitHub stars: 11
- Compare WorktreesCompare files and directories between git worktrees or worktree and current branchVotes: 0GitHub stars: 11
- Create Workflow CommandCreate a workflow command that orchestrates multi-step execution through sub-agents with file-based task promptsVotes: 0GitHub stars: 11
- Electron ProUse this agent when building Electron desktop applications that require native OS integration, cross-platform distribution, security hardening, and performance optimization. Use electron-pro for co...Votes: 0GitHub stars: 11
- Fal TrainTrain custom AI models (LoRA) on fal.ai — personalize image generation for specific people, styles, objects, or video generation. Use when the user requests "Train model", "Train LoRA", "Fine-tune", "Custom model", "Train on my images", "Portrait training".Votes: 0GitHub stars: 11
- Find BugsFind bugs, security vulnerabilities, and code quality issues in local branch changes. Use when asked to review changes, find bugs, security review, or audit code on the current branch.Votes: 0GitHub stars: 11
- Frontend DeveloperUse when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration.Votes: 0GitHub stars: 11
- Fullstack DeveloperUse this agent when you need to build complete features spanning database, API, and frontend layers together as a cohesive unit.Votes: 0GitHub stars: 11
- Graphql ArchitectUse this agent when designing or evolving GraphQL schemas across microservices, implementing federation architectures, or optimizing query performance in distributed graphs.Votes: 0GitHub stars: 11
- Makepad AnimationCRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果Votes: 0GitHub stars: 11
- Makepad BasicsCRITICAL: Use for Makepad getting started and app structure. Triggers on: makepad, makepad getting started, makepad tutorial, live_design!, app_main!, makepad project setup, makepad hello world, "how to create makepad app", makepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构Votes: 0GitHub stars: 11
- Makepad DeploymentCRITICAL: Use for Makepad packaging and deployment. Triggers on: deploy, package, APK, IPA, 打包, 部署, cargo-packager, cargo-makepad, WASM, Android, iOS, distribution, installer, .deb, .dmg, .nsis, GitHub Actions, CI, action, marketplaceVotes: 0GitHub stars: 11
- Makepad DslCRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件Votes: 0GitHub stars: 11
- Makepad Event ActionCRITICAL: Use for Makepad event and action handling. Triggers on: makepad event, makepad action, Event enum, ActionTrait, handle_event, MouseDown, KeyDown, TouchUpdate, Hit, FingerDown, post_action, makepad 事件, makepad action, 事件处理Votes: 0GitHub stars: 11
- Makepad FontCRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形Votes: 0GitHub stars: 11
- Makepad LayoutCRITICAL: Use for Makepad layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad padding, makepad margin, makepad flow, makepad align, Fit, Fill, Size, Walk, "how to center in makepad", makepad 布局, makepad 宽度, makepad 对齐, makepad 居中Votes: 0GitHub stars: 11
- Makepad PlatformCRITICAL: Use for Makepad cross-platform support. Triggers on: makepad platform, makepad os, makepad macos, makepad windows, makepad linux, makepad android, makepad ios, makepad web, makepad wasm, makepad metal, makepad d3d11, makepad opengl, makepad webgl, OsType, CxOs, makepad 跨平台, makepad 平台支持Votes: 0GitHub stars: 11
- Makepad ReferenceCRITICAL: Use for Makepad troubleshooting and reference. Triggers on: troubleshoot, error, debug, fix, problem, issue, no matching field, parse error, widget not found, UI not updating, code quality, refactor, responsive layout, adaptive, api docs, reference, documentation, 故障排除, 错误, 调试, 问题, 修复Votes: 0GitHub stars: 11
- Makepad Router"CRITICAL: Use for ALL Makepad/Robius questions including widgets, layout, events, and shaders.Votes: 0GitHub stars: 11
- Makepad ShadersCRITICAL: Use for Makepad shader system. Triggers on: makepad shader, makepad draw_bg, Sdf2d, makepad pixel, makepad glsl, makepad sdf, draw_quad, makepad gpu, makepad 着色器, makepad shader 语法, makepad 绘制Votes: 0GitHub stars: 11
- Makepad SplashCRITICAL: Use for Makepad Splash scripting language. Triggers on: splash language, makepad script, makepad scripting, script!, cx.eval, makepad dynamic, makepad AI, splash 语言, makepad 脚本Votes: 0GitHub stars: 11