skills.rest
dheerkt
dheerktCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates WCAG-compliant, reusable UI components and pages from design requirements.

Updated Nov 2, 2025
Search Tags:#typography#design#accessibility#frontend#css#components#aesthetics
One-click install
npx skills add https://github.com/dheerkt/dotfiles --skill frontend-design-dheerkt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dheerkt/dotfiles/tree/main/opencode-work/skill/frontend-design
Command: npx skills add https://github.com/dheerkt/dotfiles --skill frontend-design-dheerkt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers create distinctive, production-grade frontend interfaces with high design quality, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Production-grade UI components: reusable, accessible, and visually distinctive components that can be composed into pages and apps.
  • Design system alignment: guidance on typography, color, spacing, motion, and theming to maintain a coherent brand identity.
  • Rapid prototyping & iteration: generate polished UI ideas from user requirements and constraints, with refinement options.

Quick Start

Provide a detailed frontend requirement and preferred aesthetic, and I will generate production-grade UI components and styles.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate accessible frontend components with proper color contrast?▼

Generate accessible frontend components by providing detailed UI requirements, and the skill outputs semantic HTML, accessible color contrast ratios, and reusable CSS architecture.

Can I build a complete web app interface from a design system?▼

Yes, you can build complete web app interfaces by specifying your design system constraints, and the skill produces coherent typography, color schemes, spacing, and motion alignment.

What's the best way to create responsive layouts that avoid generic AI aesthetics?▼

Create distinctive responsive layouts by supplying your preferred aesthetic and constraints, and the skill generates production-grade frontend interfaces with bold, non-generic styling.

How do I prototype frontend UI ideas rapidly for iteration?▼

Rapidly prototype frontend UI by submitting your requirements and preferred aesthetic, and the skill generates polished UI components and styles with refinement options.

Does this skill work for establishing CSS architecture and theming guidelines?▼

Yes, the skill establishes CSS architecture and theming guidelines by applying design-system alignment to generate coherent brand identity rules for typography, color, spacing, and motion.

Are there limitations when generating frontend interfaces for complex web apps?▼

The skill generates frontend interfaces for web apps using semantic HTML and CSS, but outputs depend entirely on the specificity of the user requirements and aesthetic constraints provided.

Related Skills

Explore More Design & Creative Skills→
mgsystemsdevmgsystemsdev

frontend-design

Define scalable frontend design systems for React, Streamlit, HTML, and other frameworks.

Community
Advanced
Muskan492Muskan492

frontend-builder

Develop web pages and reusable UI components with HTML, CSS, and JavaScript.

Community
Intermediate
ShubhamsabooShubhamsaboo
131.7k

fullstack-developer

Automate full-stack web app planning and implementation with React, Node.js, and databases.

Community
Advanced
ValerianGuivarchValerianGuivarch

nx-generate

Automate Nx project and library creation with local or plugin generators.

Community
Intermediate