Frontend-Tool-List

Consolidate a toolkit of essential resources for front-end developers.

Docs

• CodeReview
  • codesmell
• WebDong
  • 使用 preload、prefetch、dns-prefetch、preconnect 最佳化資源載入順序！

Icon

• W3Schools
• Boxicons
• Google_Icon
• Colored Icons
• beautifully crafted animated icons
• svgrepo
• skillicons
• svgl
• animateIcon
• logosurf
• lucide-animated

Page scrolling animation

• Paroller.js
• Jarallax
• RellaxJS
• MultiScroll
• Barba.js
• Scrollrevealjs
• number-flow
• lenis

HTML

• every-html-element

CSS

• Video
  • player.style
• Wave
  • Make some waves
• Popover
  • CSS3 居然內建 Popover
• Loaders
  • LDRS
• CSS Scan
  • box-shadow examples
  • buttons examples
  • checkboxes examples
  • radios examples
• CSS Pro
  • CSS 3D Buttons

Chart

• APEXCHARTS.JS
• shadcn/ui_Beautiful Charts
• echarts

Components

• Neobrutalism components
• ui.shadcn.com
• silkhq
• 21st.dev

API

• reqres
• rapidapi

Design

• Checklist Design
• 404_spells
• whimsical
• lottielab
• footer.design
• radix-ui-Create a custom palette
• spacetypegenerator

Img assets

• unDraw
• pexels
• illlustrations.co

Img adjustment

• 調整圖片尺寸
• 圖片去除背景
• PhotoshopOnline

UI/UX

• seesaw

Browser support query

• web.dev
• Can I use

SEO

• Keyword difficulty check
• PageSpeed Insights

AI

• Galileo.ai
• stitch
• napkin
• svganimate.ai -製作動畫