skills.rest
Blake-John
Blake-JohnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Creates frontend interfaces with cohesive, accessible design across HTML/CSS/JS, React, and Vue.

Updated Mar 17, 2026
Search Tags:#design#ui#frontend#react#css#aesthetics#web-components
One-click install
npx skills add https://github.com/Blake-John/agent-config --skill frontend-design-blake-john
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Blake-John/agent-config/tree/main/.zeroclaw/workspace/skills/frontend-design
Command: npx skills add https://github.com/Blake-John/agent-config --skill frontend-design-blake-john

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate abstract aesthetic goals into production-ready interfaces that are visually distinctive and cohesive across pages and components.

Core Features & Use Cases

  • Design-forward scaffolding for web components, pages, dashboards, and marketing assets.
  • Guidance on typography, color, motion, and layout to achieve a consistent, standout UI.
  • Use Case: When you need to deliver a visually unique marketing site or admin dashboard that adheres to a bold design direction.

Quick Start

Generate a production-grade frontend component or page that matches the specified aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade React components with a cohesive UI aesthetic?▼

You can generate production-grade frontend interfaces by applying a specified aesthetic direction to your web components. This ensures your React or HTML/CSS/JS pages maintain stylistic consistency, accessibility, and a bold design point-of-view.

What is the best way to translate abstract design goals into visually distinctive web interfaces?▼

The best way to translate abstract design goals into visually distinctive web interfaces is to use design-forward scaffolding. This process applies cohesive typography, motion, and layout rules to achieve a standout UI across your marketing assets or dashboards.

Does this frontend design approach work with Vue and standard HTML/CSS/JS?▼

Yes, this frontend design approach works with Vue, React, and standard HTML/CSS/JS. It applies a bold, cohesive aesthetic direction across various web frameworks to ensure implementation quality and stylistic consistency for your interfaces.

Can I build an admin dashboard that adheres to a bold design direction?▼

Yes, you can build an admin dashboard that adheres to a bold design direction. The process provides guidance on typography, color, and motion to deliver a visually unique dashboard that satisfies production and accessibility requirements.

How do I ensure stylistic consistency across different web components and pages?▼

To ensure stylistic consistency across web components and pages, you apply a clear design point-of-view with cohesive typography, color, and layout rules. This prevents visual fragmentation and maintains a polished aesthetic throughout your interface.

Related Skills

Explore More Design & Creative Skills→
toddmoytoddmoy
1

figma implementation

Convert Figma designs into React components with CSS flex/grid and variables.

Community
Advanced
luisgustavooliveiraluisgustavooliveira

frontend-design

Design and implement frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
peopledearpeopledear
1

Frontend Accessibility

Audit web interfaces for WCAG, ARIA, keyboard navigation, and semantic HTML.

Official
Basic
cgRGMcgRGM
1

frontend-design

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

Community
Advanced