Skip to content
Development
Skill

/frontend

Frontend architecture, UI/UX implementation, and web performance

From plugin
pudo-code-system
534 skills1 agent
Install
$ npx -y skills add DongDuong2001/pudo-code-system --skill frontend --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/frontend

Context preview

The summary Claude sees to decide when to auto-load this skill.

Frontend architecture, UI/UX implementation, and web performance

SKILL.md

frontend.SKILL.md
name: frontend-code
description: Frontend architecture, UI/UX implementation, and web performance

Frontend Code Skill

This skill specializes in browser-based development including HTML, CSS, React, Vue, Angular, etc.

When to use this skill

  • When building responsive, accessible user interfaces.
  • When managing client-side state and routing.
  • When addressing Core Web Vitals (LCP, FID, CLS).

Guidelines

  • Assume a mobile-first philosophy for responsive design.
  • Semantic HTML is critical for Accessibility (a11y) and SEO. Avoid using generic `div` elements when native elements apply.
  • Minimize main-thread blocking JavaScript to maintain 60 FPS interactions.
  • Scope CSS to components (CSS Modules, CSS-in-JS, Shadow DOM) to avoid global style leaking.
Ships withpudo-code-system

Modular, scalable, automated development intelligence.

Get the whole plugin
Stats
5
Stars
0
Forks
Maintained
Maintenance
JavaScript
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: DongDuong2001/pudo-code-system

Other skills on pudo-code-system.