skills.rest
gridelectric
gridelectricCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate frontend requirements into reusable UI components and styles.

Updated Feb 12, 2026
Search Tags:#ui-design#component-generation#web-components#production-grade#frontend-design#design-aesthetics
One-click install
npx skills add https://github.com/gridelectric/Grid2 --skill frontend-design-gridelectric
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gridelectric/Grid2/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/gridelectric/Grid2 --skill frontend-design-gridelectric

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

  • Purpose & Direction: Understand the project context and commit to a bold, cohesive visual direction.
  • Implementation: Produce production-grade HTML/CSS/JS or framework components that are visually striking and accessible.
  • Use Case: Build a high-fidelity landing page or a polished UI component that matches branding and requirements.

Quick Start

Provide a clear frontend brief (purpose, audience, constraints) and I will generate a production-grade UI implementation.

Frequently Asked Questions about frontend-design

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

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

You can build production-grade frontend interfaces across HTML/CSS/JS and modern frameworks. It translates requirements into reusable UI components, layouts, and styles, adapting to branding and accessibility needs for web components, pages, or dashboards.

How do I generate a high-fidelity landing page that matches my branding and design requirements?▼

Provide a frontend brief detailing purpose, audience, and constraints. The skill commits to a bold visual direction and produces polished, accessible framework components or HTML/CSS layouts that satisfy your branding and aesthetic coherence requirements.

Does this frontend design tool support modern frameworks or only raw HTML, CSS, and JavaScript?▼

Yes, it supports both raw HTML/CSS/JS and modern frameworks. It generates production-grade layouts, web components, and artifacts across multiple platforms, adapting to your specific branding, accessibility, and responsive behavior requirements.

What is the best way to create accessible and responsive web components for a dashboard?▼

The best way is to provide a frontend brief defining your dashboard requirements. The skill outputs production-grade code with built-in accessible UI, responsive behavior, and aesthetic coherence, translating requirements into reusable UI components and layouts.

Can I use this to design posters and artifacts, or is it limited to web pages and applications?▼

Yes, you can design posters and artifacts. The skill designs production-grade frontend interfaces across web components, pages, dashboards, posters, or apps using HTML/CSS/JS and frameworks, satisfying requirements for aesthetic coherence and accessible UI.

Related Skills

Explore More Design & Creative Skills→
adminsairolotech-bitadminsairolotech-bit

design-exploration

Generate a structured design brief and delegate to the design subagent.

Community
Advanced
92Bilal2692Bilal26

frontend-design

Generate accessible, responsive UI components with CSS variable theming.

Community
Basic
varuntreevaruntree

frontend-design

Create production-grade frontend interfaces with typography, color, motion, and responsive layouts.

Community
Basic
dogekikidogekiki

paper-poster

Redirect users from deprecated LaTeX poster workflows to HTML and CSS pipelines.

Community
Basic