Skill4Agent
Skill4Agent
All SkillsSearchTools
|
Explore
Skill4Agent
Skill4Agent

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

  • Home
  • All Skills
  • Search
  • Tools

About

  • About Us
  • Disclaimer
  • Copyright

Help

  • FAQ
  • Privacy
  • Terms
Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

All Skills

Total 50,906 skills, Frontend Development has 4880 skills

Categories

Showing 12 of 4880 skills

Per page
Downloads
Sort
Frontend Developmentdylantarre/animation-prin...

playfulness-fun

Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.

🇺🇸|EnglishTranslated
5
Frontend Developmentharlan-zw/vue-ecosystem-s...

shadcn-vue-skilld

Add components to your apps. ALWAYS use when writing code importing "shadcn-vue". Consult for debugging, best practices, or modifying shadcn-vue, shadcn vue.

🇺🇸|EnglishTranslated
5
Frontend Developmentclaude-dev-suite/claude-d...

tauri

Tauri framework for building cross-platform desktop applications with Rust backend and web frontend. Covers architecture, IPC commands, plugins, bundling, code signing, and security best practices. USE WHEN: user mentions "Tauri", "Rust desktop app", asks about "Tauri commands", "Tauri plugins", "Tauri IPC", "Rust + Svelte/React", "lightweight desktop app", "Tauri bundling", "Tauri security" DO NOT USE FOR: Electron applications - use `electron` skill instead

🇺🇸|EnglishTranslated
5
Frontend Developmentmblode/agent-skills

ui-audit

Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Use when reviewing or refining frontend UI before merge or release, or when the user asks for a UI, UX, or accessibility audit.

🇺🇸|EnglishTranslated
5
Frontend Developmentopenstatushq/data-table-f...

data-table-filters

Install and extend data-table-filters — a React data table system with faceted filters (checkbox, input, slider, timerange), sorting, infinite scroll, virtualization, and BYOS state management. Delivered as 9 shadcn registry blocks installable via `npx shadcn@latest add`. Use when: (1) installing data-table-filters from the shadcn registry, (2) adding extension blocks (command palette, cell renderers, sheet panel, store adapters, schema system, Drizzle helpers, query layer), (3) configuring store adapters (nuqs/zustand/memory), (4) generating table schemas from a data model, (5) wiring up server-side filtering with Drizzle ORM, (6) connecting the React Query fetch layer, (7) troubleshooting integration issues. Triggers on mentions of "data-table-filters", "data-table.openstatus.dev", filterable data tables with shadcn, or any of the registry block names.

🇺🇸|EnglishTranslated
5
1 scripts/Attention
Frontend Developmentabsolutelyskilled/absolut...

color-theory

Use this skill when choosing color palettes, ensuring contrast compliance, implementing dark mode, or defining semantic color tokens. Triggers on color palette, contrast ratio, WCAG color, dark mode, color tokens, HSL, OKLCH, brand colors, color harmony, and any task requiring color system design or implementation.

🇺🇸|EnglishTranslated
5
Frontend Developmentjeremylongshore/claude-co...

web-vitals-monitor

Web Vitals Monitor - Auto-activating skill for Frontend Development. Triggers on: web vitals monitor, web vitals monitor Part of the Frontend Development skill category.

🇺🇸|EnglishTranslated
5
Frontend Developmentuxjoseph/supanova-design-...

supanova-design-engine

Supanova Landing Page Design Engine. Generates premium, conversion-optimized landing pages using pure HTML + Tailwind CSS (CDN). Overrides default LLM biases toward generic templates. Enforces metric-based design rules, Korean typography standards, and hardware-accelerated motion for standalone HTML output.

🇺🇸|EnglishTranslated
5
Frontend Developmentfreshtechbro/claudedesign...

locomotive-scroll

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating parallax effects, building scroll-triggered animations, or developing immersive scrolling websites. Triggers on tasks involving Locomotive Scroll, smooth scrolling, parallax, scroll detection, scroll events, sticky elements, horizontal scrolling, or GSAP ScrollTrigger integration. Integrates with GSAP for advanced scroll-driven animations.

🇺🇸|EnglishTranslated
5
3 scripts/Checked
Frontend Developmentclaude-dev-suite/claude-d...

webrtc

WebRTC peer-to-peer communication. Signaling, ICE/STUN/TURN, media streams, data channels, screen sharing, and SFU integration (mediasoup, LiveKit). USE WHEN: user mentions "WebRTC", "video call", "peer-to-peer", "P2P", "screen sharing", "data channel", "STUN", "TURN", "mediasoup", "LiveKit" DO NOT USE FOR: server-to-client streaming - use `sse`; chat messaging - use `socket-io`

🇺🇸|EnglishTranslated
5
Frontend Developmentyonatangross/orchestkit

component-search

Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.

🇺🇸|EnglishTranslated
5
Frontend Developmentyonatangross/orchestkit

design-to-code

Mockup-to-component pipeline using Google Stitch and 21st.dev. Accepts screenshots, descriptions, or URLs as input and produces production-ready React components. Orchestrates design extraction via Stitch MCP, component matching via 21st.dev registry, and adaptation to project design tokens. Use when converting visual designs to code, implementing UI from mockups, or building components from screenshots.

🇺🇸|EnglishTranslated
5
1...383384385386387...407
Page