Frontend ui engineering
Skill charlieviettq/awesome-agent-skill/.cursor/skills/frontend-engineering/frontend-ui-engineering
Curated skill pack for LLM agents in engineer and science workflow (Cursor & Claude ready).
npx -y skills add charlieviettq/awesome-agent-skill --skill frontend-ui-engineeringAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone. Triggers: "build UI", "component", "responsive", "design system", "frontend", "layout".
SKILL.md
2.1 KB, as published. Nobody here has run it
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 reviewbrowser-testing-with-devtools— runtime verificationperformance-optimization— bundle and render performance
Adapted from addyosmani/agent-skills (MIT).