skills.rest
kenlck
kenlckCOMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Guide front-end UI decisions with semantic HTML, responsive CSS, and JavaScript.

5|Updated Mar 30, 2026
Search Tags:#html#accessibility#frontend#css#ui-design#web-design
One-click install
npx skills add https://github.com/kenlck/skills --skill web-design-engineer-kenlck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/kenlck/skills/tree/main/persona/skills/web-design-engineer
Command: npx skills add https://github.com/kenlck/skills --skill web-design-engineer-kenlck

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables creating high-quality, visually distinctive web interfaces with production-grade HTML/CSS/JS, reducing design-to-implementation gaps and rework.

Core Features & Use Cases

  • Seamless front-end design guidance for pages, components, dashboards, and landing pages with a polished aesthetic.
  • Adoption of semantic HTML, accessible components, responsive CSS, and pragmatic JavaScript patterns to ensure production readiness.
  • Real-world use: start a new UI feature by defining layout, typography, spacing, and interactions before coding.

Quick Start

Activate the web-design-engineer persona with /persona:web-design-engineer.

Frequently Asked Questions about web-design-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-grade front-end interfaces with semantic HTML and responsive CSS?▼

To build production-grade front-end interfaces, you need semantic HTML for structure, responsive CSS for layout, and accessible component patterns to ensure visual distinctiveness across pages, dashboards, and landing pages.

What is the best way to structure an accessible web UI before coding?▼

The best way to structure an accessible web UI is defining layout, typography, spacing, and interactions upfront. This approach bridges design-to-implementation gaps and reduces rework when generating HTML/CSS/JS.

Can I use this approach to generate code for dashboards and landing pages?▼

Yes, you can use this approach to generate code for dashboards and landing pages. It provides front-end design guidance focused on producing visually distinctive, production-ready HTML, CSS, and pragmatic JavaScript.

Does web design guidance help bridge the gap between UI design and front-end implementation?▼

Web design guidance helps bridge the UI design and front-end implementation gap by applying a persona that directs front-end decisions, ensuring production-grade HTML/CSS/JS output and minimizing rework.

What JavaScript patterns are recommended for production-ready web components?▼

Pragmatic JavaScript patterns are recommended for production-ready web components. These patterns pair with semantic HTML and responsive CSS to deliver accessible, visually distinctive interfaces across various web pages.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
zebbernzebbern
5

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Community
Advanced
indykishindykish
2

frontend-design

Plan and implement accessible React and TypeScript frontend interfaces with token-based theming.

Community
Advanced
oldwombatoldwombat

web-design-guidelines

Assesses UI code compliance with Web Interface Guidelines and generates a structured findings report.

Community
Intermediate