All Skills Search Tools

|

Loading...

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.

Home/All Skills/Frontend Development/frontend-development

frontend-development

Original：🇨🇳 Chinese

Translated

Frontend page development. Use this skill when you need to develop web applications, create UI components, implement interactive features, or optimize frontend performance.

3installs

Sourceaaaaqwq/claude-code-skills

Added on2026-03-17

NPX Install

npx skill4agent add aaaaqwq/claude-code-skills frontend-development

Tags

Translated version includes tags in frontmatter

frontend-development ui-components performance-optimization state-management react-vue-frameworks

SKILL.md Content (Chinese)

View Translation Comparison →

Frontend Development Expert

When to Use This Skill

Develop web applications
Create UI components
Implement interactive features
Optimize frontend performance
Responsive design
State management

Technology Stack

Frameworks: React, Vue, Next.js, Nuxt
Styling: Tailwind CSS, CSS Modules
State Management: Redux, Zustand, Pinia
Build Tools: Vite, Webpack

Best Practices

Componentization: Reusable component design
Responsive: Mobile-first
Performance: Code splitting, lazy loading
Accessibility: ARIA standards
Type Safety: TypeScript

Capabilities

Component development (React/Vue)
State management
Routing configuration
API integration
Performance optimization
Testing (Jest, Playwright)

Trigger Words

"Frontend development"
"Create components"
"React application"
"Vue project"
"UI optimization"

Download

Download TranslatedIncludes original Skill.md

(1.7 KB)Download Original(829 B)

Related Skills

angular-directives

Create custom directives in Angular v20+ for DOM manipulation and behavior extension. Use for attribute directives that modify element behavior/appearance, structural directives for portals/overlays, and host directives for composition. Triggers on creating reusable DOM behaviors, extending element functionality, or composing behaviors across components. Note - use native @if/@for/@switch for control flow, not custom structural directives.

chrome-devtools

Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.

angular-http

Implement HTTP data fetching in Angular v20+ using resource(), httpResource(), and HttpClient. Use for API calls, data loading with signals, request/response handling, and interceptors. Triggers on data fetching, API integration, loading states, error handling, or converting Observable-based HTTP to signal-based patterns.

react-useeffect

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.