frontend-ui-engineering
Engineers high-quality web UI components, emphasizing maintainable state, responsive layouts, and accessibility.
Install
mkdir -p .claude/skills/frontend-ui-engineering && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13203" && unzip -o skill.zip -d .claude/skills/frontend-ui-engineering && rm skill.zipInstalls to .claude/skills/frontend-ui-engineering
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.Key capabilities
- →Structure web UI components
- →Implement responsive layouts for various viewports
- →Apply and extend design tokens for styling
- →Manage local and shared UI state
- →Ensure accessibility standards are met
- →Verify UI across key viewports and user paths
How it works
The skill inventories existing components and tokens, structures semantic HTML, implements mobile-first layouts, manages UI state, applies design tokens, and ensures accessibility.
Inputs & outputs
When to use frontend-ui-engineering
- →Building a new responsive form
- →Refactoring UI for design system consistency
- →Implementing accessible interactive components
About this skill
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
When not to use it
- →For backend-only changes
- →For accessibility audits only
- →For full visual redesign exploration
Limitations
- →It does not perform full visual redesign exploration
- →It is not for backend-only changes
- →It extends accessibility checks rather than being solely for them
How it compares
This skill provides an end-to-end workflow for UI implementation, integrating architecture and design system discipline, rather than just checking WCAG compliance.
Compared to similar skills
frontend-ui-engineering side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-ui-engineering (this skill) | 0 | 2mo | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
| dile-components | 0 | 1mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by charlieviettq
View all by charlieviettq →You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
dile-components
Polydile
Use when building or modifying UI with the Dile Components library (@dile/ui, @dile/crud, @dile/editor, @dile/utils, @dile/lib, @dile/iconlib, @dile/icons) — a framework-agnostic, Lit-based web component catalog. Trigger when installing/importing dile-* custom elements, using tags like <dile-input>,
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
webf-native-ui
openwebf
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.