skills.rest
vgavriel
vgavrielCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Build accessible frontend interfaces with HTML/CSS/JS, React, or Vue.

Updated Jan 7, 2026
Search Tags:#design#frontend#react#ui-components#aesthetic-guidelines#html-css
One-click install
npx skills add https://github.com/vgavriel/tech-career-readiness --skill frontend-design-vgavriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vgavriel/tech-career-readiness/tree/main/.codex/skills/frontend-design
Command: npx skills add https://github.com/vgavriel/tech-career-readiness --skill frontend-design-vgavriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. This skill helps teams avoid generic AI aesthetics and provides a structured approach to delivering polished web UI artifacts.

Core Features & Use Cases

  • Production-grade implementations across HTML/CSS/JS, React, Vue, or other frameworks with a cohesive aesthetic direction.
  • Guidelines for typography, color, motion, spatial composition, accessibility, and component patterns to ensure consistency.
  • Use Case: when asked to build a component, page, dashboard, poster, or complete UI, generate visually striking, accessible interfaces ready for deployment.

Quick Start

Provide frontend requirements (a component, page, or interface) and I will deliver a production-ready, visually distinctive implementation.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade React UI components that avoid generic AI aesthetics?▼

Production-grade React UI components require structured aesthetic guidelines for typography, color, and motion to ensure visually distinctive outputs. This approach applies meticulous refinement to deliver polished, accessible interfaces ready for deployment.

What's the best way to build accessible frontend interfaces with a clear aesthetic direction?▼

Accessible frontend interfaces with a clear aesthetic direction require cohesive design guidelines covering spatial composition, color, and motion. This approach ensures functional reliability and visually robust implementations across HTML, CSS, and JS frameworks.

Can I use this frontend design approach for Vue or only for React?▼

Frontend design applies to Vue, React, and other frameworks. It provides framework-friendly implementations with cohesive aesthetic directions, ensuring visually striking and accessible interfaces regardless of the chosen web technology stack.

How do I design a visually robust dashboard layout that is ready for deployment?▼

Designing a visually robust dashboard layout involves applying structured guidelines for typography, spatial composition, and motion. This process yields production-ready, accessible interfaces with meticulous refinement and a cohesive aesthetic direction.

Does this approach cover typography and motion guidelines for HTML and CSS interfaces?▼

Typography and motion guidelines are covered for HTML and CSS interfaces. This approach ensures consistency across component patterns, spatial composition, and color decisions to create distinctive, production-grade web UI artifacts.

Why do my generated frontend UI components lack visual distinctiveness and accessibility?▼

Generated frontend UI components often lack distinctiveness due to missing structured aesthetic guidelines for typography, color, and motion. Applying a cohesive aesthetic direction with meticulous refinement ensures accessible, visually robust implementations.

Related Skills

Explore More Design & Creative Skills→
anishs1207anishs1207
1

frontend-design

Design production-grade frontend interfaces with HTML/CSS/JS and design tokens.

Community
Advanced
kirvinkirvin

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
microsoftmicrosoft
2.9k

frontend-design-review

Audit UI implementations for design-system compliance across typography, spacing, tokens, colors, and accessibility.

Official
Advanced
MRWillisTMRWillisT
7

frontend-design

Generate responsive frontend interfaces with intentional visual design and cohesive aesthetics.

Community
Advanced