skills.rest
Stephanvs
StephanvsCOMMUNITY
Explore all skills by this author →
Website𝕏@StephanvsGitHub

frontend-design

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

6|1|Updated Mar 25, 2019
Search Tags:#accessibility#react#css#UI#aesthetic#design-system#frontend-design
One-click install
npx skills add https://github.com/Stephanvs/dotfiles --skill frontend-design-stephanvs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Stephanvs/dotfiles/tree/main/opencode/skills/frontend-design
Command: npx skills add https://github.com/Stephanvs/dotfiles --skill frontend-design-stephanvs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides the design and implementation of production-grade frontend interfaces with a bold, distinctive aesthetic, ensuring non-generic, highly-polished user experiences.

Core Features & Use Cases

  • Design Thinking & Aesthetic Direction: define purpose, tone, constraints, and differentiation.
  • Production-Ready Code: generate real HTML/CSS/JS or framework components (React/Vue) with robust structure.
  • Polish & Accessibility: typography, color, motion, and accessibility considerations.
  • Use Case: create a unique admin dashboard with a bold visual identity while maintaining usability.

Quick Start

Provide requirements for a frontend component, page, or app (purpose, audience, constraints). Then generate a complete, production-grade frontend scaffold that follows the chosen aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a production-grade frontend that doesn't look generic?▼

Production-grade frontend design requires defining your aesthetic direction, constraints, and audience first, then building with intentional typography, color systems via CSS variables, and deliberate motion. This Skill guides you through establishing a bold visual identity while maintaining accessibility and responsive layouts across HTML/CSS/JS or frameworks like React and Vue.

Can I build accessible, responsive React components with a cohesive design system?▼

Yes. This Skill generates production-ready React components with accessible semantics, responsive layouts, and unified theming through CSS variables. It ensures your components follow a deliberate aesthetic while meeting functional requirements for working code and framework-agnostic integration.

What's the best way to add distinctive micro-interactions and motion to web interfaces?▼

Distinctive micro-interactions require understanding your interface's purpose and tone, then implementing deliberate motion through CSS and JavaScript that reinforces your bold aesthetic. This Skill helps you integrate motion and micro-interactions cohesively across components without sacrificing performance or accessibility.

How do I avoid generic AI aesthetics when building admin dashboards or web applications?▼

Avoid generic aesthetics by defining clear design purpose, audience, and visual constraints upfront, then building with intentional typography choices, custom color palettes, and deliberate UI patterns. This Skill provides a scaffold for creating distinctive admin dashboards and applications that maintain usability while expressing bold visual direction.

Does this approach work with Vue and other frontend frameworks?▼

Yes. This Skill is framework-agnostic and generates production-ready code for React, Vue, and vanilla HTML/CSS/JS. The design principles—responsive layouts, accessible semantics, CSS variables for theming, and deliberate motion—integrate across all these frameworks.

What do I need to know before starting a production frontend design?▼

Start by defining your component or application's purpose, target audience, technical constraints, and desired visual tone. This Skill requires clear requirements but no prerequisites; it generates the complete scaffold including HTML/CSS structure, accessibility markup, and responsive patterns ready for implementation.

Related Skills

Explore More Design & Creative Skills→
connoradsconnorads
15

frontend-design

Generate production-ready HTML, CSS, and JavaScript frontend interfaces from design briefs.

Community
Basic
owshq-mecowshq-mec
122

animate

Analyze and implement CSS and JavaScript animations for user interfaces.

Official
Advanced
akiojinakiojin
3

frontend-design

Create production-grade frontend interfaces with bold aesthetics across React, Vue, or vanilla HTML/CSS/JS.

Community
Basic
TechsioCZTechsioCZ
2

figma-sync-handoff

Flag Figma library or Code Connect follow-up needs after UI-kit component work.

Official
Basic