How do I install the Frontend UI Engineering skill?

Run npx skillmds@latest add charlieviettq/frontend-ui-engineering-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Frontend UI Engineering skill do?

Frontend UI Engineering It is listed under Web & Frontend on SkillMD.

Is Frontend UI Engineering safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend UI Engineering?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend UI Engineering free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend UI Engineering?

charlieviettq (@charlieviettq) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend UI Engineering by charlieviettq

Name: Frontend UI Engineering
Author: charlieviettq

File contents

Frontend UI Engineering

End-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends frontend-ui-accessibility with architecture and design-system discipline.

When to use

New page, form, or interactive component
Refactoring UI for consistency or responsiveness
Applying or extending a design system

When not to use

Backend-only change
Accessibility audit only (use frontend-ui-accessibility)
Full visual redesign exploration (consider design consultation workflows)

Workflow

Inventory — existing components, tokens, patterns to reuse
Structure — semantic HTML; split presentational vs container components
Layout — mobile-first breakpoints; avoid fixed widths that break small screens
State — local vs shared; minimize prop drilling; document async/loading/error UI
Styling — tokens (color, spacing, type); no magic numbers scattered
A11y — keyboard, focus, labels, contrast (see frontend-ui-accessibility)
Verify — key viewports; critical user paths; no console errors

Checklist

Area	Check
Components	Single responsibility; reusable primitives
Responsive	Works at 320px and desktop; touch targets adequate
Loading/empty/error	All three states designed
Performance	Avoid unnecessary re-renders; lazy-load heavy assets
A11y	Focus order, ARIA only when needed, form labels

Output

Implemented components with consistent patterns
Brief note on new tokens or patterns added to the design system

Related skills

frontend-ui-accessibility — WCAG-focused review
browser-testing-with-devtools — runtime verification
performance-optimization — bundle and render performance

Adapted from addyosmani/agent-skills (MIT).

---name: frontend-ui-engineering-2description: Frontend UI Engineering---# Frontend UI EngineeringEnd-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends `frontend-ui-accessibility` with architecture and design-system discipline.## When to use- New page, form, or interactive component- Refactoring UI for consistency or responsiveness- Applying or extending a design system## When not to use- Backend-only change- Accessibility audit only (use `frontend-ui-accessibility`)- Full visual redesign exploration (consider design consultation workflows)## Workflow1. **Inventory** — existing components, tokens, patterns to reuse2. **Structure** — semantic HTML; split presentational vs container components3. **Layout** — mobile-first breakpoints; avoid fixed widths that break small screens4. **State** — local vs shared; minimize prop drilling; document async/loading/error UI5. **Styling** — tokens (color, spacing, type); no magic numbers scattered6. **A11y** — keyboard, focus, labels, contrast (see `frontend-ui-accessibility`)7. **Verify** — key viewports; critical user paths; no console errors## Checklist| Area | Check ||------|-------|| Components | Single responsibility; reusable primitives || Responsive | Works at 320px and desktop; touch targets adequate || Loading/empty/error | All three states designed || Performance | Avoid unnecessary re-renders; lazy-load heavy assets || A11y | Focus order, ARIA only when needed, form labels |## Output- Implemented components with consistent patterns- Brief note on new tokens or patterns added to the design system## Related skills- `frontend-ui-accessibility` — WCAG-focused review- `browser-testing-with-devtools` — runtime verification- `performance-optimization` — bundle and render performance*Adapted from [addyosmani/agent-skills](https://github.com/addyosmani/agent-skills) (MIT).*

Frequently asked questions