Create interactive animations for React and JavaScript interfaces with Motion, formerly Framer Motion. Build hover, tap, and drag responses, animate layout changes and page exits, and coordinate scroll effects or multi-step sequences with reusable states and spring transitions.
中文简介正在准备中。当前显示英语简介。
- Animate button hover and tap responses
- Add exit animations to menus or modals
- Create page transitions in a React app
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Build interactive 3D scenes in React with React Three Fiber, a React renderer for Three.js. Use components, hooks, and reusable patterns to load models, handle interactions, manage scene state, and improve rendering performance.
中文简介正在准备中。当前显示英语简介。
- Adding an interactive 3D scene to a React app
- Building a product configurator or viewer
- Creating a 3D portfolio or gallery
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Render designer-made Lottie animations in web and React applications using JSON or compressed dotLottie files. Control playback, connect animations to scrolling or pointer interactions, and integrate them with other animation tools for icons, loading indicators, onboarding, and marketing content.
中文简介正在准备中。当前显示英语简介。
- Add an animated icon to a web interface
- Control a loading animation in React
- Sync animation playback with page scrolling
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Add decorative depth to web pages with Zdog illustrations, Vanta.js animated backgrounds, and Vanilla-Tilt.js parallax cards. The skill provides setup and optimization patterns for landing page visuals and small interactive effects.
中文简介正在准备中。当前显示英语简介。
- Adding a pseudo-3D illustration to a page
- Creating an animated hero background
- Making cards tilt with pointer or device movement
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Create web animations with GSAP and ScrollTrigger, including timelines, scroll-linked motion, pinned sections, and parallax effects. The patterns cover DOM, SVG, Canvas, WebGL, and Three.js, with guidance for React integration and animation cleanup.
中文简介正在准备中。当前显示英语简介。
- Animating page elements as visitors scroll
- Building pinned or horizontal scroll sections
- Sequencing a multi-step animation timeline
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Create or improve Claude skills that package specialized knowledge, repeatable workflows, and tool instructions. The guide covers planning SKILL.md and supporting files, generating a starter folder, validating the structure, and packaging the result as a distributable ZIP.
中文简介正在准备中。当前显示英语简介。
- Turning recurring tasks into a reusable skill
- Packaging company knowledge and procedures for Claude
- Improving an existing skill after practical use
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Use this skill to build web animations with Anime.js across DOM elements, CSS, SVG, and JavaScript objects. It helps compose timed sequences, staggered reveals, keyframes, and SVG drawing or morphing effects in framework-independent projects.
中文简介正在准备中。当前显示英语简介。
- Sequencing a coordinated set of page animations
- Revealing a list of elements one by one
- Drawing or morphing an SVG path
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Choose and integrate ready-made animated React components from Magic UI and React Bits into landing pages, marketing sites, dashboards, and interactive interfaces. The guidance covers component selection, customization, shadcn/ui integration, and practical ways to keep animation effects performant.
中文简介正在准备中。当前显示英语简介。
- Add animated sections to a landing page
- Choose between Magic UI and React Bits components
- Combine animated components with shadcn/ui
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Build interactive 3D scenes and visualizations for the web with Three.js. The skill covers setting up cameras, lights, materials, models, and animations, handling pointer interactions, and improving rendering performance for WebGL or WebGPU applications.
中文简介正在准备中。当前显示英语简介。
- Build an interactive 3D product configurator
- Display 3D models in a web page
- Add lighting and animation to a 3D scene
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Plan React and web 3D experiences that combine Three.js, React Three Fiber, GSAP, Motion, or React Spring. It offers architecture and state management patterns for scroll-driven scenes, interactive animations, and performance across multiple libraries.
中文简介正在准备中。当前显示英语简介。
- Planning a scroll-driven 3D landing page
- Combining React Three Fiber with animation libraries
- Designing physics-based 3D interactions
freshtechbro/claudedesignskills☆ 11472025年11月20日 更新
Review code changes for quality, security, performance, and maintainability. It helps identify issues by severity, point to relevant lines, recognize strengths, and suggest practical fixes in a structured review.
中文简介正在准备中。当前显示英语简介。
- Reviewing a code change before merging
- Finding security or input validation issues
- Getting prioritized feedback on code quality
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Use this skill to explore a new repository or understand how a project is organized. It runs a visualization script that creates an interactive tree view of the codebase in an HTML file and opens that file in the default browser.
中文简介正在准备中。当前显示英语简介。
- Exploring an unfamiliar repository
- Viewing project folders as a tree
- Understanding codebase structure
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Use this skill to find API route definitions in Express.js source files. It produces a structured route manifest with each route’s HTTP method, path, file, and line number, and adds details about applied middleware and whether the route uses a standard or chained form.
中文简介正在准备中。当前显示英语简介。
- Listing all Express.js API routes
- Preparing route data for documentation
- Checking middleware attached to routes
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Use this skill to apply consistent API conventions when designing, writing, or reviewing endpoints. It outlines resource URL naming, response and error formats, HTTP status codes, Bearer token requirements, and versioning rules so API decisions follow the project’s standards.
中文简介正在准备中。当前显示英语简介。
- Designing URL paths for a new API
- Reviewing endpoint response formats
- Checking API authentication requirements
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Use practical React guidance for component responsibilities, state placement, composition, custom Hook naming, Context, and performance topics. Load the relevant chapter for a specific question, and use the examples to shape clearer component structure without optimizing too early.
中文简介正在准备中。当前显示英语简介。
- Choose where component state should live
- Review custom Hook names and component structure
- Explore Context or performance guidance
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Analyze a directory for code health concerns, including file organization, error handling, basic security risks, duplication, unused imports, and dependency issues. Return a structured report with severity levels, file locations, an overall score, and actionable recommendations.
中文简介正在准备中。当前显示英语简介。
- Review a directory for code quality issues
- Find basic security and error handling concerns
- Get a prioritized code health report
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Scaffold REST API endpoint code and documentation from specifications or existing source. It can identify routes, describe their methods, parameters, schemas, and authentication, and produce Markdown references or OpenAPI 3.0 specifications with scripts for route detection and validation.
中文简介正在准备中。当前显示英语简介。
- Scaffolding a REST API from a specification
- Generating route handler code for new endpoints
- Creating API documentation and an OpenAPI 3.0 spec
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Turn route definitions and handlers into API reference documentation. The skill extracts methods, paths, parameters, request and response shapes, and authentication requirements, then creates Markdown endpoint pages and an index or an OpenAPI 3.0 specification on request.
中文简介正在准备中。当前显示英语简介。
- Documenting API routes for a README or docs site
- Creating an endpoint index from source code
- Generating an OpenAPI 3.0 specification
huangjia2019/claude-code-engineering☆ 11442026年7月23日 更新
Make a vague task measurable by turning it into checks a program can pass or fail. The skill writes a short goal-test script and can add a bounded retry loop for a headless agent, so users can tell when work is done and limit repeated attempts.
中文简介正在准备中。当前显示英语简介。
- Defining checkable completion criteria for a vague task
- Creating a script to decide when an agent task is done
- Running a headless agent with a limited retry budget
undefined-ui/second-brain-os☆ 11422026年10月14日 更新
Understand what a codebase does and why it is structured that way. The skill explains key components, patterns, alternatives, and trade-offs at a requested level, then saves a learning guide or architectural audit as Markdown.
中文简介正在准备中。当前显示英语简介。
- Understanding code generated by an AI agent
- Learning an unfamiliar legacy module
- Reviewing architectural choices and trade-offs
mohi-devhub/antivibe☆ 11292026年7月31日 更新
Trace failures in a multi-agent session using Agent Monitor workflow data and events. See where an error began, which agent depths and parents it reached, what tools were involved, and whether a parent aborted after a child failed.
中文简介正在准备中。当前显示英语简介。
- Tracing the source of a failed multi-agent run
- Seeing which parent agents inherited an error
- Identifying tools involved in session failures
hoangsonww/Claude-Code-Agent-Monitor☆ 11242026年10月24日 更新
Maintain a local MCP server by reviewing tool modules, adjusting host configuration, and troubleshooting runtime issues. The workflow includes checking dashboard availability and validating changes with type checking and a build, while preserving safeguards for tool actions.
中文简介正在准备中。当前显示英语简介。
- Updating MCP tool modules
- Changing host configuration
- Troubleshooting MCP runtime issues
hoangsonww/Claude-Code-Agent-Monitor☆ 11242026年10月24日 更新
Get oriented in a code repository before making changes. The skill reads key project guides, identifies the relevant layer and files, maps supporting references, and selects suitable verification commands to shape an initial implementation plan.
中文简介正在准备中。当前显示英语简介。
- Understand a repository before starting a change
- Identify the files and project layer relevant to a task
- Choose checks to run before and after implementation
hoangsonww/Claude-Code-Agent-Monitor☆ 11242026年10月24日 更新
Inventory configured MCP servers across user and project settings. Review each server’s transport, launch command or URL, environment variable or header names, and source file to spot duplicates, unknown definitions, or remote endpoints that need review.
中文简介正在准备中。当前显示英语简介。
- Checking which MCP servers are configured
- Finding duplicate servers across scopes or files
- Reviewing stdio commands and environment variable names
hoangsonww/Claude-Code-Agent-Monitor☆ 11242026年10月24日 更新